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;
|
||||
}
|
||||
|
||||
.phx-modal {
|
||||
opacity: 1!important;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
html, body, div[data-phx-main="true"], main.container, .main-view-component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gthm-logo {
|
||||
|
@ -101,21 +73,22 @@
|
|||
|
||||
.main-view-component {
|
||||
position: relative;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pump-overlay-btn {
|
||||
opacity: 0;
|
||||
.main-view-component svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 61px;
|
||||
top: 384px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#pump-dec-btn {
|
||||
left: 25px;
|
||||
.pump-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pump-inc-btn {
|
||||
left: 115px;
|
||||
.pump-btn-loading:hover {
|
||||
cursor: progress;
|
||||
}
|
||||
|
|
|
@ -19,8 +19,6 @@ pre{padding: 1em;}
|
|||
|
||||
.container{
|
||||
margin: 0 auto;
|
||||
max-width: 80.0rem;
|
||||
padding: 0 2.0rem;
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
|
|
@ -87,6 +87,8 @@ defmodule GeoTherminatorWeb do
|
|||
# Import basic rendering functionality (render, render_layout, etc)
|
||||
import Phoenix.View
|
||||
|
||||
alias Phoenix.LiveView.JS
|
||||
|
||||
import GeoTherminatorWeb.ErrorHelpers
|
||||
import GeoTherminatorWeb.Gettext
|
||||
alias GeoTherminatorWeb.Router.Helpers, as: Routes
|
||||
|
|
|
@ -22,10 +22,8 @@
|
|||
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)">
|
||||
<switch>
|
||||
<text x="185" y="498" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @outdoor_temp %>°C</text>
|
||||
</switch>
|
||||
<text x="185" y="498" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @outdoor_temp %>°C</text>
|
||||
</g>
|
||||
<rect x="10" y="468" width="30" height="40" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)"
|
||||
pointer-events="none" />
|
||||
|
@ -47,12 +45,12 @@
|
|||
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" />
|
||||
<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-anchor="end"><%= @set_temp %>°C</text>
|
||||
</switch>
|
||||
<text x="185" y="354" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @set_temp %>°C</text>
|
||||
</g>
|
||||
<rect
|
||||
id="dec-tmp-rect"
|
||||
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||
x="25"
|
||||
y="384"
|
||||
width="60"
|
||||
|
@ -61,15 +59,24 @@
|
|||
ry="9"
|
||||
fill={if @set_temp_active, do: "#ccc", else: "url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)"}
|
||||
stroke="#6c8ebf"
|
||||
pointer-events="none"
|
||||
phx-click="dec_temp"
|
||||
/>
|
||||
<g transform="translate(-0.5 -0.5)">
|
||||
<switch>
|
||||
<text x="55" y="424" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="middle">-</text>
|
||||
</switch>
|
||||
<text
|
||||
id="dec-tmp-text"
|
||||
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||
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>
|
||||
<rect
|
||||
id="inc-tmp-rect"
|
||||
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||
x="115"
|
||||
y="384"
|
||||
width="60"
|
||||
|
@ -78,13 +85,20 @@
|
|||
ry="9"
|
||||
fill={if @set_temp_active, do: "#ccc", else: "url(#mx-gradient-f8cecc-1-ea6b66-1-s-0)"}
|
||||
stroke="#b85450"
|
||||
pointer-events="none"
|
||||
phx-click="inc_temp"
|
||||
/>
|
||||
<g transform="translate(-0.5 -0.5)">
|
||||
<switch>
|
||||
<text x="145" y="424" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="middle">+</text>
|
||||
</switch>
|
||||
<text
|
||||
id="inc-tmp-text"
|
||||
class={"pump-btn #{if @set_temp_active, do: "pump-btn-loading"}"}
|
||||
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>
|
||||
<path d="M 50 144 L 50 24 L 480 24" fill="none" stroke="#b85450" stroke-width="4" stroke-miterlimit="10"
|
||||
pointer-events="none" />
|
||||
|
@ -100,38 +114,28 @@
|
|||
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" />
|
||||
<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-anchor="end"><%= @brine_in %>°C</text>
|
||||
</switch>
|
||||
<text x="463" y="594" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @brine_in %>°C</text>
|
||||
</g>
|
||||
<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)">
|
||||
<switch>
|
||||
<text x="463" y="534" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @brine_out %>°C</text>
|
||||
</switch>
|
||||
<text x="463" y="534" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @brine_out %>°C</text>
|
||||
</g>
|
||||
<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)">
|
||||
<switch>
|
||||
<text x="463" y="332" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @supply_in %>°C</text>
|
||||
</switch>
|
||||
<text x="463" y="332" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @supply_in %>°C</text>
|
||||
</g>
|
||||
<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)">
|
||||
<switch>
|
||||
<text x="463" y="273" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @supply_out %>°C</text>
|
||||
</switch>
|
||||
<text x="463" y="273" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="34px"
|
||||
text-anchor="end"><%= @supply_out %>°C</text>
|
||||
</g>
|
||||
<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)">
|
||||
<switch>
|
||||
<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>
|
||||
</switch>
|
||||
<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>
|
||||
</g>
|
||||
<rect x="269" y="284" width="40" height="10" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)"
|
||||
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"
|
||||
stroke="rgba(0, 0, 0, 1)" stroke-miterlimit="10" pointer-events="none" />
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
<%= live_redirect("« Go back", to: Routes.live_path(@socket, GeoTherminatorWeb.MainLive.Index)) %>
|
||||
|
||||
<%= if is_nil(@pid) do %>
|
||||
Some fail happened.
|
||||
<% else %>
|
||||
|
|
|
@ -10,21 +10,6 @@
|
|||
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
|
||||
</head>
|
||||
<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 %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 11 KiB |
Loading…
Reference in a new issue