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

6
account.php
View File

@ -65,12 +65,12 @@ 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>

54
assets/css/login.css
View File

@ -40,6 +40,54 @@
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%);
@ -218,6 +266,12 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
/* Side-Layout klappt auf Mobile automatisch auf 1 Spalte zusammen */
.auth__grid.auth__card__side {
grid-template-columns: 1fr;
justify-items: center;
}
.auth__logo { .auth__logo {
width: 120px; width: 120px;
} }