Origin/blip 7260 tables reorgnisation (#290)

J'ai enlevé les style c-display du style de l'app (main.css) pour le mettre dans le style du site styleguide (prototype.css). Celui est uniquement utilisé pour le style du site design.smart.coop. Il ne doit donc jamais se retrouver dans les outils smart (Apps). Le small se retrouve donc dans `c-content.scss` --------- Co-authored-by: marcelpirnay <[email protected]>
smartcoop · Sep 28, 2023 · 5ff6f61 · 5ff6f61
1 parent 6274270
commit 5ff6f61
Show file tree

Hide file tree

Showing 15 changed files with 14,398 additions and 74 deletions.
diff --git a/content/scss/_c-app-layout.scss b/content/scss/_c-app-layout.scss
@@ -15,6 +15,7 @@ Component: app layout
 
 .c-app-layout-inner {
   height: 100%;
+  overflow-x: auto;
 
   @media (max-width: ($g-bp2 - 1px)) {
     // Make full screen scrollable on mobile, mobile navigation pattern needs to be revised in the future

diff --git a/content/scss/_c-content.scss b/content/scss/_c-content.scss
@@ -2,10 +2,9 @@
   c-content
   ---
   Usage: wrap a .c-content class around content to turn it into rich text.
-
-  .c-h1, .c-h2, .c-body-1, c-body 2
+  This is used in production app.
   ---
-  Usage: use these classes to style individual components like their rich text equivalent
+  Usage: This is used in production app.
    ========================================================================== */
 
 .c-h1, .c-h2, .c-h3, .c-h4,
@@ -90,6 +89,12 @@
     line-height: 1.65em;
   }
 
+  small {
+    font-size: 1.3rem;
+    margin: 1.6rem 0;
+    line-height: 1.72;
+  }
+
   dl {
     border: 1px solid $color-gray-100;
     border-radius: .3rem;

diff --git a/content/scss/_c-display.scss b/content/scss/_c-display.scss
@@ -1,8 +1,10 @@
 /* ==========================================================================
   c-display
   ---
+
   Usage: wrap a .c-display class around content to turn it into rich text.
-  Similar to .c-content, but meant for a reading context.
+  Similar to .c-content, but meant for styleguide website only.
+  Do not use c-display in production app.
 
    ========================================================================== */
 
@@ -80,14 +82,7 @@
 
   p {
     margin: 1.8rem 0;
-  }
-
-  small {
-    font-size: 1.6rem;
-    margin: 1.6rem 0;
-    line-height: 1.72;
-  }
-
+  } 
 
   .c-sidenote {
     color: $color-semantic-muted-text;

diff --git a/content/scss/_c-table.scss b/content/scss/_c-table.scss
@@ -70,11 +70,15 @@ $c-table-border-radius: $g-border-radius-medium !default;
   }
 
   thead th {
+    border-right: 2px;
+    border-style: solid;
+    border-color: $color-gray-50;
     &:first-child{
       border-top-left-radius: $g-border-radius-small;
     }
     &:last-child{
       border-top-right-radius: $g-border-radius-small;
+      border-right: 0;
     }
   }
 
@@ -86,7 +90,33 @@ $c-table-border-radius: $g-border-radius-medium !default;
   }
 
   td {
-    border-bottom: 0.1rem solid $c-table-border-color;
+    border-right: 2px;
+    border-style: solid;
+    border-color: $color-gray-50;
+    border-bottom: 2px solid $c-table-border-color;
+    &.border-top-left-r{
+      border-top-left-radius: $g-border-radius-small;
+    }
+    &.border-bottom-left-r{
+      border-bottom-left-radius: $g-border-radius-small;
+    }
+    &:last-child{
+      border-right: 0;
+    }
+  }
+
+  thead tr{
+    background-color: transparent;
+    th{
+      background-color: white;
+    }
+    td.disabled, th.disabled{
+      border: none;
+      background-color: transparent;
+      &+th{
+        border-top-left-radius: $g-border-radius-small;
+      }
+    }
   }
 
   tr:last-child {
@@ -95,10 +125,21 @@ $c-table-border-radius: $g-border-radius-medium !default;
     }
   }
 
+  .dotted{
+      border-right: none;
+      border-right: 2px dashed white;
+  }
+  .dotted-bottom{
+      border-bottom: none;
+      border-bottom: 2px dashed white;
+  }
+
+
+
   td,
   th {
     text-align: left;
-    padding: 1.2rem 1.6rem;
+    padding: 1.2rem 1rem;
     position: relative;
   }
 
@@ -193,7 +234,6 @@ $c-table-border-radius: $g-border-radius-medium !default;
 
 /* Invisible table structure
    ========================================================================== */
-
 .c-table.c-table--invisible {
   border: 0;
   width: 100%;

diff --git a/content/scss/_u-generic.scss b/content/scss/_u-generic.scss
@@ -188,4 +188,17 @@
   .c-app-layout-inner__content{
     margin-top: 10.2rem;
   }
+}
+
+// Generic backgrund 
+.bckg-gray{
+  background-color: $color-gray-25 !important;
+}
+
+.bckg-gray-50{
+  background-color: $color-gray-50 !important;
+}
+
+.bckg-yellow{
+  background-color: $color-yellow-150 !important;
 }
