UI is broken on multiple pages #1418

New Issue

2017-03-30T22:32:58Z

Morlinest commented

2017-03-30 22:32:58 +00:00

(Migrated from github.com)

Gitea version (or commit ref): 1.1.0+79-g4fa691c4 (sha: 4fa691c4dd)
Git version: Not relevant
Operating system: Not relevant
Database (use [x]):
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes (provide example URL)
- No
- Not relevant
Log gist: Not relevant

Description

Broken UI graphic, at least on pages:

repo -> settings -> branches
repo -> settings -> githooks

I think its caused by mergin PR #1389.

Another broken UI is on org ->settings -> webhooks (I think this was broken before).

Screenshots

repo -> settings -> branches:

repo -> settings -> githooks:

org ->settings -> webhooks:

- Gitea version (or commit ref): 1.1.0+79-g4fa691c4 (sha: 4fa691c4dd57a1514bcbf698c32149e3ba81993f) - Git version: Not relevant - Operating system: Not relevant - Database (use `[x]`): - [x] PostgreSQL - [x] MySQL - [x] MSSQL - [x] SQLite - Can you reproduce the bug at https://try.gitea.io: - [x] Yes (provide example URL) - [ ] No - [ ] Not relevant - Log gist: Not relevant ## Description Broken UI graphic, at least on pages: - repo -> settings -> branches - repo -> settings -> githooks I think its caused by mergin PR #1389. Another broken UI is on org ->settings -> webhooks (I think this was broken before). ## Screenshots repo -> settings -> branches: ![chrome_2017-03-31_00-16-37](https://cloud.githubusercontent.com/assets/12720041/24528857/c760aee6-15a8-11e7-98b3-30ab99b2d6df.png) repo -> settings -> githooks: ![chrome_2017-03-31_00-15-07](https://cloud.githubusercontent.com/assets/12720041/24528856/c75a9f42-15a8-11e7-8a07-13ec52145cf3.png) org ->settings -> webhooks: ![chrome_2017-03-31_00-28-25](https://cloud.githubusercontent.com/assets/12720041/24528973/5ccbf850-15a9-11e7-8cbc-d2bdac9d2a5a.png)

Morlinest commented

2017-04-03 14:03:04 +00:00

(Migrated from github.com)

@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?

@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)

sapk commented

2017-04-03 14:50:45 +00:00

(Migrated from github.com)

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

2017-04-03 14:51:45 +00:00

(Migrated from github.com)

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

sapk commented

2017-04-03 14:53:39 +00:00

(Migrated from github.com)

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

2017-04-03 15:07:44 +00:00

(Migrated from github.com)

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

2017-04-03 15:13:18 +00:00

(Migrated from github.com)

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 ?

Morlinest commented

2017-04-03 15:24:23 +00:00

(Migrated from github.com)

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

githooks:

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)

Morlinest commented

2017-04-03 15:25:53 +00:00

(Migrated from github.com)

Need to solve this:

Need to solve this: ![chrome_2017-04-03_17-25-30](https://cloud.githubusercontent.com/assets/12720041/24616857/9580885a-1892-11e7-950f-ef6ddeeb670b.png)

Morlinest commented

2017-04-03 15:46:28 +00:00

(Migrated from github.com)

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

Morlinest commented

2017-04-03 15:51:48 +00:00

(Migrated from github.com)

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

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)

sapk commented

2017-04-03 18:18:56 +00:00

(Migrated from github.com)

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)

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

2017-04-03 18:24:20 +00:00

(Migrated from github.com)

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

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

sapk commented

2017-04-03 18:32:21 +00:00

(Migrated from github.com)

+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.

+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

2017-04-03 18:43:06 +00:00

(Migrated from github.com)

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

Morlinest commented

2017-04-04 09:58:13 +00:00

(Migrated from github.com)

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?

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)

sapk commented

2017-04-04 10:55:31 +00:00

(Migrated from github.com)

I haven't time to test but for having .divided border we could simply set and remove all extras custom ? .settings .list.divided>.item {
margin-right: -1rem; padding-right: 1rem;
margin-left: -1rem; padding-left: 1rem;
}
If you prefer you could also use .segment.table .list.divided.relaxed but it need a padding inside item to looks good.

And globally you should keep the desc as .item so that it have a border at his bottom. (i think)

Advice from long term maintainers could be good.

I haven't time to test but for having .divided border we could simply set and remove all extras custom ? .settings .list.divided>.item { margin-right: -1rem; padding-right: 1rem; margin-left: -1rem; padding-left: 1rem; } If you prefer you could also use .segment.table .list.divided.relaxed but it need a padding inside item to looks good. And globally you should keep the desc as .item so that it have a border at his bottom. (i think) Advice from long term maintainers could be good.

This repo is archived. You cannot comment on issues.