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> </header>
<main [innerHTML]="publication.parsedText"></main> <main [innerHTML]="publication.parsedText"></main>
<footer> <footer>
<img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" /> <div class="metadata">
Publication posted by {{ publication.author.name }} <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
<span class="publication-date"> Publication posted by {{ publication.author.name }}
({{ publication.creationDate | date: 'short' : 'fr-FR' }}) <span class="publication-date">
</span> ({{ 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> </footer>
</div> </div>
} @else { } @else {

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

@@ -79,23 +79,50 @@ $cardBorderRadius: .5em;
footer { footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between;
align-items: center; align-items: center;
background-color: #f0f0f0; background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius; border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em; padding: 1em 2em;
gap: 1em;
img { .metadata {
$imageSize: 4em; display: flex;
border-radius: 10em; flex-direction: row;
width: $imageSize; align-items: center;
height: $imageSize;
object-fit: cover; gap: 1em;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
} }
.publication-date { button {
font-style: italic; padding: .8em 1.2em;
color: #bdbdbd; 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;
}
} }
} }
} }