From 1a7cda36f2c46e48f87e9577642e32bcdb35aa01 Mon Sep 17 00:00:00 2001 From: Trivernis Date: Sun, 21 Oct 2018 21:12:52 +0200 Subject: [PATCH] HTML redesign - changed to the webapp approach - rebuild it from scratch --- config/server.json | 4 + glob/script.js | 18 ++++ glob/style.sass | 31 ++++--- glob/style/colors.sass | 24 +++++- glob/style/elements.sass | 144 +++++++++++++++++++++++++++++++ glob/style/layout.sass | 27 ++++++ res/html/about.htm | 21 +++++ res/html/{data.html => data.htm} | 11 +-- res/html/index.htm | 21 +++++ res/html/index.html | 76 ++++++++-------- res/img/icons/menu.svg | 1 + 11 files changed, 308 insertions(+), 70 deletions(-) create mode 100644 glob/style/elements.sass create mode 100644 glob/style/layout.sass create mode 100644 res/html/about.htm rename res/html/{data.html => data.htm} (56%) create mode 100644 res/html/index.htm create mode 100644 res/img/icons/menu.svg diff --git a/config/server.json b/config/server.json index 669267f..e985c65 100644 --- a/config/server.json +++ b/config/server.json @@ -36,6 +36,10 @@ "path": "./res/img/", "mime": "image/png" }, + ".svg": { + "path": "./res/img/", + "mime": "image/svg+xml" + }, ".ttf": { "path": "./res/fonts/", "mime": "font/opentype" diff --git a/glob/script.js b/glob/script.js index 75e933d..b8e7470 100644 --- a/glob/script.js +++ b/glob/script.js @@ -40,6 +40,24 @@ function getDataByPath(array, path) { return data; } +/** + * Shows/Hides the sidebar action-menu + */ +function toggleActionMenu() { + let state = $('.mainview').attr("state"); + if (state === "retracted") { + $('.mainview').attr("state", "fullsize"); + } else { + $('.mainview').attr("state", "retracted"); + } +} + +function navigate(view, title) { + $('.content').load(view); + let sideTitle = title || view.replace(/\.htm/, ''); + $('.navigationBar .title').html("" + sideTitle + ""); +} + // -- Events -- // Define what happens onLoad $(document).ready(function(){ diff --git a/glob/style.sass b/glob/style.sass index 920a5c1..2ccbac0 100644 --- a/glob/style.sass +++ b/glob/style.sass @@ -1,4 +1,6 @@ @import "./style/colors.sass" +@import "./style/layout.sass" +@import "./style/elements.sass" @font-face font-family: ubuntuL @@ -12,43 +14,40 @@ font-family: ubuntuMono src: url(/UbuntuMono-R.ttf) -// tagnames + + body font-family: ubuntuL - background: $main-color - color: $highlight-color - text-align: center - font-size: 13pt -a +//a color: $link-color -a:hover +//a:hover color: lighten($link-color, 10%) -a:visited +//a:visited color: darken($link-color, 10%) -h1, h2, h3, h4, h5 +//h1, h2, h3, h4, h5 line-height: 1.5em // tag-like classes -.title +//.title font-size: 30pt -.content +//.content padding: 0px 10% margin: auto line-height: 1.5em -.footer +//.footer position: absolute width: 100% bottom: 0px left: 0px background: $bar-color -.header +//.header padding: 1px 1px position: static width: 100% @@ -56,10 +55,10 @@ h1, h2, h3, h4, h5 left: 0px background: $bar-color -.spacer +//.spacer height: 50px // attribute-like classes -.justify - text-align: justify +//.justify + text-align: justify \ No newline at end of file diff --git a/glob/style/colors.sass b/glob/style/colors.sass index c09f4e9..b4a4be4 100644 --- a/glob/style/colors.sass +++ b/glob/style/colors.sass @@ -1,4 +1,20 @@ -$main-color: #9289f5 -$highlight-color: #FFF -$link-color: #FAA -$bar-color: #2310f7 +$cPrimary: #9289f5 +$cPrimaryVariant: #4c10a5 +$cSecondary: #c889f5 +$cSecondaryVariant: #740bce +$cBackground: #fff +$cBackgroundVariant: #000 +$cSurface: #fff +$cSurfaceVariant: #000 +$cError: #f59289 +$cErrorVariant: #b20a00 +$cOnPrimary: #fff +$cOnSecondary: #000 +$cOnSurface: #000 +$cOnSurfaceShadow: lighten($cOnSurface, 30%) +$cOnSurfaceVariant: #fff +$cOnBackground: #000 +$cOnBackgroundShadow: lighten($cOnBackground, 30%) +$cOnBackgroundVariant: #fff +$cOnError: #000 +$cOnErrorVariant: #fff \ No newline at end of file diff --git a/glob/style/elements.sass b/glob/style/elements.sass new file mode 100644 index 0000000..8315a3e --- /dev/null +++ b/glob/style/elements.sass @@ -0,0 +1,144 @@ +@import layout +@import colors + +.app + background: $cBackground + color: $cOnBackground + user-select: none + ::-webkit-scrollbar + width: 12px + height: 12px + ::-webkit-scrollbar-thumb + background: $cSecondary + ::-webkit-scrollbar-track + background: lighten($cPrimary, 10%) + +.mainview + transition-duration: 1s + box-shadow: 0 5px 5px $cOnSurfaceShadow + background: $cBackground + +.mainview[state=retracted] + width: 80% + +.accentBar + @extend .bar + background: $cSecondary + height: 10px + +.navigationBar + @extend .bar + background: $cPrimary + color: $cOnPrimary + min-height: 35px + box-shadow: 0 5px 5px $cOnSurfaceShadow + position: relative + z-index: 999 + text-align: center + .menu + height: 2em + width: 2em + padding: calc(0.5em + 5px) $sPadding 0.5em + background: url("/icons/menu.svg") no-repeat center, $cPrimary + transition-duration: 0.3s + cursor: pointer + .menu:hover + background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%) + .menu:active + background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%) + .button + background: $cPrimary + padding: 1em $sPadding 0 + height: 2em + float: left + text-align: center + transition-duration: 0.3s + cursor: pointer + border-bottom: 5px solid $cPrimary + span + vertical-align: middle + display: inline-block + .button:hover + background: darken($cPrimary, 4%) + border-bottom: 5px solid darken($cPrimary, 4%) + .button:active + background: lighten($cPrimary, 4%) + border-bottom: 5px solid lighten($cPrimary, 4%) + .current + border-bottom: 5px solid $cSurface !important + .title + padding: 0.5em $sPadding 0.5em + font-size: 18pt + font-weight: bold + text-align: center + width: 100% + +.actionList + background: $cPrimary + color: $cOnPrimary + width: 20% + ul + list-style: none + padding-left: 0 + li + padding: $sPadding + width: 100% + cursor: pointer + transition-duration: 0.3s + li:hover + background: darken($cPrimary, 4%) + li:active + background: lighten($cPrimary, 4%) + +.panelContainer + background: $cSurface + color: $cOnSurface + .panel + transition-duration: 0.3s + background: $cPrimary + color: $cOnPrimary + display: inline-block + position: relative + min-height: 225px + min-width: 225px + padding: $sPadding + max-width: 100vw + max-height: 100vw + margin: 25px + border-radius: $sPadding + box-shadow: 0 5px 5px $cOnSurfaceShadow + cursor: pointer + text-align: justify + .panel:hover + background: darken($cPrimary, 4%) + .panel:active + background: lighten($cPrimary, 4%) + box-shadow: 0 7px 5px $cOnSurfaceShadow + .panel + .title + position: absolute + padding: $sPadding + text-align: center + width: calc(100% - 25px) + top: 0 + left: 0 + font-size: 16pt + font-weight: bold + .icon + position: absolute + padding: $sPadding + left: 0 + top: calc(1em + 12.5px) + height: calc(50% - 50px) + width: calc(100% - 25px) + img + height: 100% + width: auto + margin: 0 calc(50% - 25px) + .description + position: absolute + padding: $sPadding + top: 50% + height: calc(50% - 37.5px) + left: 0 + overflow: auto \ No newline at end of file diff --git a/glob/style/layout.sass b/glob/style/layout.sass new file mode 100644 index 0000000..237a8d7 --- /dev/null +++ b/glob/style/layout.sass @@ -0,0 +1,27 @@ +$sPadding: 12.5px + +.app + width: 100% + min-height: 100% + position: absolute + top: 0 + left: 0 + display: flex + +.mainview + width: 100% + min-height: 100% + position: absolute + right: 0 + +.content + flex: 100% + padding: 25px + +.row + display: flex + +.bar + display: flex + width: 100% + min-height: 10px \ No newline at end of file diff --git a/res/html/about.htm b/res/html/about.htm new file mode 100644 index 0000000..e69521a --- /dev/null +++ b/res/html/about.htm @@ -0,0 +1,21 @@ +
+ +
+

+ The Raspberry pi Communication-Network is a network of Raspberry-Pi's. + It's currently still in development.
The purpose of this server is to + display the status of all raspberry-pi's in the network and the data + of several sensors that are connected to these raspberry pi's. The data + is stored in a database running on the main backend-server. The + frontend-server is running either on a differend device or also on the + backend-server-device. If this is the case, then the data is directly + fetched from several json files instead of using webservices. The json- + files are generated by a script running in the background that get's + data from the database and stores it in these json-files every few + seconds (depending on the type of data). +

+
+
+

+ +

\ No newline at end of file diff --git a/res/html/data.html b/res/html/data.htm similarity index 56% rename from res/html/data.html rename to res/html/data.htm index dc5c3f1..4b367d5 100644 --- a/res/html/data.html +++ b/res/html/data.htm @@ -1,11 +1,6 @@ - - - - - - +

Data

-
+
- - diff --git a/res/html/index.htm b/res/html/index.htm new file mode 100644 index 0000000..4bc0ad8 --- /dev/null +++ b/res/html/index.htm @@ -0,0 +1,21 @@ +
+
+
+ Hey, I am a title +
+
+ +
+
+ This very long app description goes from bottom to top. + Let us force this description into ULTIMATE-OVERFLOW-MODE! + That requires a bit more text so I will just write it here. Looks like it doesn't work +
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/res/html/index.html b/res/html/index.html index baf285a..d28af8e 100644 --- a/res/html/index.html +++ b/res/html/index.html @@ -1,43 +1,37 @@ - - Landing 1 - - -
-

RCN Landing

-
-
- -

- Welcome to the Raspberry Communication Network. -

-

- The Raspberry pi Communication-Network is a network of Raspberry-Pi's. - It's currently still in development.
The purpose of this server is to - display the status of all raspberry-pi's in the network and the data - of several sensors that are connected to these raspberry pi's. The data - is stored in a database running on the main backend-server. The - frontend-server is running either on a differend device or also on the - backend-server-device. If this is the case, then the data is directly - fetched from several json files instead of using webservices. The json- - files are generated by a script running in the background that get's - data from the database and stores it in these json-files every few - seconds (depending on the type of data). -

-
-
-

- -

-
-
-

- This webpage and server can also be found on github: - - RCN-Frontserver - - | GNU GPL v3.0 -

-
- + + Landing 1 + + +
+
+
+
    +
  • + Home +
    • +
  • + Data +
    • +
  • + About +
    • +
+
+
+
+
+
+
+ Title +
+
+
+ +
+
+
+ diff --git a/res/img/icons/menu.svg b/res/img/icons/menu.svg new file mode 100644 index 0000000..b72a742 --- /dev/null +++ b/res/img/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file