From d7859a61fa95db3bcff8b9cb9d9703d6fbd5a506 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 9 Jun 2020 11:11:09 +0200 Subject: [PATCH] fix layout maschera principale --- .../assets/styles/base/arch-interface.less | 68 ++-- .../wwwroot/assets/styles/base/header.less | 347 +++++++++--------- .../wwwroot/assets/styles/base/paddle.less | 337 ++++++++--------- .../wwwroot/assets/styles/base/setup.less | 19 +- Thermo.Active/wwwroot/assets/styles/style.css | 28 +- Thermo.Active/wwwroot/config.development.json | 2 +- .../libs/font-awesome/css/font-awesome.css | 1 + 7 files changed, 403 insertions(+), 399 deletions(-) diff --git a/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less b/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less index 503825ba..8413732d 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less +++ b/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less @@ -2,66 +2,66 @@ @import "colors.less"; .arch { - display : flex; - justify-content: center; - width : 650px; + display: flex; + justify-content: flex-end; + flex: 1; + .box-gauge { - width: 90px; - margin-right: 20px; + width: 68px; - div{ + div { - &:last-of-type{ - margin-top: -25px; - display: flex; - flex-direction: column; - text-align: center; + &:last-of-type { + margin-top: -25px; + display: flex; + flex-direction: column; + text-align: center; - label{ - font-size: 13px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: @color-darkish-blue; - } - } + label { + font-size: 12px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: @color-darkish-blue; + } + } - } - - .gauge-container { - width : 90px; - height : 90px; - display : block; + } + + .gauge-container { + width: 68px; + height: 68px; + display: block; border-radius: 3px; } .gauge-container>.gauge>.dial { - stroke : @color-darkish-blue; + stroke: @color-darkish-blue; stroke-width: 2; } .gauge-container>.gauge>.value { - stroke : @color-darkish-blue; + stroke: @color-darkish-blue; stroke-width: 2; } .gauge-container>.gauge>.value-text { - color : @color-darkish-blue; + color: @color-darkish-blue; font-weight: bold; - font-size : 20px; + font-size: 20px; } .gauge-container.three>.gauge>.dial { - stroke : @color-silver; + stroke: @color-silver; stroke-width: 4; } .gauge-container.three>.gauge>.value { - stroke : @color-darkish-blue; + stroke: @color-darkish-blue; stroke-width: 5; } diff --git a/Thermo.Active/wwwroot/assets/styles/base/header.less b/Thermo.Active/wwwroot/assets/styles/base/header.less index 295355f5..ac90d6d6 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/header.less +++ b/Thermo.Active/wwwroot/assets/styles/base/header.less @@ -4,196 +4,195 @@ @header-button-size: 44px; #app>header { - display: flex; - flex-flow: row nowrap; + display: flex; + flex-flow: row nowrap; + align-items: center; + height: @header-height; + width: calc(~"100% - 152px"); + position: absolute; + z-index: 801; + top: 0; + right: 0; + left: 0; + + button { + font-size: 28px; + justify-content: center; align-items: center; - height: @header-height; - width: calc(~"100% - 152px"); - position: absolute; - z-index: 801; - top: 0; - right: 0; - left: 0; + display: flex; + margin: 0 9px; + background-color: @color-header-button-background-color; + box-shadow: @color-header-button-box-shadow; + border-radius: @header-button-size /2; + border: none; + height: @header-button-size; + min-width: @header-button-size; + cursor: pointer; + color: @color-darkish-blue; + z-index: 1; + } - button { - font-size: 28px; - justify-content: center; - display: flex; - margin: 0 9px; - background-color: @color-header-button-background-color; - box-shadow: @color-header-button-box-shadow; - border-radius: @header-button-size /2; - border: none; - height: @header-button-size; - min-width: @header-button-size; - cursor: pointer; - color: @color-darkish-blue; - z-index: 1; + button.save-circle { + background-image: url("../../assets/icons/png/circle@2x.png"); + background-size: cover; + } + + button.dot-circle { + background-image: url("../../assets/icons/png/circledot@2x.png"); + background-size: cover; + } + + button:disabled { + filter: grayscale(100%); + } + + button>img { + margin: auto; + height: @header-button-size/2; + margin: auto; + display: block; + } + + button>img.h-20 { + height: 20px; + } + + button>img.h-24 { + height: 24px; + } + + button .machine-info small { + display: block; + text-align: left; + margin-left: 5px; + + font-size: 11px; + } + + button.red { + background-color: @color-scarlet; + color: white; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4), inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); + } + + button.blue { + background-color: @color-clear-blue; + color: white; + } + + button.dark-blue { + background-color: @color-darkish-blue; + color: white; + } + + button.dark-blue:active { + background-color: @color-clear-blue; + } + + button.gray { + background-color: @color-greyish-brown; + color: white; + } + + button.profile { + width: @header-button-size; + background-image: url("../profile.png"); + color: #000; + background-size: cover; + + &.colorWhite { + color: #FFF; } + } - button.save-circle { - background-image: url("../../assets/icons/png/circle@2x.png"); - background-size: cover; + button.unclickable { + cursor: default; + } + + &.turn-up .user-info time { + color: #fff; + } + + .user-info { + display: flex; + right: 12px; + font-size: 25px; + color: @color-input-light; + justify-content: flex-end; + + .window-buttons, + time { + transition: color 200ms ease-in-out; + margin-left: 10px; + padding: 0 18px; + border-left: 2px solid #bbbcbc; + border-right: 2px solid #bbbcbc; + display: flex; + justify-content: center; + align-items: center; + + i { + margin-right: 10px; + } } + } - button.dot-circle { - background-image: url("../../assets/icons/png/circledot@2x.png"); - background-size: cover; - } - - button:disabled { - filter: grayscale(100%); - } - - button>img { - margin: auto; - height: @header-button-size/2; - margin: auto; - display: block; - } - - button>img.h-20 { - height: 20px; - } - - button>img.h-24 { - height: 24px; - } - - button .machine-info small { - display: block; - text-align: left; - margin-left: 5px; - - font-size: 11px; - } - - button.red { - background-color: @color-scarlet; - color: white; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4), inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); - } - - button.blue { - background-color: @color-clear-blue; - color: white; - } - - button.dark-blue { - background-color: @color-darkish-blue; - color: white; - } - - button.dark-blue:active { - background-color: @color-clear-blue; - } - - button.gray { - background-color: @color-greyish-brown; - color: white; - } - - button.profile { - width: @header-button-size; - background-image: url("../profile.png"); - color: #000; - background-size: cover; - - &.colorWhite { - color: #FFF; - } - } - - button.unclickable { - cursor: default; - } - - &.turn-up .user-info time { - color: #fff; - } - - .user-info { - display: flex; - position: absolute; - right: 12px; - font-size: 25px; - color: @color-input-light; - flex-grow: 1; - justify-content: flex-end; - - .window-buttons, - time { - transition: color 200ms ease-in-out; - margin-left: 10px; - padding: 0 18px; - border-left: 2px solid #bbbcbc; - border-right: 2px solid #bbbcbc; - display: flex; - justify-content: center; - align-items: center; - - i { - margin-right: 10px; - } - } - } - - .machine-info { - min-width: 60px; - margin-left: 5px; - margin-right: 5px; - } + .machine-info { + min-width: 60px; + margin-left: 5px; + margin-right: 5px; + } } .colorWhite { - color: #fff !important; + color: #fff !important; } .window-buttons { - height: 80px; + height: 80px; + display: flex; + flex-flow: row nowrap; + align-items: center; + -webkit-user-select: none; + + button { + font-size: 28px; + justify-content: center; display: flex; - flex-flow: row nowrap; - align-items: center; - -webkit-user-select: none; + margin: 0 9px; + background-color: @color-header-button-background-color; + box-shadow: @color-header-button-box-shadow; + border-radius: @header-button-size /2; + border: none; + height: @header-button-size; + min-width: @header-button-size; + cursor: pointer; + color: @color-darkish-blue; + } - button { - font-size: 28px; - justify-content: center; - display: flex; - margin: 0 9px; - background-color: @color-header-button-background-color; - box-shadow: @color-header-button-box-shadow; - border-radius: @header-button-size /2; - border: none; - height: @header-button-size; - min-width: @header-button-size; - cursor: pointer; - color: @color-darkish-blue; - } + button.gray { + background-color: @color-greyish-brown; + color: white; + } - button.gray { - background-color: @color-greyish-brown; - color: white; - } + position: fixed; + z-index: 1000; + top: 0; + right: 0; + display: flex; + padding-right: 8px !important; - position: fixed; - z-index: 1000; - top: 0; - right: 0; - display: flex; - padding-right: 8px !important; + i { + margin: auto !important; + font-size: 16px; + font-weight: normal; + } - i { - margin: auto !important; - font-size: 16px; - font-weight: normal; - } + .close { + font-size: 32px; + } - .close { - font-size: 32px; - } - - .close:hover { - background-color: @button-success-color-to; - } + .close:hover { + background-color: @button-success-color-to; + } } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/paddle.less b/Thermo.Active/wwwroot/assets/styles/base/paddle.less index b93df168..5b8cad97 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/paddle.less +++ b/Thermo.Active/wwwroot/assets/styles/base/paddle.less @@ -4,182 +4,185 @@ @import "fonts.less"; html { - height: 100%; - overflow:hidden; + height: 100%; + overflow: hidden; } - - body { - border: 0; margin: 0; padding: 0; - height: 100%; - } - - .hidden { - visibility: hidden; + +body { + border: 0; + margin: 0; + padding: 0; + height: 100%; +} + +.hidden { + visibility: hidden; +} + +.main-nav { + position: absolute; + top: 50%; + right: 0; + z-index: 1000; +} + +.container { + + #app { + + nav { + position: absolute; + top: 50%; + right: 0; + + + .active button { + transform: translate(-761px, 0px); + } + + div { + + button { + position: relative; + height: 30px; + width: 32px; + display: block; + z-index: 1000; + border: 0; + border-radius: 0; + pointer-events: all; + background: #dddddd; + border-bottom-left-radius: 90px; + border-top-left-radius: 90px; + height: 90px; + width: 45px; + box-shadow: -3px 0 3px rgba(0, 0, 0, .2); + + div { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 1fr; + align-items: center; + justify-items: center; + padding: 5px; + + + div { + width: 2px; + height: 2px; + border-radius: 10px; + margin: 2px; + background: #002680; + + } + + } + + } + + } } - - .main-nav { - position: absolute; - top: 50%; - right: 0; - z-index: 1000; - } - -.container{ - #app{ - nav { - position: absolute; - top: 50%; - right: 0; - - .active button{ - transform: translate(-761px, 0px); - } - - div{ - - button { - position: relative; - height: 30px; - width: 32px; - display: block; - z-index: 1000; - border: 0; - border-radius: 0; - pointer-events: all; - background: #dddddd; - border-bottom-left-radius: 90px; - border-top-left-radius: 90px; - height: 90px; - width: 45px; - - div{ - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: 1fr 1fr; - align-items: center; - justify-items: center; - padding: 5px; - - - div { - width: 2px; - height: 2px; - border-radius: 10px; - margin: 2px; - background: #002680; - - } - - } - - } - - } + + .sidebar { + + .sidebar-backdrop { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + cursor: pointer; + } + + .sidebar-panel { + + overflow-y: auto; + background-color: #130f40; + position: fixed; + right: 0; + top: 141px; + height: 100vh; + z-index: 900; + padding: 3rem 20px 2rem 20px; + width: 721px; + height: 920px; + border-radius: 4px; + box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); + background-color: #dddddd; + + .text-head-sidebar { + margin: 10px auto; + font-size: 24px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #002680; } - - - .sidebar{ - - .sidebar-backdrop{ - width: 100vw; - height: 100vh; - position: fixed; - top: 0; - left: 0; - cursor: pointer; - } + .box-sidebar-panel { + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + justify-items: center; - .sidebar-panel{ - - overflow-y: auto; - background-color: #130f40; - position: fixed; - right: 0; - top: 141px; - height: 100vh; - z-index: 900; - padding: 3rem 20px 2rem 20px; - width: 721px; - height: 920px; - border-radius: 4px; - box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); - background-color: #dddddd; - - .text-head-sidebar{ - margin: 10px auto; - font-size: 24px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #002680; - } - - .box-sidebar-panel{ - display: grid; - grid-template-columns: repeat(2, 1fr); - align-items: center; - justify-items: center; - - .sidebar-panel-nav{ - width: 286px; - height: 100px; - border-radius: 2px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); - background-color: #808e96; - margin: 10px 30px; - - .text-box-paddle{ - display: flex; - width: 268px; - height: 78px; - font-family: WorkSans; - font-size: 18px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - color: #ffffff; - margin: 10px; - - i{ - text-align: end; - width: 50px; - color: #bbbcbc; - } - - label{ - width: 117px; - margin: 10px; - } - - } - - .text-box-paddle.text-soft{ - label{ - width: 100%; - align-self: center; - } - } - - } - - } - - - } + .sidebar-panel-nav { + width: 286px; + height: 100px; + border-radius: 2px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); + background-color: #808e96; + margin: 10px 30px; + + .text-box-paddle { + display: flex; + width: 268px; + height: 78px; + font-family: WorkSans; + font-size: 18px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + color: #ffffff; + margin: 10px; + + i { + text-align: end; + width: 50px; + color: #bbbcbc; + } + + label { + width: 117px; + margin: 10px; + } + + } + + .text-box-paddle.text-soft { + label { + width: 100%; + align-self: center; + } + } + + } - - } + + } + + + } -} - \ No newline at end of file + } + +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/setup.less b/Thermo.Active/wwwroot/assets/styles/base/setup.less index e259b57f..66a415ec 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/setup.less +++ b/Thermo.Active/wwwroot/assets/styles/base/setup.less @@ -38,8 +38,8 @@ justify-content: flex-start; width: calc(~'100% - 28px'); height: calc(~'100% - 28px - 82px'); - - .auto{ + + .auto { overflow-y: auto; overflow-x: hidden; } @@ -76,7 +76,7 @@ display: flex; flex-direction: column; - span{ + span { object-fit: contain; font-size: 22px; font-weight: 500; @@ -101,7 +101,7 @@ border: solid 4px #9b9b9b; } - input{ + input { width: 40px; height: 21px; margin: auto; @@ -266,17 +266,18 @@ i { - grid-column: 2; + grid-column-start: -1; + grid-column-end: 1; grid-row: 2; z-index: 2; margin: auto; - transform: scale(1.5); + font-size: 36px; - &.fa-check-circle{ + &.fa-check-circle { color: #90BF3D; } - &.fa-check-circle.undone-step{ + &.fa-check-circle.undone-step { color: #1791FF; } } @@ -438,7 +439,7 @@ background-color: #fff; padding: 0 20px; font-size: 1rem; - + } } diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index 8d784801..f9b7b776 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -221,11 +221,12 @@ margin: auto; } .setup-button i { - grid-column: 2; + grid-column-start: -1; + grid-column-end: 1; grid-row: 2; z-index: 2; margin: auto; - transform: scale(1.5); + font-size: 36px; } .setup-button i.fa-check-circle { color: #90BF3D; @@ -4641,9 +4642,6 @@ width: 48px; height: 48px; } -.modal.formato-info section .tast { - margin-left: -300px; -} .modal.riscaldi-info .specific select { width: 110px; height: 48px; @@ -4661,6 +4659,9 @@ font-size: 24px; font-weight: 500; } +.modal.formato-info section .tast { + margin-left: -300px; +} .modal.formato-info .radio-buttons { display: flex; justify-content: flex-start; @@ -5211,6 +5212,7 @@ body { border-top-left-radius: 90px; height: 90px; width: 45px; + box-shadow: -3px 0 3px rgba(0, 0, 0, 0.2); } .container #app nav div button div { display: grid; @@ -5308,12 +5310,11 @@ body { } .arch { display: flex; - justify-content: center; - width: 650px; + justify-content: flex-end; + flex: 1; } .arch .box-gauge { - width: 90px; - margin-right: 20px; + width: 68px; } .arch .box-gauge div:last-of-type { margin-top: -25px; @@ -5322,7 +5323,7 @@ body { text-align: center; } .arch .box-gauge div:last-of-type label { - font-size: 13px; + font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; @@ -5332,8 +5333,8 @@ body { color: #002680; } .arch .box-gauge .gauge-container { - width: 90px; - height: 90px; + width: 68px; + height: 68px; display: block; border-radius: 3px; } @@ -6646,6 +6647,7 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { #app > header button { font-size: 28px; justify-content: center; + align-items: center; display: flex; margin: 0 9px; background-color: #ffffff; @@ -6723,11 +6725,9 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { } #app > header .user-info { display: flex; - position: absolute; right: 12px; font-size: 25px; color: #4b4b4b; - flex-grow: 1; justify-content: flex-end; } #app > header .user-info .window-buttons, diff --git a/Thermo.Active/wwwroot/config.development.json b/Thermo.Active/wwwroot/config.development.json index 52582d19..3f9529d8 100644 --- a/Thermo.Active/wwwroot/config.development.json +++ b/Thermo.Active/wwwroot/config.development.json @@ -2,6 +2,6 @@ "env": "development", "api": { "enabled": true, - "apiServerUrl": "http://10.74.82.72:9000" + "apiServerUrl": "http://seriate.steamware.net:9000/" } } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/libs/font-awesome/css/font-awesome.css b/Thermo.Active/wwwroot/libs/font-awesome/css/font-awesome.css index ee906a81..44580751 100644 --- a/Thermo.Active/wwwroot/libs/font-awesome/css/font-awesome.css +++ b/Thermo.Active/wwwroot/libs/font-awesome/css/font-awesome.css @@ -439,6 +439,7 @@ } .fa-check-circle:before { content: "\f058"; + /* box-shadow: 0 0 3px rgba(0,0,0,.3); */ } .fa-question-circle:before { content: "\f059";