diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html index c89b3761413dded99d89f86b9236222c7180f495..a1020091c45b8778a5ee952a282433056665e39d 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() }"> 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 677b13018416eb75cc5b718d877a6209814d1260..98f96bc18cdbe2317aa99d54d6f3ac32aa627ff4 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 80162cd683d846c149bcba04ebad41c52807832d..deb797e14ec5f9b57d4620939abf9be7709c2d34 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -5,7 +5,7 @@ <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 [variant]="'secondary'" [label]="'Ajouter une structure'" @@ -13,7 +13,7 @@ (action)="addStructure()" /> <app-button [variant]="'secondary'" [label]="'Imprimer la liste'" [size]="'small'" (action)="print()" /> - </ng-container> + </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 20aeea09a408a02f6f281c6e4e5f3e6cfb55750f..34b931004f864e51e5357176a8a67bb68899bdae 100644 --- a/src/app/structure-list/structure-list.component.scss +++ b/src/app/structure-list/structure-list.component.scss @@ -1,5 +1,6 @@ @import 'color'; @import 'typography'; +@import 'breakpoint'; .structureList-container { overflow-y: auto; @@ -10,6 +11,10 @@ padding-left: 48px; padding-right: 16px; + @media #{$phone} { + padding-left: 16px; + } + .listCard { display: flex; flex-direction: column; @@ -28,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; + } }