diff --git a/content/scss/main.scss b/content/scss/main.scss
@@ -40,7 +40,6 @@
    ========================================================================== */
 
 @import "_c-content";
-@import "_c-display";
 @import "_c-content-display";
 @import "_c-video-wrapper";
 @import "_c-figure";

diff --git a/content/scss/styleguide-customizations.scss b/content/scss/styleguide-customizations.scss
@@ -12,6 +12,8 @@
 // @import "_c-error-page";
 @import "_c-icon-list"; 
 
+@import "_c-display";
+
 /* ==========================================================================
    Style guide styles
    ========================================================================== */

diff --git a/.../_components/aov-typography/app-style.pug → .../aov-typography/App-style-(c_content).pug b/.../_components/aov-typography/app-style.pug → .../aov-typography/App-style-(c_content).pug
diff --git a/...ponents/aov-typography/document-style.pug → ...pography/Styleguide-style-(c_display).pug b/...ponents/aov-typography/document-style.pug → ...pography/Styleguide-style-(c_display).pug
diff --git a/content/templates/_components/c-table/02-c-table-styled.pug b/content/templates/_components/c-table/02-c-table-styled.pug
@@ -1,19 +1,53 @@
-table.c-table.c-table--styled
-    thead
-        tr
-            th Data
-            th Data
-            th Data
-    tbody
-        tr
-            td Data
-            td Data
-            td Data
-        tr
-            td Data
-            td Data
-            td Data
-        tr
-            td Data
-            td Data
-            td Data
+div.bckg-gray-50.u-padding-l
+    table.c-table.c-table--styled.c-table--bordered.js-data-table
+        thead
+            tr
+                th(rowspan="2" class="disabled") Activité: ABC
+                    +c-badge({skin: 'help'})(data-tooltip="tooltip-1" data-tooltip-placement="right")
+                    .c-tooltip#tooltip-1(role="tooltip")
+                        | Informations sur l'activité en question   
+                        .c-tooltip__arrow(data-popper-arrow)
+                th(rowspan="2") Lorem
+                th(rowspan="2").u-text-center Lorem Ipsum Dolor
+                th(colspan="4").u-text-center.dotted-bottom Lorem Ipsum Dolor
+            tr
+                th.u-text-center.dotted Lorem Ipsum
+                th.u-text-center Total
+
+        tbody
+            tr
+                td(rowspan="3").border-top-left-r Lorem Ipsum
+                td
+                    +c-status-pill({skin: 'success'}) Success
+                td.u-text-center 700,<small>00&nbsp;€</small>
+                td.u-text-center 30%
+                td.u-text-center 1000<small>,00 €</small>
+            tr.bckg-gray
+                td
+                    +c-status-pill({skin: 'pending'}) Pending
+                td.u-text-center 700,<small>00&nbsp;€</small>
+                td.u-text-center 30%
+                td.u-text-center 1000,<small>00&nbsp;€</small>
+            tr.bckg-yellow
+                td Total
+                td.u-text-center 700,<small>00&nbsp;€</small>
+                td.u-text-center 30%
+                td.u-text-center 1000,<small>00&nbsp;€</small>
+            tr
+                td(rowspan="3").border-bottom-left-r Lorem Ipsum
+                td
+                    +c-status-pill({skin: 'success'}) Success
+                td.u-text-center 700,<small>00&nbsp;€</small>
+                td.u-text-center 30%
+                td.u-text-center 1000,<small>00&nbsp;€</small>
+            tr.bckg-gray
+                td
+                    +c-status-pill({skin: 'pending'}) Pending
+                td.u-text-center 700,<small>00&nbsp;€</small>
+                td.u-text-center 30%
+                td.u-text-center 1000,<small>00&nbsp;€</small>
+            tr.bckg-yellow
+                td Total
+                td.u-text-center 700,<small>00&nbsp;€</small>
+                td.u-text-center 30%
+                td.u-text-center 1000,<small>00&nbsp;€</small>
diff --git a/content/templates/examples/template-examples/recap-table.pug b/content/templates/examples/template-examples/recap-table.pug
@@ -0,0 +1,82 @@
+extends /templates/prototypes/_layouts/default
+
+block append pageVariables
+    - var moduleTitle = "Récapitulatif des sommes des rémunérations"
+
+block content
+    .c-app-layout-inner
+        .c-app-layout-inner__sidebar.u-position-fixed
+            include /templates/prototypes/partials/side-menu
+
+        .c-app-layout-inner__content
+            include /templates/prototypes/partials/main-title-concessions
+
+            .o-container.c-content
+                .o-container-vertical--padding-small.u-position-relative
+                    h3.c-h2.u-spacer-bottom-xl 
+                    table.c-table.c-table--styled.c-table--bordered.js-data-table
+                        thead
+                            tr
+                                th(rowspan="2" class="disabled") Activité: ABC
+                                    +c-badge({skin: 'help'})(data-tooltip="tooltip-1" data-tooltip-placement="right")
+                                    .c-tooltip#tooltip-1(role="tooltip")
+                                        | Informations sur l'activité en question
+                                        .c-tooltip__arrow(data-popper-arrow)
+                                th(rowspan="2") Statut
+                                th(colspan="3").u-text-center.dotted-bottom Concession de droit d’auteur
+                                th(rowspan="2").u-text-center salaire brut <small>(b)</small>
+                                th(rowspan="2").u-text-center Ratio <small>(a/a+b)</small>
+                            tr
+                                th.u-text-center.dotted Total
+                                th.u-text-center.dotted Autre
+                                th.u-text-center.dotted Lié à une prestation  <small>(a)</small>
+
+                        tbody
+                            tr
+                                td(rowspan="3").border-top-left-r Nom Prénom
+                                td
+                                    +c-status-pill({skin: 'success'}) Validées
+                                td.u-text-center 700,<small>00&nbsp;€</small>
+                                td.u-text-center 300,<small>00&nbsp;€</small>
+                                td.u-text-center 500,<small>00&nbsp;€</small>
+                                td.u-text-center 1000,<small>00&nbsp;€</small>
+                                td.u-text-center 33%
+                            tr.bckg-gray
+                                td
+                                    +c-status-pill({skin: 'pending'}) En&nbsp;attente
+                                td.u-text-center 700,<small>00&nbsp;€</small>
+                                td.u-text-center 300,<small>00&nbsp;€</small>
+                                td.u-text-center 500,<small>00&nbsp;€</small>
+                                td.u-text-center 1000,<small>00&nbsp;€</small>
+                                td.u-text-center 33%
+                            tr.bckg-yellow
+                                td Total
+                                td.u-text-center 700,<small>00&nbsp;€</small>
+                                td.u-text-center 300,<small>00&nbsp;€</small>
+                                td.u-text-center 500,<small>00&nbsp;€</small>
+                                td.u-text-center 1000,<small>00&nbsp;€</small>
+                                td.u-text-center 33%
+                            tr
+                                td(rowspan="3").border-bottom-left-r Nom Prénom
+                                td
+                                    +c-status-pill({skin: 'success'}) Validées
+                                td.u-text-center 700,<small>00&nbsp;€</small>
+                                td.u-text-center 300,<small>00&nbsp;€</small>
+                                td.u-text-center 500,<small>00&nbsp;€</small>
+                                td.u-text-center 1000,<small>00&nbsp;€</small>
+                                td.u-text-center 33%
+                            tr.bckg-gray
+                                td
+                                    +c-status-pill({skin: 'pending'}) En&nbsp;attente
+                                td.u-text-center 700,<small>00&nbsp;€</small>
+                                td.u-text-center 300,<small>00&nbsp;€</small>
+                                td.u-text-center 500,<small>00&nbsp;€</small>
+                                td.u-text-center 1000,<small>00&nbsp;€</small>
+                                td.u-text-center 33%
+                            tr.bckg-yellow
+                                td Total
+                                td.u-text-center 700,<small>00&nbsp;€</small>
+                                td.u-text-center 300,<small>00&nbsp;€</small>
+                                td.u-text-center 500,<small>00&nbsp;€</small>
+                                td.u-text-center 1000,<small>00&nbsp;€</small>
+                                td.u-text-center 33%
diff --git a/content/templates/examples/templates.pug b/content/templates/examples/templates.pug
@@ -31,6 +31,9 @@ block content
                         +c-status-pill({skin: 'success'}) Uptodate 
                         ul  
 
