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 1.2.3-korg