fix some css problems + tiny bit cleaning up

This commit is contained in:
Henry Jameson 2021-03-11 15:14:30 +02:00
parent 3d95ea6acb
commit 5c064ccf55
5 changed files with 44 additions and 35 deletions

View file

@ -547,7 +547,10 @@ main-router {
border-radius: var(--panelRadius, $fallback--panelRadius);
}
.panel-footer {
/* TODO Should remove timeline-footer from here when we refactor panels into
* separate component and utilize slots
*/
.panel-footer, .timeline-footer {
display: flex;
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);

View file

@ -1,6 +1,6 @@
@import '../../_variables.scss';
.notifications {
.Notifications {
&:not(.minimal) {
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
@ -11,6 +11,10 @@
color: var(--text, $fallback--text);
}
.notifications-footer {
border: none;
}
.notification {
position: relative;
@ -82,7 +86,6 @@
}
}
.follow-text, .move-text {
padding: 0.5em 0;
overflow-wrap: break-word;

View file

@ -1,7 +1,7 @@
<template>
<div
:class="{ minimal: minimalMode }"
class="notifications"
class="Notifications"
>
<div :class="mainClass">
<div
@ -34,7 +34,7 @@
<notification :notification="notification" />
</div>
</div>
<div class="panel-footer">
<div class="panel-footer notifications-footer">
<div
v-if="bottomedOut"
class="new-status-notification text-center faint"
@ -52,7 +52,7 @@
</button>
<div
v-else
class="new-status-notification text-center panel-footer"
class="new-status-notification text-center"
>
<FAIcon
icon="circle-notch"

View file

@ -0,0 +1,31 @@
@import '../../_variables.scss';
.Timeline {
.loadmore-text {
opacity: 1;
}
&.-blocked {
cursor: progress;
}
.timeline-heading {
max-width: 100%;
flex-wrap: nowrap;
align-items: center;
position: relative;
.loadmore-button {
flex-shrink: 0;
}
.loadmore-text {
flex-shrink: 0;
line-height: 1em;
}
}
.timeline-footer {
border: none;
}
}

View file

@ -87,32 +87,4 @@
<script src="./timeline.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.Timeline {
.loadmore-text {
opacity: 1;
}
&.-blocked {
cursor: progress;
}
}
.timeline-heading {
max-width: 100%;
flex-wrap: nowrap;
align-items: center;
position: relative;
.loadmore-button {
flex-shrink: 0;
}
.loadmore-text {
flex-shrink: 0;
line-height: 1em;
}
}
</style>
<style src="./timeline.scss" lang="scss"> </style>