PR#5363: fix(theme): long words in source nav break layout - pagure

pagure

#5363 fix(theme): long words in source nav break layout

Merged a year ago by ngompa. Opened a year ago by wombelix.

wombelix/pagure fix_long_words_in_source_nav_break_layout into master

fix(theme): long words in source nav break layout

Dominik Wombacher • a year ago

c9bd2f2

pagure/templates/commit.html

file modified

+1 -1

		`@@ -20,7 +20,7 @@`
		`{# we recognize non-executable file, executable file and symlink #}`
		`{% set expected_modes = [33188, 33261, 40960] %}`
		`<div class="row">`
		`- <div class="col">`
		`+ <div class="col-2">`
		`{% block overviewtabs %}{{ super() }}{% endblock %}`
		`</div>`
		`<div class="col-10">`

pagure/themes/srcfpo/static/theme.css

file modified

+6 -1

		`@@ -13,4 +13,9 @@`

		`.footer a.notblue{`
		`opacity:0.7;`
		`- }`
		`\ No newline at end of file`
		`+ }`
		`+`
		`+ .enforce-text-break {`
		`+ word-wrap: break-word !important;`
		`+ word-break: break-all !important;`
		`+ }`

pagure/themes/srcfpo/templates/repo_master_sidebar.html

file modified

+6 -6

		`@@ -1,4 +1,4 @@`
		`- <nav class="nav nav-tabs nav-sidetabs flex-column">`
		`+ <nav class="nav nav-tabs nav-sidetabs flex-column flex-nowrap">`
		`<a class=`
		`"nav-link nowrap`
		`{%if select == 'overview' %} active{% endif %}"`
		`@@ -66,7 +66,7 @@`
		`</a>`

		`{% if 'distgit_ns' in g.main_app.blueprints and not repo.is_fork and repo.namespace != 'tests'%}`
		`- <div class="col-xs-2 line-height-1"></div>`
		`+ <div class="line-height-1"></div>`
		`<h6>Monitoring status:</h6>`
		`<div class="btn-group">`
		`{% if g.authenticated %}`
		`@@ -158,9 +158,9 @@`
		`{% endif %}`
		`</div>`

		`- <div class="col-xs-2 line-height-1"></div>`
		`- <div id="orphan-section" class="pt-3">`
		`- <div class="col-xs-2 line-height-1"></div>`
		`+ <div class="line-height-1"></div>`
		`+ <div id="orphan-section" class="pt-3 enforce-text-break">`
		`+ <div class="line-height-1"></div>`
		`{% if repo.user.user == "orphan" %}`
		`<p>Orphaned for: {{ repo.orphan_reason.reason }}`
		`{% if repo.orphan_reason.reason_info %}`
		`@@ -194,7 +194,7 @@`
		`</div>`

		`<div class="pt-3">`
		`- <div class="col-xs-2 line-height-1">`
		`+ <div class="line-height-1">`
		`<h6>Bugzilla Assignee:</h6>`
		`<dl>`
		`<dt>Fedora: </dt>`

wombelix commented a year ago

template 'commit.html' didn't limited the width of the nav colum, the src.fp.o theme adds additional information which might contain long words which then broke the layout, the content appeared below the side navigation. To fix this, a text break will be enforced in the relevant div as well.

Fixes: https://pagure.io/pagure/issue/5353

See related issue for further details and screenshots, solution need to be discussed before merged, the PR just demonstrate a potential workaround.

ngompa commented a year ago

Have you tested this fix with all included themes?

rebased onto fbbcd24bed58a7340b083ae95cb875c0d7599abf

a year ago

rebased onto c9bd2f2

a year ago

wombelix commented a year ago

Have you tested this fix with all included themes?

Yes I did, the only global change is in commit.html and actually just aligns it with other templates like commits.html. Instead of allowing the left side to consume more then two colums, we limit it to two columns as on every other page.

The most relevant changes are only in scope of the srcfpo theme files.