💄 Fix de l'affiche des images, du prix et des liens. (#133)

* 💄 Fix de l'affiche des images, du prix et des liens. * 💄 ajout d'un truncate pour le nom des liens et du prix Pour eviter de casser tout l'affichage si le nom est trop long. * 💄 afficher en moins gros le sous titre de l'envie avec la date et le nom * titre de l'envie en taille différente en fonction de la taille de titre * Mise à jour de l'affichage d'une envie. * enlever le padding dans le header-page-card Co-authored-by: manudss <[email protected]>
patou · Nov 5, 2020 · dbe0510 · dbe0510
1 parent e7af641
commit dbe0510
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 20 deletions.
diff --git a/liste-envies-front/src/app/component/wish-card/wish-card.component.html b/liste-envies-front/src/app/component/wish-card/wish-card.component.html
@@ -13,7 +13,15 @@
       fxLayout="row"
       fxLayoutAlign="space-between center"
     >
-      <span class="col-9">{{ wishItem.label }}</span>
+      <span
+        class="col-9 wish-title"
+        [class.wish-title-small]="wishItem.label?.length < 20"
+        [class.wish-title-medium]="
+          wishItem.label?.length >= 20 && wishItem.label?.length < 60
+        "
+        [class.wish-title-big]="wishItem.label?.length >= 60"
+        >{{ wishItem.label }}</span
+      >
       <span>
         <button
           mat-icon-button
@@ -77,7 +85,7 @@
         <ngx-avatar
           [name]="wishItem?.owner?.name || wishItem?.owner?.email"
           [gravatarId]="wishItem?.owner?.email"
-          size="20"
+          size="15"
           [round]="true"
         >
         </ngx-avatar>
@@ -115,8 +123,6 @@
         data-src="{{ wishItem.pictures[0] }}"
         alt="{{ wishItem.label }}"
         class="swiper-lazy border"
-        width="300"
-        height="300"
       />
     </div>
   </ng-template>
@@ -128,9 +134,14 @@
   >
     <div fxLayout="row" fxLayoutAlign="space-between stretch">
       <mat-chip-list>
-        <mat-chip *ngIf="wishItem.price" color="accent" selected>
-          {{ wishItem.price }}
-          <mat-icon color="primary">euro_symbol</mat-icon>
+        <mat-chip
+          *ngIf="wishItem.price"
+          color="primary"
+          selected
+          class="wish-price"
+        >
+          {{ wishItem.price | truncate: 37:"..." }}
+          <mat-icon matChipRemove>euro_symbol</mat-icon>
         </mat-chip>
       </mat-chip-list>
       <app-rating
@@ -153,7 +164,7 @@
           [matTooltip]="url.url"
         >
           <mat-chip selectable class="link-chips"
-            >{{ url.name ? url.name : "lien" }}
+            >{{ !url.name ? "lien" : (url.name | truncate: 46:"...") }}
             <mat-icon matChipRemove>open_in_new</mat-icon>
           </mat-chip>
         </a>
@@ -280,8 +291,8 @@ <h6 matLine><span [innerHTML]="comment?.text"></span></h6>
               [disabled]="readOnly"
             >
               <mat-icon aria-label="Envoyer le commentaire"
-                >add_comment</mat-icon
-              >
+                >add_comment
+              </mat-icon>
             </button>
             <mat-hint>
               le commentaire ne sera pas visible pour le propriétaire de la
@@ -295,7 +306,12 @@ <h6 matLine><span [innerHTML]="comment?.text"></span></h6>
   </mat-card-content>
 
   <mat-card-actions class="wish-footer">
-    <mat-label color="warn" *ngIf="wishItem.allreadyGiven" disableRipple="true">
+    <mat-label
+      color="warn"
+      class="userGiven"
+      *ngIf="wishItem.allreadyGiven"
+      disableRipple="true"
+    >
       Déjà offert
     </mat-label>
 
@@ -305,42 +321,45 @@ <h6 matLine><span [innerHTML]="comment?.text"></span></h6>
       disableRipple="true"
       class="userGiven"
     >
-      Offert par
+      Sera offert par
       <span
         *ngFor="let userGiven of wishItem.userTake; let last = last"
         matTooltip="{{ userGiven?.name }} : {{ userGiven?.email }}"
       >
         <ngx-avatar
           [name]="userGiven?.name || userGiven?.email"
           [gravatarId]="userGiven?.email"
