FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor account page layout and styles for profile picture display

Browse Source
This commit is contained in:
Fabian Schieder 2026-01-25 20:11:36 +01:00
parent 317e1d2be4
commit 751a7999c0
2 changed files with 110 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
account.php
View File

@ -65,23 +65,23 @@ include 'header.php';
<link rel="stylesheet" href="assets/css/login.css"> <link rel="stylesheet" href="assets/css/login.css">
<main class="auth" role="main"> <main class="auth" role="main">
<section class="auth__grid" aria-label="Account Bereich"> <section class="auth__grid auth__card__side" aria-label="Account Bereich">
<div class="auth__card"> <div class="auth__card auth__card__side__picture">
<header class="auth__header"> <header class="auth__header">
<img src="<?php echo htmlspecialchars($user['profilePicture']); ?>" <img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
alt="Profilbild" alt="Profilbild"
width="475"> width="120">
</header> </header>
</div> </div>
<div class="auth__card"> <div class="auth__card">
<header class="auth__header"> <header class="auth__header">
<p class="auth__title"> <p class="auth__title">
Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br> Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br>
<p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br> <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br>
<p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br> <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br>
</header> </header>
</div> </div>
</section> </section>
</main> </main>

134
assets/css/login.css
View File

@ -2,7 +2,7 @@
Geizhals-inspiriertes, cleanes Login-Layout Geizhals-inspiriertes, cleanes Login-Layout
*/ */
:root{ :root {
/* Dunkelblauer Background, helle Cards, blaue Akzente */ /* Dunkelblauer Background, helle Cards, blaue Akzente */
--gh-bg: #151923; --gh-bg: #151923;
--gh-card: #1f2937; --gh-card: #1f2937;
@ -21,7 +21,7 @@
} }
/* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */ /* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */
.auth{ .auth {
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 81.5svh; min-height: 81.5svh;
@ -29,7 +29,7 @@
background: var(--gh-bg); background: var(--gh-bg);
} }
.auth__grid{ .auth__grid {
display: grid; display: grid;
grid-template-columns: 1fr; /* statt 1.06fr 0.94fr */ grid-template-columns: 1fr; /* statt 1.06fr 0.94fr */
justify-items: center; justify-items: center;
@ -40,8 +40,56 @@
align-items: center; /* optional, aber passend zur Zentrierung */ align-items: center; /* optional, aber passend zur Zentrierung */
} }
/*
* Layout-Varianten für Seiten, die mehrere .auth__card haben (z.B. account.php)
* Nutzung:
* - nebeneinander: <section class="auth__grid auth__card__side">
* - untereinander: <section class="auth__grid auth__card__stack">
*/
.auth__grid.auth__card__side {
grid-template-columns: max-content 1fr;
align-items: start;
justify-items: stretch;
}
.auth__grid.auth__card__side .auth__card {
width: 100%;
}
/* Bild-Card in Side-Ansicht: Card wird so groß wie das Bild (inkl. Padding), Bild bleibt IN der Card */
.auth__grid.auth__card__side .auth__card.auth__card__side__picture {
display: inline-grid;
width: max-content;
justify-self: center; /* Card mittig in der linken Spalte */
padding: 12px; /* Abstand zwischen Rahmen und Bild */
overflow: hidden; /* Bild darf nicht über Radius/Rahmen hinauslaufen */
place-items: center; /* Bild mittig in der Card */
}
/* Der normale auth__header ist ein Grid (Logo+Text). In der Bild-Card wollen wir nur "zentriert" */
.auth__grid.auth__card__side .auth__card.auth__card__side__picture .auth__header{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 0;
}
.auth__grid.auth__card__side .auth__card.auth__card__side__picture img {
display: block; /* entfernt Inline-Gap unter Bildern */
max-width: none; /* Card richtet sich an echter Bildbreite aus */
height: auto;
/* runde Ecken kommen vom Container (overflow:hidden) */
}
.auth__grid.auth__card__stack {
grid-template-columns: 1fr;
align-items: center;
justify-items: center;
}
.auth__card, .auth__card,
.auth__sideCard{ .auth__sideCard {
width: min(520px, 100%); width: min(520px, 100%);
background: var(--gh-card); background: var(--gh-card);
/* border: 1px solid var(--gh-border); */ /* border: 1px solid var(--gh-border); */
@ -49,11 +97,11 @@
box-shadow: var(--gh-shadow); box-shadow: var(--gh-shadow);
} }
.auth__card{ .auth__card {
padding: 22px; padding: 22px;
} }
.auth__header{ .auth__header {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
column-gap: 14px; column-gap: 14px;
@ -62,28 +110,28 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.auth__logo{ .auth__logo {
display: block; display: block;
width: 140px; width: 140px;
height: auto; height: auto;
grid-row: span 2; grid-row: span 2;
} }
.auth__title{ .auth__title {
margin: 0; margin: 0;
font-size: 1.55rem; font-size: 1.55rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
color: var(--gh-text); color: var(--gh-text);
} }
.auth__subtitle{ .auth__subtitle {
margin: 0; margin: 0;
color: var(--gh-muted); color: var(--gh-muted);
font-size: 0.98rem; font-size: 0.98rem;
line-height: 1.4; line-height: 1.4;
} }
.auth__alert__error{ .auth__alert__error {
margin: 12px 0 14px; margin: 12px 0 14px;
color: #ffffff; color: #ffffff;
background: var(--gh-danger); background: var(--gh-danger);
@ -92,7 +140,7 @@
box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18); box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18);
} }
.auth__alert__sucess{ .auth__alert__sucess {
margin: 12px 0 14px; margin: 12px 0 14px;
color: #ffffff; color: #ffffff;
background: #558346; background: #558346;
@ -101,15 +149,15 @@
box-shadow: 0 8px 18px rgba(72, 142, 62, 0.18); box-shadow: 0 8px 18px rgba(72, 142, 62, 0.18);
} }
.auth__form{ .auth__form {
margin-top: 6px; margin-top: 6px;
} }
.auth__field{ .auth__field {
margin-top: 12px; margin-top: 12px;
} }
.auth__field label{ .auth__field label {
display: block; display: block;
margin: 0 0 6px; margin: 0 0 6px;
font-size: 0.95rem; font-size: 0.95rem;
@ -117,7 +165,7 @@
} }
.auth__field input[type="text"], .auth__field input[type="text"],
.auth__field input[type="password"]{ .auth__field input[type="password"] {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 12px 12px; padding: 12px 12px;
@ -130,16 +178,16 @@
} }
.auth__field input[type="text"]:focus, .auth__field input[type="text"]:focus,
.auth__field input[type="password"]:focus{ .auth__field input[type="password"]:focus {
border-color: rgba(37, 99, 235, 0.75); border-color: rgba(37, 99, 235, 0.75);
box-shadow: var(--gh-focus); box-shadow: var(--gh-focus);
} }
.auth__actions{ .auth__actions {
margin-top: 14px; margin-top: 14px;
} }
.auth__submit{ .auth__submit {
width: 100%; width: 100%;
padding: 12px 14px; padding: 12px 14px;
border: 0; border: 0;
@ -152,95 +200,101 @@
transition: transform 120ms ease, filter 120ms ease; transition: transform 120ms ease, filter 120ms ease;
} }
.auth__submit:hover{ .auth__submit:hover {
filter: brightness(1.02); filter: brightness(1.02);
transform: translateY(-1px); transform: translateY(-1px);
} }
.auth__submit:active{ .auth__submit:active {
transform: translateY(0px); transform: translateY(0px);
} }
.auth__links{ .auth__links {
margin-top: 14px; margin-top: 14px;
padding-top: 12px; padding-top: 12px;
border-top: 1px dashed var(--gh-border); border-top: 1px dashed var(--gh-border);
} }
.auth__muted{ .auth__muted {
margin: 8px 0 0; margin: 8px 0 0;
color: var(--gh-muted); color: var(--gh-muted);
} }
.auth__muted a{ .auth__muted a {
color: var(--gh-link); color: var(--gh-link);
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
} }
.auth__muted a:hover{ .auth__muted a:hover {
text-decoration: underline; text-decoration: underline;
} }
.auth__sideCard{ .auth__sideCard {
padding: 18px; padding: 18px;
background: var(--gh-card); background: var(--gh-card);
} }
.auth__sideCard h3{ .auth__sideCard h3 {
margin: 0 0 10px; margin: 0 0 10px;
font-size: 1.05rem; font-size: 1.05rem;
color: var(--gh-text); color: var(--gh-text);
} }
.auth__sideCard ul{ .auth__sideCard ul {
margin: 0; margin: 0;
padding-left: 18px; padding-left: 18px;
color: var(--gh-text); color: var(--gh-text);
} }
.auth__sideCard li{ .auth__sideCard li {
margin: 8px 0; margin: 8px 0;
color: var(--gh-text); color: var(--gh-text);
} }
.auth__tip{ .auth__tip {
margin-top: 14px; margin-top: 14px;
padding: 12px 12px; padding: 12px 12px;
border-radius: 12px; border-radius: 12px;
background: rgba(37,99,235,0.06); background: rgba(37, 99, 235, 0.06);
border: 1px solid rgba(37,99,235,0.16); border: 1px solid rgba(37, 99, 235, 0.16);
color: var(--gh-text); color: var(--gh-text);
} }
@media (max-width: 900px){ @media (max-width: 900px) {
.auth__grid{ .auth__grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.auth__logo{ /* Side-Layout klappt auf Mobile automatisch auf 1 Spalte zusammen */
.auth__grid.auth__card__side {
grid-template-columns: 1fr;
justify-items: center;
}
.auth__logo {
width: 120px; width: 120px;
} }
.auth__sideCard{ .auth__sideCard {
display: none; display: none;
} }
} }
@media (max-width: 520px){ @media (max-width: 520px) {
.auth{ .auth {
padding-top: 18px; padding-top: 18px;
} }
.auth__card{ .auth__card {
padding: 18px; padding: 18px;
} }
.auth__header{ .auth__header {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.auth__logo{ .auth__logo {
width: 140px; width: 140px;
grid-row: auto; grid-row: auto;
} }