From 396f570105d5f951f7e7da8f5da57e001a31a16b Mon Sep 17 00:00:00 2001
From: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Date: Tue, 15 Oct 2019 23:07:42 +0200
Subject: FUNCT Add support for landscape portrait

---
 src/images/horizontal_background.png | Bin 753195 -> 1027813 bytes
 src/styles/app.scss                  |   2 +-
 src/styles/landscape.scss            |  31 ++++++++++++++++++++++++++-----
 src/styles/main.scss                 |  21 ++++++++-------------
 src/styles/portrait.scss             |  20 +++++++++++++++++++-
 5 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/images/horizontal_background.png b/src/images/horizontal_background.png
index b5a36e4..27a811e 100644
Binary files a/src/images/horizontal_background.png and b/src/images/horizontal_background.png differ
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 415e2f3..74edfcc 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -6,7 +6,7 @@ $colors: (
   background:       #363636
 );
 
-$height: 218px;
+$header_size: 218px;
 
 @import "main.scss";
 @import "portrait.scss";
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
index 4742273..0a12494 100644
--- a/src/styles/landscape.scss
+++ b/src/styles/landscape.scss
@@ -6,14 +6,35 @@
 
     body {
 
-        .center {
-            width: 80%;
-            float: left;
+        .top{
+            width: $header_size;
+            height: 100%;
+            flex-direction: column;
+
+            .button {
+                border-width: 1px 0 1px 0;
+                order: 2;
+            }
+
+            .infoContainer {
+                border-width: 1px 0 1px 0;
+                width: $header_size;
+                height: 200px;
+                order: 1;
+            }
+
+            .statusContainer {
+                width: 100%;
+                height: 60px;
+                flex-direction: row;
+                align-items: center;
+                order: 0;
+
+            }
         }
 
         .bottom {
-            flex-direction: column;
-            width: 20%;
+            display: none;
         }
 
     }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index df68cc4..1da7565 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -22,41 +22,38 @@ body {
     .top {
         position: absolute;
         top: 0;
-        width: 100%;
-        height: $height;
         display: flex;
         justify-content: space-between;
         background-color: map-get($colors, background);
 
         .button {
-            border-left: 1px solid map-get($colors, grey);
-            border-right: 1px solid map-get($colors, grey);
+            border-color: map-get($colors, grey);
+            border-style: solid;
             flex: 1 1 0px;
             text-align: center;
             background-color: map-get($colors, button);
 
             .icon {
                 width: 100%;
-                height: $height*0.70;
-                line-height: $height*0.70;
+                height: $header_size*0.70;
+                line-height: $header_size*0.70;
                 font-size: 90px;
             }
 
             .label {
                 width: 100%;
-                height: $height*0.30;
-                line-height: $height*0.30;
+                height: $header_size*0.30;
+                line-height: $header_size*0.30;
             }
         }
 
         .infoContainer {
-            border-left: 1px solid map-get($colors, grey);
-            border-right: 1px solid map-get($colors, grey);
+            border-color: map-get($colors, grey);
+            border-style: solid;
             display: flex;
             flex-direction: column;
             justify-content: center;
             text-align: center;
-            width: 200px;
 
             .day {
                 text-align: left;
@@ -79,9 +76,7 @@ body {
         }
 
         .statusContainer {
-            width: 60px;
             display: flex;
-            flex-direction: column;
             justify-content: space-around;
             text-align: center;
             font-size: 42px;
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index eff553c..ebe28ce 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -5,8 +5,26 @@
     }
 
     body {
-        .center {
+        .top{
             width: 100%;
+            height: $header_size;
+            flex-direction: row;
+
+            .button {
+                border-width: 0 1px 0 1px;
+            }
+
+            .infoContainer {
+                border-width: 0 1px 0 1px;
+                width: 200px;
+            }
+
+            .statusContainer {
+                width: 60px;
+                height: 100%;
+                flex-direction: column;
+            }
         }
+
     }
 }
\ No newline at end of file
-- 
cgit 1.2.3-korg