florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix home page design.

Browse Source
This commit is contained in:
Florian THIERRY
2024-06-05 10:05:02 +02:00
parent d3041cf03d
commit 2ba707c336
5 changed files with 57 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/pages/home/home.component.html
View File

@@ -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">
<img src="/pictures/{{publication.illustrationId}}"/>
<h1>{{publication.title}}</h1>
<h2>{{publication.description}}</h2>
<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"/>
<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>

53
frontend/src/app/pages/home/home.component.scss
View File

@@ -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;
border-radius: .5em .5em 0 0;
height: 32em;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
}
h1 {
font-size: 2.4em;
}
.body {
display: flex;
flex-direction: column;
padding: 1.5em 2em;
h2 {
font-size: 1.6em;
h1 {
font-size: 1.8em;
margin-bottom: .5em;
}
h2 {
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;
height: 5em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
}
}