Refactor for better UI

assets/css/app.css

@@ -53,39 +53,11 @@
   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%;
   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 {
@@ -101,21 +73,22 @@
 
 .main-view-component {
   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;
 }

assets/css/phoenix.css

@@ -19,8 +19,6 @@ pre{padding: 1em;}
 
 .container{
   margin: 0 auto;
-  max-width: 80.0rem;
-  padding: 0 2.0rem;
   position: relative;
   width: 100%
 }

lib/geo_therminator_web/geo_therminator_web.ex

@@ -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

lib/geo_therminator_web/live/components/main_view.html.heex

@@ -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 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>
       <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 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>
       <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
-          <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>
       <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
-          <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>
       <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 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>
       <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 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>
       <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 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>
       <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 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>
       <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 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>
       <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>

lib/geo_therminator_web/live/main/pump.html.heex

@@ -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 %>

lib/geo_therminator_web/templates/layout/root.html.heex

@@ -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>