mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blocks

This commit is contained in:
aarizona 2024-09-27 16:50:47 +03:00
parent 988b490d87
commit 0341756dd1
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/main.scss
View File

@ -281,7 +281,7 @@ input[type=checkbox] {
} }
input[type=range] { input[type=range] {
@apply w-full bg-transparent cursor-pointer appearance-none disabled:opacity-50 disabled:pointer-events-none focus:outline-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:-mt-0.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_#111] [&::-webkit-slider-thumb]:shadow-slate-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-in-out [&::-webkit-slider-thumb]:dark:bg-neutral-700 [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-4 [&::-moz-range-thumb]:border-blue-600 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-in-out [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:bg-gray-100 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:dark:bg-neutral-700 [&::-moz-range-track]:w-full [&::-moz-range-track]:h-2 [&::-moz-range-track]:bg-gray-100 [&::-moz-range-track]:rounded-full; @apply w-full bg-transparent border-transparent cursor-pointer appearance-none disabled:opacity-50 disabled:pointer-events-none focus:outline-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:-mt-0.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_#111] [&::-webkit-slider-thumb]:shadow-slate-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-in-out [&::-webkit-slider-thumb]:dark:bg-neutral-700 [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-4 [&::-moz-range-thumb]:border-blue-600 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-in-out [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:bg-gray-100 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:dark:bg-neutral-700 [&::-moz-range-track]:w-full [&::-moz-range-track]:h-2 [&::-moz-range-track]:bg-gray-100 [&::-moz-range-track]:rounded-full;
} }
textarea { textarea {
@ -298,14 +298,14 @@ button {
} }
.form { .form {
@apply col-span-full h-full grid grid-cols-12 gap-4 justify-between; @apply col-span-full h-full flex flex-col gap-4 justify-between;
&-group { &-group {
@apply col-span-full rounded gap-2; @apply rounded flex flex-col gap-4 p-4 shadow shadow-slate-400;
} }
&-row { &-row {
@apply col-span-full flex flex-row flex-wrap gap-2; @apply flex flex-row flex-wrap gap-2;
} }
&-item { &-item {
@ -323,6 +323,14 @@ button {
} }
} }
&_total {
@apply w-full flex-nowrap;
input {
@apply w-20 bg-slate-300;
}
}
&_checkbox { &_checkbox {
@apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-4; @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-4;
} }
@ -336,6 +344,9 @@ button {
input { input {
@apply flex-grow; @apply flex-grow;
} }
span {
@apply min-w-16;
}
} }
} }

10
components/calc/values.vue
View File

@ -205,14 +205,14 @@ const calc_table = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group shadow shadow-slate-400"> <div class="form-group">
<div class="form-row"> <div class="form-row">
<div class="form-item form-item_range w-full"> <div class="form-item form-item_range w-full">
<label for="length">Длина ламельного блока, мм</label> <label for="length">Длина ламельного блока, мм</label>
<div> <div>
<span>{{ form_state.length.toFixed(0) }}&nbsp;мм</span>
<input id="length" type="range" v-bind="parametric.length" v-model="form_state.length" <input id="length" type="range" v-bind="parametric.length" v-model="form_state.length"
:disabled="form_state.auto_length" :ref="form_refs.length" /> :disabled="form_state.auto_length" :ref="form_refs.length" />
<span>{{ form_state.length.toFixed(0) }}&nbsp;мм</span>
</div> </div>
</div> </div>
</div> </div>
@ -220,17 +220,17 @@ const calc_table = computed(() => {
<div class="form-item form-item_range w-full"> <div class="form-item form-item_range w-full">
<label for="height">Высота забора, мм</label> <label for="height">Высота забора, мм</label>
<div> <div>
<span>{{ form_state.height }}&nbsp;мм</span>
<input id="height" type="range" v-bind="parametric.height" v-model="form_state.height" <input id="height" type="range" v-bind="parametric.height" v-model="form_state.height"
:ref="form_refs.height" /> :ref="form_refs.height" />
<span>{{ form_state.height }}&nbsp;мм</span>
</div> </div>
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-item w-full"> <div class="form-item form-item_total">
<label for="total_length">Общая длина забора, м</label> <label for="total_length">Общая длина забора, м</label>
<input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600" <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" /> v-model="form_state.total_length" :ref="form_refs.total_length" />
</div> </div>
<div class="form-item text-sm xl:text-base"> <div class="form-item text-sm xl:text-base">
<p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim"> <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">