Hugyouu/Letterboxd-Diary-Posters-Picker
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Change Cart disposition

Browse Source
This commit is contained in:
Pierret Hugo
2024-10-28 14:58:14 +01:00
parent 92c10f4f18
commit 0c5b2b4bbc
11 changed files with 195 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/App.scss
View File

@@ -2,6 +2,7 @@
@use "./scss/posterSelector";
@use "./scss/posterGallery";
@use "./scss/cart";
@use "./scss/navbar";
.App {
text-align: center;

201
src/styles/scss/_cart.scss
View File

@@ -1,90 +1,55 @@
// Variables
$primary-color: #00a346;
$secondary-color: #3498db;
$background-dark: #2c3e50;
$background-light: #34495e;
$text-white: #ecf0f1;
$text-muted: #95a5a6;
$hover-scale: 1.05;
$gap-spacing: 1rem;
// _cart.scss
.cart-container {
margin-top: 2rem;
margin-bottom: 4rem;
padding: 2rem;
display: flex;
gap: $gap-spacing;
gap: 2rem;
.poster-list {
flex: 2;
margin-right: 2rem;
max-height: calc(100vh - 200px);
.poster-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-height: calc(100vh - 4rem);
overflow-y: auto;
.cart-title {
color: $text-white;
margin-bottom: 1rem;
font-size: 2rem;
font-weight: 400;
}
padding-right: 1rem;
.poster-card {
display: flex;
margin-bottom: 1rem;
background-color: $background-dark;
border-radius: 4px;
position: relative;
aspect-ratio: 2/3;
border-radius: 8px;
overflow: hidden;
.poster-media {
width: 120px;
height: 180px;
object-fit: cover;
border-radius: 4px 0 0 4px;
&:hover .delete-overlay {
opacity: 1;
}
.poster-content {
flex-grow: 1;
padding: 1rem;
.poster-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.delete-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
.poster-title {
color: $text-white;
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.delete-button {
background-color: #e74c3c;
border: none;
color: white;
padding: 0.5rem;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
.poster-id {
color: $text-muted;
font-size: 1rem;
margin-bottom: 1rem;
}
.poster-actions {
display: flex;
justify-content: space-between;
gap: 0.5rem;
.action-button {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 4px;
background-color: transparent;
border: 1px solid $text-muted;
color: $text-white;
transition: background-color 0.3s ease;
&:hover {
background-color: $background-light;
cursor: pointer;
}
&:not(:last-child) {
margin-right: 0.5rem;
}
&:hover {
transform: scale(1.1);
}
}
}
@@ -92,75 +57,49 @@ $gap-spacing: 1rem;
}
.action-panel {
flex: 1;
width: 300px;
position: sticky;
top: 2rem;
height: fit-content;
padding: 1.5rem;
background-color: $background-light;
background-color: #34495e;
border-radius: 8px;
padding: 1.5rem;
height: fit-content;
.action-title {
color: $text-white;
margin-bottom: 1rem;
font-size: 1.5rem;
h2 {
color: white;
margin-bottom: 1.5rem;
font-size: 1.25rem;
}
.form-control {
.format-select {
width: 100%;
margin-bottom: 1.5rem;
color: $text-white;
select {
background-color: $background-dark;
color: $text-white;
padding: 0.5rem;
border: 1px solid $text-muted;
border-radius: 4px;
}
padding: 0.5rem;
background-color: #2c3e50;
border: 1px solid #95a5a6;
color: white;
border-radius: 4px;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
.download-button {
width: 100%;
padding: 0.75rem;
background-color: #00a346;
color: white;
border: none;
border-radius: 4px;
margin-bottom: 1rem;
cursor: pointer;
transition: background-color 0.2s ease;
.primary-button,
.secondary-button {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: darken(#00a346, 10%);
}
&.primary-button {
background-color: $primary-color;
color: $text-white;
&:hover {
background-color: darken($primary-color, 10%);
}
&:disabled {
background-color: darken($primary-color, 20%);
cursor: not-allowed;
}
}
&.secondary-button {
background-color: $secondary-color;
color: $text-white;
&:hover {
background-color: darken($secondary-color, 10%);
}
}
&:disabled {
background-color: darken(#00a346, 20%);
cursor: not-allowed;
}
}
}
}
}

32
src/styles/scss/_navbar.scss Normal file
View File

@@ -0,0 +1,32 @@
// _navbar.scss
// Variables de couleur et autres constantes
$background-color: #1c1f23;
$icon-color: white;
$margin-right: 8px; // Correspondant à theme.spacing(2)
.navbar {
top: auto !important;
bottom: 0;
background-color: $background-color !important;
.toolbar {
display: flex;
justify-content: space-between;
}
.back-button,
.cart-button,
.refresh-button {
color: $icon-color;
}
.refresh-button {
margin-right: $margin-right;
}
.back-button[disabled] {
opacity: 0.3;
pointer-events: none;
}
}

1
src/styles/scss/_posterSelector.scss
View File

@@ -151,6 +151,7 @@ $hover-color: rgba(102, 119, 136, 0.2);
align-items: center;
justify-content: center;
height: 400px;
color: $text-white;
}
.gif-container {