Make the ability to control the issue page's layout with css easier about budoco HOT 27 CLOSED

@ivangrek - If you are interesed in more work, this is my top priority. My css positioning skills are really really bad. I do a lot of trial and error and I really don't have a grasp of the fundamentals.

from budoco.

Most likely, a table tag will not work as a basis.

from budoco.

FOR SURE a table tag won't work.

from budoco.

I understand correctly, you want to change the order and arrangement of elements?

from budoco.

[element 1] [element 5]
[element 2] [element 6]
[element 3] [element 7]
[element 4] [element 8]

to

[element 8] [element 4]
[element 7] [element 3]
[element 6] [element 2]
[element 5] [element 1]

or some randomly.

from budoco.

No, I want it to look like the way it looks now, or pretty close to it. But I want that look controlled by css in budoco.css, not by a table tag in the .cshtml file.

And I want a demo of how to change to positing in custom_css_example.css

from budoco.

First we need to use reset.css and reset browser default styles.
Prepare the canvas so to speak.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

from budoco.

Using variables for the same values.
https://developer.mozilla.org/en-US/docs/Web/CSS/var()

from budoco.

Feel free to do all the smart best practice stuff while also making it not too hard for me to review/accept the pull request. So hopefully only changes to budoco.css related to issue.cshtml, custom_css_example.css, and issue.cshtml.

from budoco.

👍

from budoco.

Didn't you consider this option?
https://getbootstrap.com/

from budoco.

I'm not trying to redesign the whole site.
I'm not trying to make it work with mobile.
I just want to have a solution for that specific section of the issue page.

from budoco.

fyi: https://budoco.net/About

from budoco.

👍

from budoco.

Made some improvements. Added variables. Please look at what else to look for? That would not block css.

from budoco.

Only this section?

from budoco.

This issue is only about the section below the Details textarea and above the button. Just the dropdowns. I want the css to control whether to display them in one column or two and what order.

from budoco.

I think i found a solution

from budoco.

👍

from budoco.

https://jsfiddle.net/ctrager/qLj1kcm7/32/

from budoco.

That fiddle does exactly what I want. I originally assigned this to you because like the postgres full text search, I was really stuck and frustrated. Now, though, I know exactly what to do. If you don't want to work on this, that's okay, or if you want to complete it, that's okay too.

from budoco.

This would be more fun to work on: #31
Want it?

from budoco.

I have an idea to use "display: flex;".
But not sure if this will cover all the options you want.

from budoco.

I had already tried flex. This grid thing seems to work better. What do you think about you stopping working on this one and working on #31 instead?

from budoco.

I will switch because I do not see the end goal.

from budoco.

Done (using display: grid)

from budoco.

👍

from budoco.