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

Add delete button.

Browse Source
This commit is contained in:
Florian THIERRY
2024-09-05 09:23:25 +02:00
parent 4565192d0b
commit f3dfac6bc7
2 changed files with 50 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/app/pages/publication/publication.component.html
View File

@@ -15,11 +15,19 @@
</header>
<main [innerHTML]="publication.parsedText"></main>
<footer>
<img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
Publication posted by {{ publication.author.name }}
<span class="publication-date">
({{ publication.creationDate | date: 'short' : 'fr-FR' }})
</span>
<div class="metadata">
<img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
Publication posted by {{ publication.author.name }}
<span class="publication-date">
({{ publication.creationDate | date: 'short' : 'fr-FR' }})
</span>
</div>
@if (isAuthorAndUserEquals) {
<button type="button" matTooltip="Click to delete the publication" matTooltipPosition="left">
<mat-icon>delete</mat-icon>
Delete
</button>
}
</footer>
</div>
} @else {

47
frontend/src/app/pages/publication/publication.component.scss
View File

@@ -79,23 +79,50 @@ $cardBorderRadius: .5em;
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
.metadata {
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
.publication-date {
font-style: italic;
color: #bdbdbd;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #D50000;
color: white;
transition: background-color .2s ease-in-out;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: .5em;
&:hover {
background-color: #B71C1C;
cursor: pointer;
}
}
}
}