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 {
display: none;
}
--top-nav-height: #{$top-nav-height};
}
a {
@ -610,7 +611,7 @@ nav {
margin-top: -10px;
.sidebar-scroller {
height: 96vh;
height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
width: 365px;
padding-top: 10px;
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;
$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';
.DesktopNav {
height: 50px;
height: var(--top-nav-height, $top-nav-height);
width: 100%;
position: fixed;
@ -11,7 +11,7 @@
.inner-nav {
display: grid;
grid-template-rows: 50px;
grid-template-rows: var(--top-nav-height, $top-nav-height);
grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions";
box-sizing: border-box;
@ -77,7 +77,7 @@
img {
display: inline-block;
height: 50px;
height: var(--top-nav-height, $top-nav-height);
}
}
@ -103,8 +103,8 @@
.item {
flex: 1;
line-height: 50px;
height: 50px;
line-height: var(--top-nav-height, $top-nav-height);
height: var(--top-nav-height, $top-nav-height);
overflow: hidden;
display: flex;
flex-wrap: wrap;

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

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