wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

refs 5987 fix title descriptor and card body

This commit is contained in:
Jorge Penadés 2023-08-10 16:09:48 +02:00
parent a194ec745b
commit cb52bfe171
2 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/CardDescriptor.vue
View File

@ -111,12 +111,12 @@ watch($props, async () => {
<QList dense> <QList dense>
<QItemLabel header class="ellipsis text-h5" :lines="1"> <QItemLabel header class="ellipsis text-h5" :lines="1">
<div class="title"> <div class="title">
<span v-if="$props.title"> <span v-if="$props.title" :title="$props.title">
{{ $props.title }} {{ $props.title }}
<QTooltip>{{ $props.title }}</QTooltip> <QTooltip>{{ $props.title }}</QTooltip>
</span> </span>
<slot v-else name="description" :entity="entity"> <slot v-else name="description" :entity="entity">
<span> <span :title="entity.name">
{{ entity.name }} {{ entity.name }}
<QTooltip>{{ entity.name }}</QTooltip> <QTooltip>{{ entity.name }}</QTooltip>
</span> </span>
@ -184,6 +184,8 @@ watch($props, async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
overflow: hidden;
text-overflow: ellipsis;
span { span {
color: $primary; color: $primary;
font-weight: bold; font-weight: bold;

34
src/components/ui/CardList.vue
View File

@ -12,10 +12,11 @@ const $props = defineProps({
{{ $props.title ?? `#${$props.id}` }} {{ $props.title ?? `#${$props.id}` }}
</div> </div>
</slot> </slot>
<div class="card-list-container"> <div class="card-list-body">
<div class="list-items"> <div class="list-items">
<slot name="list-items" /> <slot name="list-items" />
</div> </div>
<div class="actions"> <div class="actions">
<slot name="actions" /> <slot name="actions" />
</div> </div>
@ -24,7 +25,7 @@ const $props = defineProps({
</QCard> </QCard>
</template> </template>
<style lang="scss"> <style lang="scss">
.card-list-container { .card-list-body {
.vn-label-value { .vn-label-value {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -44,19 +45,18 @@ const $props = defineProps({
white-space: nowrap; white-space: nowrap;
} }
} }
}
.actions { .actions {
.q-btn { .q-btn {
width: 30px; width: 30px;
} }
.q-icon { .q-icon {
color: $primary; color: $primary;
font-size: 30px; font-size: 25px;
}
} }
} }
@media (max-width: 460px) { @media (max-width: 460px) {
.card-list-container { .card-list-body {
.vn-label-value { .vn-label-value {
.value { .value {
max-width: 150px; max-width: 150px;
@ -71,17 +71,21 @@ const $props = defineProps({
padding: 30px; padding: 30px;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.card-list-body {
display: flex;
justify-content: space-between;
}
.card:hover { .card:hover {
background-color: $light-gray; background-color: $light-gray;
} }
.title { .title {
color: $primary; color: $primary;
font-size: 25px; font-size: 22px;
font-weight: bold; font-weight: bold;
} }
.list-items { .list-items {
width: 100%;
margin-top: 20px; margin-top: 20px;
width: 89%;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
row-gap: 10px; row-gap: 10px;
@ -89,16 +93,9 @@ const $props = defineProps({
margin-right: 5px; margin-right: 5px;
} }
.card-list-container {
display: flex;
flex-wrap: wrap;
}
.actions { .actions {
display: flex; display: flex;
justify-content: center;
align-items: end;
flex-direction: column; flex-direction: column;
width: 9%;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.list-items { .list-items {
@ -106,9 +103,4 @@ const $props = defineProps({
grid-gap: 5px; grid-gap: 5px;
} }
} }
@media (min-width: 1000px) and (max-width: 1150px) {
.list-items {
grid-template-columns: 1fr;
}
}
</style> </style>