Design header search bar.

backend/codiki-domain/src/main/java/org/codiki/domain/publication/model/Author.java

@@ -5,7 +5,7 @@ import java.util.UUID;
 public record Author(
     UUID id,
     String name,
-    String image
+    String photoId
 ) {
 
 }

backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/AuthorDto.java

@@ -13,7 +13,7 @@ public record AuthorDto(
         this(
             author.id(),
             author.name(),
-            author.image()
+            author.photoId()
         );
     }
 }

backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/publication/model/AuthorEntity.java

@@ -24,17 +24,17 @@ public class AuthorEntity {
     private UUID id;
     @Column(nullable = false)
     private String pseudo;
-//    private String illustrationId;
+    private String photoId;
 
     public AuthorEntity(Author author) {
         this(
             author.id(),
-            author.name()
+            author.name(),
-//            author.illustrationId()
+            author.photoId()
         );
     }
 
     public Author toDomain() {
-        return new Author(id, pseudo, "image");
+        return new Author(id, pseudo, photoId);
     }
 }

frontend/src/app/components/header/header.component.html

@@ -8,11 +8,13 @@
     </a>
 </div>
 <div>
+    <div class="search-bar">
         <input name="search-query" placeholder="Search something..." />
         <button type="button">
             <mat-icon>search</mat-icon>
         </button>
     </div>
+</div>
 <div>
     <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
         <a [routerLink]="['/disconnect']">Disconnect</a>

frontend/src/app/components/header/header.component.scss

@@ -66,29 +66,39 @@ $headerHeight: 3.5em;
 
         &:nth-child(2) {
             flex: 1;
+            
+            .search-bar {
+                flex: 1;
+                max-width: 50em;
                 $borderRadiusValue: 10em;
+                position: relative;
 
                 input {
                     flex: 1;
                     width: 60%;
                     max-width: 50em;
-                border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
+                    border-radius: $borderRadiusValue;
                     background-color: white;
-                border: solid 1px #ccc;
+                    border: solid 1px #ddd;
-                margin: .5em 0;
+                    padding: .2em 2.7em .2em 1em;
-                padding: .2em .5em;
+                    height: 2em;
                 }
     
                 button {
+                    position: absolute;
                     display: flex;
                     align-items: center;
-                border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
+                    border-radius: $borderRadiusValue;
                     background-color: white;
-                border: solid 1px #ccc;
+                    border: none;
                     margin: .5em 0;
+                    right: 1.1em;
+                    color: #aaaaaa;
     
                     &:hover {
                         background-color: #eee;
+                        cursor: pointer;
+                    }
                 }
             }
         }

frontend/src/app/pages/home/home.component.html

@@ -1,14 +1,16 @@
-<h1>Last articles</h1>
+<h1>Last publications</h1>
 <div class="publication-container">
-    <a *ngFor="let publication of publications$ | async" [routerLink]="['']" class="publication">
+    <a *ngFor="let publication of publications$ | async" [routerLink]="['/publications/' + publication.id]" class="publication">
         <img src="/pictures/{{ publication.illustrationId }}"/>
+        <div class="body">
             <h1>{{publication.title}}</h1>
             <h2>{{publication.description}}</h2>
+        </div>
         <div class="footer">
             <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
             Publication posted by {{publication.author.name}}
             <span class="publication-date">
-                ({{publication.creationDate}})
+                ({{ publication.creationDate | date: 'short' : 'fr-Fr' }})
             </span>
         </div>
     </a>

frontend/src/app/pages/home/home.component.scss

@@ -1,3 +1,5 @@
+$cardBorderRadius: .5em;
+
 :host {
     display: flex;
     flex-direction: column;
@@ -8,40 +10,69 @@
         display: flex;
         flex-direction: column;
         gap: 2em;
-        max-width: 40em;
+        max-width: 50em;
         margin: auto;
 
         .publication {
             display: flex;
             flex-direction: column;
-            border-radius: .5em;
+            border-radius: $cardBorderRadius;
             box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+            transition: box-shadow .2s ease-in-out;
+            text-decoration: none;
+            color: black;
+            
+            &:hover {
+                box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
+            }
 
             img {
                 object-fit: cover;
-                height: 25em;
+                height: 32em;
-                border-radius: .5em .5em 0 0;
+                border-radius: $cardBorderRadius $cardBorderRadius 0 0;
             }
             
+            .body {
+                display: flex;
+                flex-direction: column;
+                padding: 1.5em 2em;
+
                 h1 {
-                font-size: 2.4em;
+                    font-size: 1.8em;
+                    margin-bottom: .5em;
                 }
     
                 h2 {
-                font-size: 1.6em;
+                    font-size: 1em;
+                    line-height: 1.4em;
+                    margin: 0;
+                    color: #747373;
+                    font-weight: 400;
+                }
             }
 
             .footer {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                background-color: #f0f0f0;
+                border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
+                padding: 1em 2em;
+                gap: 1em;
+                color: #6c757d;
 
                 img {
+                    $imageSize: 4em;
                     border-radius: 10em;
-                    width: 5em;
+                    width: $imageSize;
-                    height: 5em;
+                    height: $imageSize;
                     object-fit: cover;
                 }
+
+                .publication-date {
+                    font-style: italic;
+                    color: #bdbdbd;
+                }
             }
         }
     }