amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-21 14:43:31 +00:00
Code Issues Projects Releases Wiki Activity

Add responsiveness (First draft)

Browse Source
This commit is contained in:
Benoit Favreault
2015-06-12 11:35:54 -04:00
committed by Francis Lachapelle
parent 516e5fd303
commit 48b74b0f6b
19 changed files with 275 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/core/base_styles/_base_style.scss
-5
View File
@@ -9,11 +9,6 @@
*
*/
.sg-app-content {
// Adjust visualy to keep breathing room at the bottom
padding-bottom: $mg;
}
main {
background-color: sg-color($sogoPaper, 200);
}
UI/WebServerResources/scss/core/layout.scss
+153 -14
View File
@@ -2,30 +2,161 @@
// -------------------------------
@import "../../angular-material/src/core/style/layout";
/**
* Overrides angular-material sources
* There are some redundancies (thanks to breakpoint-slicer) that can't
* be easily overriden and are interfeering
*
*/
// todo: look for redundancies and find a way to override them
// Responsive attributes
// Some value are defined in project variables
// ------------------------------
// hide means hide everywhere
/* Sizes:
0 <= size < 600 Phone
600 <= size < 960 Tablet
960 <= size < 1200 Tablet-Landscape
1200 <= size PC
*/
// SMALL SCREEN
@include at(sm) {
.hide-sm, .hide {
&:not(.show-sm):not(.show) {
display: none;
}
}
@include flex-order-for-name(sm);
@include layout-align-for-name(sm);
@include layout-for-name(sm);
@include flex-properties-for-name(sm);
}
@include from(md) {
.show-sm {
display: none;
}
}
// BIGGER THAN SMALL SCREEN
@include from(md) {
@include flex-order-for-name(gt-sm);
@include layout-align-for-name(gt-sm);
@include layout-for-name(gt-sm);
@include flex-properties-for-name(gt-sm);
}
// MEDIUM SCREEN
@include at(md) {
.hide, .hide-gt-sm {
&:not(.show-gt-sm):not(.show-md):not(.show) {
display: none;
}
}
.hide-md:not(.show-md):not(.show) {
display: none;
}
@include flex-order-for-name(md);
@include layout-align-for-name(md);
@include layout-for-name(md);
@include flex-properties-for-name(md);
}
// BIGGER THAN MEDIUM SCREEN
@include from(lg) {
@include flex-order-for-name(gt-md);
@include layout-align-for-name(gt-md);
@include layout-for-name(gt-md);
@include flex-properties-for-name(gt-md);
@include flex-order-for-name(lg);
@include layout-align-for-name(lg);
@include layout-for-name(lg);
@include flex-properties-for-name(lg);
}
// BIGGER THAN LARGE SCREEN
@include from(lg) {
.hide, .hide-gt-sm, .hide-gt-md {
&:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
display: none;
}
}
.hide-lg:not(.show-lg):not(.show) {
display: none;
}
}
// BIGGER THAN X-LARGE SCREEN in needed
@include from(xl) {
.hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
&:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
display: none;
}
}
@include flex-order-for-name(gt-lg);
@include layout-align-for-name(gt-lg);
@include layout-for-name(gt-lg);
@include flex-properties-for-name(gt-lg);
}
// Utility classes to compensate for the the xml mandatory attribute values
// ------------------------------------------------------------------------
$selectors: layout, layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg,
layout-align,layout-align-sm, layout-align-gt-sm, layout-align-md, layout-align-gt-md, layout-align-lg, layout-align-gt-lg,
layout-padding,
layout-margin,
layout-wrap,
layout-fill,
flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-sm, hide-gt-sm, hide-md, hide-gt-md, hide-lg, hide-gt-lg, show, show-sm, show-gt-sm, show-md, show-gt-md, show-lg, show-gt-lg;
$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
flex, hide, show, show-sm;
@include attributesToClasses($selectors);
.md-flex {
flex: 1 1 auto;
}
@for $i from 1 to 20 {
.cols-#{$i} {
max-width: grid-step($i);
flex: 1 1 auto;
}
.cols-#{$i}.spacer {
width: grid-step($i);
// Generate responsive columns
// ----------------------------------------------------------------------------
@mixin responsive-columns($breakpoint, $query) {
$cols: map-get($base-grid-total-columns, $breakpoint);
$colWidth: ((100 / $cols) * 1vw);
// there must be a way to escape the rule but we didn't found-out
@if ($query == 'from') {
@include from($breakpoint) {
@for $i from 1 to $cols {
.cols-#{$i}, {
max-width: ($colWidth * $i);
flex: 1 1 ($colWidth * $i);
}
}
}
} @else {
@include at($breakpoint) {
@for $i from 1 to $cols {
.cols-#{$i} {
max-width: ($colWidth * $i);
flex: 1 1 ($colWidth * $i);
}
}
}
}
}
@include responsive-columns('md', 'at');
@include responsive-columns('lg', 'from');
// Utility to implement a specific one without extending
// todo: include error handling
@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
$cols: map-get($base-grid-total-columns, $breakpoint);
$colWidth: ((100 / $cols) * 1vw);
max-width: ($colWidth * $nb);
flex: $grow $shrink ($colWidth * $nb);
}
// Rows are included in padded containers, margins are used for vertical spacing
// ----------------------------------------------------------------------------
@@ -33,3 +164,11 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
margin-right: 0;
margin-left: 0;
}
// App container for responsive
.sg-app-content {
@include to(sm) {
width: 100%;
overflow-x: hidden;
}
}
UI/WebServerResources/scss/core/mixins.scss
+2 -2
View File
@@ -22,9 +22,9 @@
// Utility to compensate for the the xml mandatory attribute values
// Creates classes extending layout attributes with no values
// ----------------------------------------------------------------
@mixin attributesToClasses($selectors) {
@mixin attributesToClasses($selectors, $prefix: 'md') {
@each $selector in $selectors {
.md-#{$selector} {
.#{$prefix}-#{$selector} {
// no syntax error here
@extend #{'['$selector']'} !optional
}
UI/WebServerResources/scss/core/typography/typography.scss
+1 -1
View File
@@ -143,7 +143,7 @@
$md-prefix : 'sg-md';
/// @alias $md-prefix
$md: $md-prefix;
$sg-rem-Base-value: 16 !global;
$sg-rem-Base-value: 16;
$sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
$sg-md-typo-baseline: 4px;
UI/WebServerResources/scss/core/variables.scss
+15 -2
View File
@@ -39,10 +39,12 @@ $touch-zone: $touch-zone-width;
// Google specifies dimensions in grid pitch
// This is a small utility function
// Return dimension in px
@function grid-step($nb) {
@return ($pitch * $nb)
}
// Margins
$layout-gutter-width: ($baseline-grid * 2) !default;
$md-base-margin: $layout-gutter-width;
@@ -61,9 +63,19 @@ $layout-breakpoint-lg: 1200px !default;
$layout-breakpoint-md: 1024px;
$layout-breakpoint-lg: 1280px;
// We use column-based responsive grids inspired by Google's Material design metrics
// ----------------------------------------------------------------------------
$base-grid-total-columns: (
'sm': 1,
'md': 16,
'lg': 20,
);
// Passing to breakpoint-slicer
$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
$slicer-breakpoint-names: 'phones' 'tablets' 'laptops' 'desktops';
// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
$media-pointer: (pointer fine);
@@ -100,7 +112,8 @@ $z-index-toast: 90 !default;
$z-index-bottom-sheet: 70 !default;
$z-index-sidenav: 60 !default;
$z-index-backdrop: 50 !default;
$z-index-fab: 20 !default;
$z-index-fab: 20;
$z-index-view: 10;
// Easing Curves
//--------------------------------------------