Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,029 subscribers

51,127 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Nine
Ninevor 1 Jahr

Can you make a css based ui library called jhey/ui

Profilbild von Alexis Morin
Alexis Morinvor 1 Jahr

What version of Chrome will have support for the ::details-content pseudo-element?

Profilbild von mh
mhvor 1 Jahr

Probably going to be a while until this is useful, right?

Profilbild von Eugene Korchagin
Eugene Korchaginvor 1 Jahr

God Are you magician?

Profilbild von Gustav Ekerot
Gustav Ekerotvor 1 Jahr

where's the npm package jhey!? seriously though, would be cool with a css-only based component lib, copy paste á la shadcn

Profilbild von Sudhansu Bhushan Mishra
Sudhansu Bhushan Mishravor 1 Jahr

Thank you for sharing this codepen

Profilbild von 👑 Satoshi 16px
👑 Satoshi 16pxvor 1 Jahr

You inspire me man!! Its crazy what you do with Css

Profilbild von Manu | UX UI Designer
Manu | UX UI Designervor 1 Jahr

Nice!!!!

Profilbild von Facundo Muoio
Facundo Muoiovor 1 Jahr

Wow! Men, it is so pretty accordion. I would like to know where you learn these CSS skills.

Profilbild von Carlito
Carlitovor 1 Jahr

Sorcery!

Ähnliche Videos

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶
0:28

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,545 Aufrufe • vor 2 Jahren

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }
0:28

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }

jhey ʕ•ᴥ•ʔ

151,054 Aufrufe • vor 8 Monaten

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}
0:22

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,736 Aufrufe • vor 1 Jahr

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍
0:28

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,367 Aufrufe • vor 9 Monaten

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 Aufrufe • vor 9 Monaten

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇
1:31

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,234 Aufrufe • vor 2 Jahren

After the success of Pokédate, We are happy to announce that another route will be added to the game as Downloadable Content! Featuring the one and only Flame Pokémon, Charizard! See if you can crack open his volcanic heart and rough exterior. More details and screens below👇
0:28

After the success of Pokédate, We are happy to announce that another route will be added to the game as Downloadable Content! Featuring the one and only Flame Pokémon, Charizard! See if you can crack open his volcanic heart and rough exterior. More details and screens below👇

incineroar fan

147,552 Aufrufe • vor 3 Jahren

Tonight, on Real America w/ Dan Ball - TPUSA Frontlines Reporter & Content Creator Bo Alford Turning Point USA - TPUSA's Bo Alford just revealed the chilling details of the Saturday terror attempt at Gracie Mansion; is this the 'new normal' for America when leaders allow radical ideologies to take root in our greatest cities? Watch Real America on Spectrum and YouTube TV Today!
1:50

Tonight, on Real America w/ Dan Ball - TPUSA Frontlines Reporter & Content Creator Bo Alford Turning Point USA - TPUSA's Bo Alford just revealed the chilling details of the Saturday terror attempt at Gracie Mansion; is this the 'new normal' for America when leaders allow radical ideologies to take root in our greatest cities? Watch Real America on Spectrum and YouTube TV Today!

One America News

36,301 Aufrufe • vor 4 Monaten

real humans + AI editor = 200 UGC videos. $3/video. 2 minutes. DansUGC Content Factory waitlist is open. here's how it works: > upload 10 product demos > plugged into 3k b-rolls from dansugc > auto-generates 200 reaction + demo combos > real human hooks. ready to deploy. no briefing. no editing. no waiting. just 10 uploads and 200 videos. comment "content factory" and I'll send you more details. must be following so i can DM.
0:34

real humans + AI editor = 200 UGC videos. $3/video. 2 minutes. DansUGC Content Factory waitlist is open. here's how it works: > upload 10 product demos > plugged into 3k b-rolls from dansugc > auto-generates 200 reaction + demo combos > real human hooks. ready to deploy. no briefing. no editing. no waiting. just 10 uploads and 200 videos. comment "content factory" and I'll send you more details. must be following so i can DM.

daniel

23,643 Aufrufe • vor 3 Monaten

