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

17
static/index.html
View file

@ -50,11 +50,18 @@
<main class="container py-5"> <main class="container py-5">
<h2 class="text-center mb-5 neon-title">NOWOŚCI</h2> <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"> <div class="container-fluid">
<!-- Dynamicznie ładowane książki --> <div class="row justify-content-center">
<div class="col-12 text-center"> <div class="col-12 col-xxl-10"> <!-- Adjust max width if needed -->
<div class="spinner-border text-danger" role="status"> <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">
<span class="visually-hidden">Ładowanie...</span> <!-- 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> </div>
</div> </div>

18
static/js/main.js
View file

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