lheor/Athenaeum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

polish #2

Browse source
This commit is contained in:
Lheorvine 2025-05-26 18:25:47 +02:00
parent 9567290f0d
commit 8cbb157869
3 changed files with 45 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
static/css/styles.css
View file

@ -70,48 +70,47 @@ footer {
}
#books-container {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
padding: 1rem 2%;
justify-content: center !important;
}
.book-card {
width: 100%; /* Wykorzystaj całą dostępną szerokość */
height: 100%;
display: flex;
flex-direction: column;
background: #1a1a1a;
border: 1px solid #343434;
transition: transform 0.3s ease;
transition: all 0.3s ease;
}
.book-card:hover {
transform: translateY(-5px);
.cover-container {
width: 100%;
aspect-ratio: 5/8; /* Nowoczesne podejście do proporcji */
overflow: hidden;
position: relative;
}
.book-cover {
width: 100%;
height: 300px;
object-fit: contain;
padding: 15px;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 0.3s ease;
}
.book-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(0deg, rgba(7,44,36,0.9) 0%, rgba(0,0,0,0) 100%);
.book-cover:hover {
transform: scale(1.05);
}
.book-title {
font-size: 1rem;
margin: 0;
color: #E3CB9A;
}
.book-cover:hover .book-overlay {
opacity: 1;
line-height: 1.3;
height: 3.2em; /* Na 2 linie tekstu */
margin: 0.5rem 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
padding: 0 0.5rem;
}
.book-info {

17
static/index.html
View file

@ -50,11 +50,18 @@
<main class="container py-5">
<h2 class="text-center mb-5 neon-title">NOWOŚCI</h2>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4" id="books-container">
<!-- Dynamicznie ładowane książki -->
<div class="col-12 text-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Ładowanie...</span>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-xxl-10"> <!-- Adjust max width if needed -->
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4 justify-content-center" id="books-container">
<!-- Dynamicznie ładowane książki -->
<div class="col-12 text-center">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Ładowanie...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

18
static/js/main.js
View file

@ -128,16 +128,18 @@ function renderBooks(books) {
}
container.innerHTML = books.map(book => `
<div class="col">
<div class="book-card">
<a href="https://athenaeum.sykorax.eu/book.html?id=${book.id}">
<img src="${book.obraz_url}" class="book-cover" alt="${book.tytul}">
<div class="book-body">
<div class="col">
<div class="book-card h-100">
<a href="https://athenaeum.sykorax.eu/book.html?id=${book.id}">
<div class="cover-container">
<img src="${book.obraz_url}" class="book-cover" alt="${book.tytul}">
</div>
<div class="book-body p-3">
<h5 class="book-title">${book.tytul}</h5>
</div>
</a>
</div>
</div>
</a>
</div>
</div>
`).join('');
// Dodaj obsługę przycisków "Dodaj do koszyka"