Issue umputun#31: Replace separate UI with the embedded HTMX based

- fixed layout for the share message screen
oneils · Sep 13, 2023 · afc35be · afc35be
1 parent bccc44e
commit afc35be
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/backend/ui/html/pages/about.tmpl.html b/backend/ui/html/pages/about.tmpl.html
@@ -17,7 +17,7 @@ <h1>How it works</h1>
 
 <div class="main-btn-container col col-md-6">
     <input type="submit" class="main-btn" role="button"
-           value="Generate Secure Link">
+           value="Generate Secure Link" />
 </div>
 
 {{end}}
diff --git a/backend/ui/html/pages/home.tmpl.html b/backend/ui/html/pages/home.tmpl.html
@@ -35,8 +35,7 @@
                                id="pin"
                                placeholder="12345"
                                minlength={{.PinSize}}
-                               maxlength={{.PinSize}}
-                        >
+                               maxlength={{.PinSize}} />
                     </div>
 
                     <div class="col">
@@ -66,7 +65,7 @@
                                id="exp"
                                placeholder="10"
                                required
-                               value={{.Form.Exp}}/>
+                               value={{.Form.Exp}} />
 
                     </div>
 
@@ -75,12 +74,9 @@
                         <label class='error' style="display: none"></label>
                         {{end}}
                         <select name="expUnit">
-                            <option value="m" {{if eq .Form.ExpUnit
-                            "s"}}selected{{end}}>Minutes</option>
-                            <option value="h" {{if eq .Form.ExpUnit
-                            "h"}}selected{{end}}>Hours</option>
-                            <option value="d" {{if eq .Form.ExpUnit
-                            "d"}}selected{{end}}>Days</option>
+                            <option value="m" {{if eq .Form.ExpUnit "s"}}selected{{end}}>Minutes</option>
+                            <option value="h" {{if eq .Form.ExpUnit "h"}}selected{{end}}>Hours</option>
+                            <option value="d" {{if eq .Form.ExpUnit "d"}}selected{{end}}>Days</option>
                         </select>
                     </div>
                     <div class="exp-errors">
@@ -94,7 +90,7 @@
 
                     <div class="main-btn-container col col-md-6">
                         <input type="submit" class="main-btn" role="button"
-                               value="Generate Secure Link">
+                               value="Generate Secure Link" />
                     </div>
                 </div>
 

diff --git a/backend/ui/html/pages/show-message.tmpl.html b/backend/ui/html/pages/show-message.tmpl.html
@@ -4,7 +4,7 @@
 
 <div id="show-msg" class="show-msg">
     <form hx-post="/load-message" hx-swap="outerHTML" hx-target="#show-msg" id="load-msg-form" class="load-msg-form">
-        <input type="hidden" name="key" id="key" value={{.Form.Key}}>
+        <input type="hidden" name="key" id="key" value={{.Form.Key}} />
 
         <label for="pin">Enter PIN to see content</label>
         {{with .Form.FieldErrors.pin}}
@@ -16,8 +16,7 @@
                required
                placeholder="12345"
                minlength={{.PinSize}}
-               maxlength={{.PinSize}}
-        />
+               maxlength={{.PinSize}} />
 
         {{with .Form.FieldErrors.pin}}
         <label class='error'>{{.}}</label>

diff --git a/backend/ui/html/partials/secure-link.tmpl.html b/backend/ui/html/partials/secure-link.tmpl.html
@@ -4,7 +4,7 @@
 
 <div id="msg-link" class="row" data-copy>
     <div class="col-12">
-        <label for="msg-text">Copy this link to access your secret content (Expire on {{.Expire}}):</label>
+        <label for="msg-text">Copy this link to access your secret content</label>
     </div>
 
     <div class="msg-link-text col-12">

diff --git a/backend/ui/static/css/main.css b/backend/ui/static/css/main.css
@@ -192,6 +192,7 @@ main {
     font-weight: 600;
     display: block;
     line-height: 40px;
+    white-space:nowrap;
 
     width: 100%;
     height: 54px;
@@ -226,6 +227,18 @@ main {
     transition-timing-function: ease;
 }
 
+@media (max-width: 991px) {
+    .second-btn {
+        padding: 5px 10px 5px 10px;
+    }
+}
+
+@media (max-width: 767px) {
+    div .second-btn {
+        margin-top: 10px;
+    }
+}
+
 .decode-btn {
     margin-top: 40px;
 }