verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 96 Releases Wiki Activity

#7404 - fixSomeStyleIssues #783

Closed
jsegarra wants to merge 20 commits from 7404-fixSomeStyleIssues into dev
pull from: 7404-fixSomeStyleIssues
merge into: verdnatura:dev
Conversation 4 Commits 20 Files Changed 7 +172 -130
7 changed files with 172 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/common/VnInput.vue
View File

@ -127,27 +127,31 @@ const mixinRules = [
inputMax: Debe ser menor a {value}
</i18n>
<style lang="scss">
.q-field__append {
.q-field {
&__append {
padding-inline: 0;
}
.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
height: 20px;
}
.q-field--outlined .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
height: auto;
}
.q-field__control {
height: unset;
}
&.q-field__marginal.row.no-wrap.items-center.row {
height: 35px;
}
}
.q-field--labeled {
&--rounded > .q-field__inner > .q-field__control,
&--labeled:not(&--outlined) > .q-field__inner > .q-field__control {
height: 43px;
align-items: baseline;
}
&--labeled {
.q-field__native,
.q-field__prefix,
.q-field__suffix,
.q-field__input {
padding-bottom: 0;
min-height: 15px;
line-height: 20px;
min-height: fit-content;
align-items: flex-start;
}
}
}
</style>

3
src/components/common/VnInputDate.vue
View File

