diff options
| author |   Humberto Alfonso Díaz <humberto.alfonso@asvito.es> | 2019-10-15 23:07:42 +0200 |
|---|---|---|
| committer |   Lorenzo Tilve <ltilve@igalia.com> | 2020-02-04 19:12:47 +0100 |
| commit | 396f570105d5f951f7e7da8f5da57e001a31a16b (patch) | |
| tree | 1092bd44a740c49324dc4711e067d8bd20a45d6d | |
| parent | a15a92badf94e2123a4d11e6c261aaa1b1ea09a9 (diff) | |
FUNCT Add support for landscape portrait
| -rw-r--r-- | src/images/horizontal_background.png | bin | 753195 -> 1027813 bytes | |||
| -rw-r--r-- | src/styles/app.scss | 2 | ||||
| -rw-r--r-- | src/styles/landscape.scss | 31 | ||||
| -rw-r--r-- | src/styles/main.scss | 21 | ||||
| -rw-r--r-- | 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 Binary files differindex b5a36e4..27a811e 100644 --- a/src/images/horizontal_background.png +++ b/src/images/horizontal_background.png 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 |
