diff options
author | René Gieling <github@dartcafe.de> | 2021-05-30 12:59:18 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-05-30 12:59:18 +0300 |
commit | 4e6f9a808ea1c2c875125a4824d46ad81d3d9314 (patch) | |
tree | bf9266ab41f084c920cc05f3226ae28d868207fc /src | |
parent | 0dcee95a6a99740c715a8358cfa0ca3488c190c9 (diff) | |
parent | a8089948629294f53918e3793409603e26ef2722 (diff) |
Merge pull request #1662 from nextcloud/refactor/css
simplify DOM and tidy CSS
Diffstat (limited to 'src')
21 files changed, 161 insertions, 232 deletions
diff --git a/src/js/App.vue b/src/js/App.vue index 3c9d9498..167a558e 100644 --- a/src/js/App.vue +++ b/src/js/App.vue @@ -234,27 +234,6 @@ export default { <style lang="scss"> -.label-deprecated { - border: solid 1px; - border-radius: var(--border-radius); - padding: 1px 4px; - margin: 0 4px; - font-size: 60%; - text-align: center; - - &.error { - border-color: var(--color-error); - background-color: var(--color-error); - color: var(--color-primary-text); - } - - &.success { - border-color: var(--color-success); - background-color: var(--color-success); - color: var(--color-primary-text); - } -} - .modal__content { padding: 14px; display: flex; diff --git a/src/js/assets/scss/experimental.scss b/src/js/assets/scss/experimental.scss index bcedb95b..1d9b4f81 100644 --- a/src/js/assets/scss/experimental.scss +++ b/src/js/assets/scss/experimental.scss @@ -11,8 +11,7 @@ .area__header { display: flex; align-items: flex-start; - margin-left: 48px; - margin-top: 0; + margin-left: 44px !important; min-width: 286px; } diff --git a/src/js/components/Base/Badge.vue b/src/js/components/Base/Badge.vue index 82addc36..22c399e4 100644 --- a/src/js/components/Base/Badge.vue +++ b/src/js/components/Base/Badge.vue @@ -54,7 +54,7 @@ export default { <style lang="scss" scoped> h2 .badge { - font-size: 60%; + font-size: 0.6em; } .badge { @@ -65,7 +65,7 @@ export default { line-height: 1.1em; overflow: hidden; text-overflow: ellipsis; - font-size: 14px; + font-size: 0.9em; &.withIcon { padding-left: 25px !important; diff --git a/src/js/components/Base/LoadingOverlay.vue b/src/js/components/Base/LoadingOverlay.vue index 3c8956db..75545c51 100644 --- a/src/js/components/Base/LoadingOverlay.vue +++ b/src/js/components/Base/LoadingOverlay.vue @@ -37,8 +37,8 @@ export default { position: absolute; left: 0; top: 0; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; background: var(--color-main-background); opacity: 0.9; z-index: 9999; diff --git a/src/js/components/Calendar/CalendarInfo.vue b/src/js/components/Calendar/CalendarInfo.vue index e9c0ed90..58482acd 100644 --- a/src/js/components/Calendar/CalendarInfo.vue +++ b/src/js/components/Calendar/CalendarInfo.vue @@ -142,7 +142,7 @@ export default { .calendar-info__time { width: 65px; - font-size: 80%; + font-size: 0.8em; flex: 0 auto; } diff --git a/src/js/components/Calendar/CalendarPeek.vue b/src/js/components/Calendar/CalendarPeek.vue index 62a24f5f..001cde50 100644 --- a/src/js/components/Calendar/CalendarPeek.vue +++ b/src/js/components/Calendar/CalendarPeek.vue @@ -21,22 +21,20 @@ --> <template> - <div class="calendar-peek"> - <Popover> - <div v-if="events.length" slot="trigger"> - <div class="calendar-peek__conflict icon icon-calendar" /> - <p class="calendar-peek__caption"> - {{ t('polls', 'Conflict') }} - </p> - </div> - <div class="calendar-peek__grid"> - <CalendarInfo v-for="eventItem in sortedEvents" - :key="eventItem.UID" - :event="eventItem" - :option="option" /> - </div> - </Popover> - </div> + <Popover class="calendar-peek"> + <div v-if="events.length" slot="trigger"> + <div class="calendar-peek__conflict icon icon-calendar" /> + <p class="calendar-peek__caption"> + {{ t('polls', 'Conflict') }} + </p> + </div> + <div class="calendar-peek__grid"> + <CalendarInfo v-for="eventItem in sortedEvents" + :key="eventItem.UID" + :event="eventItem" + :option="option" /> + </div> + </Popover> </template> <script> diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue index f15886d3..5b56c8ea 100644 --- a/src/js/components/Comments/CommentItem.vue +++ b/src/js/components/Comments/CommentItem.vue @@ -101,12 +101,12 @@ export default { .comment-item__user { font-weight: 600; - font-size: 90%; + font-size: 0.9em; } .comment-item__date { opacity: 0.5; - font-size: 80%; + font-size: 0.8em; text-align: right; &::before { content: ' ~ ' diff --git a/src/js/components/Options/OptionItem.vue b/src/js/components/Options/OptionItem.vue index 260bbda9..00446ac3 100644 --- a/src/js/components/Options/OptionItem.vue +++ b/src/js/components/Options/OptionItem.vue @@ -233,7 +233,7 @@ export default { } .event-to { flex: 0; - font-size: 80%; + font-size: 0.8em; justify-content: flex-end; .day { margin: 0; @@ -244,7 +244,7 @@ export default { .event-time { margin-top: 8px; .time-to { - font-size: 80%; + font-size: 0.8em; } } diff --git a/src/js/components/Options/OptionItemOwner.vue b/src/js/components/Options/OptionItemOwner.vue index ac0a6e62..5b8d7789 100644 --- a/src/js/components/Options/OptionItemOwner.vue +++ b/src/js/components/Options/OptionItemOwner.vue @@ -84,12 +84,6 @@ export default { display: flex; align-items: center; justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 21px; - font-size: 0; - align-self: stretch; - min-width: 24px; } </style> diff --git a/src/js/components/Poll/PollTitle.vue b/src/js/components/Poll/PollTitle.vue index c548ed97..a884d5c9 100644 --- a/src/js/components/Poll/PollTitle.vue +++ b/src/js/components/Poll/PollTitle.vue @@ -114,8 +114,8 @@ export default { .title__title { font-weight: bold; - font-size: 20px; - line-height: 30px; + font-size: 1.3em; + line-height: 2em; color: var(--color-text-light); } } diff --git a/src/js/components/Shares/SharesEffective.vue b/src/js/components/Shares/SharesEffective.vue index aafee88d..909ae36f 100644 --- a/src/js/components/Shares/SharesEffective.vue +++ b/src/js/components/Shares/SharesEffective.vue @@ -113,8 +113,7 @@ export default { <style lang="scss"> .shared-list { display: flex; - flex-wrap: wrap; - flex-direction: column; + flex-flow: column wrap; justify-content: flex-start; padding-top: 8px; diff --git a/src/js/components/Shares/SharesPublic.vue b/src/js/components/Shares/SharesPublic.vue index 184a7b95..de5451a3 100644 --- a/src/js/components/Shares/SharesPublic.vue +++ b/src/js/components/Shares/SharesPublic.vue @@ -110,8 +110,7 @@ export default { <style lang="scss"> .shared-list { display: flex; - flex-wrap: wrap; - flex-direction: column; + flex-flow: column wrap; justify-content: flex-start; padding-top: 8px; diff --git a/src/js/components/Shares/SharesUnsent.vue b/src/js/components/Shares/SharesUnsent.vue index 2a827890..bd91294c 100644 --- a/src/js/components/Shares/SharesUnsent.vue +++ b/src/js/components/Shares/SharesUnsent.vue @@ -112,8 +112,7 @@ export default { <style lang="scss"> .shared-list { display: flex; - flex-wrap: wrap; - flex-direction: column; + flex-flow: column wrap; justify-content: flex-start; padding-top: 8px; diff --git a/src/js/components/SideBar/SideBarTabShare.vue b/src/js/components/SideBar/SideBarTabShare.vue index 83ef1061..59035720 100644 --- a/src/js/components/SideBar/SideBarTabShare.vue +++ b/src/js/components/SideBar/SideBarTabShare.vue @@ -68,8 +68,7 @@ export default { <style lang="scss"> .shared-list { display: flex; - flex-wrap: wrap; - flex-direction: column; + flex-flow: column wrap; justify-content: flex-start; padding-top: 8px; diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue index 6c0bc500..66ec4027 100644 --- a/src/js/components/User/UserItem.vue +++ b/src/js/components/User/UserItem.vue @@ -145,9 +145,7 @@ export default { <style lang="scss" scoped> .user-item { display: flex; - // flex: 1; align-items: center; - max-width: 100%; padding: 4px; } diff --git a/src/js/components/VoteTable/VoteItem.vue b/src/js/components/VoteTable/VoteItem.vue index 71035cc9..e8557dc4 100644 --- a/src/js/components/VoteTable/VoteItem.vue +++ b/src/js/components/VoteTable/VoteItem.vue @@ -21,7 +21,7 @@ --> <template> - <div class="vote-item" :class="[answer, {confirmed: isConfirmed }, { active: isVotable }, {currentUser: isCurrentUser}]"> + <div class="vote-item" :class="[answer, {confirmed: isConfirmed }, { active: isVotable }, {currentuser: isCurrentUser}]"> <div v-if="isActive && !isVoteLimitExceded" class="icon" @click="setVote()" /> <div v-else class="icon" /> <slot name="indicator" /> @@ -128,9 +128,6 @@ export default { .vote-item { display: flex; - flex: 1; - align-items: center; - justify-content: center; background-color: var(--color-polls-background-no); transition: background-color 1s ease-out; > .icon { @@ -177,12 +174,11 @@ export default { } } -.vote-item.confirmed:not(.yes):not(.maybe) .icon { - background-image: var(--icon-polls-no); -} - .vote-item.confirmed { background-color: transparent; + &:not(.yes):not(.maybe) .icon { + background-image: var(--icon-polls-no); + } } </style> diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue index 9be3827d..26bf095f 100644 --- a/src/js/components/VoteTable/VoteTable.vue +++ b/src/js/components/VoteTable/VoteTable.vue @@ -54,12 +54,10 @@ :show-no="viewMode === 'list-view'" /> <CalendarPeek v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" :option="option" /> - <div v-for="(participant) in participants" + <VoteItem v-for="(participant) in participants" :key="participant.userId" - class="vote-item-wrapper" - :class="{currentuser: participant.userId === acl.userId}"> - <VoteItem :user-id="participant.userId" :option="option" /> - </div> + :user-id="participant.userId" + :option="option" /> <OptionItemOwner v-if="proposalsExist" :option="option" class="owner" /> @@ -152,23 +150,66 @@ export default { .vote-table { display: flex; flex: 1; - .user-item, .vote-item-wrapper { - flex: 0; - height: 53px; - min-height: 53px; - border-top: solid 1px var(--color-border-dark); + + .user-item, .vote-item { + flex: 0 0 auto; + height: 3.5em; order: 10; + line-height: 3.5em; + padding: 4px 1px; + border-top: solid 1px var(--color-border-dark); &.currentuser { order:5; } } - .vote-table-header-item { + .vote-table__users { + display: flex; + flex-direction: column; + overflow-x: scroll; + // max-width: 245px; + } + + .vote-table__votes { + display: flex; flex: 1; + overflow-x: scroll; + } + + .vote-column { + order: 2; + display: flex; + flex: 1 0 auto; flex-direction: column; align-items: stretch; + min-width: 85px; + max-width: 280px; + &>div { + display: flex; + justify-content: center; + align-items: center; + } + } + + &.closed .vote-column { + // padding: 8px 2px; + &.confirmed { + order: 1; + border-radius: 10px; + border: 1px solid var(--color-polls-foreground-yes); + background-color: var(--color-polls-background-yes); + margin: 0 4px; + } + } + + .vote-table-header-item { + flex: 1; padding: 0 8px; - order:1; + order: 1; + } + + .vote-item { + background-clip: content-box; } .confirmation { @@ -191,7 +232,9 @@ export default { .owner { display: flex; - min-height: 56px; + flex: 0 auto; + height: 3.5em; + line-height: 3.5em; min-width: 56px; order: 19; } @@ -201,149 +244,100 @@ export default { order: 1; } - .vote-table__users { - display: flex; - flex-direction: column; - overflow-x: scroll; - min-width: 90px; - .user-item__name { - min-width: initial; + &.table-view { + .vote-table__users::after, .vote-column::after { + content: ''; + height: 8px; + order: 99; } - } - .vote-table__votes { - display: flex; - flex: 1; - overflow-x: scroll; - } - - .vote-column { - order: 2; - display: flex; - flex: 1 0 auto; - flex-direction: column; - align-items: stretch; - min-width: 85px; - max-width: 280px; - .vote-item { - flex-direction: column; + .user-item { + max-width: 245px; } - } - &.closed .vote-table__users { - padding: 8px 2px; - } - - &.closed .vote-column { - padding: 8px 2px; - &.confirmed { - order: 1; - border-radius: 10px; - border: 1px solid var(--color-polls-foreground-yes); - background-color: var(--color-polls-background-yes); - margin: 0 4px; + .option-item .option-item__option--text { + text-align: center; } } - .vote-item-wrapper { - display: flex; - padding: 4px 1px; - } - - .vote-table__footer { - align-items: center; - } -} + &.list-view { + flex-direction: column; -.vote-table.table-view { - .vote-table__users::after, .vote-column::after { - content: ''; - height: 8px; - order: 99; - } - .option-item .option-item__option--text { - text-align: center; - } -} + &.closed { + .counter { + padding-left: 60px; + } -.vote-table.list-view { - flex-direction: column; + .vote-item:not(.confirmed) { + background-color: var(--color-main-background); + &.no > .icon { + background-image: var(--icon-polls-no) + } + } - &.closed { - .counter { - padding-left: 60px; - } - .vote-item:not(.confirmed) { - background-color: var(--color-main-background); - &.no > .icon { - background-image: var(--icon-polls-no) + .vote-column { + padding: 2px 8px; + &.confirmed { + margin: 4px 0; + } } } - } - .vote-table__users .confirm { - display: none; - } + .vote-table__users .confirm { + display: none; + } - .counter { - position: absolute; - bottom: 0; - width: 100%; - padding-left: 44px; - } + .vote-column { + flex-direction: row-reverse; + align-items: center; + max-width: initial; + position: relative; + border-top: solid 1px var(--color-border); + padding: 0; + } - .option-item { - padding: 8px 4px; - } + .vote-table__users { + margin: 0 + } - .vote-item-wrapper.currentuser { - border: none; - } + .user-item.user:not(.currentuser), .vote-item:not(.currentuser) { + display: none; + } - .vote-column { - flex-direction: row-reverse; - align-items: center; - max-width: initial; - position: relative; - border-top: solid 1px var(--color-border); - padding: 0; - } - &.closed .vote-column { - padding: 2px 8px; - &.confirmed { - margin: 4px 0; + .vote-table__votes { + align-items: stretch; + flex-direction: column; } - } - .vote-table__votes { - align-items: stretch; - flex-direction: column; - } + .vote-table-header-item { + flex-direction: row; + .option-item { + padding: 8px 4px; + } + } - .vote-table__users { - margin: 0 - } - .owner { - order: 0; - } + .counter { + position: absolute; + bottom: 0; + width: 100%; + padding-left: 44px; + } - .vote-table-header-item { - flex-direction: row; - } + .vote-item.currentuser { + border: none; + } - .user-item.user.currentuser, .vote-item-wrapper.currentuser { - display: flex; - } + .owner { + order: 0; + } - .user-item.user, .vote-item-wrapper { - display: none; - } - .calendar-peek { - order: 0; - } - .calendar-peek__conflict.icon { - width: 24px; - height: 24px; + .calendar-peek { + order: 0; + } + .calendar-peek__conflict.icon { + width: 24px; + height: 24px; + } } } diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue index bb307972..c04cff15 100644 --- a/src/js/components/VoteTable/VoteTableHeaderItem.vue +++ b/src/js/components/VoteTable/VoteTableHeaderItem.vue @@ -90,22 +90,3 @@ export default { } </script> - -<style lang="scss" scoped> - -.vote-table-header-item { - display: flex; - &.winner { - .option-item { - // font-weight: bold; - color: var(--color-polls-foreground-yes); - } - } -} - -.confirmations { - text-align: center; - height: 2em; -} - -</style> diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue index 46c81dbf..5dd76f35 100644 --- a/src/js/views/Administration.vue +++ b/src/js/views/Administration.vue @@ -256,7 +256,6 @@ export default { width: 100%; display: flex; flex-direction: column; - flex-wrap: nowrap; overflow: scroll; padding-bottom: 14px; } diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue index f114d3b1..26403378 100644 --- a/src/js/views/PollList.vue +++ b/src/js/views/PollList.vue @@ -246,7 +246,6 @@ export default { width: 100%; display: flex; flex-direction: column; - flex-wrap: nowrap; overflow: scroll; padding-bottom: 14px; } diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue index 40b63e89..eb903851 100644 --- a/src/js/views/Vote.vue +++ b/src/js/views/Vote.vue @@ -190,10 +190,6 @@ export default { </script> <style lang="scss" scoped> -.area__header { - display: flex; -} - .description { display: flex; flex-wrap: wrap; |