lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix resposive mobile PR

Browse Source
This commit is contained in:
Joseph Cohen
2015-01-05 02:23:34 -06:00
parent 1a89dde195
commit 214898ae60
27 changed files with 344 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/sass/partials/_base.scss
View File

@@ -9,4 +9,46 @@ body.dashboard {
table-layout: fixed;
-webkit-font-smoothing: antialiased;
line-height: $base-line-height;
.wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.wrapper.toggled {
padding-left: $sidebar-normal-width;;
}
.wrapper.toggled .sidebar {
width: $sidebar-normal-width;;
}
.wrapper.toggled .page-content {
position: absolute;
margin-right: -$sidebar-normal-width;;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.wrapper {
padding-left: 80px;
}
}
@media(min-width: $screen-sm-max) {
.wrapper {
padding-left: $sidebar-normal-width;
}
.wrapper.toggled {
padding-left: 0;
}
.wrapper.toggled .page-content {
position: relative;
margin-right: 0;
}
}
}

57
app/assets/sass/partials/_content.scss
View File

@@ -1,30 +1,33 @@
body.dashboard {
.content {
position: relative;
display: table-cell;
vertical-align: top;
.page-content {
width: 100%;
.row {
margin: 10px 0;
.content-wrapper {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
&.header-fixed {
margin-top: 60px;
}
}
.header {
position: absolute;
position: relative;
top: 0;
left: 0;
color: #333;
background-color: #fff;
padding: 22px 14px;
padding: 22px 40px;
width: 100%;
height: 70px;
font-size: 1.2em;
border-bottom: 1px solid #eee;
z-index: 99;
&.sub-header {
padding: 8px 2px;
height: 50px;
}
&.fixed {
position: fixed;
padding-left: 250px;
}
i {
// padding-right: 10px;
padding-left: 270px;
}
input, button, .btn {
position: relative;
@@ -44,9 +47,6 @@ body.dashboard {
text-transform: uppercase;
}
}
.content-wrapper {
margin-top: 80px;
}
.sub-header {
font-weight: 300;
@@ -79,4 +79,31 @@ body.dashboard {
}
}
}
// Header media queries
@media (max-width: $screen-xs-max) {
.page-content {
.content-wrapper {
padding-left: 20px;
padding-right: 20px;
}
.header {
padding-left: 20px;
padding-right: 20px;
&.fixed {
padding-left: 20px;
padding-right: 20px;
}
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.page-content {
.header.fixed {
padding-left: 120px;
}
}
}
}

104
app/assets/sass/partials/_sidebar.scss
View File

@@ -1,15 +1,26 @@
body.dashboard {
.sidebar {
display: table-cell;
vertical-align: top;
width: $sidebar-normal-width;
position: fixed;
left: $sidebar-normal-width;
width: 0;
height: 100%;
margin-left: -$sidebar-normal-width;
overflow-y: auto;
background: $sidebar-background-color;
@include box-shadow($sidebar-border-shadow);
position: relative;
z-index: 999;
z-index: 1000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
.sidebar-inner {
position: relative;
position: absolute;
top: 0;
width: $sidebar-normal-width;
margin: 0;
padding: 0;
list-style: none;
.profile {
padding: 20px;
@@ -29,7 +40,7 @@ body.dashboard {
}
}
.quick-add-incident {
@extend text-center;
@extend .text-center;
padding: 10px;
}
ul {
@@ -99,15 +110,27 @@ body.dashboard {
}
// Sidebar media queries
@media (max-width: $screen-sm-max) {
@media (min-width: $screen-xs-max) {
.sidebar {
width: $sidebar-normal-width;
}
.wrapper.toggled .sidebar {
width: 0;
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.sidebar {
width: 80px;
left: 150px;
margin-left: -150px;
.sidebar-inner {
width: 80px;
.profile .avatar img {
width: 40px;
}
.profile .username {
@extend .hidden-xs;
.profile .username-wrapper {
@extend .hidden-sm;
}
.quick-add-incident {
@@ -115,12 +138,10 @@ body.dashboard {
padding: 3px 6px;
}
i {
@extend .visible-xs;
@extend .visible-sm;
font-size: 20px;
}
span {
@extend .hidden-xs;
@extend .hidden-sm;
}
}
@@ -130,22 +151,26 @@ body.dashboard {
font-size: 25px;
}
& > span {
@extend .hidden-xs;
@extend .hidden-sm;
}
}
}
.bottom-menu-sidebar {
@extend .hidden-xs;
@extend .hidden-sm;
}
}
}
// Sidebar media queries
@media (max-width: $screen-sm-max) {
.sidebar {
@extend .hidden-xs;
.sidebar-toggler {
float: left;
padding: 10px;
position: relative;
top: -15px;
left: -5px;
margin-right: 10px;
cursor: pointer;
i {
font-size: 25px;
}
}
@@ -154,6 +179,7 @@ body.dashboard {
top: 0;
bottom: 0;
position: absolute;
margin-left: 228px;
width: 22%;
background: #fcfcfc;
border-right: 1px solid #E8ECF1;
@@ -162,7 +188,7 @@ body.dashboard {
margin: 0;
text-align: center;
font-size: 19px;
padding: 22px 0;
padding: 30px 0;
}
ul.menu {
@@ -190,17 +216,41 @@ body.dashboard {
}
}
+ .content-panel {
top: 0;
position: relative;
width: 78%;
margin-left: 22%;
padding: 24px 50px;
padding-bottom: 80px;
.sidebar-toggler {
position: absolute;
top: 3px;
left: 20px;
font-size: 36px;
cursor: pointer;
}
@media (max-width: $screen-sm-max) {
+ .content-wrapper {
top: 0;
position: relative;
margin-left: 25%;
padding-right: 20px !important;
}
}
// Sub-sidebar media queries
@media (max-width: $screen-xs-max) {
.sub-sidebar {
position: relative;
margin-left: 0;
width: 100%;
+ .content-wrapper {
margin-left: 0;
width: 100%;
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.sub-sidebar {
margin-left: 80px;
width: 25%;
}
}
}