From 10efafaad88cb2786316ceb3f328f8e2b0d02621 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 17 Aug 2023 14:48:05 +0200
Subject: [PATCH] refs 5987 cardList css refactored

---
 src/components/ui/CardList.vue              | 33 +++++++--------------
 test/cypress/integration/workerList.spec.js | 29 +++++++++++++-----
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 48a1c82a6..c70c7b1df 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -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>
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index 79f2400bf..b24568f9f 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -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');
     });
 });