sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Henry Jameson 2022-09-28 21:16:05 +03:00
parent 2ab51a4ccb
commit c041d7aa9b
4 changed files with 47 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/quick_filter_settings/quick_filter_settings.vue
View file

@ -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>

15
src/components/quick_view_settings/quick_view_settings.vue
View file

@ -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>

30
src/components/timeline/timeline.scss
View file

@ -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
}

30
src/components/timeline/timeline.vue
View file

@ -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