SonicScribe V1 is LIVE! We are excited to announce a true breakthrough in confidential audio data handling – SonicScribe is now available for all users! This revolutionary technology transforms how organizations work with sensitive audio content by: • Accurate Transcriptions – with automatic redaction of personal identifiers. • Smart Q&A – ask natural language questions and receive context-aware, privacy-preserving answers. • Providing answers – that preserve context while protecting privacy. • Safe Search – analyze content without ever exposing confidential details. For the first time, organizations handling confidential information can safely allow employees to perform critical tasks without privacy risks. Law firms can analyze case recordings, HR departments can process interview transcripts, and customer service teams can mine call data – all while sensitive details remain protected. This technology bridges a critical gap that has long existed in regulated industries. Now you can extract maximum value from confidential audio while maintaining complete compliance with privacy regulations. 👉 Try it now:
0:45

SonicScribe V1 is LIVE! We are excited to announce a true breakthrough in confidential audio data handling – SonicScribe is now available for all users! This revolutionary technology transforms how organizations work with sensitive audio content by: • Accurate Transcriptions – with automatic redaction of personal identifiers. • Smart Q&A – ask natural language questions and receive context-aware, privacy-preserving answers. • Providing answers – that preserve context while protecting privacy. • Safe Search – analyze content without ever exposing confidential details. For the first time, organizations handling confidential information can safely allow employees to perform critical tasks without privacy risks. Law firms can analyze case recordings, HR departments can process interview transcripts, and customer service teams can mine call data – all while sensitive details remain protected. This technology bridges a critical gap that has long existed in regulated industries. Now you can extract maximum value from confidential audio while maintaining complete compliance with privacy regulations. 👉 Try it now:

ZKCrypt AI

17,101 Aufrufe • vor 1 Jahr

🎮 Get Ready for GAP Season 8! Level up your gaming experience with an all-new roster featuring: - An expanded game roster with fresh titles - Groundbreaking new features and content - Exclusive partnerships with B3 and HyperPlayGaming 🎬 Don't miss our latest teaser showcasing the incredible lineup of quest-ready games coming to Season 8. Which game has caught your eye? Drop a comment below and join the conversation! Launch details dropping soon – don't miss out! 🚀 #GAPS8 #TogetherWePlay #YGG #ComingSoon
1:27

🎮 Get Ready for GAP Season 8! Level up your gaming experience with an all-new roster featuring: - An expanded game roster with fresh titles - Groundbreaking new features and content - Exclusive partnerships with B3 and HyperPlayGaming 🎬 Don't miss our latest teaser showcasing the incredible lineup of quest-ready games coming to Season 8. Which game has caught your eye? Drop a comment below and join the conversation! Launch details dropping soon – don't miss out! 🚀 #GAPS8 #TogetherWePlay #YGG #ComingSoon

Yield Guild Games

30,805 Aufrufe • vor 1 Jahr

🏝️ More Kuroro Wilds Content coming to you soon! As we are getting closer to launch of Kuroro Wilds, we will be sharing more details about this mysterious island! 👀 Sneak Peeks: Get a first look at the game's amazing features and gameplay! 🧠 Gameplay Deep Dives: Learn the ins and outs of Kuroro Wilds mechanics and strategies. ⚔️ Character Reveals: Meet the fascinating characters that will drive the story! 👑 Kuroro Showcase: Witness the power of Kuroro in action, discover their lore, and explore the Kuroropedia! 🚀 Want a head start? Follow Kuroro Wilds for exclusive content, tips, tricks, and more! #pixelart #game
0:49

🏝️ More Kuroro Wilds Content coming to you soon! As we are getting closer to launch of Kuroro Wilds, we will be sharing more details about this mysterious island! 👀 Sneak Peeks: Get a first look at the game's amazing features and gameplay! 🧠 Gameplay Deep Dives: Learn the ins and outs of Kuroro Wilds mechanics and strategies. ⚔️ Character Reveals: Meet the fascinating characters that will drive the story! 👑 Kuroro Showcase: Witness the power of Kuroro in action, discover their lore, and explore the Kuroropedia! 🚀 Want a head start? Follow Kuroro Wilds for exclusive content, tips, tricks, and more! #pixelart #game

kuroro beasts

47,732 Aufrufe • vor 1 Jahr

WhatsApp is working on a feature to share spoiler messages! The demo video is OUT! WhatsApp will make it easier for users to send messages that can hide sensitive content behind a blurred layer. The video shows the new formatting tool that will allow users to hide selected text as spoiler content before sending a message. Recipients would be able to tap the message to reveal the text. This would help people share messages without immediately exposing the details. The feature will also reduce accidental spoilers in group chats where not everyone wants to see the same information at the same time. It will be compatible with text messages and media captions. In the future, it may support photo and video content as well. The feature is under testing, and it will be available to beta testers soon.
0:21

