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

Merge branch 'from/develop/tusooa/sidebar-to-bottom' into 'develop'

Browse source 
Allow sidebar to scroll to bottom

See merge request
This commit is contained in:
Tusooa Zhu 2022-04-30 01:51:56 +00:00
commit dadda70def
4 changed files with 16 additions and 13 deletions

3
src/App.scss
View file

@ -64,6 +64,7 @@ body {
&.hidden { &.hidden {
display: none; display: none;
} }
--top-nav-height: #{$top-nav-height};
} }
a { a {
@ -610,7 +611,7 @@ nav {
margin-top: -10px; margin-top: -10px;
.sidebar-scroller { .sidebar-scroller {
height: 96vh; height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
width: 365px; width: 365px;
padding-top: 10px; padding-top: 10px;
padding-right: 50px; padding-right: 50px;

2
src/_variables.scss
View file

@ -32,3 +32,5 @@ $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;

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: var(--top-nav-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: var(--top-nav-height, $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: var(--top-nav-height, $top-nav-height);
} }
} }
@ -103,8 +103,8 @@
.item { .item {
flex: 1; flex: 1;
line-height: 50px; line-height: var(--top-nav-height, $top-nav-height);
height: 50px; height: var(--top-nav-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: var(--top-nav-height, $top-nav-height);
height: 50px; height: var(--top-nav-height, $top-nav-height);
grid-template-rows: 50px; grid-template-rows: var(--top-nav-height, $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: var(--top-nav-height, $top-nav-height);
line-height: 50px; line-height: var(--top-nav-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: var(--top-nav-height, $top-nav-height);
width: 100vw; width: 100vw;
height: calc(100vh - 50px); height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;