Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Gridster with Gridstack and clean up styling #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Replace Gridster with Gridstack and clean up styling #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
800c852
Replace Gridster with Gridstack and clean up styling
Sep 5, 2016
9a40a16
Move JS dependencies into gems
Mbuckley0 Oct 21, 2016
2289831
Fix gridstack resizing
Mbuckley0 Dec 5, 2016
44ed8bb
Minify JS and CSS for libraries
Mbuckley0 Apr 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 38 additions & 9 deletions app/assets/javascripts/kiteboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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') {
Expand All @@ -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');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

multiple $('.grid-stack')s ... and other duplicates

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);
});
25 changes: 12 additions & 13 deletions app/assets/javascripts/temperature.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removeClass can take many arguments, so this could be

widget.find('.widget-temperature').removeClass("temperature0", "temperature1", ...);

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');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably best to store widget.find('.widget-temperature') into a variable, as you use it many times (and dom lookups are quite expensive).


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));
Expand Down
248 changes: 20 additions & 228 deletions app/assets/stylesheets/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
}
}

Expand All @@ -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; }
Loading