search

CodingTrain / Directional-Boring

Horizontal Directional Drilling Simulation
MIT License
46 stars 21 forks source link

Added a nicer looking layout with CSS #20

Closed DenisovichDev closed 2 years ago

DenisovichDev commented 2 years ago

Made a simple user interface layout with CSS grids and added a few styles. I've kept it very light so that if you wanna change something, it would be easier for you to do it. Please tell me if you want something changed, or removed.

The CSS part is a tiny bit hacky because all the elements are made with native p5.js, so it's not possible to give them id or classes from the JS part. Or is it? I don't know, but it works!

Any other UI change you would wanna add?

image

shiffman commented 2 years ago

Love this @DenisovichDev! If you want to create the interface natively in HTML we can access the elements in p5 using select() instead. This version doesn't have to match the original code too closely (though I would like to still use p5.)

DenisovichDev commented 2 years ago

@shiffman Ahh right, I forgot about that. Although, I think how it is now is still better. Basically, I didn't wanna change anything in sketch.js because it's part of the video. Changing that too much wouldn't be too nice, IMO. That's why I did it only with CSS.

I should mention, if you plan on adding more buttons, the CSS would need to be updated. Please feel free to mention me in that pull request in that case, I'll update the CSS.

shiffman commented 2 years ago

Thanks @DenisovichDev!!