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

Anpassung Progress Bar Event erstellen

Browse Source
This commit is contained in:
Simona Oswald 2026-04-17 09:57:41 +02:00
parent 9a2c66e026
commit 2015454f6c
4 changed files with 101 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/event_create.css
View File

@ -126,7 +126,14 @@ fieldset {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
} }
label,
label {
font-family: var(--font-main);
font-weight: 400;
font-size: 1.25rem;
}
legend { legend {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
@ -146,11 +153,15 @@ input[type="date"],
input[type="time"], input[type="time"],
input[type="number"], input[type="number"],
textarea { textarea {
font-family: var(--font-main);
font-weight: 400;
font-size: 1.25rem;;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--butter-light); background: var(--butter-light);
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
} }
/* Blendet die Standard-Buttons für number inputs aus */ /* Blendet die Standard-Buttons für number inputs aus */
@ -320,16 +331,24 @@ textarea:focus {
} }
.flow-footer { .flow-footer {
position: sticky;
bottom: 0; bottom: 0;
z-index: 5;
margin-top: auto;
background: var(--color-bg);
backdrop-filter: none; backdrop-filter: none;
padding-top: var(--space-4); padding-top: var(--space-4);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
.flow-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-message {
order: -1; /* nach oben verschieben */
text-align: center;
width: 100%;
}
.progress-wrap { .progress-wrap {
width: min(100%, var(--content-width)); width: min(100%, var(--content-width));
margin: 0 auto; margin: 0 auto;
@ -349,8 +368,8 @@ textarea:focus {
.progress { .progress {
flex: 1; flex: 1;
height: 0.3rem; height: 0.3rem;
background: var(--color-progress-bg); background: var(--olive-lightg);
border-radius: 999px; border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
@ -508,9 +527,10 @@ textarea:focus-visible {
justify-content: flex-start; justify-content: flex-start;
} }
/*
.button--primary { .button--primary {
width: 100%; width: 100%;
} */
.event-flow-header { .event-flow-header {
justify-content: flex-start; justify-content: flex-start;

4
css/index.css
View File

@ -55,7 +55,7 @@
} }
/* /*
.hero__button-primarys { .hero__buttons {
display: flex; display: flex;
gap: var(--space-3); gap: var(--space-3);
flex-wrap: wrap; flex-wrap: wrap;
@ -356,7 +356,7 @@
} }
/* --- CTA button-primary --- */ /* --- CTA button --- */
.btn { .btn {
border: none; border: none;

60
css/stylesheet_global.css
View File

@ -97,13 +97,18 @@ h2 {
} }
p { p {
font-family: 'Jost', sans-serif; font-family: var(--font-main);
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.5; line-height: 1.5;
color: var(--black); color: var(--black);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.error-message {
color: var(--error);
font-size: 1rem;
}
/* Layout */ /* Layout */
.main-content { .main-content {
@ -161,7 +166,7 @@ p {
.nav-tab { .nav-tab {
color: var(--black); color: var(--black);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 500; font-weight: 400;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
@ -222,27 +227,49 @@ p {
/* Buttons */ /* Buttons */
.button-primary { .button-primary {
display: inline-block; display: inline-block;
padding: 0.5rem 1.5rem; padding: 0.375rem 1.5rem;
background-color: var(--olive); background-color: var(--olive);
border: none; border: 1.5px solid var(--olive);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
font-family: 'Jost', sans-serif; font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
color: var(--butter-light); color: var(--butter);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease;
} }
.button-primary:hover { .button-primary:hover {
background-color: var(--olive-dark); background-color: var(--olive-dark);
border-color: var(--olive-dark);
}
.button-secondary {
display: inline-block;
padding: 0.375rem 1.5rem;
background-color: var(--butter);
border: 1.5px solid var(--olive);
border-radius: var(--radius-lg);
font-family: var(--font-main);
font-weight: 400;
font-size: 1.25rem;
color: var(--olive);
cursor: pointer;
text-decoration: none;
transition: color 0.2s ease;
}
.button-secondary:hover {
color: var(--olive-dark);
background-color: var(--olive-light);
border-color: var(--olive-dark);
} }
.button--outline { .button--outline {
background-color: transparent; background-color: transparent;
color: var(--olive); color: var(--olive);
border: 2px solid var(--olive); border: 1.5px solid var(--olive);
} }
.button--outline:hover { .button--outline:hover {
@ -251,29 +278,30 @@ p {
} }
.counter-button { .counter-button {
padding: 0.5rem 1rem; width: 44px;
width: 46px; height: 44px;
background-color: var(--olive); background-color: var(--olive);
border: none; border: 1.5px solid var(--olive);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
font-family: 'Jost', sans-serif; font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
color: var(--butter-light); color: var(--butter);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease;
} }
.counter-button:hover, .counter-button:focus-visible { .counter-button:hover, .counter-button:focus-visible {
background-color: var(--olive-dark); background-color: var(--olive-dark);
border-color: var(--olive-dark);
} }
.button-small { .button-small {
background: var(--olive); background: var(--olive);
color: var(--butter-light); color: var(--butter-light);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 500; font-weight: 400;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
@ -314,7 +342,7 @@ p {
background: var(--tomato); background: var(--tomato);
color: var(--white); color: var(--white);
font-size: 1.0625rem; font-size: 1.0625rem;
font-weight: 500; font-weight: 400;
letter-spacing: var(--ls-ui); letter-spacing: var(--ls-ui);
line-height: 1.3; line-height: 1.3;
display: inline-flex; display: inline-flex;

30
event_create.html
View File

@ -373,23 +373,35 @@
</div> </div>
</section> </section>
<div class="flow-footer" id="flowFooter" hidden>
<div class="progress-wrap" aria-hidden="true"> <div class="flow-footer" id="flowFooter" hidden>
<span class="progress-label" id="progressMarkerLabel">Schritt 1 von 7</span>
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
<div class="flow-actions">
<button type="button" id="backButton" class="button-secondary">
Zurück
</button>
<div class="progress-wrap">
<span class="progress-label" id="progressMarkerLabel">
Schritt 1 von 7
</span>
<div class="progress"> <div class="progress">
<span id="progressBar" class="progress-bar"></span> <span id="progressBar" class="progress-bar"></span>
</div> </div>
</div> </div>
<div class="flow-actions"> <button type="button" id="nextButton" class="button-primary">
<button type="button" id="backButton" class="button-primary">Zurück</button> Weiter
</button>
</div>
<div class="flow-actions-right"> <div class="flow-actions-right">
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p> <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
<button type="button" id="nextButton" class="button-primary button--primary">Weiter</button>
</div>
</div>
</div> </div>
</div>
<section <section
id="submissionSuccess" id="submissionSuccess"
@ -410,7 +422,7 @@
<div class="review-card review-card--success"> <div class="review-card review-card--success">
<div class="submission-success-actions"> <div class="submission-success-actions">
<a class="button-primary button--primary" href="my_profil.html">Weiter zu deinem Profil</a> <a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a>
</div> </div>
</div> </div>
</div> </div>