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

Convert observables to signals.

Browse Source
This commit is contained in:
Florian THIERRY
2026-02-03 11:00:29 +01:00
parent a2de24fd93
commit c91bb7b720
100 changed files with 2998 additions and 3065 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,140 +1,140 @@
$cardBorderRadius: .5em;
:host {
display: flex;
justify-content: center;
display: flex;
justify-content: center;
.card {
.card {
display: flex;
flex-direction: column;
margin: 1em;
max-width: 80em;
width: 90%;
border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
img {
height: 12em;
object-fit: cover;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
}
@media screen and (min-width: 600px) {
height: 20em;
}
@media screen and (min-width: 750px) {
height: 25em;
}
}
header {
padding: 2em;
position: relative;
h1 {
font-size: 2em;
margin-bottom: .5em;
}
h2 {
font-size: 1.2em;
line-height: 1.6em;
margin: 0;
font-weight: 400;
}
a {
padding: .8em .8em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
position: absolute;
top: -1.5em;
right: 3em;
display: flex;
flex-direction: column;
margin: 1em;
max-width: 80em;
width: 90%;
border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
}
main {
border-top: 1px solid #dddddd;
margin: 0 2em 2em 2em;
padding-top: 2em;
text-align: justify;
}
footer {
display: flex;
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 {
height: 12em;
object-fit: cover;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
}
@media screen and (min-width: 600px) {
height: 20em;
}
@media screen and (min-width: 750px) {
height: 25em;
}
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
header {
padding: 2em;
position: relative;
.posting-data {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
h1 {
font-size: 2em;
margin-bottom: .5em;
}
h2 {
font-size: 1.2em;
line-height: 1.6em;
margin: 0;
font-weight: 400;
}
a {
padding: .8em .8em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
position: absolute;
top: -1.5em;
right: 3em;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
}
main {
border-top: 1px solid #dddddd;
margin: 0 2em 2em 2em;
padding-top: 2em;
text-align: justify;
}
footer {
display: flex;
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 {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.posting-data {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
.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: #E53935;
cursor: pointer;
}
}
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: #E53935;
cursor: pointer;
}
}
}
}
}
}