From e599cdee59e14e5c7d3d4a7d339bc693f69e9d88 Mon Sep 17 00:00:00 2001
From: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Date: Tue, 10 Dec 2019 14:23:34 +0100
Subject: Add support for landscape and portrait on 1080 and 720
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: Jacobo Aragunde Pérez <jaragunde@igalia.com>
Signed-off-by: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Change-Id: I37d42485720bd7bbf6603abb05907c846d8335d4
---
src/styles/1080.scss | 0
src/styles/720.scss | 16 ++++++++++++++++
src/styles/app.scss | 26 +++++++++++++++++++++++---
src/styles/landscape.scss | 28 ++++++++++++++++++++++++----
src/styles/main.scss | 15 ++-------------
src/styles/portrait.scss | 23 +++++++++++++++++++++--
6 files changed, 86 insertions(+), 22 deletions(-)
create mode 100644 src/styles/1080.scss
create mode 100644 src/styles/720.scss
diff --git a/src/styles/1080.scss b/src/styles/1080.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/720.scss b/src/styles/720.scss
new file mode 100644
index 0000000..a92746d
--- /dev/null
+++ b/src/styles/720.scss
@@ -0,0 +1,16 @@
+@media (orientation: landscape) {
+
+ html {
+ background-image: url('../images/horizontal_background.png');
+ }
+
+ body {
+ .bottom {
+ .button {
+ img {
+ width: 80%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index c2a4c72..866fb58 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -4,6 +4,26 @@ $colors: (
grey: #848286
);
-@import "main.scss";
-@import "portrait.scss";
-@import "landscape.scss";
\ No newline at end of file
+@media (max-device-width: 720px) and (orientation: portrait) {
+ @import "main.scss";
+ @import "portrait.scss";
+ @import "720.scss";
+}
+
+@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";
+}
\ No newline at end of file
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
index 4742273..bdf89ef 100644
--- a/src/styles/landscape.scss
+++ b/src/styles/landscape.scss
@@ -5,16 +5,36 @@
}
body {
+ width: 90%;
+ height: 90%;
- .center {
- width: 80%;
+ .top {
+ margin: 0;
+ }
+
+ .center {
+ width: 85%;
+ position: relative;
float: left;
}
.bottom {
flex-direction: column;
- width: 20%;
- }
+ width: 15%;
+ position: relative;
+ float: left;
+ margin: 0;
+ height: 90%;
+ align-items: flex-end;
+ justify-content: space-between;
+ flex-wrap: nowrap;
+ .button {
+ img {
+ width: 100%;
+ height: 80%;
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6c3ed5a..fca72d9 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -38,6 +38,8 @@ progress {
width: 100%;
margin-top: -22px;
position: absolute;
+ left: 0;
+ top: 33px;
z-index: -1000;
}
@@ -92,8 +94,6 @@ body {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
- margin-top: 10%;
- margin-bottom: 15%;
.icon {
flex-basis: 10%;
@@ -117,7 +117,6 @@ body {
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
- height: 100%;
.item {
&:before {
@@ -215,21 +214,11 @@ body {
.bottom {
display: flex;
- flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
margin-top: 10%;
-
- .button {
- flex-basis: 20%;
-
- img {
- width: 80%;
- margin: 0 10%;
- }
- }
}
.log {
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index eff553c..0fc0bc5 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -5,8 +5,27 @@
}
body {
- .center {
- width: 100%;
+ .center {
+ height: 100%;
+ }
+
+ .top{
+ margin-top: 10%;
+ margin-bottom: 15%;
+ }
+
+ .bottom {
+ flex-direction: row;
+ margin-top: 10%;
+
+ .button {
+ flex-basis: 20%;
+
+ img {
+ width: 80%;
+ margin: 0 10%;
+ }
+ }
}
}
}
\ No newline at end of file
--
cgit