From 7af745087eadb277efddb1e7fb9957622a831478 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Sat, 14 Dec 2024 01:45:54 +0100
Subject: [PATCH] create a card css component

---
 core/static/core/components/card.scss        | 96 ++++++++++++++++++++
 core/static/user/user_detail.scss            |  4 +-
 eboutic/static/eboutic/css/eboutic.css       | 86 +-----------------
 eboutic/templates/eboutic/eboutic_main.jinja | 18 ++--
 election/static/election/css/election.scss   |  9 +-
 sas/static/sas/css/album.scss                |  6 +-
 sas/static/sas/css/picture.scss              |  4 +-
 7 files changed, 123 insertions(+), 100 deletions(-)
 create mode 100644 core/static/core/components/card.scss

diff --git a/core/static/core/components/card.scss b/core/static/core/components/card.scss
new file mode 100644
index 00000000..1cbb2601
--- /dev/null
+++ b/core/static/core/components/card.scss
@@ -0,0 +1,96 @@
+@import "core/static/core/colors";
+
+@mixin row-layout {
+  min-height: 100px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  .card-image {
+    max-width: 75px;
+  }
+  .card-content {
+    flex: 1;
+    text-align: left;
+  }
+}
+
+.card {
+  background-color: $primary-neutral-light-color;
+  border-radius: 5px;
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px 10px;
+  height: fit-content;
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+
+  &:hover {
+    background-color: darken($primary-neutral-light-color, 5%);
+  }
+
+  &.selected {
+    animation: bg-in-out 1s ease;
+    background-color: rgb(216, 236, 255);
+  }
+
+  .card-image {
+    width: 100%;
+    height: 100%;
+    min-height: 70px;
+    max-height: 70px;
+    object-fit: contain;
+    border-radius: 4px;
+    line-height: 70px;
+  }
+
+  i.card-image {
+    color: black;
+    text-align: center;
+    background-color: rgba(173, 173, 173, 0.2);
+    width: 80%;
+  }
+
+  .card-content {
+    color: black;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 100%;
+
+    p {
+      font-size: 13px;
+      margin: 0;
+    }
+
+    .card-title {
+      margin: 0;
+      font-size: 15px;
+      word-break: break-word;
+    }
+  }
+
+  @keyframes bg-in-out {
+    0% {
+      background-color: white;
+    }
+    100% {
+      background-color: rgb(216, 236, 255);
+    }
+  }
+
+  @media screen and (max-width: 765px) {
+    @include row-layout
+  }
+
+  // When combined with card, card-row display the card in a row layout,
+  // whatever the size of the screen.
+  &.card-row {
+    @include row-layout
+  }
+}
+
diff --git a/core/static/user/user_detail.scss b/core/static/user/user_detail.scss
index 87a3d199..60985f16 100644
--- a/core/static/user/user_detail.scss
+++ b/core/static/user/user_detail.scss
@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 main {
   box-sizing: border-box;
   display: flex;
@@ -69,7 +71,7 @@ main {
         border-radius: 50%;
         justify-content: center;
         align-items: center;
-        background-color: #f2f2f2;
+        background-color: $primary-neutral-light-color;
 
         > span {
           font-size: small;
diff --git a/eboutic/static/eboutic/css/eboutic.css b/eboutic/static/eboutic/css/eboutic.css
index 5fb611ad..abf121d0 100644
--- a/eboutic/static/eboutic/css/eboutic.css
+++ b/eboutic/static/eboutic/css/eboutic.css
@@ -108,28 +108,8 @@
   column-gap: 15px;
   row-gap: 15px;
 }
-#eboutic .product-button {
-  position: relative;
-  box-sizing: border-box;
-  min-height: 180px;
-  height: fit-content;
-  width: 150px;
-  padding: 15px;
-  overflow: hidden;
-  box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 5px;
-  justify-content: flex-start;
-}
 
-#eboutic .product-button.selected {
-  animation: bg-in-out 1s ease;
-  background-color: rgb(216, 236, 255);
-}
-
-#eboutic .product-button.selected::after {
+#eboutic .card.selected::after {
   content: "🛒";
   position: absolute;
   top: 5px;
@@ -144,36 +124,6 @@
   line-height: 20px;
 }
 
-#eboutic .product-button:active {
-  box-shadow: none;
-}
-
-#eboutic .product-image {
-  width: 100%;
-  height: 100%;
-  min-height: 70px;
-  max-height: 70px;
-  object-fit: contain;
-  border-radius: 4px;
-  line-height: 70px;
-  margin-bottom: 15px;
-}
-
-#eboutic i.product-image {
-  background-color: rgba(173, 173, 173, 0.2);
-}
-
-#eboutic .product-description h4 {
-  font-size: .75em;
-  word-break: break-word;
-  margin: 0 0 5px 0;
-}
-
-#eboutic .product-button p {
-  font-size: 13px;
-  margin: 0;
-}
-
 #eboutic .catalog-buttons {
   display: flex;
   justify-content: center;