WhatsApp is working on a feature to share spoiler messages! The demo video is OUT! WhatsApp will make it easier for users to send messages that can hide sensitive content behind a blurred layer. The video shows the new formatting tool that will allow users to hide selected text as spoiler content before sending a message. Recipients would be able to tap the message to reveal the text. This would help people share messages without immediately exposing the details. The feature will also reduce accidental spoilers in group chats where not everyone wants to see the same information at the same time. It will be compatible with text messages and media captions. In the future, it may support photo and video content as well. The feature is under testing, and it will be available to beta testers soon.

WABetaInfo

13,611 Aufrufe • vor 2 Monaten

Today we’re releasing OpenEQA — the Open-Vocabulary Embodied Question Answering Benchmark. It measures an AI agent’s understanding of physical environments by probing it with open vocabulary questions like “Where did I leave my badge?” More details ➡️ All of today’s state-of-art vision+language models (VLMs) fall well short of human performance. In fact, for questions that require spatial understanding, today’s VLMs are nearly “blind” – access to visual content provides only minor improvements over language-only models. We hope that OpenEQA motivates additional research into helping AI understand and communicate about the world it sees.
1:58

Today we’re releasing OpenEQA — the Open-Vocabulary Embodied Question Answering Benchmark. It measures an AI agent’s understanding of physical environments by probing it with open vocabulary questions like “Where did I leave my badge?” More details ➡️ All of today’s state-of-art vision+language models (VLMs) fall well short of human performance. In fact, for questions that require spatial understanding, today’s VLMs are nearly “blind” – access to visual content provides only minor improvements over language-only models. We hope that OpenEQA motivates additional research into helping AI understand and communicate about the world it sees.

AI at Meta

407,089 Aufrufe • vor 2 Jahren

Don’t stop talking about this California Democrat Mia Bonta introduced California Assembly Bill 2624, The Stop Nick Shirley Act Not only will it criminalize investigative journalism, IT CREATES SERVICES FOR IMMIGRANTS COMMITTING THE CRIMES The bill will create a new address confidentiality program for employees, volunteers, and providers working with immigration support services. Organizations helping immigrants, including daycare, learning centers, hospice, or other taxpayer-funded social services Holy crap…. - The bill prohibits posting or sharing on the internet the photo, personal information, or home address of these individuals with the intent to incite harassment, threats, or violence - Violations allow lawsuits for damages, injunctions to remove content and criminal penalties - Punishments include misdemeanor, fines up to $10,000, possible jail time, and court orders to delete content - It allow affected individuals or organizations to demand takedown of videos or posts that include their images/personal details, even if the recording happened in or around a public or semi-public facility The bill advanced out of the Assembly Judiciary Committee
1:10

Don’t stop talking about this California Democrat Mia Bonta introduced California Assembly Bill 2624, The Stop Nick Shirley Act Not only will it criminalize investigative journalism, IT CREATES SERVICES FOR IMMIGRANTS COMMITTING THE CRIMES The bill will create a new address confidentiality program for employees, volunteers, and providers working with immigration support services. Organizations helping immigrants, including daycare, learning centers, hospice, or other taxpayer-funded social services Holy crap…. - The bill prohibits posting or sharing on the internet the photo, personal information, or home address of these individuals with the intent to incite harassment, threats, or violence - Violations allow lawsuits for damages, injunctions to remove content and criminal penalties - Punishments include misdemeanor, fines up to $10,000, possible jail time, and court orders to delete content - It allow affected individuals or organizations to demand takedown of videos or posts that include their images/personal details, even if the recording happened in or around a public or semi-public facility The bill advanced out of the Assembly Judiciary Committee

Wall Street Apes

190,303 Aufrufe • vor 3 Monaten

NEWS: Google is rolling out AI-powered EV trip planning and battery predictions in Google Maps to over 350 car models with Android Auto. The update recommends when and where to charge based on your vehicle and battery level, showing estimated battery at arrival and adjusting ETAs with charging time, something that Tesla already does, but this Google Maps update will reduce the need for multiple apps in non-Tesla EVs. Google: "To deliver accurate battery predictions for hundreds of vehicles, we combine AI with advanced energy models that analyze car details — like weight and battery size — alongside Maps’ real-time information about traffic, road elevation and weather. This will allow us to bring intelligent trip-planning features to most U.S. EVs soon."
0:21

