UI is broken on multiple pages #597

@Morlinest commented on GitHub (Apr 3, 2017):

@andreynering and others.
What you like more?
Using classic semantic styles (description not in list):

or using old custom (".hook") styles:

or (also with ".hook" list style, but description is not as list option):

Also are you OK with branches UI like this?

@Morlinest commented on GitHub (Apr 3, 2017): @andreynering and others. What you like more? Using classic semantic styles (description not in list): ![chrome_2017-04-03_15-52-00](https://cloud.githubusercontent.com/assets/12720041/24612535/d5f9336c-1885-11e7-9f5f-9a6531083d23.png) or using old custom (".hook") styles: ![chrome_2017-04-03_15-52-22](https://cloud.githubusercontent.com/assets/12720041/24612540/da6ca24e-1885-11e7-9f6f-ebe2b8571eb1.png) or (also with ".hook" list style, but description is not as list option): ![chrome_2017-04-03_16-44-55](https://cloud.githubusercontent.com/assets/12720041/24614943/1ed3fdd6-188d-11e7-944b-26706b10c6cf.png) Also are you OK with branches UI like this? ![chrome_2017-04-03_16-01-06](https://cloud.githubusercontent.com/assets/12720041/24612894/dd0fd27c-1886-11e7-96bb-596786ee218d.png) ![chrome_2017-04-03_16-02-12](https://cloud.githubusercontent.com/assets/12720041/24612916/eb62d950-1886-11e7-980e-3e91a99404db.png)

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

For the hook and branch page the .settings .list .item:not(:first-child) (introduce in my PR #1389.) just need to not be applied on hook to fix UI. I will look into it furthermore.

@sapk commented on GitHub (Apr 3, 2017): For the hook and branch page the .settings .list .item:not(:first-child) (introduce in my PR #1389.) just need to not be applied on hook to fix UI. I will look into it furthermore.

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

So .settings .list:not(.hook ) .item:not(:first-child) should be enough

@sapk commented on GitHub (Apr 3, 2017): So .settings .list:not(.hook ) .item:not(:first-child) should be enough

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

But a long term solution that I will have to look into is to improve #1389 and continue to remove specific css like .settings .hook.list

@sapk commented on GitHub (Apr 3, 2017): But a long term solution that I will have to look into is to improve #1389 and continue to remove specific css like .settings .hook.list

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

Simply removing .table class from the parent of list : class="ui attached table segment" with removing specific .hook css code is enough to fix ui and remove also specific selector we could also remove hook class that is use also in branch html just to apply the same "hack".

@sapk commented on GitHub (Apr 3, 2017): Simply removing .table class from the parent of list : class="ui attached table segment" with removing specific .hook css code is enough to fix ui and remove also specific selector we could also remove hook class that is use also in branch html just to apply the same "hack".

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

For org ->settings -> webhooks it is possible that my PR also impact since I remove some .grid code from css. I will have a look at it and maybe migrate to new UI format ?

@sapk commented on GitHub (Apr 3, 2017): For org ->settings -> webhooks it is possible that my PR also impact since I remove some .grid code from css. I will have a look at it and maybe migrate to new UI format ?

GiteaMirror commented

@Morlinest commented on GitHub (Apr 3, 2017):

OK, here is how it looks like (no .hook and .table + replace description from list to p tag before list):
webhooks:

githooks:

@Morlinest commented on GitHub (Apr 3, 2017): OK, here is how it looks like (no .hook and .table + replace description from list to p tag before list): webhooks: ![chrome_2017-04-03_17-23-14](https://cloud.githubusercontent.com/assets/12720041/24616726/40bed894-1892-11e7-88f3-02137ff45925.png) githooks: ![chrome_2017-04-03_17-23-57](https://cloud.githubusercontent.com/assets/12720041/24616760/573e1134-1892-11e7-88e3-9a2d658ecf35.png)

GiteaMirror commented

@Morlinest commented on GitHub (Apr 3, 2017):

Need to solve this:

@Morlinest commented on GitHub (Apr 3, 2017): Need to solve this: ![chrome_2017-04-03_17-25-30](https://cloud.githubusercontent.com/assets/12720041/24616857/9580885a-1892-11e7-950f-ef6ddeeb670b.png)

GiteaMirror commented

@Morlinest commented on GitHub (Apr 3, 2017):

What about removing "&:not(:first-child)" and just use "ui divided list" instead?

@Morlinest commented on GitHub (Apr 3, 2017): What about removing "&:not(:first-child)" and just use "ui divided list" instead?

GiteaMirror commented

@Morlinest commented on GitHub (Apr 3, 2017):

Like this (no extra classes, only semantic ui):

@Morlinest commented on GitHub (Apr 3, 2017): Like this (no extra classes, only semantic ui): ![chrome_2017-04-03_17-49-51](https://cloud.githubusercontent.com/assets/12720041/24618070/2ef89c4a-1896-11e7-8639-6c58ddcc8bb3.png) ![chrome_2017-04-03_17-50-12](https://cloud.githubusercontent.com/assets/12720041/24618067/2ef6adf4-1896-11e7-9740-740ebef4137a.png) ![chrome_2017-04-03_17-50-23](https://cloud.githubusercontent.com/assets/12720041/24618069/2ef82030-1896-11e7-8b58-059818f2a2fd.png) ![chrome_2017-04-03_17-50-32](https://cloud.githubusercontent.com/assets/12720041/24618068/2ef7bc62-1896-11e7-8223-8f5b57bc9c01.png) ![chrome_2017-04-03_18-11-30](https://cloud.githubusercontent.com/assets/12720041/24619031/1a6c424c-1899-11e7-921a-8c543ca1fe46.png)

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

It is missing a space and border are not connected to border like there were before. Why not keeping item list and not changing the first desc to p since &:not(:first-child) is there to keep not display border-top on first item ?
Just removing .hook and .table is enough (at least for hook and branch page)

@sapk commented on GitHub (Apr 3, 2017): It is missing a space and border are not connected to border like there were before. Why not keeping item list and not changing the first desc to p since &:not(:first-child) is there to keep not display border-top on first item ? Just removing .hook and .table is enough (at least for hook and branch page)

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

.settings .list .item:not(:first-child) {
/*** */
min-height: 60px;
}
could also maybe removed to have a more compact list ...

@sapk commented on GitHub (Apr 3, 2017): .settings .list .item:not(:first-child) { /*** */ min-height: 60px; } could also maybe removed to have a more compact list ...

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

+1 : .divided could be a solution to go further at cleaning custom css but we will need to keep fix to extend borders to borders or find a other solution in semantic

and use relaxed to add spacing in between horizontals borders.

@sapk commented on GitHub (Apr 3, 2017): +1 : .divided could be a solution to go further at cleaning custom css but we will need to keep fix to extend borders to borders or find a other solution in semantic and use relaxed to add spacing in between horizontals borders.

GiteaMirror commented

@sapk commented on GitHub (Apr 3, 2017):

For dropdown .list .item need to be more specific to .list>.item

@sapk commented on GitHub (Apr 3, 2017): For dropdown .list .item need to be more specific to .list>.item

GiteaMirror commented

@Morlinest commented on GitHub (Apr 4, 2017):

I think it looks good with .relaxed .divided. No need for border to border extend, If you want that look, you can use attached segment or table instead of list. I like this look. Options tab has the same look. What do you think?

@Morlinest commented on GitHub (Apr 4, 2017): I think it looks good with .relaxed .divided. No need for border to border extend, If you want that look, you can use attached segment or table instead of list. I like this look. Options tab has the same look. What do you think? ![chrome_2017-04-04_11-49-34](https://cloud.githubusercontent.com/assets/12720041/24651193/384189fa-192d-11e7-832f-5d192ffa8aef.png) ![chrome_2017-04-04_11-49-42](https://cloud.githubusercontent.com/assets/12720041/24651194/3842a72c-192d-11e7-9c47-823f4cb50358.png) ![chrome_2017-04-04_11-49-51](https://cloud.githubusercontent.com/assets/12720041/24651195/38439a24-192d-11e7-8ee3-ceab378ab96c.png) ![chrome_2017-04-04_11-50-01](https://cloud.githubusercontent.com/assets/12720041/24651192/3840346a-192d-11e7-88ba-5ff5103cd82f.png)

GiteaMirror commented