logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: c041d7aa9b148e829a7539c2c2bd47814f4b10ce
parent 2ab51a4ccbf5a247d7eb110fe8a07130bd9afe3a
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 28 Sep 2022 21:16:05 +0300

refactor css for timeline buttons, make it a bit easier to tap them

Diffstat:

Msrc/components/quick_filter_settings/quick_filter_settings.vue15---------------
Msrc/components/quick_view_settings/quick_view_settings.vue15---------------
Msrc/components/timeline/timeline.scss30++++++++++++++++++++++++++++++
Msrc/components/timeline/timeline.vue30+++++++++++++++++-------------
4 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue @@ -89,19 +89,4 @@ <script src="./quick_filter_settings.js"></script> <style lang="scss"> - -.QuickFilterSettings { - - > button { - line-height: 100%; - height: 100%; - width: var(--__panel-heading-height-inner); - text-align: center; - - svg { - font-size: 1.2em; - } - } -} - </style> diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue @@ -76,19 +76,4 @@ <script src="./quick_view_settings.js"></script> <style lang="scss"> - -.QuickViewSettings { - - > button { - line-height: 100%; - height: 100%; - width: var(--__panel-heading-height-inner); - text-align: center; - - svg { - font-size: 1.2em; - } - } -} - </style> diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss @@ -13,6 +13,36 @@ background-color: var(--cGreen); } + .timeline-header-button { + align-self: stretch; + text-align: center; + width: var(--__panel-heading-height); + height: var(--__panel-heading-height); + margin: calc(-1 * var(--panel-heading-height-padding)); + + > button { + box-sizing: border-box; + padding: calc(1 * var(--panel-heading-height-padding)); + height: 100%; + width: 100%; + text-align: center; + + svg { + font-size: 1.2em; + } + } + } + + .timeline-header-icon { + align-self: stretch; + text-align: center; + width: var(--__panel-heading-height); + + svg { + font-size: 1.2em; + } + } + .loadmore-button { position: relative } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue @@ -19,21 +19,25 @@ /> </FALayers> </button> - <template v-if="mobileLayout"> - <button + <template v-if="mobileLayout && !embedded"> + <div + class="timeline-header-button" v-if="showLoadButton" - class="button-unstyled loadmore-button" - @click.prevent="showNewStatuses" > - <FAIcon - fixed-width - icon="circle-plus" - /> - <div class="alert-dot" /> - </button> + <button + class="button-unstyled loadmore-button" + @click.prevent="showNewStatuses" + > + <FAIcon + fixed-width + icon="circle-plus" + /> + <div class="alert-dot" /> + </button> + </div> <div v-else-if="!embedded" - class="loadmore-text faint veryfaint" + class="loadmore-text faint veryfaint timeline-header-icon" @click.prevent > <FAIcon @@ -58,8 +62,8 @@ {{ $t('timeline.up_to_date') }} </div> </template> - <QuickFilterSettings v-if="!embedded" /> - <QuickViewSettings v-if="!embedded" /> + <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/> + <QuickViewSettings v-if="!embedded" class="timeline-header-button"/> </div> <div :class="classes.body"> <div