Skip to content

Commit

Permalink
Divided lite dashboard to bars and content #96
Browse files Browse the repository at this point in the history
  • Loading branch information
@haimkastner
haimkastner committed Jan 22, 2020
1 parent 204de48 commit 8aa1b53
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 49 deletions.
Binary file modified docs/screenshots/light-dashboard.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 47 additions & 19 deletions frontend/src/light-app/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,45 @@ body {
display: none;
}

.app-bar-container {
background-color: #3b3b47;
display: inline-flex;
position: fixed;
height: 80px;
width: 100vh;
top: 0;
left: 0;
align-items: center;
text-align: center;
}

.power-off-container {
position: absolute;
margin: 0;
margin: 10px;
padding: 0;
}

.dashboard-link-container {
position: absolute;
margin-left: calc(50vw - 70px);
}

.casanet-title {
color: #6dbdb9;
font-family: helvetica;
text-decoration: none;
text-transform: uppercase;
}

.casanet-title:hover {
color: #126d68;
cursor: pointer;
}

#minions-container {
margin-top: 80px;
}

#power-on {
cursor: pointer;
fill: #6dbdb9;
Expand All @@ -42,23 +75,13 @@ body {
color: #737471;
}

.dashboard-link {
color: rgb(124, 124, 182);
font-family: helvetica;
text-decoration: none;
text-transform: uppercase;
}

.dashboard-link:hover {
color: rgb(155, 155, 232);
cursor: pointer;
}
.room {
margin-top: 3em;
margin-top: 30px;
}

.room-name {
color: #797990;
margin-bottom: 2px;
}

.button {
Expand Down Expand Up @@ -108,18 +131,23 @@ body {
box-shadow: inset 1px 0 1px #33333d;
}

.sw-container {
position: absolute;
bottom: 0;
text-align: left;
.bottom-bar {
display: inline-block;
position: fixed;
bottom: 5px;
color: rgb(155, 155, 232);
font-family: helvetica;
text-decoration: none;
text-transform: uppercase;
font-size: xx-small;
}

.sw-command:hover {
.sw-container {
left: 10px;
text-align: left;
}

.bottom-bar-command:hover {
color: rgb(97, 97, 192);
cursor: pointer;
}
}
64 changes: 34 additions & 30 deletions frontend/src/light-app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,38 @@
</head>

<body>
<div class="power-off-container">
<div id="power-on" class="hide" onclick="powerAllOff()">
<p class="power-on-text power-on-item">Power Off</p>
<svg class="power-on-item" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" />
</svg>
<div class="app-bar-container">
<div class="power-off-container">
<div id="power-on" class="hide" onclick="powerAllOff()">
<p class="power-on-text power-on-item">Power Off</p>
<svg class="power-on-item" xmlns="http://www.w3.org/2000/svg" width="50" height="50"
viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" />
</svg>
</div>
<div id="power-off" class="hide">
<div style="margin-top: 13px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" />
</svg>
</div>
<div id="power-sync" class="hide">
<div style="margin-top: 13px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</div>
</div>
<div id="power-off" class="hide">
<div style="margin-top: 13px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" />
</svg>
</div>
<div id="power-sync" class="hide">
<div style="margin-top: 13px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</div>
</div>

<div>
<a class="dashboard-link" target="_blank" href="/">Full dashboard</a>
<div class="dashboard-link-container">
<a class="casanet-title" target="_blank" href="/">Casanet dashboard</a>
</div>
</div>

<div id="welcome-message">
Expand All @@ -48,11 +51,12 @@ <h2 style="text-align:center;">Loading...</h2>
<div id="minions-container">
</div>

<div class="sw-container">
<a class="sw-command" onclick="registerSW()">register</a>
<div class="bottom-bar sw-container">
<a class="bottom-bar-command" onclick="registerSW()">register</a>
<br>
<a class="sw-command" onclick="unRegisterSW()">unregister</a>
<a class="bottom-bar-command" onclick="unRegisterSW()">unregister</a>
</div>

</body>
<script src="./index.js"></script>

Expand Down

0 comments on commit 8aa1b53

Please sign in to comment.