scss

2018-06-27 00:31:00 -07:00 · 2018-06-27 00:31:00 -07:00 · 80edad94c8
parent 8e2d131839
commit 80edad94c8
7 changed files with 69 additions and 353 deletions
--- a/.gitignore
+++ b/.gitignore
@ -6,4 +6,6 @@ plugins/*.so
 data
 build
 vendor
-html/scss/.sass-cache
+html/scss/.sass-cache
+dart-sass
+.sass-cache
--- a/.travis/build.sh
+++ b/.travis/build.sh
@ -3,6 +3,16 @@
 APP="statup"
 REPO="hunterlong/statup"

+
+# INSTALLING SASS
+SASS=1.7.1
+curl -OL https://github.com/sass/dart-sass/releases/download/$SASS/dart-sass-$SASS-linux-x64.tar.gz
+tar -xvzf dart-sass-$SASS-linux-x64.tar.gz
+chmod +x dart-sass/sass
+mv dart-sass/sass /usr/local/bin/sass
+# RENDERING CSS
+sass html/scss/base.scss:html/css/base.css
+
 printf "UPDATE core SET version='$VERSION';\n" >> sql/upgrade.sql

 rice embed-go
--- a/html/css/base.css
+++ b/html/css/base.css
@ -1,3 +1,15 @@
+/*
+      Main Design
+   =================
+    - Background
+    - Boxes
+    - Font Colors
+    - div widths
+*/
+/*
+    Card Design
+  ================
+*/
 HTML, BODY {
  background-color: #fcfcfc; }

@ -28,40 +40,16 @@ HTML, BODY {
  color: #d1ffca;
  font-size: 0.85rem; }

-.failing_bg {
-  background-color: #ff4e4e !important;
-  font-weight: bold; }
-
 .lg_number {
  font-size: 26pt;
  font-weight: bold;
  display: block;
-  color: #3e3e3e; }
-
-.text_perfect {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
-
-.text_good {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
-
-.text_ok {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
-
-.text_bad {
-  color: #33b418;
-  text-shadow: 0px 1px 0 #0e6702; }
+  color: #474747; }

 .stats_area {
  text-align: center;
  color: #a5a5a5; }

-.offline_bg {
-  background-color: white !important;
-  padding-bottom: 70px !important; }
-
 .lower_canvas {
  height: 55px;
  width: 100%;
@ -71,22 +59,6 @@ HTML, BODY {
 .lower_canvas SPAN {
  font-size: 1rem; }

-.offline_lower_canvas {
-  position: absolute;
-  bottom: -120px;
-  height: 60px;
-  left: -25px;
-  width: 805px;
-  padding: 17px 10px; }
-
-.offline_lower_canvas SPAN {
-  font-weight: bold;
-  font-size: 0.85rem; }
-
-.offline_lower_canvas A {
-  background-color: #c51b1a;
-  border: 1px solid #bb1727; }
-
 .footer {
  text-decoration: none;
  margin-top: 20px; }
@ -114,6 +86,9 @@ HTML, BODY {
  height: 3px;
  border-radius: 0; }

+.card {
+  background-color: #fff; }
+
 .card-body {
  overflow: hidden; }

--- a/html/scss/base.scss
+++ b/html/scss/base.scss
@ -1,7 +1,4 @@
-$background-color: #262626;
-$max-width: 860px;
-$card-background: #121212;
-$card-stats-color: #dfdfdf;
+@import 'variables';


 HTML,BODY {
@ -41,52 +38,18 @@ HTML,BODY {
    font-size: 0.85rem;
 }

-.failing_bg {
-    background-color: #ff4e4e !important;
-    font-weight: bold;
-}
-
 .lg_number {
-    font-size: 26pt;
+    font-size: $card-stats-size;
    font-weight: bold;
    display: block;
    color: $card-stats-color;
 }

-.text_perfect {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_good {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_ok {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_bad {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
 .stats_area {
    text-align: center;
    color: #a5a5a5;
 }

-.offline_bg {
-    background-color: white !important;
-    padding-bottom: 70px !important;
-}
-
-.online_list {
-
-}
-
 .lower_canvas {
    height: 55px;
    width: 100%;
@ -98,25 +61,6 @@ HTML,BODY {
    font-size: 1rem;
 }

-.offline_lower_canvas {
-    position: absolute;
-    bottom: -120px;
-    height: 60px;
-    left: -25px;
-    width: 805px;
-    padding: 17px 10px;
-}
-
-.offline_lower_canvas SPAN {
-    font-weight: bold;
-    font-size: 0.85rem;
-}
-
-.offline_lower_canvas A {
-    background-color: #c51b1a;
-    border: 1px solid #bb1727;
-}
-
 .footer {
    text-decoration: none;
    margin-top: 20px;
--- a/html/scss/light-base.scss
+++ b/html/scss/light-base.scss
@ -1,251 +0,0 @@
-$background-color: #fcfcfc;
-$max-width: 860px;
-$primary-color: #333;
-$card-background: #fff;
-
-
-HTML,BODY {
-    background-color: $background-color;
-}
-
-.container {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    max-width: $max-width;
-}
-
-.online_list .badge {
-    margin-top: 0.2rem;
-}
-
-.navbar {
-    margin-bottom: 30px;
-}
-
-.btn-sm {
-    line-height: 1.3;
-    font-size: 0.75rem;
-}
-
-.view_service_btn {
-    position: absolute;
-    bottom: -40px;
-    right: 40px;
-}
-
-.service_lower_info {
-    position: absolute;
-    bottom: -40px;
-    left: 40px;
-    color: #d1ffca;
-    font-size: 0.85rem;
-}
-
-.failing_bg {
-    background-color: #ff4e4e !important;
-    font-weight: bold;
-}
-
-.lg_number {
-    font-size: 26pt;
-    font-weight: bold;
-    display: block;
-    color: #3e3e3e;
-}
-
-.text_perfect {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_good {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_ok {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.text_bad {
-    color: #33b418;
-    text-shadow: 0px 1px 0 #0e6702;
-}
-
-.stats_area {
-    text-align: center;
-    color: #a5a5a5;
-}
-
-.offline_bg {
-    background-color: white !important;
-    padding-bottom: 70px !important;
-}
-
-.online_list {
-
-}
-
-.lower_canvas {
-    height: 55px;
-    width: 100%;
-    background-color: #48d338;
-    padding: 17px 10px;
-}
-
-.lower_canvas SPAN {
-    font-size: 1rem;
-}
-
-.offline_lower_canvas {
-    position: absolute;
-    bottom: -120px;
-    height: 60px;
-    left: -25px;
-    width: 805px;
-    padding: 17px 10px;
-}
-
-.offline_lower_canvas SPAN {
-    font-weight: bold;
-    font-size: 0.85rem;
-}
-
-.offline_lower_canvas A {
-    background-color: #c51b1a;
-    border: 1px solid #bb1727;
-}
-
-.footer {
-    text-decoration: none;
-    margin-top: 20px;
-}
-
-.footer A {
-    color: #aaaaaa;
-    text-decoration: none;
-}
-
-.footer A:HOVER {
-    color: #6d6d6d;
-}
-
-.online_badge {
-    color: #fff;
-    background-color: #35b317;
-}
-
-.offline_badge {
-    color: #fff;
-    background-color: #c51919;
-}
-
-.progress {
-    margin-top: -20px;
-    margin-left: -20px;
-    margin-bottom: 15px;
-    width: calc(100% + 40px);
-    height: 3px;
-    border-radius: 0;
-}
-
-.card-body {
-    overflow: hidden;
-}
-
-.card-body H4 A {
-    color: #239e07;
-    text-decoration: none;
-}
-
-.chart-container {
-    position: relative;
-    height: 170px;
-    width: 100%;
-}
-
-.btn-primary {
-    background-color: white;
-    border: 1px solid #b9b9b9;
-    color: #353535;
-    height: 35px;
-    padding: 5px 15px;
-}
-
-@media (max-width: 767px) {
-
-    .sm-container {
-        margin-top: 40px !important;
-        padding: 0 !important;
-    }
-
-    .list-group-item H5 {
-        font-size: 0.9rem;
-    }
-
-    .container {
-        padding: 0 !important;
-    }
-
-    .navbar {
-        margin-left: 0px;
-        margin-top: 0px;
-        width: 100%;
-        margin-bottom: 0;
-    }
-
-    .card-body {
-        font-size: 6pt;
-        padding: 5px 5px;
-    }
-
-    .lg_number {
-        font-size: 1.5rem;
-    }
-
-    .stats_area {
-        margin-top: 35px !important;
-        margin-bottom: 35px !important;
-    }
-
-    .stats_area .col-4 {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .lower_canvas SPAN {
-        font-size: 0.9rem;
-        float: left;
-    }
-
-    .btn-sm {
-        line-height: 0.9rem;
-        font-size: 0.65rem;
-    }
-
-    .full-col-12 {
-        padding-left: 0px;
-        padding-right: 0px;
-    }
-
-    .card {
-        border: 0;
-        border-radius: 0;
-    }
-
-    .list-group-item {
-        border-top: 1px solid #e4e4e4;
-        border: 0px;
-    }
-
-    .list-group-item:first-child {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    .list-group-item:last-child {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}
--- a/html/scss/variables.scss
+++ b/html/scss/variables.scss
@ -0,0 +1,30 @@
+/*
+      Main Design
+   =================
+    - Background
+    - Boxes
+    - Font Colors
+    - div widths
+*/
+
+
+$background-color: #fcfcfc;
+$max-width: 860px;
+$online-color: #47d337;
+$offline-color: #dd3545;
+
+
+
+
+
+/*
+    Card Design
+  ================
+*/
+
+
+$card-background: #fff;
+$card-stats-color: #474747;
+$card-stats-size: 26pt;
+
+
--- a/html/tmpl/service.html
+++ b/html/tmpl/service.html
@ -19,11 +19,17 @@

            <div class="col-12 mb-4">

+            {{if .Online }}
+                <span class="text-white d-md-none btn bg-success d-block">ONLINE</span>
+            {{ else }}
+                <span class="text-white d-md-none btn bg-danger d-block">OFFLINE</span>
+            {{end}}
+
                        <h4 class="mt-2">{{ .Name }}
                        {{if .Online }}
-                            <span class="badge online_badge float-right">ONLINE</span>
+                            <span class="badge online_badge float-right hidden-sm-up">ONLINE</span>
                        {{ else }}
-                            <span class="badge offline_badge float-right">OFFLINE</span>
+                            <span class="badge offline_badge float-right hidden-sm-up">OFFLINE</span>
                        {{end}}</h4>

                        <div class="row stats_area mt-5 mb-5">