Comments (2)
UI draft: shortened list:
◆ Kostenloses Vorgespräch
◆ gezielte Auswahl an passenden Ergänzungen
◆ Zeit- und Nerven sparendes Einkaufen
⌄ mehr ...
Code draft:
- (optional) admin settings
- feature flag setting to enable list shortening
- setting for minimal number of list items
- setting for custom buton text
- parse UL list DOM fragment string using PHP
- add button and classes
- base state (no-js, print):
- all list items are visible, read-more button is invisible
- CSS classes are ready for enhanced read-more state:
- progressive enhancement:
- JS adds class name(s) to show button and hide subsequent list items initially
- JS adds button event handler that removes class name to switch to all-visible state
admin setting draft:
[ ] Liste mit mehr als 4 Listenpunkten kürzen (inital 3 sichtbar + Link "mehr anzeigen..." um den Rest auszuklappen)
optional: abweichende Beschriftung statt "mehr anzeigen"/"show more":
existing HTML markup:
<ul class="offers__offer__features__list"><li>
Kostenloses Vorgespräch</li>
Virtuelle Beratung via Videoanruf</li>
Beratung zu Farbe und Schnitt der Kleidungsstücke</li>
Hilfe bei Kaufentscheidungen von online gekauften Kleidungsstücken</li>
</ul>
experimental code snippets:
if ($get_option('show_more') && list.matches(/<li>?/).length > 3) {
$listItems = split('<li>', $list);
$listExcerpt = join ('<li>', $listItems[0], $listItems[1], $listItems[2]);
$listMore = join ('<li class="offers__offer__features__list__more">', array_slice( $listItems, 3 ));
echo $listExcerpt . <<<EOF
<li class="offers__offer__features__list__readmore">
<a href="#offerId-list-more">_e('mehr lesen', KLEIDERORDNUNG)</a></li>
obsolete CSS code draft, discarded as overengineered, fragile, unmaintainable:
.offers__offer__features__list__readmore::marker { svg(caret-down) }
.offer-list-more + li,
.offer-list-more:target ~ li ~ .offer-list-more
{ display: none }
.offer-list-more:target,
.offer-list-more:target ~ li,
.offers__offer__features__list__readmore a.opened ~ li,
.offers__offer__features__list__readmore a:active ~ li { visible }
^ ganz ohne JS wirkt reichlich overeingineered
more minimal CSS approach
.offers__offer__features__list__readmore::marker { svg(caret-down) }
.offers__offer__features__list__readmore { display: none; }
.offers__offer__features__list__readmore.visible { display: initial; }
.offers__offer__features__list__more.hidden { display: none; }
from kleiderordnung-berlin.
ready for review and integration test on stage
from kleiderordnung-berlin.
Related Issues (20)
- Testimonial Stories Carousel UX
- language switch must return canonical home page
- Intro / Page Enhancements
- Mobile Usability issues and a11y Review HOT 2
- 404 missing preview image
- secondary calls to action
- calendly (icon link + ) integration
- content update: hub event news
- add calendly calendar appointments
- Web form / CTA usability
- contact button target on mobile/tablet
- respect reduced transparency preference
- add scannable contact QR code
- Change ALL email addresses HOT 1
- broken footer link to partner MOEON
- fix translations
- duplicate feature line after click read more
- add optional sticker HOT 2
- content update: more testimonials HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kleiderordnung-berlin.