Skip to content

Blip 7260 tables reorganisation #289

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 17 commits into
base: main
Choose a base branch
from
Open

Blip 7260 tables reorganisation #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 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
c75eee7
re- reorganise tables + equation (a,b)
mars2601 Sep 21, 2023
b6f46a2
Move c-display from app style -> to styleguide style (different css f…
marcelpirnay Sep 26, 2023
d658719
ajout du filtre par année dans le main-title
marcelpirnay Sep 26, 2023
127c871
add css class to tooltip and add an example in a form in /components/…
marcelpirnay Sep 28, 2023
3942eaf
table changes
mars2601 Oct 2, 2023
b8c2514
Change c-tooltip-cin to display: inline-block
mars2601 Oct 2, 2023
eecfa4b
small changes
mars2601 Oct 2, 2023
898cf1e
Merge branch 'PAIL-21-tooltip' into BLIP-7260-tables-reorgnisation
mars2601 Oct 2, 2023
69be661
Remove inline style
mars2601 Oct 2, 2023
947a515
Create different views (A & M) + phase2
mars2601 Oct 2, 2023
5fece6f
make tootlip more readable
marcelpirnay Oct 2, 2023
e585902
Merge branch 'main' into BLIP-7260-tables-reorgnisation
marcelpirnay Oct 2, 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
4 changes: 0 additions & 4 deletions content/scss/_c-content-display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@
border-right: .2rem solid $color-gray-200;
}

table td {
border-bottom: 1px solid $color-gray-100;
}

table tr:last-child td,
table tr:last-child th[scope="row"] {
border-bottom: none;
Expand Down
3 changes: 3 additions & 0 deletions content/scss/_c-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@ $c-table-border-radius: $g-border-radius-medium !default;
.dotted{
border-right: none;
border-right: 2px dashed white;
&:last-child{
border-right: 2px solid $color-gray-50;
}
}
.dotted-bottom{
border-bottom: none;
Expand Down
5 changes: 3 additions & 2 deletions content/scss/_c-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
/* Variables
========================================================================== */

$c-tooltip-bg: rgba(0,0,0,0.75) !default;

$c-tooltip-bg: rgba(0,0,0,0.85) !default;

/* Component
========================================================================== */
Expand All @@ -14,7 +15,7 @@ $c-tooltip-bg: rgba(0,0,0,0.75) !default;
display: none;
background: $c-tooltip-bg;
color: #FFF;
padding: .8rem 1.2rem;
padding: 1rem 1.2rem;
font-size: 1.3rem;
border-radius: 0.4rem;
max-width: 24rem;
Expand Down
3 changes: 1 addition & 2 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
Expand Up @@ -12,8 +12,7 @@ div.bckg-gray-50.u-padding-l
th(colspan="4").u-text-center.dotted-bottom Lorem Ipsum Dolor
tr
th.u-text-center.dotted Lorem Ipsum
th.u-text-center Total

th.u-text-center.dotted Total
tbody
tr
td(rowspan="3").border-top-left-r Lorem Ipsum
Expand Down
54 changes: 54 additions & 0 deletions content/templates/examples/template-examples/recap-table-a.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
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.o-flex.o-flex--vertical-center(style="margin-left: 12%;")
| Unité de production : “Nom de l’activité”
span(class="c-tooltip-icon u-spacer-left-s" data-tooltip="tooltip-5" data-tooltip-placement="bottom")
+icon('circle-help')
.c-tooltip#tooltip-5(role="tooltip")
| Information sur l'unité de production ou autre explication venant en aide à l'utilisateur
.c-tooltip__arrow(data-popper-arrow)
table.c-table.c-table--styled.c-table--bordered.js-data-table
thead
tr
th(rowspan="2" class="disabled")
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 Autre
th.u-text-center.dotted Lié à une prestation <small>(a)</small>
th.u-text-center.dotted Total

tbody
tr
td(rowspan="1" style="width: 12%;").border-top-left-r Nom Prénom
td
+c-status-pill({skin: 'success'}) Validées
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
td.u-text-center 33%
tr
td(rowspan="1" style="width: 12%;").border-bottom-left-r Nom Prénom
td
+c-status-pill({skin: 'success'}) Validées
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
td.u-text-center 33%
45 changes: 45 additions & 0 deletions content/templates/examples/template-examples/recap-table-m.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
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.o-flex.o-flex--vertical-center(style="margin-left: 12%;")
| Mon récapitulatif pour PA
span(class="c-tooltip-icon u-spacer-left-s" data-tooltip="tooltip-5" data-tooltip-placement="bottom")
+icon('circle-help')
.c-tooltip#tooltip-5(role="tooltip")
| Information sur l'unité de production ou autre explication venant en aide à l'utilisateur
.c-tooltip__arrow(data-popper-arrow)
table.c-table.c-table--styled.c-table--bordered.js-data-table
thead
tr
th(rowspan="2" class="disabled")
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 Autre
th.u-text-center.dotted Lié à une prestation <small>(a)</small>
th.u-text-center.dotted Total

tbody
tr
td(rowspan="1" style="width: 12%;").border-top-left-r Nom Prénom
td
+c-status-pill({skin: 'success'}) Validées
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
td.u-text-center 33%
84 changes: 84 additions & 0 deletions content/templates/examples/template-examples/recap-table-phase-2.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
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.o-flex.o-flex--vertical-center(style="margin-left: 12%;")
| Activité: ABC
span(class="c-tooltip-icon u-spacer-left-s" data-tooltip="tooltip-5" data-tooltip-placement="bottom")
+icon('circle-help')
.c-tooltip#tooltip-5(role="tooltip")
| Information sur l'unité de production ou autre explication venant en aide à l'utilisateur
.c-tooltip__arrow(data-popper-arrow)
table.c-table.c-table--styled.c-table--bordered.js-data-table
thead
tr
th(rowspan="2" class="disabled")
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 Autre
th.u-text-center.dotted Lié à une prestation <small>(a)</small>
th.u-text-center.dotted Total

tbody
tr
td(rowspan="3" style="width: 12%;").border-top-left-r Nom Prénom
td
+c-status-pill({skin: 'success'}) Validées
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<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 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<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 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
td.u-text-center 33%
tr
td(rowspan="3" style="width: 12%;").border-bottom-left-r Nom Prénom
td
+c-status-pill({skin: 'success'}) Validées
td.u-text-center 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<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 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<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 300,<small>00&nbsp;€</small>
td.u-text-center 500,<small>00&nbsp;€</small>
td.u-text-center 700,<small>00&nbsp;€</small>
td.u-text-center 1000,<small>00&nbsp;€</small>
td.u-text-center 33%
4 changes: 3 additions & 1 deletion content/templates/examples/templates.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ block content
ul

h4 Concession de droits d'auteurs
li: a(href="/examples/template-examples/recap-table.html") Récapitulatif des sommes des rémunérations
li: a(href="/examples/template-examples/recap-table-m.html") Récapitulatif des sommes des rémunérations (Vue M)
li: a(href="/examples/template-examples/recap-table-a.html") Récapitulatif des sommes des rémunérations (Vue A)
li: a(href="/examples/template-examples/recap-table-phase-2.html") Récapitulatif des sommes des rémunérations (Phase 2)

h4 Curu
li: a(href="/examples/template-examples/terms-and-conditions.html") Terms and conditions
Expand Down