mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-08-21 22:53:18 +00:00
Fix breakpoints in scss and js (in await for a more elegant solution)
This commit is contained in:
Benoit Favreault
committed by
Francis Lachapelle
Francis Lachapelle
parent
6b1fe301a6
commit
d6a294b89f
@@ -9,6 +9,18 @@
|
||||
'use strict';
|
||||
|
||||
angular.module('SOGo.UI', ['ngMaterial'])
|
||||
// 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)'
|
||||
})
|
||||
|
||||
.config(['$mdThemingProvider', function ($mdThemingProvider) {
|
||||
|
||||
@@ -104,7 +116,8 @@
|
||||
return l;
|
||||
})
|
||||
|
||||
.controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$log', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $log) {
|
||||
.controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$mdMedia', '$log', 'sgConstant', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant) {
|
||||
|
||||
$scope.toggleLeft = function () {
|
||||
$mdSidenav('left').toggle()
|
||||
.then(function () {
|
||||
@@ -123,5 +136,11 @@
|
||||
templateUrl: 'bottomSheetTemplate.html'
|
||||
});
|
||||
};
|
||||
$scope.$watch(function() {
|
||||
return $mdMedia(sgConstant['gt-md']);
|
||||
},
|
||||
function(newVal) {
|
||||
$scope.isGtMedium = newVal;
|
||||
});
|
||||
}]);
|
||||
})();
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
//@import "settings";
|
||||
//@import "foundation";
|
||||
|
||||
// Or selectively include components
|
||||
// @import
|
||||
// "foundation/components/accordion",
|
||||
// "foundation/components/alert-boxes",
|
||||
// "foundation/components/block-grid",
|
||||
// "foundation/components/breadcrumbs",
|
||||
// "foundation/components/button-groups",
|
||||
// "foundation/components/buttons",
|
||||
// "foundation/components/clearing",
|
||||
// "foundation/components/dropdown",
|
||||
// "foundation/components/dropdown-buttons",
|
||||
// "foundation/components/flex-video",
|
||||
// "foundation/components/forms",
|
||||
// "foundation/components/grid",
|
||||
// "foundation/components/inline-lists",
|
||||
// "foundation/components/joyride",
|
||||
// "foundation/components/keystrokes",
|
||||
// "foundation/components/labels",
|
||||
// "foundation/components/magellan",
|
||||
// "foundation/components/orbit",
|
||||
// "foundation/components/pagination",
|
||||
// "foundation/components/panels",
|
||||
// "foundation/components/pricing-tables",
|
||||
// "foundation/components/progress-bars",
|
||||
// "foundation/components/reveal",
|
||||
// "foundation/components/side-nav",
|
||||
// "foundation/components/split-buttons",
|
||||
// "foundation/components/sub-nav",
|
||||
// "foundation/components/switch",
|
||||
// "foundation/components/tables",
|
||||
// "foundation/components/tabs",
|
||||
// "foundation/components/thumbs",
|
||||
// "foundation/components/tooltips",
|
||||
// "foundation/components/top-bar",
|
||||
// "foundation/components/type",
|
||||
// "foundation/components/offcanvas",
|
||||
// "foundation/components/visibility";
|
||||
|
||||
// http://docs.angularjs.org/api/ng/directive/ngCloak
|
||||
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.animate-show {
|
||||
-webkit-transition:all linear 0.5s;
|
||||
transition:all linear 0.5s;
|
||||
line-height:20px;
|
||||
opacity:1;
|
||||
padding:10px;
|
||||
border:1px solid black;
|
||||
background:white;
|
||||
}
|
||||
|
||||
.animate-show.ng-hide-add,
|
||||
.animate-show.ng-hide-remove {
|
||||
display:block!important;
|
||||
}
|
||||
|
||||
.animate-show.ng-hide {
|
||||
line-height:0;
|
||||
opacity:0;
|
||||
padding:0 10px;
|
||||
}
|
||||
|
||||
.reveal-modal {
|
||||
.close-reveal-modal {
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
._selected {
|
||||
//background-color: #ddd !important;
|
||||
//border: 2px solid #ddd !important;
|
||||
/* -webkit-border-radius: 2px; */
|
||||
/* -moz-border-radius: 2px; */
|
||||
/* border-radius: 2px; */
|
||||
}
|
||||
@@ -130,7 +130,7 @@
|
||||
}
|
||||
|
||||
// Google's Material design specs are in 'sp' or 'dp' which are not css units
|
||||
// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels'
|
||||
// 'dp' is 'density independant pixels' and 'sp' is 'scale-independent pixels'
|
||||
// (same as dp, but will be scaled by the user's font size preference)
|
||||
// Android gives a 160dpi base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
|
||||
// We define a scaling factor in case we need to adjust
|
||||
|
||||
@@ -17,9 +17,6 @@ $primary-color: sg-color($sogoBlue, 300) !default;
|
||||
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
|
||||
$foreground-primary-color: rgba($primary-color, 0.87);//override
|
||||
|
||||
$bottombar-color: #212121;
|
||||
|
||||
|
||||
|
||||
// Layout and grid
|
||||
// ------------------------------
|
||||
@@ -56,6 +53,11 @@ $layout-breakpoint-sm: 600px !default;
|
||||
$layout-breakpoint-md: 960px !default;
|
||||
$layout-breakpoint-lg: 1200px !default;
|
||||
|
||||
// Redefinitions
|
||||
// $layout-breakpoint-sm: 360px;
|
||||
$layout-breakpoint-md: 1025px;
|
||||
$layout-breakpoint-lg: 1280px;
|
||||
|
||||
// App bar variables
|
||||
$app-bar-height: $sg-md-grid-pitch;
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
@import 'components/textField/textField';
|
||||
@import 'components/toast/toast';
|
||||
@import 'components/toolbar/toolbar';
|
||||
@import 'components/bottombar/bottombar';
|
||||
// @import 'components/bottombar/bottombar';
|
||||
@import 'components/tooltip/tooltip';
|
||||
@import 'components/whiteframe/whiteframe';
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/*! ContactUI.scss */
|
||||
|
||||
[id ="contactsList"] {
|
||||
flex: 0 0 $listView-width;
|
||||
flex: 0 1 $listView-width;
|
||||
min-width: ($listView-width - ($pitch * 2));
|
||||
}
|
||||
|
||||
[id = "contactsList"] .sg-md-subheader {
|
||||
@@ -9,12 +10,14 @@
|
||||
}
|
||||
// md is overqualifying, we have to do the same to override
|
||||
md-content[ui-view="card"] {
|
||||
margin: 0 auto;
|
||||
background-color: sg-color($sogoPaper, 200);
|
||||
}
|
||||
|
||||
// md is overqualifying, we have to do the same to override
|
||||
md-card.viewer {
|
||||
width: $detailView-width;
|
||||
flex: 0 2 $detailView-width;
|
||||
min-width: ($detailView-width - ($pitch * 2));
|
||||
}
|
||||
|
||||
// Contact editor
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
|
||||
}
|
||||
[ui-view="message"] {
|
||||
flex: 0 0 $detailView-width;
|
||||
flex: 1 2 $detailView-width;
|
||||
min-width: ($detailView-width - $pitch);
|
||||
max-width: ($detailView-width + $pitch);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user