Skip to content

Blip 7260 tables #288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marcelpirnay wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Blip 7260 tables #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f1e087
create table with existing code
marcelpirnay Sep 15, 2023
19ae7e3
finishing table
marcelpirnay Sep 18, 2023
893af8a
add compnent to list + small tag
marcelpirnay Sep 19, 2023
5d0be06
adding   & overflow-x: scroll
marcelpirnay Sep 20, 2023
9f8b30d
fix spaces and bckg
marcelpirnay Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions content/scss/_c-app-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Component: app layout

.c-app-layout-inner {
height: 100%;
overflow-x: scroll;

@media (max-width: ($g-bp2 - 1px)) {
// Make full screen scrollable on mobile, mobile navigation pattern needs to be revised in the future
Expand Down
12 changes: 7 additions & 5 deletions content/scss/_c-display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,17 +76,19 @@
line-height: 1.72;
}

small {
font-size: 1.3rem;
margin: 1.6rem 0;
line-height: 1.72;
}

.c-display {

p {
margin: 1.8rem 0;
}

small {
font-size: 1.6rem;
margin: 1.6rem 0;
line-height: 1.72;
}



.c-sidenote {
Expand Down
46 changes: 43 additions & 3 deletions content/scss/_c-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -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 {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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%;
Expand Down
13 changes: 13 additions & 0 deletions content/scss/_u-generic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
72 changes: 53 additions & 19 deletions content/templates/_components/c-table/02-c-table-styled.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
82 changes: 82 additions & 0 deletions content/templates/examples/template-examples/recap-table.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-only

.o-container
.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(rowspan="2").u-text-center salaire brut
th(colspan="4").u-text-center.dotted-bottom Concession de droit d’auteur
tr
th.u-text-center.dotted liée à une prestation
th.u-text-center.dotted Ratio par rapport au salaire
th.u-text-center.dotted Autres concessions
th.u-text-center Total

tbody
tr
td(rowspan="3").border-top-left-r Idir Cherfaoui
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 30%
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
tr.bckg-gray
td
+c-status-pill({skin: 'pending'}) En attente
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 500,<small>00&nbsp;€</small>
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 300,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
tr
td(rowspan="3").border-bottom-left-r Marcel Pirnay
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 30%
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
tr.bckg-gray
td
+c-status-pill({skin: 'pending'}) En attente
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 500,<small>00&nbsp;€</small>
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 300,<small>00&nbsp;€</small>
td.u-text-center 30%
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
3 changes: 3 additions & 0 deletions content/templates/examples/templates.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
5 changes: 5 additions & 0 deletions content/templates/prototypes/partials/main-title-only.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.c-navbar.u-position-fixed.main-title
.c-toolbar
.c-toolbar__left
.c-toolbar__item
h1.c-toolbar__title= moduleTitle
Loading