amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-21 11:25:24 +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/Templates/ContactsUI/UIxContactFoldersView.wox
+3 -3
View File
@@ -354,7 +354,7 @@
<md-content id="contactsList" layout="column" class="md-flex">
<md-subheader ng-show="addressbook.service.$query.value">
<md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
<md-button class="md-icon-button md-primary hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="addressbook.selectedFolder.cards.length">
@@ -363,7 +363,7 @@
</span>
</md-subheader>
<md-subheader ng-hide="addressbook.service.$query.value">
<md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
<md-button class="md-icon-button md-primary hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="addressbook.selectedFolder.isRemote">
@@ -435,7 +435,7 @@
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
ui-view="card">
<md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
<md-content class="hide-sm md-flex layout-fill md-hue-1"
<md-content class="hide-xs md-flex layout-fill md-hue-1"
layout="column" layout-align="center center">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No contact selected"/></div>
</md-content>
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+1 -1
View File
@@ -202,7 +202,7 @@
<md-content id="messagesList" layout="column" class="md-flex">
<md-subheader>
<md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
<md-button class="md-icon-button md-primary hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="mailbox.service.selectedFolder.getLength()">
UI/Templates/MainUI/SOGoRootPage.wox
+1 -1
View File
@@ -21,7 +21,7 @@
ng-controller="LoginController as app">
<md-content class="ng-cloak md-whiteframe-z1"
layout="row" layout-align="center center"
layout-sm="column" layout-align-sm="space-between center"
layout-xs="column" layout-align-xs="space-between center"
md-scroll-y="true"
ng-show="app.showLogin">
<div id="logo" class="md-padding">
UI/Templates/SchedulerUI/UIxCalMainView.wox
+4 -2
View File
@@ -121,7 +121,9 @@
ng-repeat="category in app.categories"
ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<md-sidenav class="md-sidenav-left md-whiteframe-z1" layout="column"
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-closed': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
<!-- User's calendars -->
@@ -666,7 +668,7 @@
</md-button>
</md-content>
</div>
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView">
<div id="detailView" class="view-detail" hide-xs="hide-xs" layout="column" ui-view="calendarView">
<!-- calendar view -->
</div>
</div>
UI/Templates/UIxTopnavToolbarTemplate.wox
+1 -1
View File
@@ -7,7 +7,7 @@
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()"
class="hide-gt-md sg-button-navicon sg-icon-button"
class="hide-gt-sm sg-button-navicon sg-icon-button"
label:aria-label="Toggle Menu">
<md-icon>menu</md-icon>
</md-button>
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;