amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-28 09:53:23 +00:00
Code Issues Projects Releases Wiki Activity

(css) Adapt to new breakpoints and layout-align

Browse Source
This commit is contained in:
Francis Lachapelle
2015-11-30 14:13:15 -05:00
parent 77755770a8
commit fdb36970d4
12 changed files with 56 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/js/Common/Common.app.js
+9 -8
View File
@@ -110,15 +110,16 @@
// md break-points values are hard-coded in angular-material/src/core/util/constant.js
// $mdMedia has a built-in support for those values but can also evaluate others
// For some reasons, angular-material's break-points don't match the specs
// Here we define values according to specs
.constant('sgConstant', {
'sm': '(max-width: 600px)',
'gt-sm': '(min-width: 600px)',
'md': '(min-width: 600px) and (max-width: 1024px)',
'gt-md': '(min-width: 1025px)',
'lg': '(min-width: 1024px) and (max-width: 1280px)',
'gt-lg': '(min-width: 1280px)'
'xs' : '(max-width: 599px)' ,
'gt-xs' : '(min-width: 600px)' ,
'sm' : '(min-width: 600px) and (max-width: 959px)' ,
'gt-sm' : '(min-width: 960px)' ,
'md' : '(min-width: 960px) and (max-width: 1279px)' ,
'gt-md' : '(min-width: 1280px)' ,
'lg' : '(min-width: 1280px) and (max-width: 1919px)',
'gt-lg' : '(min-width: 1920px)' ,
'xl' : '(min-width: 1920px)'
})
.config(configure)
UI/WebServerResources/js/Common/navController.js
+1 -1
View File
@@ -52,7 +52,7 @@
// detail.toggleClass('sg-close');
// };
$scope.$watch(function() {
return $mdMedia(sgConstant['gt-md']);
return $mdMedia(sgConstant['gt-sm']);
}, function(newVal) {
$scope.isGtMedium = newVal;
if (newVal) {
UI/WebServerResources/scss/components/sidenav/sidenav.scss
+2 -2
View File
@@ -6,8 +6,8 @@ $sidenav-min-space: $pitch;
md-sidenav {
&.md-locked-open {
@include from(lg) {
@include flex-col(lg, 4, 1, 0);
@include from(md) {
@include flex-col(md, 4, 1, 0);
// Custom representation of a closed sidenav where the sidenav is pushed to the left;
// Used in in "locked open" mode.
&.sg-closed.md-sidenav-left {
UI/WebServerResources/scss/core/variables.scss
+9 -7
View File
@@ -62,9 +62,10 @@ $touch-zone: $touch-zone-width;
// angular-material share breakpoint values between sass and js files (/core/constant.js)
// we might consider using a sass library to import values as json single source for both
$layout-breakpoint-sm: 600px !default;
$layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1200px !default;
$layout-breakpoint-xs: 600px !default;
$layout-breakpoint-sm: 960px !default;
$layout-breakpoint-md: 1280px !default;
$layout-breakpoint-lg: 1920px !default;
$layout-gutter-width: ($baseline-grid * 2) !default;
// Margins
@@ -81,15 +82,16 @@ $layout-breakpoint-lg: 1280px;
// ----------------------------------------------------------------------------
$base-grid-total-columns: (
'sm': 1,
'md': 16,
'xs': 1,
'sm': 16,
'md': 20,
'lg': 20,
);
// Passing to breakpoint-slicer
$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
$slicer-breakpoints: 0 $layout-breakpoint-xs $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
$slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl';
$media-pointer: (pointer fine);
UI/WebServerResources/scss/views/LoginUI.scss
+2 -2
View File
@@ -2,7 +2,7 @@
[ui-view="login"] {
md-content {
@include to(sm) {
@include to(xs) {
[id=logo] {
text-align: center;
img {
@@ -10,7 +10,7 @@
}
}
}
@include from(md) {
@include from(sm) {
&.ng-hide {
[id=logo] {
opacity: 0;
UI/WebServerResources/scss/views/SchedulerUI.scss
+8 -8
View File
@@ -20,12 +20,12 @@ $block_radius: 3px;
.view-list {
min-width: ($listView-width - ($pitch * 2));
@include at(md){
@include flex-col(md, 6, 1, 1);
@include at(sm){
@include flex-col(sm, 6, 1, 1);
min-width: ($pitch * 3);
}
@include from(lg) {
@include flex-col(lg, 5, 1, 0);
@include from(md) {
@include flex-col(md, 5, 1, 0);
}
// The color chip is smaller; adjust the "selected" icon accordingly
@@ -40,11 +40,11 @@ $block_radius: 3px;
}
.view-detail {
@include at(md) {
@include flex-col(md, 10);
@include at(sm) {
@include flex-col(sm, 10);
}
@include from(lg) {
@include flex-col(lg, 11, 1, 1);
@include from(md) {
@include flex-col(md, 11, 1, 1);
}
}
UI/WebServerResources/scss/views/_view.scss
+15 -11
View File
@@ -19,7 +19,7 @@ body.popup {
.view-detail {
max-width: 100%;
}
@include from(md) {
@include from(sm) {
[class|="view"] {
position: static;
}
@@ -57,14 +57,14 @@ $detailView-width: grid-step(8) !global;
margin: 0;
}
}
@include at(md){
@include flex-col(md, 6, 1, 1);
@include at(sm){
@include flex-col(sm, 6, 1, 1);
min-width: ($pitch * 3);
}
@include from(lg) {
@include flex-col(lg, 6, 1, 0);
@include from(md) {
@include flex-col(md, 6, 1, 0);
}
@include to(sm) {
@include to(xs) {
width: 100%;
min-width: 100%;
}
@@ -74,17 +74,21 @@ $detailView-width: grid-step(8) !global;
z-index: $z-index-view;
//overflow-x: hidden;
overflow: hidden;
@include at(md) {
@include flex-col(md, 10);
md-card {
overflow: hidden;
}
@include at(sm) {
@include flex-col(sm, 10);
margin: 0;
}
@include from(lg) {
@include from(md) {
flex: 1 1 auto;
margin: 0;
}
// No animation on medium to large screens
@include from(md) {
@include from(sm) {
.md-static {
position: static;
}
@@ -129,7 +133,7 @@ $detailView-width: grid-step(8) !global;
// a. viewer slides out of view-detail and is removed from the DOM
// b. view-detail (transparent) slides outside view-list
// c. sg-close is added to view-detail
@include to(sm) {
@include to(xs) {
display: block;
background-color: transparent !important;
position: absolute;