Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Let sidebar scroll to the bottom

Browse source
This commit is contained in:
Tusooa Zhu 2021-10-08 17:35:07 -04:00
parent 96a24ec625
commit 9deb1d8fcf
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
4 changed files with 16 additions and 13 deletions

2
src/App.scss
View file

@ -610,7 +610,7 @@ nav {
margin-top: -10px; margin-top: -10px;
.sidebar-scroller { .sidebar-scroller {
height: 96vh; height: calc(100vh - #{$top-nav-height});
width: 365px; width: 365px;
padding-top: 10px; padding-top: 10px;
padding-right: 50px; padding-right: 50px;

3
src/_variables.scss
View file

@ -32,3 +32,6 @@ $fallback--chatMessageRadius: 10px;
$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
$status-margin: 0.75em; $status-margin: 0.75em;
$top-nav-height: 50px;
$small-spacing: 5px;

10
src/components/desktop_nav/desktop_nav.scss
View file

@ -1,7 +1,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.DesktopNav { .DesktopNav {
height: 50px; height: $top-nav-height;
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -11,7 +11,7 @@
.inner-nav { .inner-nav {
display: grid; display: grid;
grid-template-rows: 50px; grid-template-rows: $top-nav-height;
grid-template-columns: 2fr auto 2fr; grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions"; grid-template-areas: "sitename logo actions";
box-sizing: border-box; box-sizing: border-box;
@ -77,7 +77,7 @@
img { img {
display: inline-block; display: inline-block;
height: 50px; height: $top-nav-height;
} }
} }
@ -103,8 +103,8 @@
.item { .item {
flex: 1; flex: 1;
line-height: 50px; line-height: $top-nav-height;
height: 50px; height: $top-nav-height;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

14
src/components/mobile_nav/mobile_nav.vue
View file

@ -92,9 +92,9 @@
.MobileNav { .MobileNav {
.mobile-nav { .mobile-nav {
display: grid; display: grid;
line-height: 50px; line-height: $top-nav-height;
height: 50px; height: $top-nav-height;
grid-template-rows: 50px; grid-template-rows: $top-nav-height;
grid-template-columns: 2fr auto; grid-template-columns: 2fr auto;
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -167,8 +167,8 @@
justify-content: space-between; justify-content: space-between;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 50px; height: $top-nav-height;
line-height: 50px; line-height: $top-nav-height;
position: absolute; position: absolute;
color: var(--topBarText); color: var(--topBarText);
background-color: $fallback--fg; background-color: $fallback--fg;
@ -183,9 +183,9 @@
} }
.mobile-notifications { .mobile-notifications {
margin-top: 50px; margin-top: $top-nav-height;
width: 100vw; width: 100vw;
height: calc(100vh - 50px); height: calc(100vh - #{$top-nav-height});
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;