verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 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>
<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>
<slot name="title">
<div class="title">
<div class="title text-primary text-weight-bold text-h5">
{{ $props.title ?? `#${$props.id}` }}
</div>
</slot>
<div class="card-list-body">
<div class="list-items">
<div class="card-list-body row">
<div class="list-items row flex-wrap-wrap q-mt-md">
<slot name="list-items" />
</div>
<div class="actions">
<div class="actions column justify-center">
<slot name="actions" />
</div>
</div>
@ -66,30 +66,17 @@ const $props = defineProps({
<style lang="scss" scoped>
.card {
padding: 30px;
transition: background-color 0.2s;
}
.card-list-body {
display: flex;
justify-content: space-between;
}
.card:hover {
background-color: var(--vn-gray);
}
.title {
color: $primary;
font-size: 22px;
font-weight: bold;
}
.list-items {
width: 100%;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
width: 90%;
}
.actions {
display: flex;
flex-direction: column;
justify-content: center;
@media (max-width: $breakpoint-xs) {
.list-items {
width: 85%;
}
}
</style>

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

@ -6,18 +6,33 @@ describe('WorkerList', () => {
});
it('should load workers', () => {
cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', 'Jessica Jones');
cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', 'Bruce Banner');
cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', 'Charles Xavier');
cy.get('.list-items > .vn-label-value:nth-child(2) > .value')
.eq(0)
.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', () => {
cy.get('div.text-h6')
.parentsUntil('div.q-card')
.find('div.q-card__actions')
.find('button').first().click();
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');
.find('button')
.first()
.click();
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');
});
});