-          size="20"
+          size="15"
           [round]="true"
         ></ngx-avatar>
         {{ userGiven?.name }}{{ !last ? "," : "" }}
       </span>
       <button
         mat-stroked-button
+        class="wish-action-button"
         color="accent"
         *ngIf="wishItem.given && wishItem.canParticipate"
         (click)="give(wishItem)"
         [disabled]="readOnly"
       >
-        Participer
+        Je souhaite participer
       </button>
     </mat-label>
     <button
       mat-raised-button
+      class="wish-action-button"
       color="accent"
       *ngIf="
         !wishItem.allreadyGiven && !wishItem.given && wishItem.canParticipate
       "
       [disabled]="readOnly"
       (click)="give(wishItem)"
     >
-      Offrir
+      je souhaite l'offrir
     </button>
     <button
       mat-raised-button
+      class="wish-action-button"
       color="primary"
       *ngIf="wishItem.canEdit"
       (click)="editWish(wishItem)"

diff --git a/liste-envies-front/src/app/component/wish-card/wish-card.component.scss b/liste-envies-front/src/app/component/wish-card/wish-card.component.scss
@@ -59,10 +59,12 @@
 .wish-card {
   .wish-subtitle {
     padding: 2px 10px;
+    font-size: 11px;
   }
 
   mat-card-content.wish-content {
-    padding: 2px 10px;
+    padding: 8px 10px;
+    margin-bottom: 15px;
   }
 
   mat-card-actions.wish-footer {
@@ -86,6 +88,11 @@
   .owner {
     display: flex;
     align-items: center;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 14px;
+    white-space: nowrap;
     .ownerName {
       flex: 4;
       overflow: hidden;
@@ -245,17 +252,39 @@
     }
     .date mat-icon {
       position: relative;
-      bottom: -5px;
+      bottom: 0;
+      font-size: 11px !important;
+      height: 11px;
+      width: 14px;
+    }
+
+    .wish-title {
+      font-weight: bold;
+      &.wish-title-sort {
+        font-size: 24px;
+      }
+      &.wish-title-medium {
+        font-size: 20px;
+      }
+      &.wish-title-long {
+        font-size: 14px;
+      }
     }
   }
 
   mat-chip.link-chips {
     cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 500px;
   }
 
   .userGiven {
     display: block;
-    line-height: 25px;
+    line-height: 24px;
+    font-size: 14px;
+    color: $amber-700;
 
     span {
       display: inline-flex;
@@ -341,6 +370,9 @@
       }
     }*/
   }
+  .wish-action-button {
+    width: 96%;
+  }
 }
 
 .envie-container {
@@ -528,3 +560,39 @@ div.material-icons.form-control-feedback {
     border-color: $color_calypso_approx transparent;
   }
 }
+
+// responsive
+// Variables
+@import "~wire.css/src/scss/config";
+// Mixins
+@import "~wire.css/src/scss/base/mixins";
+
+@include mq(medium) {
+  .wish-card {
+    // This code shows only on phone media query
+    mat-chip.link-chips {
+      font-size: 11px !important;
+      max-width: 200px;
+    }
+
+    .wish-price {
+      font-size: 12px !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 180px;
+    }
+  }
+}
+
+@include mq(small) {
+  .wish-card {
+    // This code shows only on phone media query
+    mat-chip.link-chips {
+      font-size: 11px !important;
+    }
+
+    .wish-price {
+      font-size: 11px !important;
+    }
+  }
+}
diff --git a/liste-envies-front/src/app/page/list/list.component.html b/liste-envies-front/src/app/page/list/list.component.html
@@ -132,7 +132,7 @@ <h1 class="title-list">
         maxHeight="200"
         (click)="doNothing($event)"
       ></read-more>
-      <mat-action-row>
+      <mat-action-row class="list-filters">
         <app-wish-filters-form
           (click)="doNothing($event)"
         ></app-wish-filters-form>

diff --git a/liste-envies-front/src/app/page/list/list.component.scss b/liste-envies-front/src/app/page/list/list.component.scss
@@ -1,5 +1,12 @@
-mat-card.header-page-card.mat-card {
+.header-page-card {
   text-align: left;
+  ::ng-deep .mat-expansion-panel-body {
+    padding-bottom: 0 !important;
+  }
+
+  .list-filters {
+    padding: 0 8px 0 0;
+  }
 }
 
 mat-divider.mat-divider.divider-withDate.mat-divider-horizontal.mat-divider-inset {