Refactor for better UI
This commit is contained in:
parent
20ac755c28
commit
f639500d91
7 changed files with 58 additions and 118 deletions
|
@ -53,39 +53,11 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phx-modal {
|
html, body, div[data-phx-main="true"], main.container, .main-view-component {
|
||||||
opacity: 1!important;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
margin: 0;
|
||||||
background-color: rgb(0,0,0);
|
padding: 0;
|
||||||
background-color: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.phx-modal-content {
|
|
||||||
background-color: #fefefe;
|
|
||||||
margin: 15vh auto;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #888;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phx-modal-close {
|
|
||||||
color: #aaa;
|
|
||||||
float: right;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.phx-modal-close:hover,
|
|
||||||
.phx-modal-close:focus {
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gthm-logo {
|
.gthm-logo {
|
||||||
|
@ -101,21 +73,22 @@
|
||||||
|
|
||||||
.main-view-component {
|
.main-view-component {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pump-overlay-btn {
|
.main-view-component svg {
|
||||||
opacity: 0;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
position: absolute;
|
margin: 0 auto;
|
||||||
width: 60px;
|
|
||||||
height: 61px;
|
|
||||||
top: 384px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#pump-dec-btn {
|
.pump-btn:hover {
|
||||||
left: 25px;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pump-inc-btn {
|
.pump-btn-loading:hover {
|
||||||
left: 115px;
|
cursor: progress;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,8 +19,6 @@ pre{padding: 1em;}
|
||||||
|
|
||||||
.container{
|
.container{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 80.0rem;
|
|
||||||
padding: 0 2.0rem;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
|
@ -87,6 +87,8 @@ defmodule GeoTherminatorWeb do
|
||||||
# Import basic rendering functionality (render, render_layout, etc)
|
# Import basic rendering functionality (render, render_layout, etc)
|
||||||
import Phoenix.View
|
import Phoenix.View
|
||||||
|
|
||||||
|
alias Phoenix.LiveView.JS
|
||||||
|
|
||||||
import GeoTherminatorWeb.ErrorHelpers
|
import GeoTherminatorWeb.ErrorHelpers
|
||||||
import GeoTherminatorWeb.Gettext
|
import GeoTherminatorWeb.Gettext
|
||||||
alias GeoTherminatorWeb.Router.Helpers, as: Routes
|
alias GeoTherminatorWeb.Router.Helpers, as: Routes
|
||||||
|
|
|
@ -22,10 +22,8 @@
|
||||||
pointer-events="none" />
|
pointer-events="none" />
|
||||||
<rect x="90" y="464" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="90" y="464" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="185" y="498" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="185" y="498" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @outdoor_temp %>°C</text>
|
||||||
text-anchor="end"><%= @outdoor_temp %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect x="10" y="468" width="30" height="40" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)"
|
<rect x="10" y="468" width="30" height="40" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)"
|
||||||
pointer-events="none" />
|
pointer-events="none" />
|
||||||
|
@ -47,12 +45,12 @@
|
||||||
stroke-miterlimit="10" pointer-events="none" />
|
stroke-miterlimit="10" pointer-events="none" />
|
||||||
<rect x="90" y="320" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="90" y="320" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="185" y="354" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="185" y="354" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @set_temp %>°C</text>
|
||||||
text-anchor="end"><%= @set_temp %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect
|
<rect
|
||||||
|
id="dec-tmp-rect"
|
||||||
|
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||||
x="25"
|
x="25"
|
||||||
y="384"
|
y="384"
|
||||||
width="60"
|
width="60"
|
||||||
|
@ -61,15 +59,24 @@
|
||||||
ry="9"
|
ry="9"
|
||||||
fill={if @set_temp_active, do: "#ccc", else: "url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)"}
|
fill={if @set_temp_active, do: "#ccc", else: "url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)"}
|
||||||
stroke="#6c8ebf"
|
stroke="#6c8ebf"
|
||||||
pointer-events="none"
|
phx-click="dec_temp"
|
||||||
/>
|
/>
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text
|
||||||
<text x="55" y="424" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
id="dec-tmp-text"
|
||||||
text-anchor="middle">-</text>
|
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||||
</switch>
|
x="55"
|
||||||
|
y="424"
|
||||||
|
fill="rgba(0, 0, 0, 1)"
|
||||||
|
font-family="Helvetica"
|
||||||
|
font-size="34px"
|
||||||
|
text-anchor="middle"
|
||||||
|
phx-click="dec_temp"
|
||||||
|
>-</text>
|
||||||
</g>
|
</g>
|
||||||
<rect
|
<rect
|
||||||
|
id="inc-tmp-rect"
|
||||||
|
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||||
x="115"
|
x="115"
|
||||||
y="384"
|
y="384"
|
||||||
width="60"
|
width="60"
|
||||||
|
@ -78,13 +85,20 @@
|
||||||
ry="9"
|
ry="9"
|
||||||
fill={if @set_temp_active, do: "#ccc", else: "url(#mx-gradient-f8cecc-1-ea6b66-1-s-0)"}
|
fill={if @set_temp_active, do: "#ccc", else: "url(#mx-gradient-f8cecc-1-ea6b66-1-s-0)"}
|
||||||
stroke="#b85450"
|
stroke="#b85450"
|
||||||
pointer-events="none"
|
phx-click="inc_temp"
|
||||||
/>
|
/>
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text
|
||||||
<text x="145" y="424" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
id="inc-tmp-text"
|
||||||
text-anchor="middle">+</text>
|
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||||
</switch>
|
x="145"
|
||||||
|
y="424"
|
||||||
|
fill="rgba(0, 0, 0, 1)"
|
||||||
|
font-family="Helvetica"
|
||||||
|
font-size="34px"
|
||||||
|
text-anchor="middle"
|
||||||
|
phx-click="inc_temp"
|
||||||
|
>+</text>
|
||||||
</g>
|
</g>
|
||||||
<path d="M 50 144 L 50 24 L 480 24" fill="none" stroke="#b85450" stroke-width="4" stroke-miterlimit="10"
|
<path d="M 50 144 L 50 24 L 480 24" fill="none" stroke="#b85450" stroke-width="4" stroke-miterlimit="10"
|
||||||
pointer-events="none" />
|
pointer-events="none" />
|
||||||
|
@ -100,38 +114,28 @@
|
||||||
stroke-miterlimit="10" pointer-events="none" />
|
stroke-miterlimit="10" pointer-events="none" />
|
||||||
<rect x="368" y="560" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="368" y="560" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="463" y="594" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="463" y="594" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @brine_in %>°C</text>
|
||||||
text-anchor="end"><%= @brine_in %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect x="368" y="500" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="368" y="500" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="463" y="534" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="463" y="534" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @brine_out %>°C</text>
|
||||||
text-anchor="end"><%= @brine_out %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect x="368" y="298" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="368" y="298" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="463" y="332" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="463" y="332" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @supply_in %>°C</text>
|
||||||
text-anchor="end"><%= @supply_in %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect x="368" y="239" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="368" y="239" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="463" y="273" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="463" y="273" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @supply_out %>°C</text>
|
||||||
text-anchor="end"><%= @supply_out %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect x="168" y="32" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
<rect x="168" y="32" width="97" height="48" fill="rgba(255, 255, 255, 1)" stroke="none" pointer-events="none" />
|
||||||
<g transform="translate(-0.5 -0.5)">
|
<g transform="translate(-0.5 -0.5)">
|
||||||
<switch>
|
<text x="263" y="66" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||||
<text x="263" y="66" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
text-anchor="end"><%= @hot_water_temp %>°C</text>
|
||||||
text-anchor="end"><%= @hot_water_temp %>°C</text>
|
|
||||||
</switch>
|
|
||||||
</g>
|
</g>
|
||||||
<rect x="269" y="284" width="40" height="10" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)"
|
<rect x="269" y="284" width="40" height="10" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)"
|
||||||
pointer-events="none" />
|
pointer-events="none" />
|
||||||
|
@ -176,25 +180,5 @@
|
||||||
<path d="M 280 506 C 280 514.28 269.93 521 257.5 521 C 245.07 521 235 514.28 235 506" fill="none"
|
<path d="M 280 506 C 280 514.28 269.93 521 257.5 521 C 245.07 521 235 514.28 235 506" fill="none"
|
||||||
stroke="rgba(0, 0, 0, 1)" stroke-miterlimit="10" pointer-events="none" />
|
stroke="rgba(0, 0, 0, 1)" stroke-miterlimit="10" pointer-events="none" />
|
||||||
</g>
|
</g>
|
||||||
<switch>
|
|
||||||
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" /><a transform="translate(0,-5)"
|
|
||||||
xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle"
|
|
||||||
font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a>
|
|
||||||
</switch>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<button
|
|
||||||
id="pump-inc-btn"
|
|
||||||
class="pump-overlay-btn"
|
|
||||||
type="button"
|
|
||||||
phx-click="inc_temp"
|
|
||||||
title="Increase temperature"
|
|
||||||
></button>
|
|
||||||
<button
|
|
||||||
id="pump-dec-btn"
|
|
||||||
class="pump-overlay-btn"
|
|
||||||
type="button"
|
|
||||||
phx-click="dec_temp"
|
|
||||||
title="Decrease temperature"
|
|
||||||
></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
<%= live_redirect("« Go back", to: Routes.live_path(@socket, GeoTherminatorWeb.MainLive.Index)) %>
|
|
||||||
|
|
||||||
<%= if is_nil(@pid) do %>
|
<%= if is_nil(@pid) do %>
|
||||||
Some fail happened.
|
Some fail happened.
|
||||||
<% else %>
|
<% else %>
|
||||||
|
|
|
@ -10,21 +10,6 @@
|
||||||
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
|
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<section class="container">
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
|
|
||||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
|
||||||
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
|
|
||||||
<% end %>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<a href="/" class="gthm-logo">
|
|
||||||
<img src={Routes.static_path(@conn, "/images/geotherminator.png")} alt="GeoTherminator logo"/>
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
</header>
|
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 11 KiB |
Loading…
Reference in a new issue