PR#22: Hide long comments behind an "show more" link - fedora-qa/testdays-web

fedora-qa / testdays-web

#22 Hide long comments behind an "show more" link

Merged 4 years ago by lbrabec. Opened 4 years ago by lbrabec.

feature/collapsiblecomment into develop

Hide long comments behind an "show more" link

Lukas Brabec • 4 years ago

ff84804

testdays/static/css/style.css

file modified

+33 -2

		`@@ -2,7 +2,38 @@`
		`.fa-times {color: red;}`
		`.fa-exclamation {color: blue;}`
		`.footer {padding-top: 3rem !important; padding-bottom: 3rem !important;}`
		`- thead th {width: 15% !important;}`
		`.navbar {margin-bottom: 1em;}`
		`.white-color {color: white;}`
		`- h1 {font-size: 2rem;}`
		`\ No newline at end of file`
		`+ h1 {font-size: 2rem;}`
		`+`
		`+ .username {`
		`+ width: 15em !important;`
		`+ }`
		`+`
		`+ th.profile {`
		`+ width: 15em !important;`
		`+ }`
		`+`
		`+ th.comments {`
		`+ width: 30em !important;`
		`+ }`
		`+`
		`+ td.comments {`
		`+ font-size: 0.75em;`
		`+ }`
		`+`
		`+ .comments a.collapse-toggle.collapsed:after,`
		`+ .profile a.collapse-toggle.collapsed:after {`
		`+ content: 'show more';`
		`+ }`
		`+`
		`+ .comments a.collapse-toggle:not(.collapsed):after,`
		`+ .profile a.collapse-toggle:not(.collapsed):after {`
		`+ content: 'show less';`
		`+ }`
		`+`
		`+ .comments .collapsing {`
		`+ -webkit-transition: none;`
		`+ transition: none;`
		`+ display: none;`
		`+ }`

testdays/templates/enter_result.html

file modified

+6 -1

		`@@ -11,7 +11,12 @@`
		`{{ form_field(form.col_1, with_label = True) }}`
		`{{ form_field(form.result, with_label = True) }}`
		`{{ form_field(form.bugs, with_label = True) }}`
		`- {{ form_field(form.comment, with_label = True) }}`
		`+ {{ form_field(form.comment, with_label = True, oninput="maxLengthAlert(this)") }}`
		`+ <div class="alert alert-warning d-none" id="tooLongAlert">`
		`+ Your comment seems quite long. Please know that you shouldn't input any long error messages or system logs.`
		`+ Instead, create a <a href="https://bugzilla.redhat.com" target="_blank" rel=”noopener noreferrer”>Bugzilla</a>`
		`+ ticket and link it here, thank you.`
		`+ </div>`
		`<div class="form-group">`
		`<input type="submit" class="btn btn-success" />`
		`</div>`

testdays/templates/layout.html

file modified

+10

		`@@ -76,6 +76,16 @@`
		`"pageLength": 15`
		`} );`
		`} );`
		`+`
		`+ const maxLengthAlert = (element) => {`
		`+ const maxLenght = 500`
		`+`
		`+ if (element.value.length > maxLenght) {`
		`+ $("#tooLongAlert").removeClass("d-none").addClass("d-block")`
		`+ } else {`
		`+ $("#tooLongAlert").removeClass("d-block").addClass("d-none")`
		`+ }`
		`+ }`
		`</script>`
		`</body>`
		`</html>`

testdays/templates/show_event.html

file modified

+22 -7

		`@@ -24,8 +24,8 @@`
		`<table class="table table-bordered">`
		`<thead>`
		`<tr>`
		`- <th>Username</th>`
		`- <th>{{category.col_1_name or "Profile"}}</th>`
		`+ <th class="username">Username</th>`
		`+ <th class="profile">{{category.col_1_name or "Profile"}}</th>`
		`{% for testcase in category.testcases %}`
		`<th>`
		`<a href="{{testcase.url}}" class="external" target="_blank">`
		`@@ -33,7 +33,7 @@`
		`</a>`
		`</th>`
		`{% endfor %}`
		`- <th>Comments</th>`
		`+ <th class="comments">Comments</th>`
		`</tr>`
		`<tr>`
		`<th></th>`
		`@@ -41,7 +41,7 @@`
		`{% for testcase in category.testcases %}`
		`<th>`
		`{% if testcase.name in profile.filled %}`
		`- <a href="{{url_for('main.enter_result', event_id=testcase.category.event.id, tc_id=testcase.id)}}" class="btn btn-primary btn-xs ">`
		`+ <a href="{{url_for('main.enter_result', event_id=testcase.category.event.id, tc_id=testcase.id)}}" class="btn btn-primary btn-sm ">`
		`<strong>Already entered</strong>`
		`</a>`
		`{% else %}`
		`@@ -59,7 +59,15 @@`
		`{% for line in results[category.id] %}`
		`<tr>`
		`<td>{{line['username']}}</td>`
		`- <td>{{line['profile']}}</td>`
		`+ <td class="profile">`
		`+ {% if line['profile']\|length > 150 %}`
		`+ <span>{{line['profile'][:150]}}</span>`
		`+ <span class="collapse" id="p_{{line['username']}}">{{line['profile'][150:]}}</span>`
		`+ <a data-toggle="collapse" class="collapse-toggle collapsed" href="#p_{{line['username']}}"></a>`
		`+ {% else %}`
		`+ {{line['profile']}}`
		`+ {% endif %}`
		`+ </td>`
		`{% for results in line['results'] %}`
		`<td>`
		`{% for result in results %}`
		`@@ -78,13 +86,20 @@`
		`{% endfor %}`
		`</td>`
		`{% endfor %}`
		`- <td>`
		`+ <td class="comments">`
		`{% for comment in line['comments'] %}`
		`{{loop.index}}.`
		`{% for bug in comment[0] %}`
		`<a class="external" target="_blank" href="https://bugzilla.redhat.com/show_bug.cgi?id={{bug}}">#{{bug}}</a>,`
		`{% endfor %}`
		`- {{comment[1]}}`
		`+ {% if comment[1]\|length > 200 %}`
		`+ <span>{{comment[1][:200]}}</span>`
		`+ <span class="collapse" id="c_{{line['username']}}_{{loop.index}}">{{comment[1][200:]}}</span>`
		`+ <a data-toggle="collapse" class="collapse-toggle collapsed" href="#c_{{line['username']}}_{{loop.index}}"></a>`
		`+ {% else %}`
		`+ {{comment[1]}}`
		`+ {% endif %}`
		`+`
		`{% if comment[0] or comment[1] %}`
		`<br />`
		`{% endif %}`