#22 Hide long comments behind an "show more" link
Merged 3 years ago by lbrabec. Opened 3 years ago by lbrabec.

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;

+ }

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

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

@@ -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 %}

rebased onto ff84804

3 years ago

I haven't really checked the code, but I saw videos of the implementation and I like it.

Pull-Request has been merged by lbrabec

3 years ago