From 800c852f4cd2d504584452bf6d7052dff5b17848 Mon Sep 17 00:00:00 2001 From: Mitchell Buckley Date: Tue, 6 Sep 2016 09:23:04 +1000 Subject: [PATCH 1/4] Replace Gridster with Gridstack and clean up styling --- app/assets/javascripts/kiteboard.js | 47 +- app/assets/javascripts/temperature.js | 25 +- app/assets/stylesheets/base.scss | 248 +- app/assets/stylesheets/jquery.gridster.css | 121 - app/assets/stylesheets/kiteboard.css | 3 +- app/assets/stylesheets/widgets/clock.scss | 26 +- app/assets/stylesheets/widgets/digit.scss | 10 +- app/assets/stylesheets/widgets/graph.scss | 1 + app/assets/stylesheets/widgets/list.scss | 17 +- app/assets/stylesheets/widgets/meter.scss | 6 +- .../stylesheets/widgets/temperature.scss | 25 +- app/assets/stylesheets/widgets/text.scss | 32 +- app/views/kiteboard/_clock.html.erb | 2 +- app/views/kiteboard/_digit.html.erb | 2 +- app/views/kiteboard/_graph.html.erb | 2 +- app/views/kiteboard/_list.html.erb | 3 +- app/views/kiteboard/_meter.html.erb | 2 +- app/views/kiteboard/_temperature.html.erb | 2 +- app/views/kiteboard/_text.html.erb | 2 +- .../assets/javascripts/gridstack.jQueryUI.js | 97 + vendor/assets/javascripts/gridstack.js | 1738 +++++++ vendor/assets/javascripts/jquery-ui/core.js | 304 ++ .../assets/javascripts/jquery-ui/draggable.js | 1136 +++++ vendor/assets/javascripts/jquery-ui/mouse.js | 202 + .../javascripts/jquery-ui/resizeable.js | 1156 +++++ vendor/assets/javascripts/jquery-ui/widget.js | 558 +++ vendor/assets/javascripts/jquery.gridster.js | 3987 ----------------- vendor/assets/javascripts/underscore-min.js | 6 + vendor/assets/stylesheets/gridstack-extra.css | 1295 ++++++ vendor/assets/stylesheets/gridstack.css | 387 ++ 30 files changed, 7032 insertions(+), 4410 deletions(-) delete mode 100644 app/assets/stylesheets/jquery.gridster.css create mode 100644 vendor/assets/javascripts/gridstack.jQueryUI.js create mode 100644 vendor/assets/javascripts/gridstack.js create mode 100644 vendor/assets/javascripts/jquery-ui/core.js create mode 100644 vendor/assets/javascripts/jquery-ui/draggable.js create mode 100644 vendor/assets/javascripts/jquery-ui/mouse.js create mode 100644 vendor/assets/javascripts/jquery-ui/resizeable.js create mode 100644 vendor/assets/javascripts/jquery-ui/widget.js delete mode 100644 vendor/assets/javascripts/jquery.gridster.js create mode 100644 vendor/assets/javascripts/underscore-min.js create mode 100644 vendor/assets/stylesheets/gridstack-extra.css create mode 100644 vendor/assets/stylesheets/gridstack.css diff --git a/app/assets/javascripts/kiteboard.js b/app/assets/javascripts/kiteboard.js index 6878ca1..a1fb6bb 100644 --- a/app/assets/javascripts/kiteboard.js +++ b/app/assets/javascripts/kiteboard.js @@ -1,5 +1,12 @@ +//= require jquery-ui/core +//= require jquery-ui/mouse +//= require jquery-ui/widget +//= require jquery-ui/draggable +//= require jquery-ui/resizeable //= require jquery.knob -//= require jquery.gridster +//= require underscore-min +//= require gridstack +//= require gridstack.jQueryUI //= require d3.min //= require d3.layout.min //= require rickshaw.min @@ -9,26 +16,29 @@ $(function () { 'use strict'; window.Kiteboard = { init: function () { - var contentWidth = 1240; - $('.gridster').width(contentWidth); - $('.gridster ul').gridster({ - widget_margins: [5, 5], - widget_base_dimensions: [300, 360] + $('.grid-stack').gridstack({ + cellHeight: 360, + width: 4, + alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), + resizable: { + handles: 'e, se, s, sw, w' + } }); + Kiteboard.resizeWidgets(); - var clockWidgets = $(".gridster>ul>li[data-widget='Clock']"); + var clockWidgets = $(".grid-stack>.grid-stack-item[data-widget='Clock']"); $(clockWidgets).each(function () { Clock.startClock($(this)); }); - var graphWidgets = $(".gridster>ul>li[data-widget='Graph']"); + var graphWidgets = $(".grid-stack>.grid-stack-item[data-widget='Graph']"); $(graphWidgets).each(function () { Graph.setup($(this)); }); }, updateWidgets: function (data) { - var widgets = $('.gridster>ul>li'); + var widgets = $('.grid-stack>.grid-stack-item'); $(widgets).each(function () { var widget = $(this); if (widget.data('widget') != 'Clock') { @@ -48,6 +58,25 @@ $(function () { return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k'; } return num; + }, + + resizeWidgets: function () { + if (window.innerWidth < $('.grid-stack').width()) { + var grid = $('.grid-stack').data('gridstack'); + grid.resizable('.grid-stack-item', false); + grid.movable('.grid-stack-item', false); + var rightMargin = ($('.grid-stack').width() - window.innerWidth) + 20; + $('.grid-stack-item').attr('style', 'margin-right: ' + rightMargin + 'px'); + $('.grid-stack').addClass('grid-stack-one-column-mode'); + } else { + var grid = $('.grid-stack').data('gridstack'); + grid.resizable('.grid-stack-item', true); + grid.movable('.grid-stack-item', true); + $('.grid-stack-item').attr('style', 'margin-right: 0px'); + $('.grid-stack').removeClass('grid-stack-one-column-mode'); + } } }; + + $(window).resize(Kiteboard.resizeWidgets); }); diff --git a/app/assets/javascripts/temperature.js b/app/assets/javascripts/temperature.js index d698337..778dd69 100644 --- a/app/assets/javascripts/temperature.js +++ b/app/assets/javascripts/temperature.js @@ -1,26 +1,25 @@ $(function () { 'use strict'; - window.Temperature = window.Temperature || {}; Temperature.setData = function (widget, data) { - widget.find('.widget-hotness').removeClass('hotness0'); - widget.find('.widget-hotness').removeClass('hotness1'); - widget.find('.widget-hotness').removeClass('hotness2'); - widget.find('.widget-hotness').removeClass('hotness3'); - widget.find('.widget-hotness').removeClass('hotness4'); + widget.find('.widget-temperature').removeClass('temperature0'); + widget.find('.widget-temperature').removeClass('temperature1'); + widget.find('.widget-temperature').removeClass('temperature2'); + widget.find('.widget-temperature').removeClass('temperature3'); + widget.find('.widget-temperature').removeClass('temperature4'); - var min = widget.find('.widget-hotness')[0].getAttribute('data-min'); - var max = widget.find('.widget-hotness')[0].getAttribute('data-max'); + var min = widget.find('.widget-temperature')[0].getAttribute('data-min'); + var max = widget.find('.widget-temperature')[0].getAttribute('data-max'); if (data <= min) { - widget.find('.widget-hotness').addClass('hotness0'); - } else if (data >= max) { - widget.find('.widget-hotness').addClass('hotness4'); + widget.find('.widget-temperature').addClass('temperature0'); + } else if(data >= max) { + widget.find('.widget-temperature').addClass('temperature4'); } else { var temperatureLevel = Math.ceil((data - min) / ((max - min) / 3)); - var backgroundClass = 'hotness' + temperatureLevel; - widget.find('.widget-hotness').addClass(backgroundClass); + var backgroundClass = 'temperature' + temperatureLevel; + widget.find('.widget-temperature').addClass(backgroundClass); } widget.find('.value').html(Kiteboard.nFormatter(data)); diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss index 2bae7e4..8ebc97e 100644 --- a/app/assets/stylesheets/base.scss +++ b/app/assets/stylesheets/base.scss @@ -1,186 +1,40 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #222; $text-color: #fff; -$background-warning-color-1: #e82711; -$background-warning-color-2: #9b2d23; -$text-warning-color: #fff; - -$background-danger-color-1: #eeae32; -$background-danger-color-2: #ff9618; -$text-danger-color: #fff; - -@-webkit-keyframes status-warning-background { - 0% { background-color: $background-warning-color-1; } - 50% { background-color: $background-warning-color-2; } - 100% { background-color: $background-warning-color-1; } -} -@-webkit-keyframes status-danger-background { - 0% { background-color: $background-danger-color-1; } - 50% { background-color: $background-danger-color-2; } - 100% { background-color: $background-danger-color-1; } -} -@mixin animation($animation-name, $duration, $function, $animation-iteration-count:""){ - -webkit-animation: $animation-name $duration $function #{$animation-iteration-count}; - -moz-animation: $animation-name $duration $function #{$animation-iteration-count}; - -ms-animation: $animation-name $duration $function #{$animation-iteration-count}; -} - // ---------------------------------------------------------------------------- // Base styles // ---------------------------------------------------------------------------- -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -body { - margin: 0; - background-color: $background-color; - font-size: 20px; - color: $text-color; - font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -b, strong { - font-weight: bold; -} - -a { - text-decoration: none; - color: inherit; -} - -img { - border: 0; - -ms-interpolation-mode: bicubic; - vertical-align: middle; -} - -img, object { - max-width: 100%; -} +.grid-stack { + width: 1240px; + margin-left: auto; + margin-right: auto; -iframe { - max-width: 100%; -} - -table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; -} - -td { - vertical-align: middle; -} - -ul, ol { - padding: 0; - margin: 0; -} - -h1, h2, h3, h4, h5, p { - padding: 0; - margin: 0; -} - -.widget { - a { - color: rgba(255, 255, 255, 0.7); - } - h1 { - margin-bottom: 12px; - text-align: center; - font-size: 30px !important; - font-weight: 400 !important; + .grid-stack-item[data-gs-width="1"] { + width: 25%; } - h2 { - text-transform: uppercase; - font-size: 76px !important; - font-weight: 700 !important; - color: $text-color !important; + .grid-stack-item[data-gs-width="2"] { + width: 50%; } - h3 { - font-size: 25px !important; - font-weight: 600 !important; - color: $text-color !important; + .grid-stack-item[data-gs-width="3"] { + width: 75%; } - .list-nostyle { - li { - font-size: 22px !important; - } + .grid-stack-item[data-gs-width="4"] { + width: 100%; } -} -// ---------------------------------------------------------------------------- -// Base widget styles -// ---------------------------------------------------------------------------- -.gridster { - margin: 0px auto; -} -.icon-background { - pointer-events: none; - width: 100%!important; - height: 100%; - position: absolute; - left: 0; - top: 0; - opacity: 0.1; - font-size: 275px; - text-align: center; - margin-top: 82px; -} - -.list-nostyle { - list-style: none; -} - -.gridster ul { - list-style: none; -} - -.gs_w { - width: 100%; - display: table; - cursor: pointer; -} - -.widget { - text-align: center; - width: inherit; - height: inherit; - display: table-cell; - vertical-align: middle; -} - -.widget.status-warning { - background-color: $background-warning-color-1; - @include animation(status-warning-background, 2s, ease, infinite); - - .icon-warning-sign { - display: inline-block; + .grid-stack-item[data-gs-x="1"] { + left: 25%; } - - .title, .more-info { - color: $text-warning-color; + .grid-stack-item[data-gs-x="2"] { + left: 50%; } -} - -.widget.status-danger { - color: $text-danger-color; - background-color: $background-danger-color-1; - @include animation(status-danger-background, 2s, ease, infinite); - - .icon-warning-sign { - display: inline-block; + .grid-stack-item[data-gs-x="3"] { + left: 75%; } - - .title, .more-info { - color: $text-danger-color; + .grid-stack-item[data-gs-x="4"] { + left: 100%; } } @@ -199,65 +53,3 @@ h1, h2, h3, h4, h5, p { left: 0; right: 0; } - -#save-gridster { - display: none; - position: fixed; - top: 0; - margin: 0px auto; - left: 50%; - z-index: 1000; - background: black; - width: 190px; - text-align: center; - border: 1px solid white; - border-top: 0px; - margin-left: -95px; - padding: 15px; -} - -#save-gridster:hover { - padding-top: 25px; -} - -#saving-instructions { - display: none; - padding: 10px; - width: 500px; - height: 122px; - z-index: 1000; - background: white; - top: 100px; - color: black; - font-size: 15px; - padding-bottom: 4px; - - textarea { - white-space: nowrap; - width: 494px; - height: 80px; - } -} - -#lean_overlay { - position: fixed; - z-index:100; - top: 0px; - left: 0px; - height:100%; - width:100%; - background: #000; - display: none; -} - -#container { - padding-top: 5px; -} - - -// ---------------------------------------------------------------------------- -// Clearfix -// ---------------------------------------------------------------------------- -.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } diff --git a/app/assets/stylesheets/jquery.gridster.css b/app/assets/stylesheets/jquery.gridster.css deleted file mode 100644 index 1c2126f..0000000 --- a/app/assets/stylesheets/jquery.gridster.css +++ /dev/null @@ -1,121 +0,0 @@ -/*! gridster.js - v0.5.6 - 2014-09-25 -* http://gridster.net/ -* Copyright (c) 2014 ducksboard; Licensed MIT */ - -.gridster { - position:relative; -} - -.gridster > * { - margin: 0 auto; - -webkit-transition: height .4s, width .4s; - -moz-transition: height .4s, width .4s; - -o-transition: height .4s, width .4s; - -ms-transition: height .4s, width .4s; - transition: height .4s, width .4s; -} - -.gridster .gs-w { - z-index: 2; - position: absolute; -} - -.ready .gs-w:not(.preview-holder) { - -webkit-transition: opacity .3s, left .3s, top .3s; - -moz-transition: opacity .3s, left .3s, top .3s; - -o-transition: opacity .3s, left .3s, top .3s; - transition: opacity .3s, left .3s, top .3s; -} - -.ready .gs-w:not(.preview-holder), -.ready .resize-preview-holder { - -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; - -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; - -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; - transition: opacity .3s, left .3s, top .3s, width .3s, height .3s; -} - -.gridster .preview-holder { - z-index: 1; - position: absolute; - background-color: #fff; - border-color: #fff; - opacity: 0.3; -} - -.gridster .player-revert { - z-index: 10!important; - -webkit-transition: left .3s, top .3s!important; - -moz-transition: left .3s, top .3s!important; - -o-transition: left .3s, top .3s!important; - transition: left .3s, top .3s!important; -} - -.gridster .dragging, -.gridster .resizing { - z-index: 10!important; - -webkit-transition: all 0s !important; - -moz-transition: all 0s !important; - -o-transition: all 0s !important; - transition: all 0s !important; -} - - -.gs-resize-handle { - position: absolute; - z-index: 1; -} - -.gs-resize-handle-both { - width: 20px; - height: 20px; - bottom: -8px; - right: -8px; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4='); - background-position: top left; - background-repeat: no-repeat; - cursor: se-resize; - z-index: 20; -} - -.gs-resize-handle-x { - top: 0; - bottom: 13px; - right: -5px; - width: 10px; - cursor: e-resize; -} - -.gs-resize-handle-y { - left: 0; - right: 13px; - bottom: -5px; - height: 10px; - cursor: s-resize; -} - -.gs-w:hover .gs-resize-handle, -.resizing .gs-resize-handle { - opacity: 1; -} - -.gs-resize-handle, -.gs-w.dragging .gs-resize-handle { - opacity: 0; -} - -.gs-resize-disabled .gs-resize-handle { - display: none!important; -} - -[data-max-sizex="1"] .gs-resize-handle-x, -[data-max-sizey="1"] .gs-resize-handle-y, -[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle { - display: none !important; -} - -/* Uncomment this if you set helper : "clone" in draggable options */ -/*.gridster .player { - opacity:0; -} -*/ diff --git a/app/assets/stylesheets/kiteboard.css b/app/assets/stylesheets/kiteboard.css index 46a340c..8b79cdf 100644 --- a/app/assets/stylesheets/kiteboard.css +++ b/app/assets/stylesheets/kiteboard.css @@ -9,7 +9,8 @@ * compiled file, but it's generally better to create a new file per style scope. * *= require font-awesome - *= require jquery.gridster + *= require gridstack + *= require gridstack-extra *= require_directory ./widgets *= require_tree . */ diff --git a/app/assets/stylesheets/widgets/clock.scss b/app/assets/stylesheets/widgets/clock.scss index 19e91bf..1be0ddc 100644 --- a/app/assets/stylesheets/widgets/clock.scss +++ b/app/assets/stylesheets/widgets/clock.scss @@ -1,13 +1,35 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #dc5945; +$background-color: #F2711C; +$text-color: #fff; // ---------------------------------------------------------------------------- // Widget-clock styles // ---------------------------------------------------------------------------- .widget-clock { - background-color: $background-color; + text-align: center; + color: $text-color; + h1 { + margin-bottom: 12px; + margin-top: 0px; + text-align: center; + font-size: 30px; + position: absolute; + bottom: 40%; + left: 0; + right: 0; + } + h2 { + position: absolute; + bottom: 35%; + left: 0; + right: 0; + text-transform: uppercase; + font-size: 65px; + margin-bottom: 100px; + color: $text-color; + } } diff --git a/app/assets/stylesheets/widgets/digit.scss b/app/assets/stylesheets/widgets/digit.scss index c487165..083685c 100644 --- a/app/assets/stylesheets/widgets/digit.scss +++ b/app/assets/stylesheets/widgets/digit.scss @@ -1,7 +1,7 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #47bbb3; +$background-color: #008080; $value-color: #fff; $title-color: rgba(255, 255, 255, 0.7); @@ -11,8 +11,8 @@ $moreinfo-color: rgba(255, 255, 255, 0.7); // Widget-number styles // ---------------------------------------------------------------------------- .widget-digit { - background-color: $background-color; + text-align: center; .title { color: $title-color; @@ -20,11 +20,11 @@ $moreinfo-color: rgba(255, 255, 255, 0.7); .value { color: $value-color; + font-size: 64px; + margin-bottom: 5px; } .change-rate { - font-weight: 500; - font-size: 30px; color: $value-color; } @@ -33,7 +33,7 @@ $moreinfo-color: rgba(255, 255, 255, 0.7); } .updated-at { - color: rgba(0, 0, 0, 0.3); + color: rgba(255, 255, 255, 0.7); } } diff --git a/app/assets/stylesheets/widgets/graph.scss b/app/assets/stylesheets/widgets/graph.scss index c592182..6bd44c6 100644 --- a/app/assets/stylesheets/widgets/graph.scss +++ b/app/assets/stylesheets/widgets/graph.scss @@ -15,6 +15,7 @@ $tick-color: rgba(0, 0, 0, 0.4); background-color: $background-color; position: relative; + text-align: center; svg { diff --git a/app/assets/stylesheets/widgets/list.scss b/app/assets/stylesheets/widgets/list.scss index b209e0a..9a17e48 100644 --- a/app/assets/stylesheets/widgets/list.scss +++ b/app/assets/stylesheets/widgets/list.scss @@ -1,7 +1,7 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #12b0c5; +$background-color: #0E6EB8; $value-color: #fff; $title-color: rgba(255, 255, 255, 0.7); @@ -12,9 +12,9 @@ $moreinfo-color: rgba(255, 255, 255, 0.7); // Widget-list styles // ---------------------------------------------------------------------------- .widget-list { - background-color: $background-color; - vertical-align: top !important; + vertical-align: top; + text-align: center; .title { color: $title-color; @@ -23,35 +23,34 @@ $moreinfo-color: rgba(255, 255, 255, 0.7); ol, ul { margin: 0 15px; text-align: left; + padding: 0px; color: $label-color; } - ol { - list-style-position: inside; - } - li { margin-bottom: 5px; } .list-nostyle { list-style: none; - width: auto !important; + width: auto; } .label { + font-size: 22px; color: $label-color; } .value { float: right; margin-left: 12px; + font-size: 22px; font-weight: 600; color: $value-color; } .updated-at { - color: rgba(0, 0, 0, 0.3); + color: rgba(255, 255, 255, 0.7); } .more-info { diff --git a/app/assets/stylesheets/widgets/meter.scss b/app/assets/stylesheets/widgets/meter.scss index da9ff0b..7f56e71 100644 --- a/app/assets/stylesheets/widgets/meter.scss +++ b/app/assets/stylesheets/widgets/meter.scss @@ -1,7 +1,7 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #9c4274; +$background-color: #A333C8; $title-color: rgba(255, 255, 255, 0.7); $moreinfo-color: rgba(255, 255, 255, 0.3); @@ -12,8 +12,8 @@ $meter-background: darken($background-color, 15%); // Widget-meter styles // ---------------------------------------------------------------------------- .widget-meter { - background-color: $background-color; + text-align: center; input.meter { background-color: $meter-background; @@ -29,7 +29,7 @@ $meter-background: darken($background-color, 15%); } .updated-at { - color: rgba(0, 0, 0, 0.3); + color: rgba(255, 255, 255, 0.7); } } diff --git a/app/assets/stylesheets/widgets/temperature.scss b/app/assets/stylesheets/widgets/temperature.scss index 106c34b..e3ed7d3 100644 --- a/app/assets/stylesheets/widgets/temperature.scss +++ b/app/assets/stylesheets/widgets/temperature.scss @@ -17,11 +17,11 @@ $title-color: rgba(255, 255, 255, 0.7); $updated-at-color: rgba(0, 0, 0, 0.3); // ---------------------------------------------------------------------------- -// Widget-hotness styles +// Widget-temperature styles // ---------------------------------------------------------------------------- -.widget-hotness { - +.widget-temperature { background-color: $background-color; + text-align: center; @include transition(background-color, 1s, linear); .title { @@ -30,23 +30,16 @@ $updated-at-color: rgba(0, 0, 0, 0.3); .value { color: $value-color; + font-size: 64px; } .updated-at { color: $updated-at-color; } - } -.hotness0 { background-color: #00C176; } -.hotness1 { background-color: #88C100; } -.hotness2 { background-color: #FABE28; } -.hotness3 { background-color: #FF8A00; } -.hotness4 { background-color: #FF003C; } - -// // More colour-blind friendly palette -// .hotness0 { background-color: #046D8B; } -// .hotness1 { background-color: #309292; } -// .hotness2 { background-color: #2FB8AC; } -// .hotness3 { background-color: #93A42A; } -// .hotness4 { background-color: #ECBE13; } +.temperature0 { background-color: #016936; } +.temperature1 { background-color: #B5CC18; } +.temperature2 { background-color: #FFD700; } +.temperature3 { background-color: #FE9A76; } +.temperature4 { background-color: #B03060; } diff --git a/app/assets/stylesheets/widgets/text.scss b/app/assets/stylesheets/widgets/text.scss index 45d790e..4df8a94 100644 --- a/app/assets/stylesheets/widgets/text.scss +++ b/app/assets/stylesheets/widgets/text.scss @@ -1,32 +1,48 @@ // ---------------------------------------------------------------------------- // Sass declarations // ---------------------------------------------------------------------------- -$background-color: #ec663c; +$background-color: #FE9A76; -$title-color: rgba(255, 255, 255, 0.7); -$moreinfo-color: rgba(255, 255, 255, 0.7); +$title-color: rgba(255, 255, 255, 0.7); +$moreinfo-color: rgba(255, 255, 255, 0.7); +$text-color: rgba(255, 255, 255, 0.7); +$updated-at-color: rgba(255, 255, 255, 0.7); // ---------------------------------------------------------------------------- // Widget-text styles // ---------------------------------------------------------------------------- -.widget-text { +.widget-text { background-color: $background-color; + text-align: center; .title { + position: absolute; + bottom: 50%; + left: 0; + right: 0; + margin-bottom: 50px; color: $title-color; } + .text { + font-size: 24px; + position: absolute; + bottom: 40%; + left: 0; + right: 0; + color: rgb(255, 255, 255) + } + .more-info { color: $moreinfo-color; } .updated-at { - color: rgba(255, 255, 255, 0.7); + color: $updated-at-color; } - - &.large h3 { - font-size: 65px; + h3 { + color: $text-color; } } diff --git a/app/views/kiteboard/_clock.html.erb b/app/views/kiteboard/_clock.html.erb index 4241930..cb2ed9b 100644 --- a/app/views/kiteboard/_clock.html.erb +++ b/app/views/kiteboard/_clock.html.erb @@ -1,4 +1,4 @@ -
+

<%= Date.today %>

<%= Time.now.strftime('%H:%M:%S') %>

diff --git a/app/views/kiteboard/_digit.html.erb b/app/views/kiteboard/_digit.html.erb index 28dc189..fe0d1fd 100644 --- a/app/views/kiteboard/_digit.html.erb +++ b/app/views/kiteboard/_digit.html.erb @@ -1,6 +1,6 @@ <% icon ||= '' %> -
+
diff --git a/app/views/kiteboard/_graph.html.erb b/app/views/kiteboard/_graph.html.erb index c129f10..3c10553 100644 --- a/app/views/kiteboard/_graph.html.erb +++ b/app/views/kiteboard/_graph.html.erb @@ -1,6 +1,6 @@ <% title ||= '' %> -
+

<%= title %>

diff --git a/app/views/kiteboard/_list.html.erb b/app/views/kiteboard/_list.html.erb index 977350c..e6a215e 100644 --- a/app/views/kiteboard/_list.html.erb +++ b/app/views/kiteboard/_list.html.erb @@ -1,5 +1,4 @@ -
- +

<%= title %>