Need a bit of help with UI (my Timeline element for my User Interface for my Work History Component)
Answered
Sun bear posted this in #help-forum
Sun bearOP
I am trying to implement my timeline component in my code to look as I have it in my prototype. I need some help with the code for the UI.
Here are the issues I'm trying to solve:
- I am missing the other line segments and I don't know why they won't appear
- The circles are too big and vertically unaligned with the date text
- The logo needs to be horizontally aligned with the Work Experience Icon
- The L segment needs to start from the middle of the Work Experience Icon and the lower part needs to be close to the logo (2px close for example)
- The circles need to be horizontally aligned with the Work Experience Icon
Timeline Spawn Rules (this is how it needs to work):
- When there is no entry only the circle would be spawned next to the text that appears saying there is no work history
- When there are 2 or more entries, the first entry has that L segment next to it instead of a circle
- When there are 2 or more entries the last entry only has the circle and the segment that leads to the logo, the segment after the logo does no spawn for last entries
My Code: https://paste.ec/paste/6zbFqM9P#bIa9lVxddQkz2FrNVyXSV8Ozjryp-jLixrYSDDpDoEO
I've posted a screenshot with how my UI looks now and a screenshot from my prototype with how the UI needs to look like
Here are the issues I'm trying to solve:
- I am missing the other line segments and I don't know why they won't appear
- The circles are too big and vertically unaligned with the date text
- The logo needs to be horizontally aligned with the Work Experience Icon
- The L segment needs to start from the middle of the Work Experience Icon and the lower part needs to be close to the logo (2px close for example)
- The circles need to be horizontally aligned with the Work Experience Icon
Timeline Spawn Rules (this is how it needs to work):
- When there is no entry only the circle would be spawned next to the text that appears saying there is no work history
- When there are 2 or more entries, the first entry has that L segment next to it instead of a circle
- When there are 2 or more entries the last entry only has the circle and the segment that leads to the logo, the segment after the logo does no spawn for last entries
My Code: https://paste.ec/paste/6zbFqM9P#bIa9lVxddQkz2FrNVyXSV8Ozjryp-jLixrYSDDpDoEO
I've posted a screenshot with how my UI looks now and a screenshot from my prototype with how the UI needs to look like
19 Replies
Sun bearOP
Okay so Claude lied to me, that's good to know.
I was wondering why they don't show up.
Would you be willing to help me add them please ?
IIRC, a few months back, I helped you with the same
Sun bearOP
I remember, but it wasn't working like I needed to so I had to have Claude update it, and it deleted the lines at some point. The component has been through lots of modifications since then.
3: You'll have to add the logo in the absolute element
I'm not free at the moment, I just gave you basic guidance on how to fix.
@"use php" I'm not free at the moment, I just gave you basic guidance on how to fix.
Sun bearOP
That helps too.
I can just tell Claude to do what you said and see if it works.
Okay I'll start by trying to move the logo in the absolute component first and see if that does what I want.
Claude can maybe help, but pls, I highly recommend you to learn html first, it'll make the development process faster.
Sun bearOP
Nah, it keeps messsing the UI up for some reason. I'll try with Chat GPT.
I don't know why Claude is struggling this much with this timeline element.
Okay, GPT at least understand what I mean but it vertically moved the company logo randomly 😅
This should be easy to fix.
This should be easy to fix.
Sun bearOP
I've finally solved it.
Answer
Sun bearOP
This was a hassle.