HTML redesign
- changed to the webapp approach - rebuild it from scratchpull/18/head^2
Trivernis
6 years ago
parent
27681d42aa
commit
1a7cda36f2
@ -1,4 +1,20 @@
|
|||||||
$main-color: #9289f5
|
$cPrimary: #9289f5
|
||||||
$highlight-color: #FFF
|
$cPrimaryVariant: #4c10a5
|
||||||
$link-color: #FAA
|
$cSecondary: #c889f5
|
||||||
$bar-color: #2310f7
|
$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
|
||||||
@ -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
|
||||||
@ -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
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<div style="width: 100%; margin: auto">
|
||||||
|
<img src="RCN-Logo.png" style="margin: 0 calc(50% - 25px); max-width: 100px; height: auto"/>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
The Raspberry pi Communication-Network is a network of Raspberry-Pi's.
|
||||||
|
It's currently still in development. <br> 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).
|
||||||
|
</p>
|
||||||
|
<div class="spacer">
|
||||||
|
</div>
|
||||||
|
<p class="justify">
|
||||||
|
|
||||||
|
</p>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<div class="panelContainer">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="title">
|
||||||
|
<span>Hey, I am a title</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="RCN-Logo.png">
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<span>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</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>
|
||||||
|
After Width: | Height: | Size: 196 B |
Loading…
Reference in New Issue