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

refs 5987 cardList css refactored
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Jorge Penadés 2023-08-17 14:48:05 +02:00
parent 59f2f1a414
commit 10efafaad8
2 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,19 +5,19 @@ const $props = defineProps({
}); });
</script> </script>
<template> <template>
<QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7"> <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
<div> <div>
<slot name="title"> <slot name="title">
<div class="title"> <div class="title text-primary text-weight-bold text-h5">
{{ $props.title ?? `#${$props.id}` }} {{ $props.title ?? `#${$props.id}` }}
</div> </div>
</slot> </slot>
<div class="card-list-body"> <div class="card-list-body row">
<div class="list-items"> <div class="list-items row flex-wrap-wrap q-mt-md">
<slot name="list-items" /> <slot name="list-items" />
</div> </div>
<div class="actions"> <div class="actions column justify-center">
<slot name="actions" /> <slot name="actions" />
</div> </div>
</div> </div>
@ -66,30 +66,17 @@ const $props = defineProps({
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .card {
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: var(--vn-gray); background-color: var(--vn-gray);
} }
.title {
color: $primary;
font-size: 22px;
font-weight: bold;
}
.list-items { .list-items {
width: 100%; width: 90%;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
} }
.actions { @media (max-width: $breakpoint-xs) {
display: flex; .list-items {
flex-direction: column; width: 85%;
justify-content: center; }
} }
</style> </style>

29
test/cypress/integration/workerList.spec.js
View File

@ -6,18 +6,33 @@ describe('WorkerList', () => {
}); });
it('should load workers', () => { it('should load workers', () => {
cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', 'Jessica Jones'); cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', 'Bruce Banner'); .eq(0)
cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', 'Charles Xavier'); .should('have.text', 'Jessica Jones');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(1)
.should('have.text', 'Bruce Banner');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(2)
.should('have.text', 'Charles Xavier');
}); });
it('should open the worker summary', () => { it('should open the worker summary', () => {
cy.get('div.text-h6') cy.get('div.text-h6')
.parentsUntil('div.q-card') .parentsUntil('div.q-card')
.find('div.q-card__actions') .find('div.q-card__actions')
.find('button').first().click(); .find('button')
cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '1110 - Jessica Jones'); .first()
cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data'); .click();
cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data'); cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should(
'have.text',
'1110 - Jessica Jones'
);
cy.get('div[class="q-item__label q-item__label--header text-h6"]')
.eq(0)
.should('have.text', 'Basic data');
cy.get('div[class="q-item__label q-item__label--header text-h6"]')
.eq(1)
.should('have.text', 'User data');
}); });
}); });