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); 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 { .step--active {
display: block; display: block;
} }
@ -294,7 +332,8 @@ textarea:focus {
.submission-success-actions { .submission-success-actions {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
width: 100%;
} }
.flow-footer { .flow-footer {

29
event_create.html
View File

@ -9,9 +9,12 @@
<link rel="stylesheet" href="css/event_create.css" /> <link rel="stylesheet" href="css/event_create.css" />
<script src="js/navigation.js" defer></script> <script src="js/navigation.js" defer></script>
<!-- Globales Stylesheet --> <!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css"> <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> </head>
<body> <body>
@ -409,25 +412,35 @@
<section <section
id="submissionSuccess" id="submissionSuccess"
class="submission-success" class="submission-success layout-wide"
aria-labelledby="success-title" aria-labelledby="success-title"
aria-live="polite" aria-live="polite"
hidden hidden
> >
<div class="step-layout"> <div class="step-layout step-layout--intro hero startseite">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Event erstellt</p> <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"> <p class="step-text">
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste. 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. Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
</p> </p>
<div class="submission-success-actions">
<a class="button-primary button--intro" href="my_profil.html">Weiter zu deinem Profil</a>
</div>
</div> </div>
<div class="review-card review-card--success"> <div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zum erstellten Event">
<div class="submission-success-actions"> <img
<a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a> class="intro-image submission-success-image"
</div> src="assets/eventcreate_foodtable with friends.jpg"
alt="Gemeinsames Essen an einem gedeckten Tisch"
>
</div> </div>
</div> </div>
</section> </section>