Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Galleria | made with Svelte, Sveltekit, Tailwind, GridCSS, columns

#svelte#tailwind-css
P
Nathanβ€’ 830

@Yofou

Desktop design screenshot for the Galleria slideshow site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


How did you guys implement a native masonry layout? this is the best i did haha

Community feedback

Ivanβ€’ 2,630

@isprutfromua

Posted

Hi there. Good job!

I have some suggestions for improvement

  • Close the picture by clicking on the background

  • It would be good if the detail page occupied the entire height of the screen, no more

  • The bottom panel twitches when you open the details page

  • Why do you need the index and [index] folders, what is the difference between them? I think folder components would be enough

  • instead of the slide-out.ts animation you could use the built-in fly animation with the value set to y

I hope my feedback will be useful to you

Good luck

1

P
Nathanβ€’ 830

@Yofou

Posted

@isprutfromua first of I wanted to say, thank you for your feedback, so let me go through this one-by one :)

"Close the picture by clicking on the background" Done and deployed πŸ‘

"It would be good if the detail page occupied the entire height of the screen, no more" Yeah in an ideal case this would be great but I would either be sacrificing hiding some of the details text before the tablet break point hit or alternatively I make the break point for tablet in desktop bounds if I would want those conditions to be met and I did mess around with that idea before submitting this solution but at the end of the day I just preferred the text to wrap freely for those ~100px before the tablet break point hit πŸ˜€

"The bottom panel twitches when you open the details page" YES EXACTLY, it is something I noticed before submitting as well and it's a strange issue I have to bring up to svelte team at some point, after some debugging though, It's actually the slide-out transition playing in that's causing that twitchiness, HOWEVER I only ever tell the slide-out transition to play on out and no matter what I can't override the in transition and after some messing around I'm pretty sure it to do with bottom panel being out of the view port on the inital page load as when I forced it to be always in the view port on the initial page load, this issue is gone 🀷

"Why do you need the index and [index] folders, what is the difference between them? I think folder components would be enough" you'll noticed they're the same names as my routes in /routes/, at it's a just a simple little convention for this project for scoped components ONLY ment for those routes and no other, there's no other good reason why I did it this way other than just some organization for my brain πŸ˜€

"instead of the slide-out.ts animation you could use the built-in fly animation with the value set to y" originally I was using fly but the problem with fly is keeps the element still apart of the document flow when doing the transition and when you do page transitions that document flow changes for a split second meaning the my bottom panel was jumping around on page transition, so I quickly made my own transition slide-out to remove it from the document flow and used fixed top 0 bottom 0

hopefully that answers all your question feel free to ask more and I'll happily answer them and again appreciate all your feedback πŸ‘

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord