From 8a590f9269086ac737869e948954c74d6317541e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Mar 2021 19:18:43 +0200
Subject: [PATCH] Cleaned up panel-footer. No longer uses header styles since
those look and work ugly.
---
src/App.scss | 19 +++++++++++--------
.../notifications/notifications.vue | 4 ++--
src/components/timeline/timeline.vue | 8 ++++----
3 files changed, 17 insertions(+), 14 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 90d083bbba..a3b2a08e47 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -548,8 +548,17 @@ main-router {
}
.panel-footer {
+ display: flex;
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+ flex: none;
+ padding: 0.6em 0.6em;
+ text-align: left;
+ line-height: 28px;
+ align-items: baseline;
+ border-width: 1px 0 0 0;
+ border-style: solid;
+ border-color: var(--border, $fallback--border);
.faint {
color: $fallback--faint;
@@ -862,16 +871,10 @@ nav {
}
.new-status-notification {
- position:relative;
- margin-top: -1px;
+ position: relative;
font-size: 1.1em;
- border-width: 1px 0 0 0;
- border-style: solid;
- border-color: var(--border, $fallback--border);
- padding: 10px;
z-index: 1;
- background-color: $fallback--fg;
- background-color: var(--panel, $fallback--fg);
+ flex: 1;
}
.chat-layout {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 725d1ad4ed..eb951f1842 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -37,7 +37,7 @@
<div class="panel-footer">
<div
v-if="bottomedOut"
- class="new-status-notification text-center panel-footer faint"
+ class="new-status-notification text-center faint"
>
{{ $t('notifications.no_more_notifications') }}
</div>
@@ -46,7 +46,7 @@
class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderNotifications()"
>
- <div class="new-status-notification text-center panel-footer">
+ <div class="new-status-notification text-center">
{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
</div>
</button>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 286477c25e..729c4c4476 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -52,13 +52,13 @@
<div :class="classes.footer">
<div
v-if="count===0"
- class="new-status-notification text-center panel-footer faint"
+ class="new-status-notification text-center faint"
>
{{ $t('timeline.no_statuses') }}
</div>
<div
v-else-if="bottomedOut"
- class="new-status-notification text-center panel-footer faint"
+ class="new-status-notification text-center faint"
>
{{ $t('timeline.no_more_statuses') }}
</div>
@@ -67,13 +67,13 @@
class="button-unstyled -link -fullwidth"
@click.prevent="fetchOlderStatuses()"
>
- <div class="new-status-notification text-center panel-footer">
+ <div class="new-status-notification text-center">
{{ $t('timeline.load_older') }}
</div>
</button>
<div
v-else
- class="new-status-notification text-center panel-footer"
+ class="new-status-notification text-center"
>
<FAIcon
icon="circle-notch"
--
GitLab