summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-10-15 23:07:42 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:12:47 +0100
commit396f570105d5f951f7e7da8f5da57e001a31a16b (patch)
tree1092bd44a740c49324dc4711e067d8bd20a45d6d
parenta15a92badf94e2123a4d11e6c261aaa1b1ea09a9 (diff)
FUNCT Add support for landscape portrait
-rw-r--r--src/images/horizontal_background.pngbin753195 -> 1027813 bytes
-rw-r--r--src/styles/app.scss2
-rw-r--r--src/styles/landscape.scss31
-rw-r--r--src/styles/main.scss21
-rw-r--r--src/styles/portrait.scss20
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
--- a/src/images/horizontal_background.png
+++ b/src/images/horizontal_background.png
Binary files 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