From 5e523cf0d1a3644f6a41709b777b08f73ec71d49 Mon Sep 17 00:00:00 2001 From: PliablePixels Date: Wed, 1 Jul 2015 17:08:18 -0400 Subject: further optimized montage view - got rid of padding, allowed resize control in full screen and got rid of ugly exit button in favor of floating buttons --- www/css/style.css | 16 +++++++++++----- www/js/MontageCtrl.js | 35 +++++++++++++++++++++++++++++------ www/js/angular-circular-navigation.js | 4 ++++ www/js/app.js | 2 -- www/templates/montage.html | 31 ++++++++++++++++++++----------- 5 files changed, 64 insertions(+), 24 deletions(-) (limited to 'www') diff --git a/www/css/style.css b/www/css/style.css index a90567b2..45f66257 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -27,24 +27,30 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ } .wrapper > * { - padding: 5px; + /*padding: 5px;*/ /*flex: 1 100%; -- I commented this out - the wrapper was taking up full width in Chrome*/ } .header { background: #DDDDDD; + border-color: #CCCCCC; + border-style: solid; + border-width:1px; } .footer { background: #666666; + border-color:#AAAAAA; color:#ffffff; - padding:2px; + border-width:1px; + /*padding:2px;*/ } .main { text-align: center; background: #EEEEEE; - padding:2px; + + /*padding:2px;*/ } .aside-1 { @@ -55,7 +61,7 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ background: hotpink; } -@media all and (min-width: 600px) { +/*@media all and (min-width: 600px) { .aside { flex: 1 auto; } } @@ -65,7 +71,7 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } -} +}*/ /* Not using this -eventually. Think notification badges on buttons */ .notification-badge{ diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index b95d2553..1c0c7b90 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -287,15 +287,13 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' }); //--------------------------------------------------------- - // slider is tied to the view slider for montage - //Remember not to use a variable. I'm using an object - // so it's passed as a reference - otherwise it makes - // a copy and the value never changes + // This function readjusts montage size + // and stores current size to persistent memory //--------------------------------------------------------- - $scope.sliderChanged = function () + function processSliderChanged() { - console.log('Slider has changed'); + console.log('Slider has changed'); ZMDataModel.setMontageSize($scope.slider.monsize); console.log("Rootscope Montage is " + ZMDataModel.getMontageSize() + " and slider montage is " + $scope.slider.monsize); @@ -313,6 +311,31 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' monsizestring = monsizestring.slice(0,-1); // kill last : console.log ("Setting monsize string:"+monsizestring); window.localStorage.setItem("montageArraySize", monsizestring); + } + + //--------------------------------------------------------- + // In full screen montage view, I call this function + // as slider is hidden + //--------------------------------------------------------- + + $scope.changeSize = function (val) + { + $scope.slider.monsize += val; + if ($scope.slider.monsize < 1) $scope.slider.monsize = 1; + if ($scope.slider.monsize > 6) $scope.slider.monsize = 6; + processSliderChanged(); + }; + + //--------------------------------------------------------- + // slider is tied to the view slider for montage + //Remember not to use a variable. I'm using an object + // so it's passed as a reference - otherwise it makes + // a copy and the value never changes + //--------------------------------------------------------- + + $scope.sliderChanged = function () + { + processSliderChanged(); }; diff --git a/www/js/angular-circular-navigation.js b/www/js/angular-circular-navigation.js index f3b9b0a0..6f62a9e5 100644 --- a/www/js/angular-circular-navigation.js +++ b/www/js/angular-circular-navigation.js @@ -1,4 +1,8 @@ // PP - Modified to show at right angles +/* jshint -W041 */ +/* jslint browser: true*/ +/* global cordova,StatusBar,angular,console */ + (function () { 'use strict'; diff --git a/www/js/app.js b/www/js/app.js index 9831ef19..9bbecce4 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -40,7 +40,6 @@ angular.module('zmApp', [ // Also remember you need to add it to .config //------------------------------------------------------------------ .factory('timeoutHttpIntercept', function ($rootScope, $q) { - //console.log("*** HTTP INTERCEPTOR CALLED ***"); return { 'request': function (config) { if ( !(config.url.indexOf("stop.json") > -1 || @@ -54,7 +53,6 @@ angular.module('zmApp', [ { //console.log ("HTTP INTERCEPT:Skipping HTTP timeout for "+config.url); } - //console.log("*** HTTP URL INTERCEPTOR CALLED with "+config.url+" ***"); return config; } diff --git a/www/templates/montage.html b/www/templates/montage.html index 46129fd8..3060e553 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -10,7 +10,7 @@ - +
@@ -35,7 +35,8 @@ - + + + + -
-
- -
+
+ + + + +
+ + -- cgit v1.2.3