diff --git a/public/views/modals/inputAmount.html b/public/views/modals/inputAmount.html index cec4b620e..9e1ca7b41 100644 --- a/public/views/modals/inputAmount.html +++ b/public/views/modals/inputAmount.html @@ -18,56 +18,61 @@ - -
-
-
-
{{amount || '-'}}
-
{{globalResult}} [{{amountResult || '0.00'}} {{alternativeIsoCode}}]
-
{{globalResult}} [{{alternativeResult || '0.00'}} {{unitName}}]
-
+ +
+
{{amount || '-'}}
+
+ {{globalResult}} {{amountResult || '0.00'}} {{alternativeIsoCode}}
+
+ {{globalResult}} {{alternativeResult || '0.00'}} {{unitName}} +
+
-
-
- +
+
+
+
-
-
- -
- - - - +
+
7
+
8
+
9
+
/
-
- - - - +
+
4
+
5
+
6
+
x
-
- - - - +
+
1
+
2
+
3
+
+
-
- - - - +
+
.
+
0
+
+
-
-
+
diff --git a/src/sass/main.scss b/src/sass/main.scss index b99e5f2c3..401eaf147 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -282,26 +282,6 @@ a { } } -.main-container { - display: -webkit-flex; - -webkit-flex-direction: column; - height: 100%; -} - -.main-container > .row { - -webkit-flex: 1; -} - -.header { - -webkit-flex: 1.5 !important; - -webkit-align-items: center; -} - -.button-row { - -webkit-align-items: center; - margin-bottom: -30px; -} - .box-setup-footer { overflow: hidden; margin-top: 1rem; @@ -2141,3 +2121,53 @@ body.modal-open { color: #2C3E50; } } + +.calculator .header-calc { + position: absolute; + width: 100%; + text-align: center; +} + +.calculator .button-calc { + position: absolute; + width: 100%; + bottom: 0; +} + +.calculator .button-calc .row { + padding: 0 !important; +} + +.calculator .button-calc .columns { + cursor: pointer; + text-align: center; +} + +.calculator .button-calc .operator { + color: #2C3E50; + background-color: #eee; +} + +.calculator .button-calc .columns:active { + background-color: #eee; +} + +.calculator .button-calc .operator:active { + background-color: #f8f8f8; +} + +@media all and (max-height: 480px) { + .calculator .button-calc .columns { padding: 10px; } + .calculator .header-calc { top: 11%; } +} + +@media (min-height: 481px) and (max-height: 670px) { + .calculator .button-calc .columns { padding: 15px; } + .calculator .header-calc { top: 15%; } +} + +@media all and (min-height: 671px) { + .calculator .button-calc .columns { padding: 20px; } + .calculator .header-calc { top: 18%; } +} +