Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix paddle

Browse Source
This commit is contained in:
Alessio
2020-05-04 16:18:33 +02:00
parent 16bda5b2a9
commit bfd963f8d7
9 changed files with 286 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/paddle.less
+123 -115
View File
@@ -6,88 +6,81 @@
html {
height: 100%;
overflow:hidden;
}
}
body {
border: 0; margin: 0; padding: 0;
height: 100%;
}
.hidden {
visibility: hidden;
}
.main-nav {
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: 9999;
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: 10px;
height: 10px;
border-radius: 10px;
margin: 3px;
background: #002680;
}
}
}
}
}
// .slide-enter-active,
// .slide-leave-active
// {
// transition: left,right 0s ease-in-out;
// }
.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;
}
// .slide-enter,
// .slide-leave-to {
// transition: right,left 0s ease-in-out
// }
.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;
label{
width: 117px;
margin: 10px;
}
}
.text-box-paddle.text-soft{
label{
width: 100%;
align-self: center;
}
}
.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;
}
.slide-enter-active,
.slide-leave-active
{
transition: left,right 0s ease-in-out;
}
.slide-enter,
.slide-leave-to {
transition: right,left 0s ease-in-out
}
.sidebar{
.sidebar-backdrop {
width: 100vw;
@@ -112,58 +105,73 @@ html {
border-radius: 4px;
box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
background-color: #dddddd;
}
.hidden {
visibility: hidden;
}
.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;
}
button {
cursor: pointer;
}
.box-sidebar-panel{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-items: center;
.switch-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 9999;
border: 0;
border-radius: 0;
pointer-events: all;
background: #dddddd;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
height: 90px;
width: 45px;
}
.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;
.circle-button {
width: 10px;
height: 10px;
border-radius: 10px;
margin: 3px;
background: #002680;
.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;
}
}
}
}
}
.switch-paddle.active .switch-button {
transform: translate(-761px, 0px);
}
}
.box-circle-paddle{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 5px;
}
.gear-box-paddle{
text-align: end;
width: 50px;
color: #bbbcbc;
}
Thermo.Active/wwwroot/assets/styles/style.css
+126 -160
View File
@@ -4444,166 +4444,6 @@
grid-column: 0.8;
grid-row: 0.5;
}
html {
height: 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
}
.main-nav {
position: absolute;
top: 50%;
right: 0;
}
.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;
}
.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;
}
.text-box-paddle label {
width: 117px;
margin: 10px;
}
.text-box-paddle.text-soft label {
width: 100%;
align-self: center;
}
.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;
}
.slide-enter-active,
.slide-leave-active {
transition: left, right 0s ease-in-out;
}
.slide-enter,
.slide-leave-to {
transition: right, left 0s ease-in-out;
}
.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;
}
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
.switch-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 9999;
border: 0;
border-radius: 0;
pointer-events: all;
background: #dddddd;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
height: 90px;
width: 45px;
}
.circle-button {
width: 10px;
height: 10px;
border-radius: 10px;
margin: 3px;
background: #002680;
}
.switch-paddle.active .switch-button {
transform: translate(-761px, 0px);
}
.box-circle-paddle {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 5px;
}
.gear-box-paddle {
text-align: end;
width: 50px;
color: #bbbcbc;
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg);
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg);
}
.circle-gantt {
height: 70px;
}
@@ -4662,6 +4502,132 @@ button {
width: 20px;
height: 20px;
}
html {
height: 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
}
.hidden {
visibility: hidden;
}
nav {
position: absolute;
top: 50%;
right: 0;
}
nav .active button {
transform: translate(-761px, 0px);
}
nav div button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 9999;
border: 0;
border-radius: 0;
pointer-events: all;
background: #dddddd;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
height: 90px;
width: 45px;
}
nav div button div {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr;
align-items: center;
justify-items: center;
padding: 5px;
}
nav div button div div {
width: 10px;
height: 10px;
border-radius: 10px;
margin: 3px;
background: #002680;
}
.sidebar .sidebar-backdrop {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
}
.sidebar .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;
}
.sidebar .sidebar-panel .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-panel .box-sidebar-panel {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-items: center;
}
.sidebar .sidebar-panel .box-sidebar-panel .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;
}
.sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .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;
}
.sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle i {
text-align: end;
width: 50px;
color: #bbbcbc;
}
.sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle label {
width: 117px;
margin: 10px;
}
.sidebar .sidebar-panel .box-sidebar-panel .sidebar-panel-nav .text-box-paddle.text-soft label {
width: 100%;
align-self: center;
}
.modal.estrazione-info {
width: 560px;
height: 411px;
Thermo.Active/wwwroot/src/App.vue
+2 -7
View File
@@ -18,16 +18,11 @@
</vue-gesture>
</div>
<nav class="main-nav" :class="{'blur':(applyBlur || applyBlurNc)}">
<nav :class="{'blur':(applyBlur || applyBlurNc)}">
<switch-button></switch-button>
</nav>
<sidebar>
</sidebar>
<sidebar></sidebar>
<app-footer :class="{'blur':(applyBlur || applyBlurNc)}"></app-footer>
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
+1 -1
View File
@@ -70,7 +70,7 @@
</div>
</div>
</div>
<!-- <i class="fa fa-cog gear-sidebar-paddle"></i> -->
Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/switch-button.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template>
<div class="switch-paddle" :class="{ 'active' : isSwitchActive() }" @click="togglePaddle()">
<div :class="{ 'active' : isSwitchActive() }" @click="togglePaddle()">
<slot>
<button type="button" class="switch-button" title="Menu">
<div class="box-circle-paddle">
<div class="circle-button"></div>
<div class="circle-button"></div>
<div class="circle-button"></div>
<div class="circle-button"></div>
<button title="Menu">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</button>
</slot>
Thermo.Active/wwwroot/src/app_modules_thermo/components/scheda.ts
+9
View File
@@ -10,6 +10,15 @@ export default class Scheda extends Vue{
portata:number;
@Prop({default:0})
durata:number;
@Prop({default:0})
min_portata:number;
@Prop({default:0})
max_portata:number;
@Prop({default:0})
min_durata:number;
@Prop({default:0})
max_durata:number;
mock_portata:number=this.portata;
mock_durata:number=this.durata;
Thermo.Active/wwwroot/src/app_modules_thermo/components/scheda.vue
+2 -2
View File
@@ -5,12 +5,12 @@
<label>Portata</label>
<input class="rect" v-model="mock_portata">
</div>
<slider :min="0" :max="10" v-model="mock_portata"></slider>
<slider :min="min_portata" :max="max_portata" v-model="mock_portata"></slider>
<div class="input-area">
<label class="Ritardo">Durata</label>
<input class="rect" v-model="mock_durata">
</div>
<slider :min="0" :max="10" v-model="mock_durata"></slider>
<slider :min="min_durata" :max="max_durata" v-model="mock_durata"></slider>
</div>
</div>
</template>
Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
+12
View File
@@ -17,15 +17,27 @@
<div class="specific">
<scheda
:portata="recipe.upperplate_air_1_chart_setpointx.valueAct"
:min_portata="recipe.upperplate_air_1_chart_setpointx.range.min"
:max_portata="recipe.upperplate_air_1_chart_setpointx.range.max"
:durata="recipe.upperplate_air_1_chart_setpointy.valueAct"
:min_durata="recipe.upperplate_air_1_chart_setpointy.range.min"
:max_durata="recipe.upperplate_air_1_chart_setpointy.range.max"
></scheda>
<scheda
:portata="recipe.upperplate_air_2_chart_setpointx.valueAct"
:min_portata="recipe.upperplate_air_2_chart_setpointx.range.min"
:max_portata="recipe.upperplate_air_2_chart_setpointx.range.max"
:durata="recipe.upperplate_air_2_chart_setpointy.valueAct"
:min_durata="recipe.upperplate_air_2_chart_setpointy.range.min"
:max_durata="recipe.upperplate_air_2_chart_setpointy.range.max"
></scheda>
<scheda
:portata="recipe.upperplate_air_3_chart_setpointx.valueAct"
:min_portata="recipe.upperplate_air_3_chart_setpointx.range.min"
:max_portata="recipe.upperplate_air_3_chart_setpointx.range.max"
:durata="recipe.upperplate_air_3_chart_setpointy.valueAct"
:min_durata="recipe.upperplate_air_3_chart_setpointy.range.min"
:max_durata="recipe.upperplate_air_3_chart_setpointy.range.max"
></scheda>
</div>
<div class="specific">
Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue
+4
View File
@@ -65,7 +65,11 @@
<div class="specific">
<scheda
:portata="recipe.drawing_1_chart_setpointx.valueAct"
:min_portata="recipe.drawing_1_chart_setpointx.range.min"
:max_portata="recipe.drawing_1_chart_setpointx.range.max"
:durata="recipe.drawing_1_chart_setpointy.valueAct"
:min_durata="recipe.drawing_1_chart_setpointy.range.min"
:max_durata="recipe.drawing_1_chart_setpointy.range.max"
></scheda>
</div>
</section>