+                            h4 Concession de droits d'auteurs
+                            li: a(href="/examples/template-examples/recap-table.html") Récapitulatif des sommes des rémunérations
+
                             h4 Curu
                             li: a(href="/examples/template-examples/terms-and-conditions.html") Terms and conditions
                             li: a(href="/examples/template-examples/terms-and-conditions--acceptation.html") Terms and conditions (Acceptation)

diff --git a/content/templates/prototypes/partials/main-title-concessions.pug b/content/templates/prototypes/partials/main-title-concessions.pug
@@ -0,0 +1,17 @@
+.c-navbar.u-position-fixed.main-title
+    .c-toolbar
+        .c-toolbar__left
+            .c-toolbar__item
+                h1.c-toolbar__title= moduleTitle
+        .c-toolbar__right
+            .c-toolbar__item
+            .o-form-group.o-flex.o-flex--vertical-center
+                label.o-form-group__label.u-spacer-right(for="selectId") Filtrer par année
+                .o-form-group__controls
+                    .c-select-holder
+                        select.c-select(id="selectId")
+                            option 2020
+                            option 2021
+                            option 2022
+                            option 2023
+                            option 2024
diff --git a/content/templates/prototypes/partials/main-title-only.pug b/content/templates/prototypes/partials/main-title-only.pug
@@ -0,0 +1,5 @@
+.c-navbar.u-position-fixed.main-title
+    .c-toolbar
+        .c-toolbar__left
+            .c-toolbar__item
+                h1.c-toolbar__title= moduleTitle