softspm/polskalokalnie
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

panel uzytkownika

Browse Source
This commit is contained in:
pascal
2026-08-24 14:14:54 +02:00
parent 6c35589e70
commit 1a067cce8c
6 changed files with 476 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+190 -13
View File
@@ -13585,6 +13585,45 @@ svg {
color: #1d2a45;
}
.notifications-actions {
display: flex;
gap: 8px;
}
/* Akcje "Odczytaj wszystkie" / "Usun wszystkie" - przyciski tekstowe, nie okragle ikony. */
.notifications-head button.notifications-mark-all,
.notifications-head button.notifications-clear-all {
gap: 8px;
grid-auto-flow: column;
height: 34px;
padding: 0 16px;
width: auto;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.notifications-head button.notifications-clear-all {
color: #b3261e;
}
.notifications-head button.notifications-clear-all:hover {
background: #fdeceb;
color: #8f1d17;
}
.notifications-head button.notifications-mark-all:disabled,
.notifications-head button.notifications-clear-all:disabled {
color: #9aa6b8;
cursor: default;
}
.notifications-head button.notifications-mark-all:disabled:hover,
.notifications-head button.notifications-clear-all:disabled:hover {
background: transparent;
color: #9aa6b8;
}
.notifications-tabs {
background: #f2f5f8;
border: 1px solid #ebf0f6;
@@ -14878,7 +14917,7 @@ svg {
}
.help-contact-faq-card header button svg,
.help-contact-more-card button svg {
.help-contact-more-card .help-contact-more-link svg {
font-size: 14px;
}
@@ -15012,6 +15051,15 @@ svg {
padding: 14px;
}
/* Kolumna tresci wypelnia cala wysokosc karty, a jej zawartosc (tytul, opis, akcja)
jest wysrodkowana w pionie - bez duzej bialej przerwy przed linkiem. */
.help-contact-more-body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
.help-contact-more-card h3 {
color: #1f3049;
font-size: 15px;
@@ -15026,16 +15074,25 @@ svg {
margin: 8px 0 14px;
}
.help-contact-more-card button {
/* Akcja karty (Link lub button) - jednolity zielony przycisk tekstowy ze strzalka w linii. */
.help-contact-more-card .help-contact-more-link {
align-items: center;
background: transparent;
border: 0;
color: #109253;
cursor: pointer;
display: inline-flex;
font-size: 12px;
font-weight: 900;
gap: 6px;
padding: 0;
text-decoration: none;
width: fit-content;
}
.help-contact-more-card .help-contact-more-link:hover {
color: #0b6e3e;
text-decoration: underline;
}
@media (max-width: 1280px) {
@@ -17704,7 +17761,7 @@ svg {
.account-stats article > span svg,
.account-alerts article > span svg,
.account-searches article > span svg,
.account-tools article > span svg,
.account-tools a > span svg,
.account-menu button svg, .account-menu a svg {
height: 14px;
width: 14px;
@@ -17923,16 +17980,60 @@ svg {
.account-panel-head {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
margin-bottom: 10px;
margin-bottom: 12px;
}
/* Naglowek widzetu: kolorowa ikona + tytul z podpisem (jak karty w katalogu widzetow). */
.account-panel-title {
align-items: center;
display: flex;
gap: 10px;
min-width: 0;
}
.account-panel-icon {
align-items: center;
border-radius: 12px;
display: grid;
flex: none;
height: 40px;
place-items: center;
width: 40px;
}
.account-panel-icon svg {
height: 17px;
width: 17px;
}
.account-panel-title.green .account-panel-icon { background: #ebf8f0; color: #17a35f; }
.account-panel-title.blue .account-panel-icon { background: #edf5ff; color: #3478ec; }
.account-panel-title.amber .account-panel-icon { background: #fff5e8; color: #d38a15; }
.account-panel-title.pink .account-panel-icon { background: #fff0f4; color: #d64c78; }
.account-panel-head h2 {
color: #15253d;
font-size: 18px;
line-height: 1.15;
margin: 0;
}
.account-panel-title small {
color: #6a7f94;
display: block;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
margin-top: 2px;
}
.account-panel-head > button,
.account-panel-head > a {
flex: none;
}
.account-panel-head button {
background: transparent;
border: 0;
@@ -17953,12 +18054,29 @@ svg {
.account-listings article {
border: 1px solid #e3e9f0;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
/* Karta ostatnio ogladanej oferty reaguje na najechanie - unosi sie i podswietla. */
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.account-listings article:hover,
.account-listings article:focus-visible {
border-color: #109253;
box-shadow: 0 12px 22px rgba(16, 146, 83, 0.16);
outline: none;
transform: translateY(-3px);
}
.account-listings .photo {
background-size: cover;
height: 118px;
transition: transform 0.25s ease;
}
.account-listings article:hover .photo,
.account-listings article:focus-visible .photo {
transform: scale(1.05);
}
.account-listings article strong,
@@ -18475,7 +18593,7 @@ svg {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.account-tools article {
.account-tools a {
align-items: start;
border: 1px solid #e5ebf2;
border-radius: 8px;
@@ -18484,9 +18602,19 @@ svg {
grid-template-columns: 28px minmax(0, 1fr);
min-height: 74px;
padding: 10px;
/* Kafelek narzedzia unosi sie i podswietla po najechaniu. */
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.account-tools article > span {
.account-tools a:hover,
.account-tools a:focus-visible {
border-color: #109253;
box-shadow: 0 10px 20px rgba(16, 146, 83, 0.16);
outline: none;
transform: translateY(-2px);
}
.account-tools a > span {
align-items: center;
background: #eef4ff;
border-radius: 8px;
@@ -18499,22 +18627,22 @@ svg {
width: 28px;
}
.account-tools article:nth-child(2) > span {
.account-tools a:nth-child(2) > span {
background: #eef8ff;
color: #4a79f0;
}
.account-tools article:nth-child(3) > span {
.account-tools a:nth-child(3) > span {
background: #eef3ff;
color: #6b7ef3;
}
.account-tools article:nth-child(4) > span {
.account-tools a:nth-child(4) > span {
background: #edf8f0;
color: #3ba75f;
}
.account-tools article:nth-child(5) > span {
.account-tools a:nth-child(5) > span {
background: #f3efff;
color: #7e61e9;
}
@@ -22035,11 +22163,13 @@ svg {
}
.public-profile-summary {
/* Wszystkie kolumny (awatar, dane, biografia, statystyki) wyrownane do wspolnej osi w pionie -
jeden rzad na tej samej wysokosci. */
align-items: center;
display: grid;
gap: 14px;
gap: 14px 16px;
grid-template-columns: 76px 1.2fr 1fr auto;
padding: 12px 16px 16px;
padding: 16px;
}
.public-profile-avatar {
@@ -22051,10 +22181,16 @@ svg {
font-size: 26px;
font-weight: 900;
height: 76px;
margin-top: -30px;
/* Delikatna nakladka na okladke - awatar zrownany w pionie z tekstem obok. */
margin-top: -12px;
width: 76px;
}
/* Nazwa podniesiona w gore - zeby zrownala sie ze srodkiem awatara zachodzacego na okladke. */
.public-profile-user {
margin-top: -20px;
}
.public-profile-user h2 {
font-size: 31px;
line-height: 1.05;
@@ -22165,7 +22301,47 @@ svg {
.public-listing-card {
border: 1px solid #e4ebf3;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
/* Karta reaguje na najechanie: unosi sie, zyskuje cien i zielona obwodke. */
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
will-change: transform;
}
.public-listing-card:hover,
.public-listing-card:focus-visible {
border-color: #109253;
box-shadow: 0 14px 26px rgba(16, 146, 83, 0.18);
outline: none;
transform: translateY(-4px);
}
/* Zdjecie lekko przybliza sie na hover - kadr "ozywa". overflow:hidden na karcie kadruje nadmiar. */
.public-listing-card:hover .public-listing-photo,
.public-listing-card:focus-visible .public-listing-photo {
transform: scale(1.06);
}
/* Cena mocniej wybija sie na zielono, tytul ciemnieje - subtelne podkreslenie aktywnej karty. */
.public-listing-card:hover .public-listing-body strong,
.public-listing-card:focus-visible .public-listing-body strong {
color: #109253;
}
/* Szanujemy ustawienie systemowe "ogranicz ruch" - wtedy bez unoszenia i przyblizania. */
@media (prefers-reduced-motion: reduce) {
.public-listing-card,
.public-listing-photo {
transition: none;
}
.public-listing-card:hover,
.public-listing-card:focus-visible {
transform: none;
}
.public-listing-card:hover .public-listing-photo,
.public-listing-card:focus-visible .public-listing-photo {
transform: none;
}
}
.public-listing-photo {
@@ -22173,6 +22349,7 @@ svg {
background-size: cover;
border-bottom: 1px solid #e4ebf3;
height: 88px;
transition: transform 0.25s ease;
}
.public-listing-badge {