[#327] UI refactoring

ruuvi · Nov 23, 2023 · 5c6c6d3 · 5c6c6d3
1 parent 1f11cd6
commit 5c6c6d3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/index.html b/src/index.html
@@ -54,6 +54,11 @@ <h1>
             </div>
 
             <div id="auth-user_login" class="hidden" style="max-width: 300px">
+                <div class="ingress">
+                    <p lang="en">stub text</p>
+                    <p lang="fi">stub text</p>
+                </div>
+
                 <div id="auth-user-div">
                     <h3>
                         <label for="auth-user">
@@ -664,7 +669,7 @@ <h2>
                             <span lang="en">Server for automatic firmware updates</span>
                             <span lang="fi">Automaattisille ohjelmistopäivityksille käytettävä palvelin</span>
                         </div>
-                        <a class="info-icon-button" href="#popup-info-icon-button-fw_update_url_title">i</a>
+                        <a class="info-icon-button" href="#popup-info-icon-button-fw_update_url_title"><span>i</span></a>
                     </div>
 
                     <div>
@@ -720,7 +725,7 @@ <h3>
                             <input type="checkbox" id="software_update-set-url-manually">
                             <span class="control_indicator"></span>
                         </span>
-                            <a class="info-icon-button" href="#popup-info-icon-software_update">i</a>
+                            <a class="info-icon-button" href="#popup-info-icon-software_update"><span>i</span></a>
                         </label>
                     </div>
                     <div id="page-software_update-fw_update_binary_files-div" class="input-container indent">
@@ -985,7 +990,7 @@ <h2>
                             <span lang="fi">Anna Ruuvi Gateway -reittimen määritykset sisältävän JSON-tiedoston URL-osoite tai sen kansion
                                 URL-osoite, jossa on JSON-tiedostot jokaiselle Ruuvi Gatewaylle.</span>
                         </div>
-                        <a class="info-icon-button" href="#popup-info-icon-button-remote_cfg">i</a>
+                        <a class="info-icon-button" href="#popup-info-icon-button-remote_cfg"><span>i</span></a>
                     </div>
 
                     <div>
@@ -2794,7 +2799,7 @@ <h2>
                         <input type="radio" name="company_use_filtering" value="2">
                         <span class="control_indicator"></span>
                     </span>
-                    <a class="info-icon-button" href="#popup-info-icon-scanning">i</a>
+                    <a class="info-icon-button" href="#popup-info-icon-scanning"><span>i</span></a>
                 </label>
 
                 <label class="control control-radio">

diff --git a/src/scss/_main.scss b/src/scss/_main.scss
@@ -754,6 +754,7 @@ select {
 }
 
 .info-icon-left-column {
+	display: block;
 	float: left;
 	width: calc(100% - 3em);
 	min-height: calc(var(--info-size) + var(--info-margin-top) + var(--info-margin-bottom));
@@ -768,7 +769,7 @@ select {
 	display: inline-block;
 	width: var(--info-size);
 	height: var(--info-size);
-	line-height: 1.6em;
+	line-height: 0.9em;
 	font-family: "Montserrat", sans-serif;
 	color: rgba(255, 255, 255, 0.8);
 	background-color: var(--color-primary);
@@ -782,6 +783,11 @@ select {
 	cursor: pointer;
 }
 
+.info-icon-button span {
+	display: block;
+	padding: 4px;
+}
+
 .info-icon-overlay {
 	position: fixed;
 	top: 0;