@@ -207,39 +157,5 @@
     justify-content: space-around;
     flex-direction: column;
   }
-
-  #eboutic .product-group .product-button {
-    min-height: 100px;
-    width: 100%;
-    max-width: 100%;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-  }
-
-  #eboutic .product-group .product-description {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  #eboutic .product-description h4 {
-    text-align: left;
-    max-width: 90%;
-  }
-
-  #eboutic .product-image {
-    margin-bottom: 0;
-    max-width: 70px;
-  }
 }
 
-@keyframes bg-in-out {
-  0% {
-    background-color: white;
-  }
-  100% {
-    background-color: rgb(216, 236, 255);
-  }
-}
diff --git a/eboutic/templates/eboutic/eboutic_main.jinja b/eboutic/templates/eboutic/eboutic_main.jinja
index b71eb434..3e6049f2 100644
--- a/eboutic/templates/eboutic/eboutic_main.jinja
+++ b/eboutic/templates/eboutic/eboutic_main.jinja
@@ -15,7 +15,8 @@
 {% endblock %}
 
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static('eboutic/css/eboutic.css') }}">
+  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
+  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 
 {% block content %}
@@ -104,18 +105,21 @@
                 {% for p in items %}
                   <button
                     id="{{ p.id }}"
-                    class="product-button"
+                    class="card product-button clickable shadow"
                     :class="{selected: items.some((i) => i.id === {{ p.id }})}"
                     @click='addFromCatalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'
                   >
                     {% if p.icon %}
-                      <img class="product-image" src="{{ p.icon.url }}"
-                           alt="image de {{ p.name }}">
+                      <img
+                        class="card-image"
+                        src="{{ p.icon.url }}"
+                        alt="image de {{ p.name }}"
+                      >
                     {% else %}
-                      <i class="fa-regular fa-image fa-2x product-image"></i>
+                      <i class="fa-regular fa-image fa-2x card-image"></i>
                     {% endif %}
-                    <div class="product-description">
-                      <h4>{{ p.name }}</h4>
+                    <div class="card-content">
+                      <h4 class="card-title">{{ p.name }}</h4>
                       <p>{{ p.selling_price }} €</p>
                     </div>
                   </button>
diff --git a/election/static/election/css/election.scss b/election/static/election/css/election.scss
index ab12078d..c356be85 100644
--- a/election/static/election/css/election.scss
+++ b/election/static/election/css/election.scss
@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 $padding: 1.5rem;
 $padding_smaller: .5rem;
 $gap: .25rem;
@@ -50,8 +52,7 @@ $min_col_width: 100px;
         position: relative;
         min-width: $min_col_width;
 
-        >a{
-          margin-left: $padding;
+        >a {
           width: 20px;
           height: 20px;
           text-align: center;
@@ -269,12 +270,12 @@ $min_col_width: 100px;
   border: none;
   color: black;
   text-decoration: none;
-  background-color: #f2f2f2;
+  background-color: $primary-neutral-light-color;
   padding: 0.4em;
   margin: 0.1em;
   font-size: 1.18em;
   border-radius: 5px;
-  box-shadow: #dfdfdf 0px 0px 1px;
+  box-shadow: #dfdfdf 0 0 1px;
   cursor: pointer;
 
   &:hover {
diff --git a/sas/static/sas/css/album.scss b/sas/static/sas/css/album.scss
index e3c3527a..fdc317c2 100644
--- a/sas/static/sas/css/album.scss
+++ b/sas/static/sas/css/album.scss
@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 main {
   box-sizing: border-box;
   padding: 10px;
@@ -25,7 +27,7 @@ main {
     font-size: 1.2em;
     line-height: 1.2em;
     color: black;
-    background-color: #f2f2f2;
+    background-color: $primary-neutral-light-color;
     border-radius: 5px;
     font-weight: bold;
 
@@ -34,7 +36,7 @@ main {
     }
 
     &:disabled {
-      background-color: #f2f2f2;
+      background-color: $primary-neutral-light-color;
       color: #d4d4d4;
     }
   }
diff --git a/sas/static/sas/css/picture.scss b/sas/static/sas/css/picture.scss
index b86bc90a..f9444051 100644
--- a/sas/static/sas/css/picture.scss
+++ b/sas/static/sas/css/picture.scss
@@ -1,3 +1,5 @@
+@import "core/static/core/colors";
+
 #content {
   padding: 10px !important;
 }
@@ -241,7 +243,7 @@
       >div {
         >a.button {
           box-sizing: border-box;
-          background-color: #f2f2f2;
+          background-color: $primary-neutral-light-color;
           display: flex;
           justify-content: center;
           align-items: center;