Code Review / apps / html5-mixer.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | review | tree
raw | patch | inline | side by side (parent: 24997a5)
FUNCT Add fan speed container
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>
Fri, 5 Jul 2019 07:06:16 +0000 (09:06 +0200)
committerLorenzo Tilve <ltilve@igalia.com>
Tue, 4 Feb 2020 08:42:15 +0000 (09:42 +0100)
src/index.html patch | blob | history
src/styles/landscape.scss patch | blob | history
src/styles/main.scss patch | blob | history
src/styles/portrait.scss patch | blob | history

diff --git a/src/index.html b/src/index.html
index e727743..4541301 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,19 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     </head>
     <body>
-        <div id="fan">
+        <div class="top">
+            <div class="icon">
+                <img src="../images/HMI_HVAC_Fan_Icon.svg">
+            </div>
+            <div class="fanSpeed">
+                <div class="fanSpeedContainer">
+                    <input type="range" min="1" max="100" value="50">
+                    <progress value="50" max="100"></progress>
+                </div>
+                <div class="label">
+                    FAN SPEED
+                </div>
+            </div>
 
         </div>
         <div class="center">
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
index 39ac270..4742273 100644 (file)
--- a/src/styles/landscape.scss
+++ b/src/styles/landscape.scss
@@ -5,8 +5,16 @@
     }
 
     body {
-        .item {
-            flex-basis: 25%;
+
+        .center {
+            width: 80%;
+            float: left;
+        }
+
+        .bottom {
+            flex-direction: column;
+            width: 20%;
         }
+
     }
 }
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index bafd901..59a7b00 100644 (file)
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,6 +2,53 @@
     display: none;
 }
 
+input[type=range] {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 13.8px 0;
+    background: transparent;
+    z-index: 1000;
+}
+
+input[type=range]:focus {
+    outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 8.4px;
+      cursor: pointer;
+      background: transparent;
+}
+
+input[type=range]::-webkit-slider-thumb {
+      height: 32px;
+      width: 32px;
+      border-radius: 16px;
+      background: #FFFFFF;
+      cursor: pointer;
+      -webkit-appearance: none;
+      margin-top: -14px;
+      z-index: 0;
+}
+
+progress {
+    -webkit-appearance: none;
+    height: 8.4px;
+    width: 100%;
+    margin-top: -22px;
+    position: absolute;
+    z-index: -1000;
+}
+
+::-webkit-progress-bar {
+    background: #848286;
+}
+
+::-webkit-progress-value {
+  background-color: #00ADDC;
+}
+
 html {
     height: 100%;
     background-size: cover;
@@ -14,6 +61,31 @@ body {
     color: map-get($colors, font);
     margin: 5%;
 
+    .top {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10%;
+        margin-bottom: 15%;
+
+        .icon {
+            flex-basis: 10%;
+        }
+
+        .fanSpeed {
+            flex-basis: 85%;
+            height: 100%;
+
+            .fanSpeedContainer {
+                position: relative;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
     .center {
         display: flex;
         flex-direction: row;
@@ -67,6 +139,7 @@ body {
                     height: 480px;
                     overflow-y: scroll;
                     scroll-snap-type: y mandatory;
+                    scroll-behavior: smooth;
 
                     .temperature {
                         font-size: 10rem;
@@ -91,6 +164,7 @@ body {
         justify-content: flex-start;
         align-items: flex-start;
         height: 100%;
+        margin-top: 10%;
 
         .button {
             flex-basis: 20%;
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index a4eb732..8c1502d 100644 (file)
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -5,8 +5,8 @@
     }
 
     body {
-        .item {
-            flex-basis: 33%;
+        .center {
+            width: : 100%;
         }
     }
 }
\ No newline at end of file
HTML implementation of the mixer