From a6047e0ad5820e08308d3c7d5f54c14ba57fca5e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 3 Sep 2018 22:12:18 +0300
Subject: [PATCH] Kinda went back to using align-items: stretch. Fixed error
message floating.
---
src/App.scss | 23 ++++++++++++++++---
.../notifications/notifications.scss | 4 ----
src/components/timeline/timeline.vue | 12 +++-------
3 files changed, 23 insertions(+), 16 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index dd43c5ca..6ae4a1bb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -325,18 +325,35 @@ main-router {
background-size: cover;
padding: .6em .6em;
text-align: left;
- font-size: 1.3em;
- line-height: 24px;
+ line-height: 28px;
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
align-items: baseline;
.title {
flex: 1 0 auto;
+ font-size: 1.3em;
+ }
+
+ .alert {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
}
button {
- height: 100%;
+ flex-shrink: 0;
+ }
+
+ button, .alert {
+ // height: 100%;
+ line-height: 21px;
+ min-height: 0;
+ box-sizing: border-box;
+ margin: 0;
+ margin-left: .25em;
+ min-width: 1px;
+ align-self: stretch;
}
}
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 4dbceede..a137ccd5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -22,10 +22,6 @@
}
.loadmore-error {
- min-width: 6em;
- text-align: center;
- padding: 0 0.25em 0 0.25em;
- margin: 0;
color: $fallback--fg;
color: var(--fg, $fallback--fg);
}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e42c0c4b..2dd4376a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -4,12 +4,12 @@
<div class="title">
{{title}}
</div>
- <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
- {{$t('timeline.show_new')}}{{newStatusCountStr}}
- </button>
<div @click.prevent class="loadmore-error alert error" v-if="timelineError">
{{$t('timeline.error_fetching')}}
</div>
+ <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+ {{$t('timeline.show_new')}}{{newStatusCountStr}}
+ </button>
<div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.up_to_date')}}
</div>
@@ -58,7 +58,6 @@
.timeline {
.loadmore-text {
- font-size: 14px;
opacity: 0.8;
background-color: transparent;
color: $fallback--faint;
@@ -66,11 +65,6 @@
}
.loadmore-error {
- font-size: 14px;
- min-width: 6em;
- text-align: center;
- padding: 0 0.25em 0 0.25em;
- margin: 0;
color: $fallback--fg;
color: var(--fg, $fallback--fg);
}