This commit is contained in:
Mateusz Gruszczyński 2025-03-09 21:24:50 +01:00
parent 74513a920a
commit 71f67fa8fa
5 changed files with 54 additions and 33 deletions

View File

@ -1,7 +1,7 @@
/* Import czcionki Roboto */ /* Import czcionki Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* Ustawienia globalne */ /* Globalne */
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background-color: #121212; background-color: #121212;
@ -34,7 +34,7 @@ body {
/* Karty */ /* Karty */
.card { .card {
background-color: #1c1c1c; background-color: #444242;
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
@ -54,7 +54,7 @@ body {
} }
.card-body { .card-body {
background-color: #1e1e1e; background-color: #444242;
} }
/* Przyciski */ /* Przyciski */
@ -101,6 +101,12 @@ a:hover {
background: linear-gradient(90deg, #ffc107, #ffeb3b); background: linear-gradient(90deg, #ffc107, #ffeb3b);
font-weight: bold; font-weight: bold;
transition: width 0.3s ease; transition: width 0.3s ease;
animation: progressAnimation 1s ease-in-out forwards;
}
@keyframes progressAnimation {
from { width: 0%; }
to { width: var(--progress-width); }
} }
/* Alerty (flash messages) */ /* Alerty (flash messages) */
@ -132,21 +138,11 @@ a:hover {
} }
} }
h1 { h1 { font-size: 2rem; margin-bottom: 1rem; }
font-size: 2rem; h2 { font-size: 1.7rem; margin-bottom: 0.8rem; }
margin-bottom: 1rem; h3 { font-size: 0.9rem; margin-bottom: 0.6rem; }
}
h2 {
font-size: 1.7rem;
margin-bottom: 0.8rem;
}
h3 { /* Wspomóż */
font-size: 0.9rem;
margin-bottom: 0.6rem;
}
/* Style dla bloku "Wspomóż" */
.card.wspomoz-card { .card.wspomoz-card {
border: 1px solid #ffc107 !important; border: 1px solid #ffc107 !important;
border-radius: 0.2rem !important; border-radius: 0.2rem !important;
@ -155,5 +151,7 @@ h3 {
.card.wspomoz-card .card-body, .card.wspomoz-card .card-body,
.card.wspomoz-card .card-title, .card.wspomoz-card .card-title,
.card.wspomoz-card .card-text { .card.wspomoz-card .card-text {
color: #ffffff !important; color: #ffffff !important;
} font-weight: bold;
font-size: 1.25rem;
}

View File

@ -3,7 +3,7 @@
{% block content %} {% block content %}
<div class="container my-4"> <div class="container my-4">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header bg-primary text-white"> <div class="card-header bg-success text-white">
<h3 class="card-title mb-0">Edytuj zbiórkę</h3> <h3 class="card-title mb-0">Edytuj zbiórkę</h3>
</div> </div>
<div class="card-body"> <div class="card-body">

View File

@ -36,5 +36,23 @@
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Funkcja aktualizująca animację paska postępu
function animateProgressBars() {
document.querySelectorAll('.progress-bar').forEach(bar => {
const progressValue = bar.getAttribute('aria-valuenow');
bar.style.setProperty('--progress-width', progressBarWidth(progressBarValue(progressBar)));
});
}
// Funkcja wywoływana przy ładowaniu strony
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.progress-bar').forEach(bar => {
const width = bar.getAttribute('aria-valuenow') + '%';
bar.style.setProperty('--progress-width', width);
});
});
</script>
</body> </body>
</html> </html>

View File

