Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-25 08:09:43 +02:00
Code Releases Activity

Sidebar more responsive and sticky

Browse source 
Tweaked CSS to support small-to-large screen real estate.
This commit is contained in:
McMatts 2018-05-31 15:15:48 +01:00
parent f20a1d1d5f
commit 25fd13bd3f
6 changed files with 47 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

30
gui/app/styles/layout/layout-master.scss
View file

@ -1,5 +1,10 @@
.layout-header,
.layout-footer {
$break-1: 900px;
$break-2: 1200px;
$break-3: 1400px;
$break-4: 1600px;
$break-5: 1800px;
.layout-header, .layout-footer {
flex: 0 0 auto;
width: 100%;
}
@ -24,21 +29,20 @@
footer {
margin: auto auto 0 auto;
bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
position: sticky;
z-index: 888;
@include sticky();
}
@media (min-width: 900px) {
@media (min-width: $break-1) {
.layout-body {
flex-direction: row;
}
.layout-sidebar {
flex: 0 0 200px;
height: calc(100vh - 140px);
@include sticky();
top: 2rem;
}
.layout-content {
@ -48,7 +52,7 @@ footer {
}
}
@media (min-width: 1200px) {
@media (min-width: $break-2) {
.layout-body {
flex-direction: row;
}
@ -64,7 +68,7 @@ footer {
}
}
@media (min-width: 1400px) {
@media (min-width: $break-3) {
.layout-body {
flex-direction: row;
}
@ -80,7 +84,7 @@ footer {
}
}
@media (min-width: 1600px) {
@media (min-width: $break-4) {
.layout-body {
flex-direction: row;
}
@ -96,7 +100,7 @@ footer {
}
}
@media (min-width: 1800px) {
@media (min-width: $break-5) {
.layout-body {
flex-direction: row;
}

33
gui/app/styles/layout/layout-sidebar.scss
View file

@ -2,10 +2,35 @@
padding: 1rem;
}
.sidebar-white {
background-color: $color-white;
}
.sidebar-center {
text-align: center;
}
.sidebar-scroll {
overflow-x: hidden;
overflow-y: auto;
}
.sidebar-white {
background-color: $color-white;
margin: 10px 10px;
@media (min-width: $break-1) {
margin: 10px 10px;
height: calc(100vh - 204px);
overflow-x: hidden;
overflow-y: auto;
}
@media (min-width: $break-2) {
margin: 10px 10px;
}
@media (min-width: $break-3) {
margin: 20px 20px;
}
@media (min-width: $break-4) {
margin: 20px 20px;
}
@media (min-width: $break-5) {
margin: 20px 20px;
}
}

1
gui/app/styles/mixins.scss
View file

@ -1,6 +1,5 @@
@mixin sticky()
{
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;

5
gui/app/styles/view/document/doc-toc.scss
View file

@ -1,15 +1,10 @@
.document-sidebar {
background-color: $color-white;
margin: 20px 20px;
> .document-toc {
@include border-radius(3px);
@include ease-in();
@include sticky();
margin: 0;
padding: 0 20px 20px 20px;
display: block;
// height: calc(100vh - 180px);
> .header {
top: 0;

2
gui/app/templates/components/document/document-toc.hbs
View file

@ -1,5 +1,5 @@
{{#unless emptyState}}
<div id="sidebar" class="document-sidebar">
<div id="sidebar" class="sidebar-white document-sidebar">
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
<div class="header">
{{#if canEdit}}

2
gui/app/templates/components/document/view-attachment.hbs
View file

@ -17,8 +17,6 @@
</li>
{{/each}}
</ul>
{{else}}
<p>No attachments found</p>
{{/if}}
{{#if canEdit}}
<div class="upload-document-files">