summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-05 09:06:16 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:12:47 +0100
commit71129b86103f205bdf9087a509c5d75cb2bf750d (patch)
tree05aeeb3d1b6f20d2bc9e5abfddb3fa2d89e375b2 /src
parent2a724e9d6f1d28df128d6dba5606d3641228c56e (diff)
FUNCT Add fan speed container
Diffstat (limited to 'src')
-rw-r--r--src/index.html14
-rw-r--r--src/styles/landscape.scss12
-rw-r--r--src/styles/main.scss74
-rw-r--r--src/styles/portrait.scss4
4 files changed, 99 insertions, 5 deletions
diff --git a/src/index.html b/src/index.html
index e727743..4541301 100644
--- 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
--- 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
--- 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
--- 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