diff --git a/bower.json b/bower.json index 7893e0f..8d7a996 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,8 @@ "angular-route": "~1.3.14", "angular-resource": "~1.3.14", "angular-sanitize": "~1.3.14", - "angular-animate": "~1.3.14" + "angular-animate": "~1.3.14", + "angular-local-storage": "~0.1.5" }, "resolutions": { "angular": "~1.3.8" diff --git a/front/src/css/index.css b/front/src/css/index.css index 5c90ab8..88651ee 100644 --- a/front/src/css/index.css +++ b/front/src/css/index.css @@ -25,6 +25,34 @@ .launchBtn.disabled:focus { color: #ddd; } +.device { + margin-top: 2em; +} +.device .item { + display: inline-block; + margin: 0.7em 0.3em; + width: 5.5em; + height: 5.5em; + color: #FFF; + border: 1px solid #FFF; + padding: 1px; + border-radius: 0.5em; + cursor: pointer; + text-decoration: none; + font-size: 0.8em; +} +.device .item.active { + color: #ffa319; + border: 2px solid #ffa319; + padding: 0; +} +.device .item:hover { + color: #ffa319; +} +.device .item > div { + margin: 0.2em 0 0.1em; + font-size: 3em; +} .features { display: table; width: 50%; diff --git a/front/src/js/app.js b/front/src/js/app.js index a17c4f7..6a229fb 100644 --- a/front/src/js/app.js +++ b/front/src/js/app.js @@ -12,8 +12,10 @@ var yltApp = angular.module('YellowLabTools', [ 'resultsFactory', 'apiService', 'menuService', + 'settingsService', 'gradeDirective', - 'offendersDirectives' + 'offendersDirectives', + 'LocalStorageModule' ]); yltApp.run(['$rootScope', '$location', function($rootScope, $location) { diff --git a/front/src/js/controllers/indexCtrl.js b/front/src/js/controllers/indexCtrl.js index f9426fa..24b48bc 100644 --- a/front/src/js/controllers/indexCtrl.js +++ b/front/src/js/controllers/indexCtrl.js @@ -1,8 +1,13 @@ var indexCtrl = angular.module('indexCtrl', []); -indexCtrl.controller('IndexCtrl', ['$scope', '$location', 'API', function($scope, $location, API) { +indexCtrl.controller('IndexCtrl', ['$scope', 'Settings', 'API', function($scope, Settings, API) { + + $scope.settings = Settings.getMergedSettings(); + console.log($scope.settings); + $scope.launchTest = function() { if ($scope.url) { + Settings.saveSettings($scope.settings); API.launchTest($scope.url); } }; diff --git a/front/src/js/services/settingsService.js b/front/src/js/services/settingsService.js new file mode 100644 index 0000000..6ecad61 --- /dev/null +++ b/front/src/js/services/settingsService.js @@ -0,0 +1,23 @@ +var settingsService = angular.module('settingsService', []); + +settingsService.factory('Settings', ['localStorageService', function(localStorageService) { + + return { + + getMergedSettings: function() { + var defaultSettings = { + device: 'desktop' + }; + + var savedValues = localStorageService.get('settings'); + + return angular.extend(defaultSettings, savedValues); + }, + + saveSettings: function(settings) { + localStorageService.set('settings', settings); + } + + }; + +}]); \ No newline at end of file diff --git a/front/src/less/index.less b/front/src/less/index.less index 69aea80..40b944a 100644 --- a/front/src/less/index.less +++ b/front/src/less/index.less @@ -30,6 +30,38 @@ } +.device { + margin-top: 2em; + .item { + display: inline-block; + margin: 0.7em 0.3em; + width: 5.5em; + height: 5.5em; + color: #FFF; + border: 1px solid #FFF; + padding: 1px; + border-radius: 0.5em; + cursor: pointer; + text-decoration: none; + font-size: 0.8em; + + &.active { + color: #ffa319; + border: 2px solid #ffa319; + padding: 0; + } + + &:hover { + color: #ffa319; + } + + > div { + margin: 0.2em 0 0.1em; + font-size: 3em; + } + } +} + .features { display: table; width: 50%; diff --git a/front/src/main.html b/front/src/main.html index 6ce0d14..357cce5 100644 --- a/front/src/main.html +++ b/front/src/main.html @@ -24,6 +24,7 @@ + @@ -35,6 +36,8 @@ + + diff --git a/front/src/views/index.html b/front/src/views/index.html index 0a3e488..02caf53 100644 --- a/front/src/views/index.html +++ b/front/src/views/index.html @@ -4,6 +4,14 @@
+
+
+
Choose the simulated device:
+
Desktop
+
Tablet
+
Phone
+
+