NEWS: Google is rolling out AI-powered EV trip planning and battery predictions in Google Maps to over 350 car models with Android Auto. The update recommends when and where to charge based on your vehicle and battery level, showing estimated battery at arrival and adjusting ETAs with charging time, something that Tesla already does, but this Google Maps update will reduce the need for multiple apps in non-Tesla EVs. Google: "To deliver accurate battery predictions for hundreds of vehicles, we combine AI with advanced energy models that analyze car details — like weight and battery size — alongside Maps’ real-time information about traffic, road elevation and weather. This will allow us to bring intelligent trip-planning features to most U.S. EVs soon."

Sawyer Merritt

153,054 Aufrufe • vor 3 Monaten

🦍 $GOGO The cartoon gorilla TAKING OVER Solana! He’s wild. He’s fearless. And he RAIDS harder than anyone 💣 Built by the community. Designed to PUMP. Engineered to MOON! 🚀 🔥 Dual Launch on PumpFun & Moonit ✅ KYC ✔️ AUDIT ✔️ Hype is REAL. This ain’t just another meme… It’s a movement. And early buyers WILL win big! 💰 🌐 Website: 📢 Telegram: 💥 PumpFun CA: Ge2xZqDky9LZgVwfLgXet7ApejgGKcANTt5buCbdpump 💥 Moonit CA: BM8WpyfqfSzMAEV64o1vn2moi4LmfZLMt74Va4Svmoon ⚠️ Don’t watch this gorilla moon without you JOIN THE $GOGO ARMY NOW! 🦍🔥 ——————————————— 📢 Sponsored Content 🛑 NFA: For informational purposes only 🔍 DYOR before any investment 🎁 Free Offer - See Details
0:33

🦍 $GOGO The cartoon gorilla TAKING OVER Solana! He’s wild. He’s fearless. And he RAIDS harder than anyone 💣 Built by the community. Designed to PUMP. Engineered to MOON! 🚀 🔥 Dual Launch on PumpFun & Moonit ✅ KYC ✔️ AUDIT ✔️ Hype is REAL. This ain’t just another meme… It’s a movement. And early buyers WILL win big! 💰 🌐 Website: 📢 Telegram: 💥 PumpFun CA: Ge2xZqDky9LZgVwfLgXet7ApejgGKcANTt5buCbdpump 💥 Moonit CA: BM8WpyfqfSzMAEV64o1vn2moi4LmfZLMt74Va4Svmoon ⚠️ Don’t watch this gorilla moon without you JOIN THE $GOGO ARMY NOW! 🦍🔥 ——————————————— 📢 Sponsored Content 🛑 NFA: For informational purposes only 🔍 DYOR before any investment 🎁 Free Offer - See Details

Sol Queen 👑

193,211 Aufrufe • vor 1 Jahr

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.
0:46

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.

Meng To

41,015 Aufrufe • vor 7 Monaten

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.
0:35

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

virgil pana

44,560 Aufrufe • vor 1 Jahr

[Lucia: Inverse Crown New SFX Coating | Nightshroud Coronet] The past lies steeped in crimson, and the reins of judgment are now in her grasp. In the name of the Countess, she takes her leave of the old epoch, slumbering deep in the fog. When the blood-red moon climbs full again, she tightens her grip on the blade in hand and steps into the winding, fog-veiled streets. Before the final curtain falls, she cleaves through the specters of the silence, her will unbroken. ★How to Obtain★ After the June 2 update until July 17 at 05:00 (UTC), purchase the [Nightshroud Coronet Coating Bundle] to obtain Lucia: Inverse Crown's SFX Coating [Nightshroud Coronet]. Purchase [Weapon Coating - Evernight Solitude] to obtain the matching weapon coating. *For more details, please refer to in-game content.
1:28

[Lucia: Inverse Crown New SFX Coating | Nightshroud Coronet] The past lies steeped in crimson, and the reins of judgment are now in her grasp. In the name of the Countess, she takes her leave of the old epoch, slumbering deep in the fog. When the blood-red moon climbs full again, she tightens her grip on the blade in hand and steps into the winding, fog-veiled streets. Before the final curtain falls, she cleaves through the specters of the silence, her will unbroken. ★How to Obtain★ After the June 2 update until July 17 at 05:00 (UTC), purchase the [Nightshroud Coronet Coating Bundle] to obtain Lucia: Inverse Crown's SFX Coating [Nightshroud Coronet]. Purchase [Weapon Coating - Evernight Solitude] to obtain the matching weapon coating. *For more details, please refer to in-game content.

Punishing: Gray Raven

31,130 Aufrufe • vor 1 Monat