From 330288b4cd874bb960735edb1acde01b0bfbf684 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:14:32 +0300 Subject: [PATCH] panel styling cleanup --- src/App.scss | 15 ++++-- .../notifications/notifications.scss | 46 +++---------------- .../notifications/notifications.vue | 6 ++- src/components/timeline/timeline.vue | 29 ------------ 4 files changed, 23 insertions(+), 73 deletions(-) diff --git a/src/App.scss b/src/App.scss index 3b8b3224..b4692f26 100644 --- a/src/App.scss +++ b/src/App.scss @@ -48,7 +48,7 @@ a { color: var(--link, $fallback--link); } -button{ +button { user-select: none; color: $fallback--fg; color: var(--fg, $fallback--fg); @@ -282,15 +282,25 @@ main-router { } .panel-heading { + display: flex; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; background-size: cover; - padding: 0.6em 1.0em; + padding: .6em .6em; text-align: left; font-size: 1.3em; line-height: 24px; background-color: $fallback--btn; background-color: var(--btn, $fallback--btn); + align-items: baseline; + + .title { + flex: 1 0 auto; + } + + button { + height: 100%; + } } .panel-heading.stub { @@ -460,4 +470,3 @@ nav { border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); } - diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 5b09685b..0213d5b8 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,58 +4,25 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; - .title { - display: inline-block; - } - - .panel { - background: $fallback--bg; - background: var(--bg, $fallback--bg) - } - - .panel-body { - border-color: $fallback--border; - border-color: var(--border, $fallback--border) - } - - .panel-heading { - // force the text to stay centered, while keeping - // the button in the right side of the panel heading - position: relative; - background: $fallback--btn; - background: var(--btn, $fallback--btn); - color: $fallback--fg; - color: var(--fg, $fallback--fg); - display: flex; - align-items: baseline; - .read-button { - position: absolute; - right: 0.7em; - height: 1.8em; - line-height: 100%; - } - } - .unseen-count { display: inline-block; background-color: $fallback--cRed; background-color: var(--cRed, $fallback--cRed); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); - min-width: 1.3em; - border-radius: 1.3em; - margin: 0 0.2em 0 -0.4em; + border-radius: 99px; + min-width: 1.5em; + max-width: 1.5em; + min-height: 1.5em; + max-height: 1.5em; color: white; font-size: 0.9em; text-align: center; - line-height: 1.3em; } .loadmore-error { position: absolute; right: 0.6em; - font-size: 14px; min-width: 6em; - font-family: sans-serif; text-align: center; padding: 0 0.25em 0 0.25em; margin: 0; @@ -73,7 +40,8 @@ box-sizing: border-box; display: flex; border-bottom: 1px solid; - border-bottom-color: inherit; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); .broken-favorite { border-radius: $fallback--tooltipRadius; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a0b0e5f5..7a4322f9 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -2,8 +2,10 @@
- {{unseenCount}} -
{{$t('notifications.notifications')}}
+
+ {{$t('notifications.notifications')}} + {{unseenCount}} +
{{$t('timeline.error_fetching')}}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index c4e0fbce..ed354030 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -57,36 +57,8 @@ @import '../../_variables.scss'; .timeline { - .timeline-heading { - position: relative; - display: flex; - } - - .title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 70%; - } - - .loadmore-button { - position: absolute; - right: 0.6em; - font-size: 14px; - - min-width: 6em; - height: 1.8em; - line-height: 100%; - } - .loadmore-text { - position: absolute; - right: 0.6em; font-size: 14px; - min-width: 6em; - font-family: sans-serif; - text-align: center; - padding: 0 0.5em 0 0.5em; opacity: 0.8; background-color: transparent; color: $fallback--faint; @@ -98,7 +70,6 @@ right: 0.6em; font-size: 14px; min-width: 6em; - font-family: sans-serif; text-align: center; padding: 0 0.25em 0 0.25em; margin: 0;