search

uclaacm / acm-url

Vanity URL creator for ACM
http://links.uclaacm.com/
2 stars 0 forks source link

Added admin page frontend #25

Closed jason2020 closed 2 years ago

jason2020 commented 2 years ago

Struggled a bit getting the CSS to work. There still are some spacing issues, but everything is mostly there. I wasn't sure how to get those select boxes for the delete. I just used checkboxes for now.

ellieyhcheng commented 2 years ago

You will probably want to remove the margin from the "admin-button" class since that's forcing the rows taller. You can also make them smaller, both length and width, it might look nicer. And/or we make the "admin-button"s have variable width so this doesn't happen image

Using checkboxes is perfect. So to get the checkboxes to have the line through, we're going to need JS. We can set that particular checkbox's indeterminate attribute to true which will give it that line thing. This is a feature that can only be done in JS though, not HTML. You can use <script> tags to insert the JS. Here's the documentation about checkboxes. We will want to set it to true when any one of the checkboxes on the table is selected but give it a checked state when all of the checkboxes is checked. We can hop on a call and figure this out together if you want more guidance.

jason2020 commented 2 years ago

I think i got the checkboxes to work, but i might need some help getting the New URL button aligned with the Edit buttons.

ellieyhcheng commented 2 years ago

If you don't mind, there's some more CSS things to finish this off.

  1. Center the checkboxes. image

  2. Align the buttons. Just add padding left and padding right with 2rem, respectively. image

Thanks!

jason2020 commented 2 years ago

I centered the checkboxes. It turns out the buttons were not centered but just looked like it. I used relative/absolute positing to get it actually centered. For the top buttons, I couldn't figure out how to get it to work with padding or margin of 2rem; the admin buttons always ended up slightly misaligned. I ended up creating a grid for the top buttons and centering them in a similar way to how I did it in the table.