FUNCT Add temperatures navigation

diff --git a/src/index.html b/src/index.html
index e450e2b..e727743 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,59 @@
                 <img src="../images/HMI_HVAC_ChairIndicator_OFF.svg"/>
             </div>
             <div class="temperatures item">
+                <div class="temperatures-container">
+                    <div class="temperature">
+                        LO
+                    </div>
+                    <div class="temperature">
+                        16º
+                    </div>
+                    <div class="temperature">
+                        17º
+                    </div>
+                    <div class="temperature">
+                        18º
+                    </div>
+                    <div class="temperature">
+                        19º
+                    </div>
+                    <div class="temperature">
+                        20º
+                    </div>
+                    <div class="temperature">
+                        21º
+                    </div>
+                    <div class="temperature">
+                        22º
+                    </div>
+                    <div class="temperature">
+                        23º
+                    </div>
+                    <div class="temperature">
+                        24º
+                    </div>
+                    <div class="temperature">
+                        25º
+                    </div>
+                    <div class="temperature">
+                        26º
+                    </div>
+                    <div class="temperature">
+                        27º
+                    </div>
+                    <div class="temperature">
+                        28º
+                    </div>
+                    <div class="temperature">
+                        29º
+                    </div>
+                    <div class="temperature">
+                        HI
+                    </div>
+                    <div class="temperature">
 
+                    </div>
+                </div>
             </div>
             <div class="block item">
                 <div class="auto item">
@@ -39,7 +91,59 @@
                 </div>
             </div>
             <div class=" temperatures item">
+                <div class="temperatures-container">
+                    <div class="temperature">
+                        LO
+                    </div>
+                    <div class="temperature">
+                        16º
+                    </div>
+                    <div class="temperature">
+                        17º
+                    </div>
+                    <div class="temperature">
+                        18º
+                    </div>
+                    <div class="temperature">
+                        19º
+                    </div>
+                    <div class="temperature">
+                        20º
+                    </div>
+                    <div class="temperature">
+                        21º
+                    </div>
+                    <div class="temperature">
+                        22º
+                    </div>
+                    <div class="temperature">
+                        23º
+                    </div>
+                    <div class="temperature">
+                        24º
+                    </div>
+                    <div class="temperature">
+                        25º
+                    </div>
+                    <div class="temperature">
+                        26º
+                    </div>
+                    <div class="temperature">
+                        27º
+                    </div>
+                    <div class="temperature">
+                        28º
+                    </div>
+                    <div class="temperature">
+                        29º
+                    </div>
+                    <div class="temperature">
+                        HI
+                    </div>
+                    <div class="temperature">
 
+                    </div>
+                </div>
             </div>
         </div>
         <div class="bottom">

diff --git a/src/styles/main.scss b/src/styles/main.scss
index 5fd580e..bafd901 100644 (file)
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -62,24 +62,19 @@ body {
             }
 
             &.temperatures {
-                &:before {
-                    padding-top:150%;
-                }
-
-                .scrolling {
-                    position: relative;
-                    float: left;
+                .temperatures-container {
                     width: 100%;
-                    height: 100%;
-                    overflow: scroll;
+                    height: 480px;
+                    overflow-y: scroll;
+                    scroll-snap-type: y mandatory;
 
                     .temperature {
-                        position: relative;
-                        float: left;
-                        height: 50%;
-                        width: 100%;
                         font-size: 10rem;
                         text-align: center;
+                        width: 100%;
+                        height: 240px;
+                        line-height: 240px;
+                        scroll-snap-align: start;
                     }
                 }
             }