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

- removed arrows from number input - changed font weight to 400 and size
oneils · Sep 14, 2023 · 9de3f3e · 9de3f3e
1 parent afc35be
commit 9de3f3e
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 29 deletions.
diff --git a/backend/app/server/templates.go b/backend/app/server/templates.go
@@ -79,7 +79,9 @@ func (s Server) render(w http.ResponseWriter, status int, page string, tmplName
 // renders the home page
 func (s Server) indexCtrl(w http.ResponseWriter, r *http.Request) {
 	data := templateData{
-		Form:    createMsgForm{},
+		Form: createMsgForm{
+			Exp: 15,
+		},
 		PinSize: s.PinSize,
 	}
 	s.render(w, http.StatusOK, "home.tmpl.html", baseTmpl, data)

diff --git a/backend/ui/html/pages/home.tmpl.html b/backend/ui/html/pages/home.tmpl.html
@@ -2,7 +2,7 @@
 
 {{define "main"}}
 
-<form hx-post="/secure-link" hx-indicator="#spinner" hx-swap="outerHTML" hx-target="this" hx-boost="true">
+<form hx-post="/secure-link" hx-swap="outerHTML" hx-target="this" hx-boost="true">
     <div class="container">
         <div class="row">
             <div class="col-12">
@@ -53,7 +53,12 @@
 
             <div class="expire-container col-12">
                 <div>
-                    <label for="exp">Expire in</label>
+                    <label for="exp">Expire in
+                      <span class="tooltip">
+                           <img src="/static/img/info.png" alt="tooltip">
+                        <span class="tooltip-text">Expiration must be less than N days (hours) </span>
+                      </span>
+                    </label>
                 </div>
 
                 <div class="form-row">
@@ -74,9 +79,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">

diff --git a/backend/ui/html/partials/footer.tmpl.html b/backend/ui/html/partials/footer.tmpl.html
@@ -1,6 +1,6 @@
 {{define "footer"}}
 <footer>
     <div class="footer-text"><a href="/about">How SafeSecret works</a> </div>
-    <div class="footer-text">Source code available on <a href="https://github.com/umputun/secrets" target="_blank">GitHub</a>.</div>
+    <div class="footer-text">Source code available on <a href="https://github.com/umputun/secrets" target="_blank">GitHub</a></div>
 </footer>
 {{end}}
diff --git a/backend/ui/static/css/main.css b/backend/ui/static/css/main.css
@@ -6,14 +6,14 @@ body {
     font-family: 'Roboto', sans-serif;;
     font-size: 28px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 300;
     line-height: normal;
     min-width: 380px;
 }
 
 @media (max-width: 575px) {
     body {
-        font-size: 24px;
+        /*font-size: 24px;*/
     }
 }
 
@@ -50,8 +50,8 @@ textarea {
 }
 
 input[type=text], input[type=password], input[type=number] {
-    font-weight: 600;
-    font-size: 24px;
+    font-weight: 400;
+    font-size: 22px;
     background: #373F5D;
     color: #FFF;
     height: 54px;
@@ -61,10 +61,21 @@ input[type=text], input[type=password], input[type=number] {
     border-radius: 8px;
 }
 
+input[type="number"] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
+
 select {
     height: 54px;
-    font-size: 24px;
-    font-weight: 600;
+    font-size: 22px;
+    font-weight: 400;
     color: #FFF;
     background: #373F5D;
     padding: 5px 20px 5px 20px;
@@ -81,7 +92,7 @@ select {
 }
 
 header {
-    margin-top: 80px;
+    margin-top: 60px;
     display: flex;
     justify-content: center;
 }
@@ -91,18 +102,19 @@ main {
     margin-top: 60px;
 }
 
-.logo {
-    width: 211px;
-    height: 55px;
-    flex-shrink: 0;
+.container {
+    max-width: 846px !important;
+}
+
+.logo img {
+    height: 90px;
 }
 
 .form-row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -5px;
     margin-left: -15px;
-    align-items: center;
 }
 
 .msg-container textarea {
@@ -123,6 +135,46 @@ main {
     margin-top: 40px;
 }
 
+.tooltip-text {
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+
+    visibility: hidden;
+    width: 223px;
+    background-color: #616B90;
+    color: #fff;
+    text-align: left;
+    border-radius: 8px;
+    padding: 5px 10px 5px 10px;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+}
+
+.tooltip .tooltip-text {
+    top: -33px;
+    left: 150px;
+    transition: opacity 0.5s;
+}
+
+.tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    margin-top: 8px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent #616B90 transparent transparent;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
 @media (max-width: 575px) {
     .pin-container {
         margin-top: 20px;
@@ -160,8 +212,8 @@ main {
     background: #3E65FB;
     color: #FFF;
     text-align: center;
-    font-size: 24px;
-    font-weight: 600;
+    font-size: 22px;
+    font-weight: 400;
     cursor: pointer;
 
     width: 100%;
@@ -188,11 +240,11 @@ main {
     border: 2px solid #3E65FB;
     color: #FFF;
     text-align: center;
-    font-size: 24px;
-    font-weight: 600;
+    font-size: 22px;
+    font-weight: 400;
     display: block;
     line-height: 40px;
-    white-space:nowrap;
+    white-space: nowrap;
 
     width: 100%;
     height: 54px;
@@ -248,19 +300,27 @@ main {
     margin-top: 15px;
 }
 
+.msg-link-text textarea {
+    padding: 30px 17px 30px 17px;
+}
+
 .show-msg {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .load-msg-form {
-    width: 374px;
+    max-width: 374px;
 }
 
 @keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 .error {
@@ -275,7 +335,7 @@ main {
 }
 
 .error + textarea, .error + input, .error + select {
-    border:1px solid #FDB3B3;
+    border: 1px solid #FDB3B3;
 }
 
 .error-block {
@@ -290,7 +350,7 @@ main {
     margin-bottom: 20px;
 }
 
-.how-it-works h1{
+.how-it-works h1 {
     font-family: 'Stick No Bills', sans-serif;
     font-size: 32px;
     color: #FFFFFF;

diff --git a/backend/ui/static/img/info.png b/backend/ui/static/img/info.png