From fd6648432f0a2b35f2fca8e1c9f47f5d6fb9a98e Mon Sep 17 00:00:00 2001
From: = <paolo@teamdev.it>
Date: Fri, 12 Jun 2020 14:56:02 +0200
Subject: [PATCH] fix layout controstampo

---
 .../wwwroot/assets/styles/base/input.less     |  2 +-
 .../wwwroot/assets/styles/base/setup.less     |  9 +++
 Thermo.Active/wwwroot/assets/styles/style.css |  9 ++-
 .../base-components/aria-controstampo.vue     | 14 ++---
 .../estrazione-controstampo.vue               | 41 +++++++------
 .../base-components/vuoto-controstampo.vue    | 61 ++++++++++---------
 6 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/Thermo.Active/wwwroot/assets/styles/base/input.less b/Thermo.Active/wwwroot/assets/styles/base/input.less
index ef523713..ee3b215b 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/input.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/input.less
@@ -238,7 +238,7 @@ select:focus {
 
     display: flex;
     flex-flow: row nowrap;
-    padding: 4px;
+    padding: 0 4px;
     align-items: center;
     justify-content: stretch;
 
diff --git a/Thermo.Active/wwwroot/assets/styles/base/setup.less b/Thermo.Active/wwwroot/assets/styles/base/setup.less
index fa8f849d..849b118d 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/setup.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/setup.less
@@ -70,6 +70,10 @@
           // align-items: center;
           position: relative;
 
+          &.shrink {
+            flex-shrink: 2;
+          }
+
           .slides {
             width: 100%;
             height: 160px;
@@ -357,6 +361,10 @@
   box-sizing: border-box;
   clear: both;
 
+  &.mb-10 {
+    margin-bottom: 10px;
+  }
+
   &.transparent {
     .body {
       border: none;
@@ -391,6 +399,7 @@
     flex-flow: column;
     justify-items: center;
     padding-bottom: 10px;
+    padding-top: 5px;
     border: 2px solid #979797;
   }
 
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 30a7808b..218ed9d5 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -61,6 +61,9 @@
   width: 100%;
   position: relative;
 }
+.setup .modal section.body section article.shrink {
+  flex-shrink: 2;
+}
 .setup .modal section.body section article .slides {
   width: 100%;
   height: 160px;
@@ -287,6 +290,9 @@
   box-sizing: border-box;
   clear: both;
 }
+.box.mb-10 {
+  margin-bottom: 10px;
+}
 .box.transparent .body {
   border: none;
 }
@@ -315,6 +321,7 @@
   flex-flow: column;
   justify-items: center;
   padding-bottom: 10px;
+  padding-top: 5px;
   border: 2px solid #979797;
 }
 .box .submit {
@@ -5739,7 +5746,7 @@ select:focus {
   border: none;
   display: flex;
   flex-flow: row nowrap;
-  padding: 4px;
+  padding: 0 4px;
   align-items: center;
   justify-content: stretch;
 }
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
index 85bf3ab5..5c205f70 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
@@ -22,25 +22,25 @@
 			</div>
 		</aside>
 		<hr />
-		<article>
+		<article class="shrink">
 			<scheda
-				class="box-500"
+				class="box-500 mb-10"
 				:portata="recipe.upperplate_air_1_chart_setpointx"
 				:durata="recipe.upperplate_air_1_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500"
+				class="box-500 mb-10"
 				:portata="recipe.upperplate_air_2_chart_setpointx"
 				:durata="recipe.upperplate_air_2_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500"
+				class="box-500 mb-10"
 				:portata="recipe.upperplate_air_3_chart_setpointx"
 				:durata="recipe.upperplate_air_3_chart_setpointy"
 			></scheda>
 		</article>
-		<div class="specific">
-			<div class="box transparent">
+		<article>
+			<div class="box transparent center box-500">
 				<div class="body">
 					<div class="input-area">
 						<label>{{'upperplate_air_max_time'|localize('Durata massima')}}</label>
@@ -49,7 +49,7 @@
 					<slider v-model="recipe.upperplate_air_max_time"></slider>
 				</div>
 			</div>
-		</div>
+		</article>
 	</section>
 </template>
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
index fe3efe7b..ecfa6ce9 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
@@ -1,33 +1,34 @@
 <template>
 	<section>
 		<aside class="scrollable auto">
-			<div class="input-area">
-				<label>{{'upperplate_extraction_enable'|localize('Abilitazione')}}</label>
-				<toggle-button v-model="recipe.upperplate_extraction_enable.status.enabled"></toggle-button>
+			<div class="box transparent">
+				<div class="body">
+					<div class="input-area">
+						<label>{{'upperplate_extraction_enable'|localize('Abilitazione')}}</label>
+						<toggle-button v-model="recipe.upperplate_extraction_enable.status.enabled"></toggle-button>
+					</div>
+					<div class="input-area">
+						<img src="assets/icons/png/clessidra.png" />
+						<label>{{'upperplate_extraction_delay'|localize('Ritardo')}}</label>
+						<numeric v-model="recipe.upperplate_extraction_delay" />
+					</div>
+					<slider v-model="recipe.upperplate_extraction_delay"></slider>
+					<div class="input-area">
+						<label>{{'upperplate_extraction_manual'|localize('Portata manuale')}}</label>
+						<numeric v-model="recipe.upperplate_extraction_manual" />
+					</div>
+					<slider v-model="recipe.upperplate_extraction_delay"></slider>
+				</div>
 			</div>
-			<div class="input-area">
-				<img src="assets/icons/png/clessidra.png" />
-				<label>{{'upperplate_extraction_delay'|localize('Ritardo')}}</label>
-				<numeric v-model="recipe.upperplate_extraction_delay" />
-			</div>
-			<slider
-				v-model="recipe.upperplate_extraction_delay"
-			></slider>
-			<div class="input-area">
-				<label>{{'upperplate_extraction_manual'|localize('Portata manuale')}}</label>
-				<numeric v-model="recipe.upperplate_extraction_manual" />
-			</div>
-			<slider
-				v-model="recipe.upperplate_extraction_delay"
-			></slider>
 		</aside>
 		<hr />
-		<div class="specific">
+		<article class="shrink">
 			<scheda
+				class="box-500"
 				:portata="recipe.upperplate_extraction_1_chart_setpointx"
 				:durata="recipe.upperplate_extraction_1_chart_setpointy"
 			></scheda>
-		</div>
+		</article>
 	</section>
 </template>
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
index d4276ce5..9aa008ff 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
@@ -1,50 +1,55 @@
 <template>
 	<section>
 		<aside class="scrollable auto">
-			<div class="input-area">
-				<label>{{'upperplate_vacuum_enable'|localize('Abilitazione')}}</label>
-				<toggle-button v-model="recipe.upperplate_vacuum_enable.status.enabled"></toggle-button>
+			<div class="box transparent">
+				<div class="body">
+					<div class="input-area">
+						<label>{{'upperplate_vacuum_enable'|localize('Abilitazione')}}</label>
+						<toggle-button v-model="recipe.upperplate_vacuum_enable.status.enabled"></toggle-button>
+					</div>
+					<div class="input-area">
+						<img src="assets/icons/png/clessidra.png" />
+						<label>{{'upperplate_vacuum_delay'|localize('Ritardo')}}</label>
+						<numeric v-model="recipe.upperplate_vacuum_delay" />
+					</div>
+					<slider v-model="recipe.upperplate_vacuum_delay"></slider>
+					<div class="input-area">
+						<label>{{'upperplate_vacuum_manual'|localize('Portata manuale')}}</label>
+						<numeric v-model="recipe.upperplate_vacuum_manual" />
+					</div>
+					<slider v-model="recipe.upperplate_vacuum_delay"></slider>
+				</div>
 			</div>
-			<div class="input-area">
-				<img src="assets/icons/png/clessidra.png" />
-				<label>{{'upperplate_vacuum_delay'|localize('Ritardo')}}</label>
-				<numeric v-model="recipe.upperplate_vacuum_delay" />
-			</div>
-			<slider
-				v-model="recipe.upperplate_vacuum_delay"
-			></slider>
-			<div class="input-area">
-				<label>{{'upperplate_vacuum_manual'|localize('Portata manuale')}}</label>
-				<numeric v-model="recipe.upperplate_vacuum_manual" />
-			</div>
-			<slider
-				v-model="recipe.upperplate_vacuum_delay"
-			></slider>
 		</aside>
 		<hr />
-		<div class="specific">
+		<article class="shrink">
 			<scheda
+				class="box-500 mb-10"
 				:portata="recipe.upperplate_vacuum_1_chart_setpointx"
 				:durata="recipe.upperplate_vacuum_1_chart_setpointy"
 			></scheda>
 			<scheda
+				class="box-500 mb-10"
 				:portata="recipe.upperplate_vacuum_2_chart_setpointx"
 				:durata="recipe.upperplate_vacuum_2_chart_setpointy"
 			></scheda>
 			<scheda
+				class="box-500 mb-10"
 				:portata="recipe.upperplate_vacuum_3_chart_setpointx"
 				:durata="recipe.upperplate_vacuum_3_chart_setpointy"
 			></scheda>
-		</div>
-		<div class="specific">
-			<div class="input-area">
-				<label>{{'upperplate_vacuum_max_time'|localize('Durata massima')}}</label>
-				<numeric v-model="recipe.upperplate_vacuum_max_time" />
+		</article>
+		<article>
+			<div class="box transparent center box-500">
+				<div class="body">
+					<div class="input-area">
+						<label>{{'upperplate_vacuum_max_time'|localize('Durata massima')}}</label>
+						<numeric v-model="recipe.upperplate_vacuum_max_time" />
+					</div>
+					<slider v-model="recipe.upperplate_vacuum_max_time"></slider>
+				</div>
 			</div>
-			<slider
-				v-model="recipe.upperplate_vacuum_max_time"
-			></slider>
-		</div>
+		</article>
 	</section>
 </template>