koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layoutanpassungen vom Success-Screen der Event-Erstellung

Browse Source
This commit is contained in:
Ysabelle Moser 2026-04-23 11:47:39 +02:00
parent 485254d3e7
commit b9a5a348a8
3 changed files with 61 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/eventcreate_foodtable with friends.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

41
css/event_create.css
View File

@ -33,6 +33,44 @@
padding: var(--space-4) 0 var(--space-7);
}
.submission-success .step-copy {
align-content: center;
}
.submission-success-title-row {
display: flex;
align-items: center;
gap: var(--space-5);
width: 100%;
}
.submission-success-title-row h2 {
margin-bottom: 0;
}
.submission-success-icon {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brown);
font-size: 3rem;
line-height: 1;
transform: translateY(0.4rem);
}
.submission-success-image {
object-position: 42% center;
}
.submission-success .intro-card--image {
width: min(100%, 40rem);
aspect-ratio: 4 / 5;
align-self: center;
justify-self: center;
}
.step--active {
display: block;
}
@ -294,7 +332,8 @@ textarea:focus {
.submission-success-actions {
display: flex;
justify-content: center;
justify-content: flex-start;
width: 100%;
}
.flow-footer {

27
event_create.html
View File

@ -12,6 +12,9 @@
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
@ -409,25 +412,35 @@
<section
id="submissionSuccess"
class="submission-success"
class="submission-success layout-wide"
aria-labelledby="success-title"
aria-live="polite"
hidden
>
<div class="step-layout">
<div class="step-layout step-layout--intro hero startseite">
<div class="step-copy">
<p class="badge">Event erstellt</p>
<h2 id="success-title">Dein Event ist ready.</h2>
<div class="submission-success-title-row">
<h2 id="success-title">Dein Event ist ready</h2>
<span class="submission-success-icon" aria-hidden="true">
<i class="fa-solid fa-champagne-glasses"></i>
</span>
</div>
<p class="step-text">
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
</p>
<div class="submission-success-actions">
<a class="button-primary button--intro" href="my_profil.html">Weiter zu deinem Profil</a>
</div>
</div>
<div class="review-card review-card--success">
<div class="submission-success-actions">
<a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a>
</div>
<div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zum erstellten Event">
<img
class="intro-image submission-success-image"
src="assets/eventcreate_foodtable with friends.jpg"
alt="Gemeinsames Essen an einem gedeckten Tisch"
>
</div>
</div>
</section>