diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Black.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Black.ttf index 3f972d17..a1999ea8 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Black.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Black.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-BlackItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-BlackItalic.ttf new file mode 100644 index 00000000..57be102e Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-BlackItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Bold.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Bold.ttf index 7718ada0..96d9ca9e 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Bold.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Bold.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-BoldItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-BoldItalic.ttf new file mode 100644 index 00000000..dd9a2fd7 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-BoldItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBold.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBold.ttf index e5710999..486dbf7f 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBold.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBold.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBoldItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBoldItalic.ttf new file mode 100644 index 00000000..f360b518 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraBoldItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLight.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLight.ttf index 3798fbec..e6e45f50 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLight.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLight.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLightItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLightItalic.ttf new file mode 100644 index 00000000..3d63f80a Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ExtraLightItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Italic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Italic.ttf new file mode 100644 index 00000000..d7b91d4c Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Italic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Light.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Light.ttf index 8b032275..319e4400 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Light.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Light.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-LightItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-LightItalic.ttf new file mode 100644 index 00000000..632de4ca Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-LightItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Medium.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Medium.ttf index 137cf564..7eccd15c 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Medium.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Medium.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-MediumItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-MediumItalic.ttf new file mode 100644 index 00000000..f193ef9d Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-MediumItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Regular.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Regular.ttf index ba11a2de..15047f2a 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Regular.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Regular.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBold.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBold.ttf index 5cefd7c6..f421ed57 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBold.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBold.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBoldItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBoldItalic.ttf new file mode 100644 index 00000000..0135e502 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-SemiBoldItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Thin.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Thin.ttf index 47a06ef1..5fc7ce4a 100644 Binary files a/Thermo.Active/wwwroot/assets/fonts/WorkSans-Thin.ttf and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-Thin.ttf differ diff --git a/Thermo.Active/wwwroot/assets/fonts/WorkSans-ThinItalic.ttf b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ThinItalic.ttf new file mode 100644 index 00000000..d37c45f3 Binary files /dev/null and b/Thermo.Active/wwwroot/assets/fonts/WorkSans-ThinItalic.ttf differ diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard-gauge.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard-gauge.less new file mode 100644 index 00000000..c383a483 --- /dev/null +++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard-gauge.less @@ -0,0 +1,70 @@ + // out: false, sourceMap: false, main: ../style.less + @import "colors.less"; + + @gauge-h: 610px; + @gauge-w: 610px; + + @smallgauge-h: @gauge-h - 30px; + @smallgauge-w: @gauge-w - 30px; + + .gauge-container { + grid-column: 3; + grid-row: 2; + display: grid; + grid-template-rows: 1fr auto 1fr; + + + hr { + grid-row: 2; + grid-column: 1; + margin: auto; + height: 5px; + width: calc(@gauge-w/2); + background-color: gray; + z-index: 1; + border: none; + } + + width: @gauge-w; + height: @gauge-h; + + .gauge1, + .gauge2 { + grid-column: 1; + grid-row-start: 1; + grid-row-end: 3; + + .gauge { + .dial { + fill: rgba(153, 207, 255, 0.6); + stroke: #003366; + stroke-width: 2.5; + } + + .value { + stroke: #90C03D; + stroke-width: 2.5; + } + + .value-text { + fill: black; + font-size: 20px; + } + } + + } + + .gauge2 { + .gauge { + .dial { + stroke: rgba(0, 0, 0, .5); + stroke-width: 1; + } + + .value { + stroke: #4caaff; + stroke-width: 1; + } + } + } + } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less index dd2347d1..ff47545c 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less +++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less @@ -5,483 +5,106 @@ .dashboard { - height : 100%; - width : 100%; - background-image: url("../../assets/icons/png/bg.png"); - position : fixed; - z-index : 1001; - display : flex; - flex-direction : column; - justify-content : flex-start; + height: 100%; + width: 100%; + background-image: url("../../assets/icons/png/bg.png"); + position: fixed; + z-index: 1001; + display: grid; + grid-template-rows: 144px 1fr; + grid-template-columns: 152px 1fr 610px 1fr 152px; + grid-row-gap: 40px; + padding-top: 21px; - .header { - width : 100%; - display: flex; + header { + grid-row: 1; + grid-column-start: 1; + grid-column-end: -1; + width: 100% !important; + justify-content: space-between; + height: 144px !important; + position: relative !important; - .ribbon-container { - height : 80px; - z-index: 900; + .ribbon-container, + .app-ribbon { + height: 144px; + width: 152px; + border-top-right-radius: 72px; + border-bottom-right-radius: 72px; + + .status-icon { + width: 114px; + height: 114px; + border-radius: 57px; + + * { + font-size: 48px; } - .box-date { - display : flex; - width : 70%; - margin-left: 100px; - - div { - flex-shrink: 0; - font-size : 47px; - text-align : right; - font-weight: 500; - } - - time { - flex-shrink: 0; - transition : color 200ms ease-in-out; - margin-left: 28px; - display : flex; - font-size : 120px; - } - - } - - .arch { - width: 100%; - - .box-gauge { - height: 150px; - width : 150px; - - .gauge-container, - .three { - width : 126px; - height: 92px; - - .gauge { - - .value { - stroke: #1791ff; - } - - .value-text { - fill: #4b4b4b; - } - - } - } - - div { - - &:last-of-type { - margin-top: -10px; - - label { - - &:first-of-type { - font-size : 18px; - font-weight : 300; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - &:last-of-type { - font-size : 26px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1.96; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - } - } - - } - - } - - } - - .header-buttons { - display: inline-block; - - .box-close-dashboard { - height : 70px; - text-align: right; - - button.modal-close { - background-color: #4B4B4B; - margin : 23px; - } - } - - - .user-info { - margin-top : 10px; - display : flex; - font-size : 25px; - color : @color-input-light; - flex-grow : 1; - justify-content: flex-end; - margin-right : 21px; - - button.profile { - width : 48px; - height : 48px; - background-image: url("../profile.png"); - color : #000; - background-size : cover; - border : none; - background-color: transparent; - - &.colorWhite { - color: #FFF; - } - } - - div { - align-self : center; - margin-right: 10px; - font-size : 18px; - } - } - - } + } } - section { - margin-top : -400px; - height : 722px; - display : flex; - justify-content: flex-end; - padding-right : 15px; - padding-bottom : 50px; - - .specific { - display : flex; - flex-direction : column; - justify-content: flex-end; - - div { - display: flex; - } - - //inizio sezione style del primo specific - &:first-of-type { - margin-right: 15%; - - div { - - &:first-of-type { - - img { - flex-shrink: 0; - width : 41px; - height : 41px; - object-fit : contain; - } - - label { - flex-shrink : 0; - font-size : 54px; - font-weight : normal; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : right; - color : #4b4b4b; - } - - } - - &:last-of-type { - margin: unset; - - button { - flex-shrink : 0; - width : 65px; - height : 65px; - box-shadow : 0 2px 10px 0 rgba(0, 0, 0, 0.5); - border : solid 3px #4b4b4b; - background-color: rgba(255, 255, 255, 0.2); - border-radius : 50%; - color : #4b4b4b; - font-size : 50px; - text-align : center; - } - - label { - flex-shrink: 0; - - &:first-of-type { - - font-size : 12px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - &:last-of-type { - - font-size : 25px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - } - - } - - } - - } - - //inizio sezione style del secondo specific - label { - flex-shrink: 0; - - &:first-of-type { - - font-size : 26px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1.96; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - &:last-of-type { - - font-size : 120px; - font-weight : 300; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - } - - //inizio sezione style del terzo specific - &:last-of-type { - margin-left: 15%; - - div { - flex-shrink : 0; - width : 542px; - height : 71px; - background-color: rgba(0, 0, 0, 0.5); - } - - .actual { - background-color: unset; - width : unset; - height : unset; - - .specific { - background-color: unset; - width : unset; - height : unset; - margin : unset; - - label { - flex-shrink: 0; - - &:first-of-type { - font-size : 26px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1.96; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - &:last-of-type { - font-size : 120px; - font-weight : 300; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - } - - } - - } - - aside { - margin-top: 5px; - width : 641px; - height : 100%; - overflow-x: hidden; - - .component { - width : 621px; - height: 77px; - } - - } - - .component-info { - width : unset; - height : unset; - background-color: unset; - display : flex; - flex-direction : column; - - section { - margin : unset; - padding : unset; - height : unset; - width : unset; - display : flex; - justify-content: flex-end; - - section { - margin : unset; - padding : unset; - height : unset; - width : unset; - display : flex; - flex-direction: column; - - .component { - width : 478px; - height : 60px; - background-color: #e8e8e8; - - div { - flex-shrink: unset; - - button { - border-color : black; - width : 50PX; - height : 50px; - border-radius : 50%; - background-color: unset; - } - - } - - } - - } - - } - - .component { - width : 641px; - height : 84px; - background-color: #e8e8e8; - display : flex; - flex-direction : column; - justify-content : flex-end; - - div { - flex-shrink : 0; - margin : auto; - padding : 0px 15px; - width : unset; - height : unset; - background-color: unset; - - - label { - flex-shrink : 0; - font-size : 54px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : right; - color : #4b4b4b; - } - - .specific { - height : unset; - width : unset; - background-color: unset; - margin : unset; - - label { - flex-shrink: 0; - - &:first-of-type { - font-size : 12px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - &:last-of-type { - font-size : 25px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - } - - } - - button { - height : 20px; - width : 20px; - background-color: black; - } - - } - - span { - flex-shrink : 0; - width : 100%; - height : 1px; - background-color: #676767; - } - - } - - } - - } - + .header-buttons { + padding-right: 21px; + display: flex; + flex-flow: column; + align-items: flex-end; + justify-content: space-between; + height: 100%; + + .user-info { + font-size: 14px; + + .name { + text-align: right; } + } + button.modal-close { + box-shadow: none; + background-color: @color-darkish-blue; + color: white; + } } + } + + .timing-area { + grid-row: 2; + grid-column: 2; + display: grid; + grid-template-rows: 1fr 1fr 1fr; + height: 610px; + + .start, + .current, + .end { + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: rgba(153, 207, 255, 0.6); + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; + + small { + font-size: 26px; + text-transform: uppercase; + } + + time { + font-size: 120px; + font-weight: 300; + } + } + + .current { + background-color: transparent; + + time { + font-size: 54px; + font-weight: 500; + } + } + } } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/fonts.less b/Thermo.Active/wwwroot/assets/styles/base/fonts.less index 9b7b7344..c5d1b465 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/fonts.less +++ b/Thermo.Active/wwwroot/assets/styles/base/fonts.less @@ -1,44 +1,58 @@ // out: false, sourceMap: false, main: ../style.less + @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 400; - src: local('Work Sans'), local('WorkSans-Regular'), url(../fonts/WorkSans-Regular.ttf) format('ttf'); - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; + font-family: 'Work Sans'; + font-style: normal; + font-weight: 200; + src: local('Work Sans Thin'), local('WorkSans-Thin'), url(/assets/fonts/WorkSans-Thin.ttf) format('truetype'); +} + +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 300; + src: local('Work Sans Light'), local('WorkSans-Light'), url(/assets/fonts/WorkSans-Light.ttf) format('truetype'); +} + +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 400; + src: local('Work Sans Regular'), local('WorkSans-Regular'), url(/assets/fonts/WorkSans-Regular.ttf) format('truetype'); } /* latin-ext */ @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 500; - src: local('Work Sans Medium'), local('WorkSans-Medium'), url(../fonts/WorkSans-Medium.ttf) format('ttf'); + font-family: 'Work Sans'; + font-style: normal; + font-weight: 500; + src: local('Work Sans Medium'), local('WorkSans-Medium'), url(/assets/fonts/WorkSans-Medium.ttf) format('truetype'); } /* latin-ext */ @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 600; - src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(../fonts/WorkSans-SemiBold.ttf) format('ttf'); + font-family: 'Work Sans'; + font-style: normal; + font-weight: 600; + src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(/assets/fonts/WorkSans-SemiBold.ttf) format('truetype'); } /* latin-ext */ @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 700; - src: local('Work Sans Bold'), local('WorkSans-Bold'), url(../fonts/WorkSans-Bold.ttf) format('ttf'); - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; + font-family: 'Work Sans'; + font-style: normal; + font-weight: 700; + src: local('Work Sans Bold'), local('WorkSans-Bold'), url(/assets/fonts/WorkSans-Bold.ttf) format('truetype'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } -.text-22{ +.text-22 { font-size: 22px !important; -} +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/graph-dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/graph-dashboard.less deleted file mode 100644 index 0f906139..00000000 --- a/Thermo.Active/wwwroot/assets/styles/base/graph-dashboard.less +++ /dev/null @@ -1,193 +0,0 @@ - // out: false, sourceMap: false, main: ../style.less - @import "colors.less"; - - @gauge-h: 800px; - @gauge-w: 800px; - - @smallgauge-h: @gauge-h - 30px; - @smallgauge-w: @gauge-w - 30px; - - .box-graph-dashboard { - height : 610px; - display : flex; - align-items : center; - justify-content: flex-end; - - .svg-dashboard { - background-repeat: no-repeat; - display : flex; - flex-direction : column; - justify-content : center; - - &.dashboard3 { - margin-left: -150px; - margin-bottom : 250px; - height : 100px; - width : 900px; - background-size : 900px; - background-image: url(/assets/icons/svg/svg-dashboard3.svg); - - label { - margin : unset; - font-size : 35px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - } - } - - .time-box { - display : flex; - flex-direction : column; - justify-content: center; - height : 100%; - margin-top: 200px; - margin-right: -150px; - - .svg-dashboard { - - label { - margin-top : 8px; - font-size : 26px; - font-weight : 500; - font-stretch : normal; - font-style : normal; - line-height : 1.96; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - time { - font-size : 120px; - font-weight : 300; - font-stretch : normal; - font-style : normal; - line-height : normal; - letter-spacing: normal; - text-align : center; - color : #4b4b4b; - } - - &.dashboard { - background-image: url(/assets/icons/svg/svg-dashboard.svg); - height : 178px; - width : 545px; - background-size : 545px; - position : relative; - } - - &.dashboard2 { - height : 178px; - background-size : 545px; - width : 545px; - background-image: url(/assets/icons/svg/svg-dashboard2.svg); - } - - } - - .box-time-passed { - height : 117px; - margin : 40px 0px; - text-align : center; - display : flex; - justify-content: center; - flex-direction : column; - - label { - - &:first-of-type { - font-size: 26px; - } - - &:last-of-type { - font-size: 54px; - } - - } - - } - - } - - .box-circle-piece { - margin-top: 200px; - display : flex; - align-items: center; - position : relative; - height : @gauge-h; - width : @gauge-w; - - hr { - margin : auto; - height : 5px; - width : calc(@gauge-w/2); - background-color: gray; - z-index : 1; - border : none; - } - - .gauge-container-dashboard { - width : @gauge-w; - height : @gauge-h; - border-radius: 5px; - position : absolute; - top : calc(~"50%" - (@gauge-h/2)); - left: calc(~"50%" - (@gauge-w/2)); - - &.gauge1 { - width : @smallgauge-w; - height: @smallgauge-h; - top : calc(~"50%" - (@smallgauge-h/2)); - left : calc(~"50%" - (@smallgauge-w/2)); - - .gauge { - .dial { - fill : #99CFFF; - stroke: #91A2B1; - } - - .value { - stroke: #4DAAFF; - } - - .value-text { - fill : black; - alignment-baseline: before-edge; - font-size : 20px; - } - } - - } - - &.gauge2 { - - .gauge { - - .value-text { - fill : black; - alignment-baseline: after-edge; - font-size : 20px; - } - - .dial { - stroke: #003264; - } - - .value { - stroke : #90C03D; - stroke-width: 2; - } - } - } - - } - - - } - } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/base/header.less b/Thermo.Active/wwwroot/assets/styles/base/header.less index ac90d6d6..3e7be706 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/header.less +++ b/Thermo.Active/wwwroot/assets/styles/base/header.less @@ -3,7 +3,8 @@ @header-height: 80px; @header-button-size: 44px; -#app>header { +#app>header, +.dashboard>header { display: flex; flex-flow: row nowrap; align-items: center; diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less index 907e8bad..1c15caea 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/layout.less +++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less @@ -2,7 +2,7 @@ @import "setup.less"; @import "colors.less"; @import "modals.less"; -@import "graph-dashboard.less"; +@import "dashboard-gauge.less"; @import "dashboard.less"; @import "riscaldi.less"; @import "slider.less"; diff --git a/Thermo.Active/wwwroot/assets/styles/base/paddle.less b/Thermo.Active/wwwroot/assets/styles/base/paddle.less index ea0d52fc..51388809 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/paddle.less +++ b/Thermo.Active/wwwroot/assets/styles/base/paddle.less @@ -3,47 +3,26 @@ @import "colors.less"; @import "fonts.less"; -html { - height : 100%; - overflow: 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; - height: 100%; - display: flex; - flex-direction: column; + position : absolute; + right : 0; + height : 100%; + display : flex; + flex-direction : column; justify-content: center; - .active button { transform: translate(-761px, 0px); } + .active_second_card button { + transform: translate(-1522px, 0px); + } + div { button { @@ -87,8 +66,6 @@ body { } } - - .sidebar { width : 100vw; height : 100vh; @@ -96,21 +73,15 @@ body { flex-direction : column; justify-content: center; - // .sidebar-backdrop { - // width: 100vw; - // height: 100vh; - // // position: fixed; - // // top: 0; - // // left: 0; - // cursor: pointer; - // } + .active { + transform: translate(-761px, 0px); + } .sidebar-panel { - overflow-y : auto; + // overflow-y : auto; background-color: #130f40; - position: fixed; - right: 0; - // top: 141px; + position : fixed; + right : 0; z-index : 900; padding : 3rem 20px 2rem 20px; width : 721px; @@ -119,19 +90,43 @@ body { 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; + .head-sidebar { + margin: 10px 0px; + display: flex; + align-items: center; + justify-content: space-evenly; + + button{ + width: 100px; + height: 30px; + font-size: 20px; + background-color: unset; + border: none; + + &.selected{ + color:#002680; + border-bottom: 2px solid #002680; + } + } + + label { + 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 { + aside { + height: 95%; + } + + section { display : grid; grid-template-columns: repeat(2, 1fr); align-items : center; @@ -145,11 +140,10 @@ body { background-color: #808e96; margin : 10px 30px; - .text-box-paddle { + div { display : flex; width : 268px; height : 78px; - font-family : WorkSans; font-size : 18px; font-weight : 500; font-stretch : normal; @@ -166,19 +160,12 @@ body { } label { - width : 117px; + width : 100%; margin: 10px; } } - .text-box-paddle.text-soft { - label { - width : 100%; - align-self: center; - } - } - } } diff --git a/Thermo.Active/wwwroot/assets/styles/base/processo.less b/Thermo.Active/wwwroot/assets/styles/base/processo.less index 32c7ff14..183d7da9 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/processo.less +++ b/Thermo.Active/wwwroot/assets/styles/base/processo.less @@ -5,49 +5,48 @@ .modal.processo-info { + width : 1808px; + height : 976px; + margin : 120px auto; + box-shadow: none; + position : relative; header { - font-size: 22px; - color: #4b4b4b; + font-size : 22px; + color : #4b4b4b; + display : flex; + flex-flow : row nowrap; + justify-content: space-evenly; + align-items : center; .tab-header { - padding: 10px 0px; + width : 70%; + display : flex; + align-items : center; + justify-content: space-evenly; button { - padding: 0; - display: flex; - justify-content: flex-start; - margin-right: 10px; - width: 149px; - height: 48px; - border-radius: 2px; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); - background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); - font-size: 14px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.15; - letter-spacing: normal; - color: #4b4b4b; + border : none; + border-radius : 2px; + background-image : linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); + display : grid; + grid-template-columns: 48px 101px; + grid-template-rows : 48px; - img { - margin-right: 20px; + span { + margin : auto; + font-size: 13px; + color : #4b4b4b; } + img { + margin: auto; + } } - label { - width: 106px; - height: 32px; + label{ font-size: 32px; - font-weight: 600; - font-stretch: normal; - font-style: normal; line-height: 1; - letter-spacing: normal; - text-align: right; - color: #545454; } } diff --git a/Thermo.Active/wwwroot/assets/styles/base/setup.less b/Thermo.Active/wwwroot/assets/styles/base/setup.less index 8c7db1e4..ca868987 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/setup.less +++ b/Thermo.Active/wwwroot/assets/styles/base/setup.less @@ -11,7 +11,29 @@ flex-flow: column nowrap; width: 100vw; height: 100vh; - + + .tab-header { + display: flex; + flex-flow: row; + align-items: stretch; + justify-content: flex-start; + + button { + background: none; + border: 1px solid #bbbcbc; + padding: 0 38px; + border-bottom: none; + font-size: 20px; + background-color: #bbbcbc; + color: #002680; + + &.active { + background-color: #fff; + font-weight: bold; + border-top: 2px solid #002680; + } + } + } hr { flex-shrink: 0; background-color: #979797; @@ -237,37 +259,11 @@ padding-left: 31px; display: flex; align-items: center; - font-size: 20px; font-weight: bold; color: darkblue; } -} - -.tab-header { - display: flex; - - flex-flow: row; - align-items: stretch; - justify-content: flex-start; - - button { - - background: none; - border: 1px solid #bbbcbc; - padding: 0 38px; - border-bottom: none; - font-size: 20px; - background-color: #bbbcbc; - color: #002680; - - &.active { - background-color: #fff; - font-weight: bold; - border-top: 2px solid #002680; - } - } } .modal.setup-info { @@ -277,7 +273,7 @@ margin: 150px auto; box-shadow: none; position: relative; - + section { height: 100%; diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index dc16d9de..6b75178f 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -10,6 +10,26 @@ width: 100vw; height: 100vh; } +.setup .tab-header { + display: flex; + flex-flow: row; + align-items: stretch; + justify-content: flex-start; +} +.setup .tab-header button { + background: none; + border: 1px solid #bbbcbc; + padding: 0 38px; + border-bottom: none; + font-size: 20px; + background-color: #bbbcbc; + color: #002680; +} +.setup .tab-header button.active { + background-color: #fff; + font-weight: bold; + border-top: 2px solid #002680; +} .setup hr { flex-shrink: 0; background-color: #979797; @@ -195,26 +215,6 @@ font-weight: bold; color: darkblue; } -.tab-header { - display: flex; - flex-flow: row; - align-items: stretch; - justify-content: flex-start; -} -.tab-header button { - background: none; - border: 1px solid #bbbcbc; - padding: 0 38px; - border-bottom: none; - font-size: 20px; - background-color: #bbbcbc; - color: #002680; -} -.tab-header button.active { - background-color: #fff; - font-weight: bold; - border-top: 2px solid #002680; -} .modal.setup-info { width: 1639px; height: 695px; @@ -4055,146 +4055,53 @@ article .box .body { box-sizing: border-box; resize: none; } -.box-graph-dashboard { +.gauge-container { + grid-column: 3; + grid-row: 2; + display: grid; + grid-template-rows: 1fr auto 1fr; + width: 610px; height: 610px; - display: flex; - align-items: center; - justify-content: flex-end; } -.box-graph-dashboard .svg-dashboard { - background-repeat: no-repeat; - display: flex; - flex-direction: column; - justify-content: center; -} -.box-graph-dashboard .svg-dashboard.dashboard3 { - margin-left: -150px; - margin-bottom: 250px; - height: 100px; - width: 900px; - background-size: 900px; - background-image: url(/assets/icons/svg/svg-dashboard3.svg); -} -.box-graph-dashboard .svg-dashboard.dashboard3 label { - margin: unset; - font-size: 35px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.box-graph-dashboard .time-box { - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - margin-top: 200px; - margin-right: -150px; -} -.box-graph-dashboard .time-box .svg-dashboard label { - margin-top: 8px; - font-size: 26px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.96; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.box-graph-dashboard .time-box .svg-dashboard time { - font-size: 120px; - font-weight: 300; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.box-graph-dashboard .time-box .svg-dashboard.dashboard { - background-image: url(/assets/icons/svg/svg-dashboard.svg); - height: 178px; - width: 545px; - background-size: 545px; - position: relative; -} -.box-graph-dashboard .time-box .svg-dashboard.dashboard2 { - height: 178px; - background-size: 545px; - width: 545px; - background-image: url(/assets/icons/svg/svg-dashboard2.svg); -} -.box-graph-dashboard .time-box .box-time-passed { - height: 117px; - margin: 40px 0px; - text-align: center; - display: flex; - justify-content: center; - flex-direction: column; -} -.box-graph-dashboard .time-box .box-time-passed label:first-of-type { - font-size: 26px; -} -.box-graph-dashboard .time-box .box-time-passed label:last-of-type { - font-size: 54px; -} -.box-graph-dashboard .box-circle-piece { - margin-top: 200px; - display: flex; - align-items: center; - position: relative; - height: 800px; - width: 800px; -} -.box-graph-dashboard .box-circle-piece hr { +.gauge-container hr { + grid-row: 2; + grid-column: 1; margin: auto; height: 5px; - width: calc(800px/2); + width: calc(610px/2); background-color: gray; z-index: 1; border: none; } -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard { - width: 800px; - height: 800px; - border-radius: 5px; - position: absolute; - top: calc(50% - (800px/2)); - left: calc(50% - (800px/2)); +.gauge-container .gauge1, +.gauge-container .gauge2 { + grid-column: 1; + grid-row-start: 1; + grid-row-end: 3; } -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge1 { - width: 770px; - height: 770px; - top: calc(50% - (770px/2)); - left: calc(50% - (770px/2)); +.gauge-container .gauge1 .gauge .dial, +.gauge-container .gauge2 .gauge .dial { + fill: rgba(153, 207, 255, 0.6); + stroke: #003366; + stroke-width: 2.5; } -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge1 .gauge .dial { - fill: #99CFFF; - stroke: #91A2B1; -} -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge1 .gauge .value { - stroke: #4DAAFF; -} -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge1 .gauge .value-text { - fill: black; - alignment-baseline: before-edge; - font-size: 20px; -} -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge2 .gauge .value-text { - fill: black; - alignment-baseline: after-edge; - font-size: 20px; -} -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge2 .gauge .dial { - stroke: #003264; -} -.box-graph-dashboard .box-circle-piece .gauge-container-dashboard.gauge2 .gauge .value { +.gauge-container .gauge1 .gauge .value, +.gauge-container .gauge2 .gauge .value { stroke: #90C03D; - stroke-width: 2; + stroke-width: 2.5; +} +.gauge-container .gauge1 .gauge .value-text, +.gauge-container .gauge2 .gauge .value-text { + fill: black; + font-size: 20px; +} +.gauge-container .gauge2 .gauge .dial { + stroke: rgba(0, 0, 0, 0.5); + stroke-width: 1; +} +.gauge-container .gauge2 .gauge .value { + stroke: #4caaff; + stroke-width: 1; } .dashboard { height: 100%; @@ -4202,370 +4109,93 @@ article .box .body { background-image: url("../../assets/icons/png/bg.png"); position: fixed; z-index: 1001; + display: grid; + grid-template-rows: 144px 1fr; + grid-template-columns: 152px 1fr 610px 1fr 152px; + grid-row-gap: 40px; + padding-top: 21px; +} +.dashboard header { + grid-row: 1; + grid-column-start: 1; + grid-column-end: -1; + width: 100% !important; + justify-content: space-between; + height: 144px !important; + position: relative !important; +} +.dashboard header .ribbon-container, +.dashboard header .app-ribbon { + height: 144px; + width: 152px; + border-top-right-radius: 72px; + border-bottom-right-radius: 72px; +} +.dashboard header .ribbon-container .status-icon, +.dashboard header .app-ribbon .status-icon { + width: 114px; + height: 114px; + border-radius: 57px; +} +.dashboard header .ribbon-container .status-icon *, +.dashboard header .app-ribbon .status-icon * { + font-size: 48px; +} +.dashboard header .header-buttons { + padding-right: 21px; display: flex; - flex-direction: column; - justify-content: flex-start; + flex-flow: column; + align-items: flex-end; + justify-content: space-between; + height: 100%; } -.dashboard .header { - width: 100%; - display: flex; +.dashboard header .header-buttons .user-info { + font-size: 14px; } -.dashboard .header .ribbon-container { - height: 80px; - z-index: 900; -} -.dashboard .header .box-date { - display: flex; - width: 70%; - margin-left: 100px; -} -.dashboard .header .box-date div { - flex-shrink: 0; - font-size: 47px; +.dashboard header .header-buttons .user-info .name { text-align: right; - font-weight: 500; } -.dashboard .header .box-date time { - flex-shrink: 0; - transition: color 200ms ease-in-out; - margin-left: 28px; +.dashboard header .header-buttons button.modal-close { + box-shadow: none; + background-color: #002680; + color: white; +} +.dashboard .timing-area { + grid-row: 2; + grid-column: 2; + display: grid; + grid-template-rows: 1fr 1fr 1fr; + height: 610px; +} +.dashboard .timing-area .start, +.dashboard .timing-area .current, +.dashboard .timing-area .end { display: flex; - font-size: 120px; + flex-flow: column; + align-items: center; + justify-content: center; + background-color: rgba(153, 207, 255, 0.6); + border-top-left-radius: 100px; + border-bottom-left-radius: 100px; } -.dashboard .header .arch { - width: 100%; -} -.dashboard .header .arch .box-gauge { - height: 150px; - width: 150px; -} -.dashboard .header .arch .box-gauge .gauge-container, -.dashboard .header .arch .box-gauge .three { - width: 126px; - height: 92px; -} -.dashboard .header .arch .box-gauge .gauge-container .gauge .value, -.dashboard .header .arch .box-gauge .three .gauge .value { - stroke: #1791ff; -} -.dashboard .header .arch .box-gauge .gauge-container .gauge .value-text, -.dashboard .header .arch .box-gauge .three .gauge .value-text { - fill: #4b4b4b; -} -.dashboard .header .arch .box-gauge div:last-of-type { - margin-top: -10px; -} -.dashboard .header .arch .box-gauge div:last-of-type label:first-of-type { - font-size: 18px; - font-weight: 300; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard .header .arch .box-gauge div:last-of-type label:last-of-type { +.dashboard .timing-area .start small, +.dashboard .timing-area .current small, +.dashboard .timing-area .end small { font-size: 26px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.96; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; + text-transform: uppercase; } -.dashboard .header .header-buttons { - display: inline-block; +.dashboard .timing-area .start time, +.dashboard .timing-area .current time, +.dashboard .timing-area .end time { + font-size: 120px; + font-weight: 300; } -.dashboard .header .header-buttons .box-close-dashboard { - height: 70px; - text-align: right; -} -.dashboard .header .header-buttons .box-close-dashboard button.modal-close { - background-color: #4B4B4B; - margin: 23px; -} -.dashboard .header .header-buttons .user-info { - margin-top: 10px; - display: flex; - font-size: 25px; - color: #4b4b4b; - flex-grow: 1; - justify-content: flex-end; - margin-right: 21px; -} -.dashboard .header .header-buttons .user-info button.profile { - width: 48px; - height: 48px; - background-image: url("../profile.png"); - color: #000; - background-size: cover; - border: none; +.dashboard .timing-area .current { background-color: transparent; } -.dashboard .header .header-buttons .user-info button.profile.colorWhite { - color: #FFF; -} -.dashboard .header .header-buttons .user-info div { - align-self: center; - margin-right: 10px; - font-size: 18px; -} -.dashboard section { - margin-top: -400px; - height: 722px; - display: flex; - justify-content: flex-end; - padding-right: 15px; - padding-bottom: 50px; -} -.dashboard section .specific { - display: flex; - flex-direction: column; - justify-content: flex-end; -} -.dashboard section .specific div { - display: flex; -} -.dashboard section .specific:first-of-type { - margin-right: 15%; -} -.dashboard section .specific:first-of-type div:first-of-type img { - flex-shrink: 0; - width: 41px; - height: 41px; - object-fit: contain; -} -.dashboard section .specific:first-of-type div:first-of-type label { - flex-shrink: 0; - font-size: 54px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: right; - color: #4b4b4b; -} -.dashboard section .specific:first-of-type div:last-of-type { - margin: unset; -} -.dashboard section .specific:first-of-type div:last-of-type button { - flex-shrink: 0; - width: 65px; - height: 65px; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); - border: solid 3px #4b4b4b; - background-color: rgba(255, 255, 255, 0.2); - border-radius: 50%; - color: #4b4b4b; - font-size: 50px; - text-align: center; -} -.dashboard section .specific:first-of-type div:last-of-type label { - flex-shrink: 0; -} -.dashboard section .specific:first-of-type div:last-of-type label:first-of-type { - font-size: 12px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific:first-of-type div:last-of-type label:last-of-type { - font-size: 25px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific label { - flex-shrink: 0; -} -.dashboard section .specific label:first-of-type { - font-size: 26px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.96; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific label:last-of-type { - font-size: 120px; - font-weight: 300; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific:last-of-type { - margin-left: 15%; -} -.dashboard section .specific:last-of-type div { - flex-shrink: 0; - width: 542px; - height: 71px; - background-color: rgba(0, 0, 0, 0.5); -} -.dashboard section .specific:last-of-type .actual { - background-color: unset; - width: unset; - height: unset; -} -.dashboard section .specific:last-of-type .actual .specific { - background-color: unset; - width: unset; - height: unset; - margin: unset; -} -.dashboard section .specific:last-of-type .actual .specific label { - flex-shrink: 0; -} -.dashboard section .specific:last-of-type .actual .specific label:first-of-type { - font-size: 26px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.96; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific:last-of-type .actual .specific label:last-of-type { - font-size: 120px; - font-weight: 300; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific:last-of-type aside { - margin-top: 5px; - width: 641px; - height: 100%; - overflow-x: hidden; -} -.dashboard section .specific:last-of-type aside .component { - width: 621px; - height: 77px; -} -.dashboard section .specific:last-of-type .component-info { - width: unset; - height: unset; - background-color: unset; - display: flex; - flex-direction: column; -} -.dashboard section .specific:last-of-type .component-info section { - margin: unset; - padding: unset; - height: unset; - width: unset; - display: flex; - justify-content: flex-end; -} -.dashboard section .specific:last-of-type .component-info section section { - margin: unset; - padding: unset; - height: unset; - width: unset; - display: flex; - flex-direction: column; -} -.dashboard section .specific:last-of-type .component-info section section .component { - width: 478px; - height: 60px; - background-color: #e8e8e8; -} -.dashboard section .specific:last-of-type .component-info section section .component div { - flex-shrink: unset; -} -.dashboard section .specific:last-of-type .component-info section section .component div button { - border-color: black; - width: 50PX; - height: 50px; - border-radius: 50%; - background-color: unset; -} -.dashboard section .specific:last-of-type .component-info .component { - width: 641px; - height: 84px; - background-color: #e8e8e8; - display: flex; - flex-direction: column; - justify-content: flex-end; -} -.dashboard section .specific:last-of-type .component-info .component div { - flex-shrink: 0; - margin: auto; - padding: 0px 15px; - width: unset; - height: unset; - background-color: unset; -} -.dashboard section .specific:last-of-type .component-info .component div label { - flex-shrink: 0; +.dashboard .timing-area .current time { font-size: 54px; font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: normal; - text-align: right; - color: #4b4b4b; -} -.dashboard section .specific:last-of-type .component-info .component div .specific { - height: unset; - width: unset; - background-color: unset; - margin: unset; -} -.dashboard section .specific:last-of-type .component-info .component div .specific label { - flex-shrink: 0; -} -.dashboard section .specific:last-of-type .component-info .component div .specific label:first-of-type { - font-size: 12px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific:last-of-type .component-info .component div .specific label:last-of-type { - font-size: 25px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - text-align: center; - color: #4b4b4b; -} -.dashboard section .specific:last-of-type .component-info .component div button { - height: 20px; - width: 20px; - background-color: black; -} -.dashboard section .specific:last-of-type .component-info .component span { - flex-shrink: 0; - width: 100%; - height: 1px; - background-color: #676767; } .warmers { position: relative; @@ -4956,25 +4586,6 @@ article .box .body { width: 20px; height: 20px; } -html { - height: 100%; - overflow: 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; right: 0; @@ -4986,6 +4597,9 @@ body { .container #app nav .active button { transform: translate(-761px, 0px); } +.container #app nav .active_second_card button { + transform: translate(-1522px, 0px); +} .container #app nav div button { position: relative; height: 30px; @@ -5024,8 +4638,10 @@ body { flex-direction: column; justify-content: center; } +.container #app .sidebar .active { + transform: translate(-761px, 0px); +} .container #app .sidebar .sidebar-panel { - overflow-y: auto; background-color: #130f40; position: fixed; right: 0; @@ -5037,8 +4653,24 @@ body { box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5); background-color: #dddddd; } -.container #app .sidebar .sidebar-panel .text-head-sidebar { - margin: 10px auto; +.container #app .sidebar .sidebar-panel .head-sidebar { + margin: 10px 0px; + display: flex; + align-items: center; + justify-content: space-evenly; +} +.container #app .sidebar .sidebar-panel .head-sidebar button { + width: 100px; + height: 30px; + font-size: 20px; + background-color: unset; + border: none; +} +.container #app .sidebar .sidebar-panel .head-sidebar button.selected { + color: #002680; + border-bottom: 2px solid #002680; +} +.container #app .sidebar .sidebar-panel .head-sidebar label { font-size: 24px; font-weight: 500; font-stretch: normal; @@ -5048,13 +4680,16 @@ body { text-align: center; color: #002680; } -.container #app .sidebar .sidebar-panel .box-sidebar-panel { +.container #app .sidebar .sidebar-panel aside { + height: 95%; +} +.container #app .sidebar .sidebar-panel section { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; justify-items: center; } -.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav { +.container #app .sidebar .sidebar-panel section .sidebar-panel-nav { width: 286px; height: 100px; border-radius: 2px; @@ -5062,11 +4697,10 @@ body { background-color: #808e96; margin: 10px 30px; } -.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle { +.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div { display: flex; width: 268px; height: 78px; - font-family: WorkSans; font-size: 18px; font-weight: 500; font-stretch: normal; @@ -5076,18 +4710,14 @@ body { color: #ffffff; margin: 10px; } -.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle i { +.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div i { text-align: end; width: 50px; color: #bbbcbc; } -.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle label { - width: 117px; - margin: 10px; -} -.container #app .sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle.text-soft label { +.container #app .sidebar .sidebar-panel section .sidebar-panel-nav div label { width: 100%; - align-self: center; + margin: 10px; } .arch { display: flex; @@ -5158,45 +4788,46 @@ body { .modal.avvio-produzione-info section.body section .specific .tast { margin-left: 25%; } +.modal.processo-info { + width: 1808px; + height: 976px; + margin: 120px auto; + box-shadow: none; + position: relative; +} .modal.processo-info header { font-size: 22px; color: #4b4b4b; + display: flex; + flex-flow: row nowrap; + justify-content: space-evenly; + align-items: center; } .modal.processo-info header .tab-header { - padding: 10px 0px; + width: 70%; + display: flex; + align-items: center; + justify-content: space-evenly; } .modal.processo-info header .tab-header button { - padding: 0; - display: flex; - justify-content: flex-start; - margin-right: 10px; - width: 149px; - height: 48px; + border: none; border-radius: 2px; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #f1f1f1 0%, #bbbcbc 98%); - font-size: 14px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.15; - letter-spacing: normal; + display: grid; + grid-template-columns: 48px 101px; + grid-template-rows: 48px; +} +.modal.processo-info header .tab-header button span { + margin: auto; + font-size: 13px; color: #4b4b4b; } .modal.processo-info header .tab-header button img { - margin-right: 20px; + margin: auto; } .modal.processo-info header .tab-header label { - width: 106px; - height: 32px; font-size: 32px; - font-weight: 600; - font-stretch: normal; - font-style: normal; line-height: 1; - letter-spacing: normal; - text-align: right; - color: #545454; } .modal.progr-preriscaldo-info header { padding-left: 31px; @@ -6203,39 +5834,51 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { line-height: 1.11; color: #4b4b4b; } +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 200; + src: local('Work Sans Thin'), local('WorkSans-Thin'), url(/assets/fonts/WorkSans-Thin.ttf) format('truetype'); +} +@font-face { + font-family: 'Work Sans'; + font-style: normal; + font-weight: 300; + src: local('Work Sans Light'), local('WorkSans-Light'), url(/assets/fonts/WorkSans-Light.ttf) format('truetype'); +} @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; - src: local('Work Sans'), local('WorkSans-Regular'), url(../fonts/WorkSans-Regular.ttf) format('ttf'); - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; + src: local('Work Sans Regular'), local('WorkSans-Regular'), url(/assets/fonts/WorkSans-Regular.ttf) format('truetype'); } /* latin-ext */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; - src: local('Work Sans Medium'), local('WorkSans-Medium'), url(../fonts/WorkSans-Medium.ttf) format('ttf'); + src: local('Work Sans Medium'), local('WorkSans-Medium'), url(/assets/fonts/WorkSans-Medium.ttf) format('truetype'); } /* latin-ext */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; - src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(../fonts/WorkSans-SemiBold.ttf) format('ttf'); + src: local('Work Sans SemiBold'), local('WorkSans-SemiBold'), url(/assets/fonts/WorkSans-SemiBold.ttf) format('truetype'); } /* latin-ext */ @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; - src: local('Work Sans Bold'), local('WorkSans-Bold'), url(../fonts/WorkSans-Bold.ttf) format('ttf'); + src: local('Work Sans Bold'), local('WorkSans-Bold'), url(/assets/fonts/WorkSans-Bold.ttf) format('truetype'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } .text-22 { font-size: 22px !important; } -#app > header { +#app > header, +.dashboard > header { display: flex; flex-flow: row nowrap; align-items: center; @@ -6247,7 +5890,8 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { right: 0; left: 0; } -#app > header button { +#app > header button, +.dashboard > header button { font-size: 28px; justify-content: center; align-items: center; @@ -6263,70 +5907,87 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { color: #002680; z-index: 1; } -#app > header button.save-circle { +#app > header button.save-circle, +.dashboard > header button.save-circle { background-image: url("../../assets/icons/png/circle@2x.png"); background-size: cover; } -#app > header button.dot-circle { +#app > header button.dot-circle, +.dashboard > header button.dot-circle { background-image: url("../../assets/icons/png/circledot@2x.png"); background-size: cover; } -#app > header button:disabled { +#app > header button:disabled, +.dashboard > header button:disabled { filter: grayscale(100%); } -#app > header button > img { +#app > header button > img, +.dashboard > header button > img { height: 22px; margin: auto; display: block; } -#app > header button > img.h-20 { +#app > header button > img.h-20, +.dashboard > header button > img.h-20 { height: 20px; } -#app > header button > img.h-24 { +#app > header button > img.h-24, +.dashboard > header button > img.h-24 { height: 24px; } -#app > header button .machine-info small { +#app > header button .machine-info small, +.dashboard > header button .machine-info small { display: block; text-align: left; margin-left: 5px; font-size: 11px; } -#app > header button.red { +#app > header button.red, +.dashboard > header button.red { background-color: #d0021b; 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); } -#app > header button.blue { +#app > header button.blue, +.dashboard > header button.blue { background-color: #1791ff; color: white; } -#app > header button.dark-blue { +#app > header button.dark-blue, +.dashboard > header button.dark-blue { background-color: #002680; color: white; } -#app > header button.dark-blue:active { +#app > header button.dark-blue:active, +.dashboard > header button.dark-blue:active { background-color: #1791ff; } -#app > header button.gray { +#app > header button.gray, +.dashboard > header button.gray { background-color: #4b4b4b; color: white; } -#app > header button.profile { +#app > header button.profile, +.dashboard > header button.profile { width: 44px; background-image: url("../profile.png"); color: #000; background-size: cover; } -#app > header button.profile.colorWhite { +#app > header button.profile.colorWhite, +.dashboard > header button.profile.colorWhite { color: #FFF; } -#app > header button.unclickable { +#app > header button.unclickable, +.dashboard > header button.unclickable { cursor: default; } -#app > header.turn-up .user-info time { +#app > header.turn-up .user-info time, +.dashboard > header.turn-up .user-info time { color: #fff; } -#app > header .user-info { +#app > header .user-info, +.dashboard > header .user-info { display: flex; right: 12px; font-size: 25px; @@ -6334,7 +5995,9 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { justify-content: flex-end; } #app > header .user-info .window-buttons, -#app > header .user-info time { +.dashboard > header .user-info .window-buttons, +#app > header .user-info time, +.dashboard > header .user-info time { transition: color 200ms ease-in-out; margin-left: 10px; padding: 0 18px; @@ -6345,10 +6008,13 @@ fieldset[disabled] .form-group.is-focused .togglebutton label { align-items: center; } #app > header .user-info .window-buttons i, -#app > header .user-info time i { +.dashboard > header .user-info .window-buttons i, +#app > header .user-info time i, +.dashboard > header .user-info time i { margin-right: 10px; } -#app > header .machine-info { +#app > header .machine-info, +.dashboard > header .machine-info { min-width: 60px; margin-left: 5px; margin-right: 5px; diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts index 26203a53..2f1e3788 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts @@ -5,14 +5,22 @@ import { paddleActions } from '@/store/paddle.store'; @Component({ name: 'sidebar' }) export default class Sidebar extends Vue { - azione1: boolean = false; - azione2: boolean = false; + show:string="tutti"; isPanelOpen() { return this.$store.state.paddle.isNavOpen; } - closeSidebarPanel() { - paddleActions.Toggle(this.$store); + get action1() { + return this.$store.state.paddle.action1; } + + get action2() { + return this.$store.state.paddle.action2; + } + + ConfigPressed(action: string) { + paddleActions.ToggleAction(this.$store,action); + } + } \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue index 0e100048..00246dd5 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue @@ -1,71 +1,122 @@