aboutsummaryrefslogtreecommitdiff
path: root/src/components/timeline
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/timeline')
-rw-r--r--src/components/timeline/timeline.scss30
-rw-r--r--src/components/timeline/timeline.vue30
2 files changed, 47 insertions, 13 deletions
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 900bdad3..c38ecfea 100644
--- 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
index cffd4b68..c8aeaf1e 100644
--- 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