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

Styling elements.

Browse Source
This commit is contained in:
Florian THIERRY
2024-09-05 09:33:07 +02:00
parent f3dfac6bc7
commit 21d19d4ecd
5 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,10 +17,12 @@
<footer>
<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 class="posting-data">
Publication posted by {{ publication.author.name }}
<span class="publication-date">
({{ publication.creationDate | date: 'short' : 'fr-FR' }})
</span>
</div>
</div>
@if (isAuthorAndUserEquals) {
<button type="button" matTooltip="Click to delete the publication" matTooltipPosition="left">

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

@@ -78,18 +78,22 @@ $cardBorderRadius: .5em;
footer {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
@media screen and (min-width: 500px) {
flex-direction: row;
}
.metadata {
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
img {
@@ -100,9 +104,16 @@ $cardBorderRadius: .5em;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
.posting-data {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
}
@@ -120,7 +131,7 @@ $cardBorderRadius: .5em;
gap: .5em;
&:hover {
background-color: #B71C1C;
background-color: #E53935;
cursor: pointer;
}
}