TOP - CV Application - Some guidance on setting this layout up
Layouts haunt me, I always mess them up, so this time I'm coming for a little guidance first 😛
Firstly - admire my amazing paint skills.
Secondly - what's a better idea, having a dropdown menu to then reveal the inputs, or just show the inputs from the get-go?
Thirdly - how would you build this layout? my initial thought was grid. Have 3 areas/cards down the left, then a large card on the right with a 30/70 split? or is flex perfectly fine? I really don't know.
16 Replies
Where would your inputs go?
Oh is the input section text inputs in the general information section? I wouldn't put that behind an action.
I don't really know the goals of the app though
It's basically to create a CV
so I'd have the left 30% or so of the app for inputting the data and it'll populate that data on the right 70%
name, email, number, education, previous employment
text inputs, yes
Oh cool, yea definitely have that showing without it being behind something
How do you want to have that look on mobile?
I'm not sure how traditional apps do it but maybe have it in like a sidepanel that is open by default and then you can close it to see the full preview with a hamburger button?
that's kinda what I'm thinking of
not sure how it'd look in mobile, perhaps the sidepanel has to be at the top, then the form would be below it
Yea I'd have to research and see how other companies do it
there are a bunch of solutions on TOP with other peoples finished products, 90% seem to be using flexbox
Yea either works
I used grid here but you can definitely use flex too or a combination of both
hey that's pretty much the result I'm after
now I just have to figure out which css file I'm putting this all in, because react is a pain in the ass with css styling locations
You can make one central css file if it's a small enough app
I think i will for this, since they share the same classes throughout the entire codebase anyway
I'll split out the 4 sections into components, but keep the css in 1
Yea, you can probably do both too
Not probably, you can
1 css file for like global styles and then a css file for each component
that's the one thing I miss on svelte, each styling is linked to that file and that file only lol, not globally like react
anyway thanks for that vince, that was a lot simpler than I thought!
voila, this should hopefully be a nice easy intro project from TOP, lots of state management that's about it
styling upgrade
