Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-28 17:49:41 +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, $break-1: 900px;
.layout-footer { $break-2: 1200px;
$break-3: 1400px;
$break-4: 1600px;
$break-5: 1800px;
.layout-header, .layout-footer {
flex: 0 0 auto; flex: 0 0 auto;
width: 100%; width: 100%;
} }
@ -24,21 +29,20 @@
footer { footer {
margin: auto auto 0 auto; margin: auto auto 0 auto;
bottom: 0; bottom: 0;
position: -webkit-sticky; z-index: 888;
position: -moz-sticky; @include sticky();
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
position: sticky;
} }
@media (min-width: 900px) { @media (min-width: $break-1) {
.layout-body { .layout-body {
flex-direction: row; flex-direction: row;
} }
.layout-sidebar { .layout-sidebar {
flex: 0 0 200px; flex: 0 0 200px;
height: calc(100vh - 140px);
@include sticky();
top: 2rem;
} }
.layout-content { .layout-content {
@ -48,7 +52,7 @@ footer {
} }
} }
@media (min-width: 1200px) { @media (min-width: $break-2) {
.layout-body { .layout-body {
flex-direction: row; flex-direction: row;
} }
@ -64,7 +68,7 @@ footer {
} }
} }
@media (min-width: 1400px) { @media (min-width: $break-3) {
.layout-body { .layout-body {
flex-direction: row; flex-direction: row;
} }
@ -80,7 +84,7 @@ footer {
} }
} }
@media (min-width: 1600px) { @media (min-width: $break-4) {
.layout-body { .layout-body {
flex-direction: row; flex-direction: row;
} }
@ -96,7 +100,7 @@ footer {
} }
} }
@media (min-width: 1800px) { @media (min-width: $break-5) {
.layout-body { .layout-body {
flex-direction: row; flex-direction: row;
} }

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

@ -2,10 +2,35 @@
padding: 1rem; padding: 1rem;
} }
.sidebar-white {
background-color: $color-white;
}
.sidebar-center { .sidebar-center {
text-align: 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() @mixin sticky()
{ {
position: -webkit-sticky;
position: -moz-sticky; position: -moz-sticky;
position: -ms-sticky; position: -ms-sticky;
position: -o-sticky; position: -o-sticky;

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

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

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

@ -1,5 +1,5 @@
{{#unless emptyState}} {{#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 id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
<div class="header"> <div class="header">
{{#if canEdit}} {{#if canEdit}}

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

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