New sidebar layout

Update UI code to display a fixed location sidebar. The sidebar is
also of a fixed width instead of being a certain number columns
wide. The action dropdown is also now in a fixed location.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>
This commit is contained in:
Roberto Rosario
2018-12-25 03:39:22 -04:00
parent bd194a70cb
commit 9e4ebf4e04
6 changed files with 102 additions and 79 deletions
@@ -67,7 +67,7 @@
}
#carousel-container {
overflow-x: scroll; height: 500px;
overflow: scroll; height: 100%;
}
#carousel-container img {
@@ -356,22 +356,23 @@ body {
*/
/* Hide for mobile, show later */
.sidebar {
#menu-main {
display: none;
background-color: #2c3e50;
border-right: 1px solid #18bc9c;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-top: 10px;
position: fixed;
top: 51px;
width: 210px;
z-index: 1000;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
#menu-main {
display: block;
padding-top: 10px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #2c3e50;
border-right: 1px solid #18bc9c;
}
.navbar-brand {
@@ -399,10 +400,6 @@ body {
margin-top: 0;
}
.sidebar {
width: 210px;
}
.navbar-brand {
}
@@ -487,3 +484,43 @@ body {
.td-container-thumbnail {
height: 100px;
}
/* Side bar */
#menu-actions {
position: fixed;
right: 5px;
top: 65px;
z-index: 1020;
}
#viewport {
width: 100%;
}
.has-sidebar {
padding-right: 0px;
}
#sidebar {
display: none;
}
@media (min-width: 768px) {
#sidebar {
bottom: 0;
display: block;
overflow-x: visible;
overflow-y: auto;
padding-top: 10px;
position: fixed;
right: 0;
top: 100px;
width: 150px;
z-index: 1000;
}
.has-sidebar {
padding-right: 150px;
}
}