ami/tl-vikunja
1
0
Fork 0
Code

fix: move heading styles to component (#2686)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2686
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-11-12 10:52:16 +00:00 committed by konrad
parent 708ef2d72e
commit 293402b6fd
2 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/tasks/partials/heading.vue
View File

@ -110,6 +110,36 @@ async function save(title: string) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.heading {
display: flex;
justify-content: space-between;
text-transform: none;
align-items: center;
@media screen and (max-width: $tablet) {
flex-direction: column;
align-items: start;
}
}
.title {
margin-bottom: 0;
}
.title.input {
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
@media screen and (max-width: $tablet) {
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
}
}
.title.task-id {
color: var(--grey-400);
white-space: nowrap;
}
.heading__done { .heading__done {
margin-left: .5rem; margin-left: .5rem;
} }

29
src/views/tasks/TaskDetailView.vue
View File

@ -818,36 +818,7 @@ $flash-background-duration: 750ms;
color: var(--grey-400); color: var(--grey-400);
} }
:deep(.heading) {
display: flex;
justify-content: space-between;
text-transform: none;
align-items: center;
@media screen and (max-width: $tablet) {
flex-direction: column;
align-items: start;
}
.title {
margin-bottom: 0;
}
.title.input {
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
@media screen and (max-width: $tablet) {
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
}
}
.title.task-id {
color: var(--grey-400);
white-space: nowrap;
}
}
.date-input { .date-input {
display: flex; display: flex;