From 2445892bcbdfe5700357d5648dca35c1ca94d420 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 20 Feb 2024 14:52:04 +0100
Subject: [PATCH 1/3] fix(ui): responsive carto list
---
.../structure-list-search.component.scss | 4 ++++
.../structure-list.component.html | 23 ++++++++++++++++++-
.../structure-list.component.scss | 5 ++++
3 files changed, 31 insertions(+), 1 deletion(-)
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
index 677b13018..98f96bc18 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
@@ -1,5 +1,9 @@
+@import 'breakpoint';
@import 'search';
.searchContainer {
padding: 24px 48px 16px 48px;
+ @media #{$phone} {
+ padding-left: 16px;
+ }
}
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 80162cd68..4974874ef 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -7,12 +7,33 @@
</div>
<ng-container *ngIf="!isOrientation">
<app-button
+ class="hide-on-mobile"
[variant]="'secondary'"
[label]="'Ajouter une structure'"
[size]="'small'"
(action)="addStructure()"
/>
- <app-button [variant]="'secondary'" [label]="'Imprimer la liste'" [size]="'small'" (action)="print()" />
+ <app-icon-button
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconFolder]="'ico'"
+ [iconName]="'plus'"
+ (action)="addStructure()"
+ />
+ <app-button
+ class="hide-on-mobile"
+ [variant]="'secondary'"
+ [label]="'Imprimer la liste'"
+ [size]="'small'"
+ (action)="print()"
+ />
+ <app-icon-button
+ class="hide-on-desktop"
+ [variant]="'secondary'"
+ [iconFolder]="'ico'"
+ [iconName]="'printStructure'"
+ (action)="print()"
+ />
</ng-container>
</div>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 977c32f27..f0c4109f0 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -1,6 +1,7 @@
@import 'color';
@import 'typography';
@import 'buttons';
+@import 'breakpoint';
.structureList-container {
overflow-y: auto;
@@ -11,6 +12,10 @@
padding-left: 48px;
padding-right: 16px;
+ @media #{$phone} {
+ padding-left: 16px;
+ }
+
.listCard {
display: flex;
flex-direction: column;
--
GitLab
From ef75819c02bf59db41c2acbf45a746c05c0dbc20 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Thu, 29 Feb 2024 15:52:00 +0100
Subject: [PATCH 2/3] hide avatar on mobile
---
src/app/structure-list/components/card/card.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index c89b37614..a1020091c 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -9,7 +9,7 @@
<div class="left">
<input *ngIf="showRadioButton" type="radio" tabindex="-1" id="{{ structure._id }}" [checked]="isChecked" />
- <img alt [src]="'../../../../assets/ico/' + structure?.getTypeStructureIcon() + '.svg'" />
+ <img alt class="hide-on-mobile" [src]="'../../../../assets/ico/' + structure?.getTypeStructureIcon() + '.svg'" />
<div class="structureDetails">
<span class="structureName" [ngClass]="{ notClaimed: structure.hasNoUserDN && profileService.isAdmin() }">
--
GitLab
From eaf5b3d2f6c572542164fa57f8e1840ff5487f69 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Thu, 29 Feb 2024 15:52:07 +0100
Subject: [PATCH 3/3] adjust buttons for mobile
---
.../structure-list.component.html | 27 +++----------------
.../structure-list.component.scss | 13 +++++++--
2 files changed, 14 insertions(+), 26 deletions(-)
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 4974874ef..deb797e14 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -5,36 +5,15 @@
<ng-template ngPluralCase="1">1 structure</ng-template>
<ng-template ngPluralCase="other">{{ structureList.length }} structures</ng-template>
</div>
- <ng-container *ngIf="!isOrientation">
+ <div *ngIf="!isOrientation" class="headerButtons">
<app-button
- class="hide-on-mobile"
[variant]="'secondary'"
[label]="'Ajouter une structure'"
[size]="'small'"
(action)="addStructure()"
/>
- <app-icon-button
- class="hide-on-desktop"
- [variant]="'secondary'"
- [iconFolder]="'ico'"
- [iconName]="'plus'"
- (action)="addStructure()"
- />
- <app-button
- class="hide-on-mobile"
- [variant]="'secondary'"
- [label]="'Imprimer la liste'"
- [size]="'small'"
- (action)="print()"
- />
- <app-icon-button
- class="hide-on-desktop"
- [variant]="'secondary'"
- [iconFolder]="'ico'"
- [iconName]="'printStructure'"
- (action)="print()"
- />
- </ng-container>
+ <app-button [variant]="'secondary'" [label]="'Imprimer la liste'" [size]="'small'" (action)="print()" />
+ </div>
</div>
<div id="listCard" class="listCard" role="list" (mouseleave)="mouseLeave()">
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 837dcc431..34b931004 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -33,13 +33,22 @@
}
.structureListHeader {
- height: 50px;
display: flex;
flex-direction: row;
align-items: center;
- gap: 8px;
+ gap: 16px;
+ @media #{$phone} {
+ flex-direction: column-reverse;
+ align-items: flex-start;
+ }
.nbStructuresLabel {
@include font-bold-14;
flex: 1;
}
+
+ .headerButtons {
+ display: flex;
+ flex-flow: wrap;
+ gap: 16px;
+ }
}
--
GitLab