LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(css) Improve display on mobile devices

pull/186/head
Francis Lachapelle 2016-01-18 12:15:38 -05:00
parent e73fc61a27
commit 9984204987
3 changed files with 83 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
UI/Templates/UIxPageFrame.wox
View File

@ -20,7 +20,7 @@
<meta name="author" content="Inverse inc." />
<meta name="robots" content="stop" />
<meta name="build" var:content="buildDate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<link href="mailto:support@inverse.ca" rev="made" />
<link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
<link type="text/css" rel="stylesheet" rsrc:href="css/styles.css" />
@ -115,6 +115,7 @@
<var:string value="productLocalizableStrings" const:escapeHTML="NO" />
</script>
<!-- JAVASCRIPT IMPORTS -->
<script type="text/javascript" rsrc:src="js/vendor/lodash.min.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular.min.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-animate.min.js"><!-- space --></script>

2
UI/Templates/UIxTopnavToolbarTemplate.wox
View File

@ -5,7 +5,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<div class="md-toolbar-tools sg-toolbar-group-1" layout="row">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()"
class="md-icon-button"
label:aria-label="Toggle Menu"

148
UI/WebServerResources/scss/views/_view.scss
View File

@ -12,28 +12,33 @@
max-height: 100%;
}
body.popup {
.viewer {
width: 100%;
body {
@include to(xs) {
overflow: hidden;
}
.view-detail {
max-width: 100%;
@include from(sm) {
height: 100%;
position: absolute;
&.popup {
.viewer {
width: 100%;
.sg-face, .sg-back {
> md-card {
height: 100%;
md-card-content {
}
.view-detail {
max-width: 100%;
@include from(sm) {
height: 100%;
position: absolute;
width: 100%;
.sg-face, .sg-back {
> md-card {
height: 100%;
md-card-content {
height: 100%;
}
}
}
}
}
}
}
// We make intensive use of the list/detail view pattern, here are some base
// definitions for this
// ----------------------------------------------------------------------------
@ -76,6 +81,10 @@ $detailView-width: grid-step(8) !global;
}
}
@include to(xs) {
width: 100%;
min-width: 100%;
}
@include at(sm){
@include flex-col(sm, 6, 1, 1);
min-width: ($pitch * 3);
@ -83,10 +92,6 @@ $detailView-width: grid-step(8) !global;
@include from(md) {
@include flex-col(md, 6, 1, 0);
}
@include to(xs) {
width: 100%;
min-width: 100%;
}
}
.view-detail {
@ -97,14 +102,65 @@ $detailView-width: grid-step(8) !global;
overflow: hidden;
}
// On small screens, the view slides from the right and takes all screen place.
// Expected Display Steps:
// 1. The class sg-close is used when there's no selection
// 2. An list item is selected (ui-router state changes):
// a. sg-close is removed from view-detail
// b. view-detail (transparent) slides over view-list
// c. viewer is inserted into the DOM and slides inside view-detail
// 3. An list item is closed (ui-router state changes):
// 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(xs) {
background-color: transparent !important;
position: absolute;
//top: $toolbar-tall-height;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: ($z-index-toolbar + 1);
transform: translateX(0);
transition: $swift-ease-in-out;
//transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
&.sg-close {
display: none;
transform: translateX(100%);
}
&.ng-leave {
display: block;
transform: translateX(0);
&.ng-leave-active {
transform: translateX(100%);
}
}
&.ng-enter {
display: block;
transform: translateX(100%);
&.ng-enter-active {
transform: translateX(0);
}
}
.viewer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
}
md-card {
height: 100%;
margin: 0;
}
}
@include at(sm) {
@include flex-col(sm, 10);
margin: 0;
}
@include from(md) {
flex: 1 1 auto;
margin: 0;
}
// No animation on medium to large screens
@include from(sm) {
@ -141,53 +197,9 @@ $detailView-width: grid-step(8) !global;
}
}
// On small screens, the view slides from the right and takes all screen place.
// Expected Display Steps:
// 1. The class sg-close is used when there's no selection
// 2. An list item is selected (ui-router state changes):
// a. sg-close is removed from view-detail
// b. view-detail (transparent) slides over view-list
// c. viewer is inserted into the DOM and slides inside view-detail
// 3. An list item is closed (ui-router state changes):
// 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(xs) {
display: block;
background-color: transparent !important;
position: absolute;
//top: $toolbar-tall-height;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: ($z-index-toolbar + 1);
transform: translateX(0);
transition: $swift-ease-in-out;
&.sg-close {
transform: translateX(100%);
}
&.ng-leave.ng-leave-active {
transform: translateX(100%);
}
&.ng-enter {
transform: translateX(100%);
&.ng-enter-active {
transform: translateX(0);
}
}
.viewer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
}
md-card {
height: 100%;
margin: 0;
}
@include from(md) {
flex: 1 1 auto;
margin: 0;
}
// Flippable view card, used to show raw source of cards and messages