@ -1,7 +1,7 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}Lista Zbiórek{% endblock %} {% block title %}Aktywne zbiórki{% endblock %}
{% block content %} {% block content %}
<h1 class="mb-4">Lista Zbiórek</h1> <h2 class="mb-4">Aktualnie aktywne zbiórki</h2>
<div class="row"> <div class="row">
{% for z in zbiorki %} {% for z in zbiorki %}
<div class="col-sm-12 col-md-6 col-lg-4 mb-4"> <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
@ -14,7 +14,7 @@
{{ progress|round(2) }}% {{ progress|round(2) }}%
</div> </div>
</div> </div>
<a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="btn btn-primary btn-sm">Wejdź do zbiórki</a> <a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="btn btn-primary btn-sm">Szczegóły</a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -4,32 +4,36 @@
<div class="container my-4"> <div class="container my-4">
<!-- Główna karta zbiórki --> <!-- Główna karta zbiórki -->
<div class="card mb-4 shadow-sm"> <div class="card mb-4 shadow-sm">
<div class="card-header bg-primary text-white"> <div class="card-header bg-secondary text-white">
<h2 class="card-title mb-0">{{ zbiorka.nazwa }}</h2> <h3 class="card-title mb-0"></h3>{{ zbiorka.nazwa }}</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<!-- Lewa kolumna: opis i postęp --> <!-- Lewa kolumna: opis i postęp -->
<div class="col-md-8"> <div class="col-md-8">
<h5>Opis zbiórki</h5> <h5>Opis:</h5>
<div class="mb-3"> <div class="mb-3">
{{ zbiorka.opis | markdown }} {{ zbiorka.opis | markdown }}
</div> </div>
{% set progress = (zbiorka.stan / zbiorka.cel * 100) if zbiorka.cel > 0 else 0 %} {% set progress = (zbiorka.stan / zbiorka.cel * 100) if zbiorka.cel > 0 else 0 %}
<h5>Postęp zbiórki</h5> <h5>Postęp:</h5>
<div class="progress mb-3" style="height: 40px;"> <div class="progress mb-3" style="height: 40px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" <div class="progress-bar progress-bar-striped progress-bar-animated"
style="width: {{ progress if progress < 100 else 100 }}%;" role="progressbar"
aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100"> style="width: {{ progress if progress < 100 else 100 }}%;"
{{ progress|round(2) }}% aria-valuenow="{{ progress }}"
aria-valuemin="0"
aria-valuemax="100">
{{ progress|round(2) }}%
</div> </div>
</div> </div>
</div> </div>
<!-- Prawa kolumna: sekcja "Wspomóż" --> <!-- Prawa kolumna: sekcja "Wspomóż" -->
<div class="col-md-4"> <div class="col-md-4">
<div class="card wspomoz-card mb-3"> <div class="card wspomoz-card mb-3">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Wspomóż</h5>
<p class="card-text"> <p class="card-text">
<strong>Numer konta:</strong> <strong>Numer konta:</strong>
<span class="fs-4">{{ zbiorka.numer_konta }}</span> <span class="fs-4">{{ zbiorka.numer_konta }}</span>
@ -39,6 +43,7 @@
<span class="fs-4">{{ zbiorka.numer_telefonu_blik }}</span> <span class="fs-4">{{ zbiorka.numer_telefonu_blik }}</span>
</p> </p>
{% if not zbiorka.ukryj_kwote %} {% if not zbiorka.ukryj_kwote %}
<hr>
<p class="card-text"> <p class="card-text">
<strong>Cel zbiórki:</strong> <strong>Cel zbiórki:</strong>
<span class="fs-4">{{ zbiorka.cel }} PLN</span> <span class="fs-4">{{ zbiorka.cel }} PLN</span>
@ -58,7 +63,7 @@
{% if current_user.is_authenticated and current_user.is_admin %} {% if current_user.is_authenticated and current_user.is_admin %}
<a href="{{ url_for('admin_dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj wpłatę</a> <a href="{{ url_for('admin_dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj wpłatę</a>
{% endif %} {% endif %}
<a href="{{ url_for('index') }}" class="btn btn-secondary">Powrót do listy zbiórek</a> <a href="{{ url_for('index') }}" class="btn btn-secondary">Powrót do listy</a>
</div> </div>
</div> </div>
</div> </div>