onny/witas-ka
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement mobile progress tracker

Browse source
This commit is contained in:
Jonas Heinrich 2024-01-17 15:15:25 +01:00
parent 63ce1f657b
commit c293f2e4f9
1 changed files with 69 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

75
index.html
View file

@ -21,7 +21,29 @@
damit keine Tier unversorgt bleibt.</p> damit keine Tier unversorgt bleibt.</p>
<div class="stepTracker"> <div class="stepTracker">
<ul class="progress-tracker progress-tracker--text progress-tracker--text-inline progress-tracker--spaced"> <ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
<li class="progress-step is-complete">
<div class="progress-marker" data-text="1"></div>
<div class="progress-text">
<h4 class="progress-title">Wildtier gefunden</h4>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="2"></div>
<div class="progress-text">
<h4 class="progress-title">Klassifizieren</h4>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="3"></div>
<div class="progress-text">
<h4 class="progress-title">Hilfestellung erhalten</h4>
</div>
</li>
</ul>
<ul class="progress-tracker progress-tracker-desktop progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
<li class="progress-step is-complete"> <li class="progress-step is-complete">
<div class="progress-marker" data-text="1"> <div class="progress-marker" data-text="1">
<div class="progress-text"> <div class="progress-text">
@ -30,7 +52,7 @@
</div> </div>
</li> </li>
<li class="progress-step is-complete"> <li class="progress-step">
<div class="progress-marker" data-text="2"> <div class="progress-marker" data-text="2">
<div class="progress-text"> <div class="progress-text">
<h4 class="progress-title">Klassifizieren</h4> <h4 class="progress-title">Klassifizieren</h4>
@ -38,7 +60,7 @@
</div> </div>
</li> </li>
<li class="progress-step is-complete"> <li class="progress-step">
<div class="progress-marker" data-text="3"> <div class="progress-marker" data-text="3">
<div class="progress-text"> <div class="progress-text">
<h4 class="progress-title">Hilfestellung erhalten</h4> <h4 class="progress-title">Hilfestellung erhalten</h4>
@ -54,18 +76,59 @@
</main> </main>
<style> <style>
.progress-step:last-child { .progress-tracker-desktop .progress-step:last-child {
display: inline-table !important; display: inline-table !important;
flex-grow: unset !important; flex-grow: unset !important;
} }
.progress-step:last-child .progress-text { .progress-tracker-desktop .progress-step:last-child .progress-text {
overflow: visible !important; overflow: visible !important;
} }
.stepTracker { .stepTracker {
min-width: 800px; width: 100%;
max-width: 800px;
} }
.progress-tracker { .progress-tracker {
margin: 30px auto; margin: 30px auto;
padding: 0 0.5rem;
}
.progress-tracker-mobile {
display: none;
}
@media (max-width: 600px) {
.progress-tracker-desktop {
display: none;
}
.progress-tracker-mobile {
display: flex;
margin: 1rem 0rem 0 0rem;
}
.progress-step:last-child .progress-marker {
display: flex;
flex-direction: row-reverse;
}
.progress-step:last-child .progress-title {
text-align: right;
}
.progress-step:last-child .progress-marker:after {
background-color: #b6b6b6;
height: 1px !important;
content: "";
display: block;
position: absolute;
z-index: -10;
top: 10px;
right: 5px;
width: 100%;
height: 4px;
transition: background-color 0.3s, background-position 0.3s;
}
.progress-step:nth-child(2) .progress-marker {
display: flex;
justify-content: center;
}
.progress-step:nth-child(2) .progress-title {
text-align: center;
}
} }
.progress-marker::after { .progress-marker::after {
height: 1px !important; height: 1px !important;