aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-10-16 23:46:48 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 09:42:15 +0100
commitda78790720ccad29e40bbe08aa8924ea8f8f1d2c (patch)
treeaae39a8384446bd67a9ee8756162d2eb5d7d261b
parent6d32da2617e3545589da4e139484d75a4591bfe7 (diff)
FUNCT Add support for landscape and portrait using 1080 and 720
-rw-r--r--src/index.html2
-rw-r--r--src/styles/1080.scss0
-rw-r--r--src/styles/720.scss36
-rw-r--r--src/styles/app.scss28
-rw-r--r--src/styles/landscape.scss17
-rw-r--r--src/styles/main.scss52
6 files changed, 98 insertions, 37 deletions
diff --git a/src/index.html b/src/index.html
index 6b2ed01..5dac7c5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
<h1 class="header">
Mixer
</h1>
- <div id="SliderContainer"></div>
+ <div id="SliderContainer" class="sliderContainer"></div>
<script id="slider-template" type="x-tmpl-mustache">
<div class="entry" id="slider-{{id}}" slider-id="{{ id }}" value="{{ value }}">
<div class="label">
diff --git a/src/styles/1080.scss b/src/styles/1080.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/styles/1080.scss
diff --git a/src/styles/720.scss b/src/styles/720.scss
new file mode 100644
index 0000000..aea58eb
--- /dev/null
+++ b/src/styles/720.scss
@@ -0,0 +1,36 @@
+input[type=range] {
+ margin: 13.8px 0;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ height: 8.4px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+ height: 36px;
+ width: 36px;
+ border-radius: 18px;
+ margin-top: 0px;
+}
+
+progress {
+ height: 12px;
+ margin-top: -6px;
+}
+
+body {
+ font-size: 1.2em;
+
+ a {
+ font-size: 2em;
+ }
+
+
+ .content {
+ .sliderContainer {
+ .entry {
+ height: 90px;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d97030b..cbba7fc 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -3,8 +3,28 @@ $colors: (
font: #FFFFFF,
grey: #848286
);
+@media (max-device-width: 720px) and (orientation: portrait) {
+ @import "main.scss";
+ @import "portrait.scss";
+ @import "720.scss";
+}
-@import "style.css";
-@import "main.scss";
-@import "portrait.scss";
-@import "landscape.scss"; \ No newline at end of file
+@media (max-device-width: 1280px) and (orientation: landscape) {
+ @import "main.scss";
+ @import "landscape.scss";
+ @import "720.scss";
+}
+
+@media (min-device-width: 1080px) and (orientation: portrait) {
+ @import "main.scss";
+ @import "portrait.scss";
+ @import "1080.scss";
+}
+
+@media (min-device-width: 1490px) and (orientation: landscape) {
+ @import "main.scss";
+ @import "landscape.scss";
+ @import "1080.scss";
+}
+
+@import "style.css"; \ No newline at end of file
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
index 4742273..d215960 100644
--- a/src/styles/landscape.scss
+++ b/src/styles/landscape.scss
@@ -5,16 +5,13 @@
}
body {
-
- .center {
- width: 80%;
- float: left;
- }
-
- .bottom {
- flex-direction: column;
- width: 20%;
+ .content {
+ .sliderContainer {
+ flex-direction: row;
+ .entry {
+ flex: 50%;
+ }
+ }
}
-
}
} \ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 01373eb..8f388c9 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -90,38 +90,46 @@ body {
}
.content {
+ height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
- height: 100%;
+ flex-wrap: nowrap;
.header {
text-align: center;
margin: 0;
}
- .entry {
- height: 120px;
-
- .label {
- margin: 10px 0;
- }
-
- .button {
- width: 10%;
- position: relative;
- float: left;
- text-align: center;
- height: 80px;
- line-height: 80px;
- }
-
- .slider {
- width: 78%;
- position: relative;
- float: left;
- margin: 0 1%;
+ .sliderContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-around;
+
+ .entry {
+ height: 120px;
+
+ .label {
+ margin: 10px 0;
+ }
+
+ .button {
+ width: 10%;
+ position: relative;
+ float: left;
+ text-align: center;
+ height: 80px;
+ line-height: 80px;
+ }
+
+ .slider {
+ width: 78%;
+ position: relative;
+ float: left;
+ margin: 0 1%;
+ }
}
}
}