@ -105,6 +105,7 @@ const styleAttrs = computed(() => {
hide-bottom-space
>
<template #append>
<div style="align-items: flex-end; display: flex">
<QIcon
name="close"
size="xs"
@ -120,6 +121,7 @@ const styleAttrs = computed(() => {
isPopupOpen = false;
"
/>
<QIcon
v-if="showEvent"
name="event"
@ -127,6 +129,7 @@ const styleAttrs = computed(() => {
@click="isPopupOpen = !isPopupOpen"
:title="t('Open date')"
/>
</div>
</template>
<QMenu
transition-show="scale"

2
src/components/common/VnInputTime.vue
View File

@ -84,6 +84,7 @@ function dateToTime(newDate) {
hide-bottom-space
>
<template #append>
<div style="align-items: flex-end; display: flex">
<QIcon
name="close"
size="xs"
@ -105,6 +106,7 @@ function dateToTime(newDate) {
@click="isPopupOpen = !isPopupOpen"
:title="t('Open time')"
/>
</div>
</template>
<QMenu
transition-show="scale"

5
src/components/ui/VnSearchbar.vue
View File

@ -170,7 +170,12 @@ async function search() {
cursor: help;
}
#searchbar {
.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
height: inherit;
}
.q-field--standout.q-field--highlighted .q-field__control {
align-items: center;
background-color: white;
color: black;
.q-field__native,

6
src/css/app.scss
View File

@ -288,14 +288,18 @@ input::-webkit-inner-spin-button {
color: $info;
}
}
.q-field__inner {
.q-field__control {
min-height: auto !important;
display: flex;
align-items: flex-end;
align-items: self-start;
padding-bottom: 2px;
.q-field__native.row {
min-height: auto !important;
}
}
}
.q-textarea.q-field--labeled .q-field__control-container {
padding-top: 23px;
}

90
src/pages/Item/ItemFixedPrice.vue
View File

@ -102,17 +102,12 @@ const columns = computed(() => [
label: t('item.fixedPrice.started'),
field: 'started',
name: 'started',
format: ({ started }) => toDate(started),
cardVisible: true,
...defaultColumnAttrs,
columnField: {
component: 'date',
class: 'shrink',
},
columnFilter: {
component: 'date',
},
columnClass: 'expand',
style: ' max-width: 90px',
format: ({ started }) => toDate(started),
},
{
label: t('item.fixedPrice.ended'),
@ -120,14 +115,11 @@ const columns = computed(() => [
name: 'ended',
...defaultColumnAttrs,
cardVisible: true,
columnField: {
component: 'date',
class: 'shrink',
},
columnFilter: {
component: 'date',
},
columnClass: 'expand',
style: ' max-width: 100px',
format: (row) => toDate(row.ended),
},
@ -469,6 +461,7 @@ function handleOnDataSave({ CrudModelRef }) {
option-value="id"
v-model="props.row.itemFk"
v-on="getRowUpdateInputEvents(props, true, 'select')"
:is-clearable="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
@ -489,28 +482,24 @@ function handleOnDataSave({ CrudModelRef }) {
<FetchedTags :item="row" />
</template>
<template #column-rate2="props">
<QTd class="col">
<VnInput
type="currency"
style="width: 75px"
v-model.number="props.row.rate2"
v-on="getRowUpdateInputEvents(props)"
>
<template #append>€</template>
<template #append> € </template>
</VnInput>
</QTd>
</template>
<template #column-rate3="props">
<QTd class="col">
<VnInput
style="width: 75px"
type="currency"
v-model.number="props.row.rate3"
v-on="getRowUpdateInputEvents(props)"
>
<template #append>€</template>
<template #append> € </template>
</VnInput>
</QTd>
</template>
<template #column-minPrice="props">
<QTd class="col">
@ -529,7 +518,7 @@ function handleOnDataSave({ CrudModelRef }) {
v-model.number="props.row.minPrice"
v-on="getRowUpdateInputEvents(props)"
>
<template #append>€</template>
<template #append> € </template>
</VnInput>
</div>
</QTd>
@ -537,7 +526,7 @@ function handleOnDataSave({ CrudModelRef }) {
<template #column-started="props">
<VnInputDate
class="vnInputDate"
:show-event="true"
:show-event="false"
v-model="props.row.started"
v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isBigger(props.row.started))"
@ -546,14 +535,13 @@ function handleOnDataSave({ CrudModelRef }) {
<template #column-ended="props">
<VnInputDate
class="vnInputDate"
:show-event="true"
:show-event="false"
v-model="props.row.ended"
v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isLower(props.row.ended))"
/>
</template>
<template #column-warehouseFk="props">
<QTd class="col">
<VnSelect
style="max-width: 150px"
:options="warehousesOptions"
@ -563,7 +551,6 @@ function handleOnDataSave({ CrudModelRef }) {
v-model="props.row.warehouseFk"
v-on="getRowUpdateInputEvents(props, false, 'select')"
/>
</QTd>
</template>
<template #column-deleteAction="{ row, rowIndex }">
<QIcon
@ -597,33 +584,41 @@ function handleOnDataSave({ CrudModelRef }) {
</QPage>
</template>
<style lang="scss">
.q-table th,
.q-table td {
.q-table {
th,
td {
padding-inline: 5px !important;
}
.q-table tr td {
}
tr td {
font-size: 10pt;
border-top: none;
border-collapse: collapse;
}
.q-table tbody td {
}
tbody td {
max-width: none;
.q-td.col {
& .vnInputDate {
.vnInputDate {
min-width: 90px;
}
& div.row {
& .q-checkbox {
& .q-checkbox__inner {
div.row {
.q-checkbox {
.q-checkbox__inner {
position: relative !important;
&.q-checkbox__inner--truthy {
&--truthy {
color: var(--q-primary);
}
}
}
}
}
}
}
.q-field__after,
.q-field__append {
padding: 0;
@ -632,6 +627,7 @@ function handleOnDataSave({ CrudModelRef }) {
tbody tr.highlight .q-td {
animation: highlight-animation 4s ease-in-out;
}
@keyframes highlight-animation {
0% {
background-color: $primary-light;
@ -640,12 +636,38 @@ tbody tr.highlight .q-td {
background-color: transparent;
}
}
.subName {
margin-left: 5%;
font-size: 0.75rem;
text-transform: uppercase;
color: var(--vn-label-color);
}
.q-td .q-field__control.relative-position.row.no-wrap {
height: 25px;
display: flex;
align-items: center;
.q-icon:not(.q-select__dropdown-icon) {
padding-bottom: 7px;
}
.q-icon.q-select__dropdown-icon {
padding-bottom: 5px;
}
.q-field__native,
.q-field__prefix,
.q-field__suffix,
.q-field__input {
padding-bottom: 0;
}
.q-field__append.q-field__marginal.row.no-wrap.items-center {
align-items: flex-end;
}
}
</style>
<i18n>
es:

2
src/pages/Item/ItemListFilter.vue
View File

@ -365,6 +365,7 @@ onMounted(async () => {
>
<QItemSection class="col">
<VnSelect
style="max-width: 50%"
:label="t('params.tag')"
:model-value="fieldFilter.selectedField"
:options="moreFields"
@ -392,6 +393,7 @@ onMounted(async () => {
@update:model-value="applyFieldFilters(params, searchFn)"
/>
<VnInput
style="max-width: 50%"
v-else
v-model="fieldFilter.value"
:label="t('params.value')"