improves styling and readability of issue list

Sat, 29 Aug 2020 12:15:48 +0200

author
Mike Becker <universe@uap-core.de>
date
Sat, 29 Aug 2020 12:15:48 +0200
changeset 103
3d0d030dffa7
parent 102
7eee7cad093d
child 104
8be80ea4f52b

improves styling and readability of issue list

src/main/webapp/WEB-INF/jsp/issue-form.jsp file | annotate | diff | comparison | revisions
src/main/webapp/WEB-INF/jspf/issue-list.jsp file | annotate | diff | comparison | revisions
src/main/webapp/lightpit.css file | annotate | diff | comparison | revisions
src/main/webapp/projects.css file | annotate | diff | comparison | revisions
     1.1 --- a/src/main/webapp/WEB-INF/jsp/issue-form.jsp	Sat Aug 29 11:51:12 2020 +0200
     1.2 +++ b/src/main/webapp/WEB-INF/jsp/issue-form.jsp	Sat Aug 29 12:15:48 2020 +0200
     1.3 @@ -59,6 +59,14 @@
     1.4              </td>
     1.5          </tr>
     1.6          <tr>
     1.7 +            <th><fmt:message key="issue.created"/></th>
     1.8 +            <td><fmt:formatDate value="${issue.created}" /></td>
     1.9 +        </tr>
    1.10 +        <tr>
    1.11 +            <th><fmt:message key="issue.updated"/></th>
    1.12 +            <td><fmt:formatDate value="${issue.updated}" /></td>
    1.13 +        </tr>
    1.14 +        <tr>
    1.15              <th><fmt:message key="issue.category"/></th>
    1.16              <td>
    1.17                  <select name="category">
    1.18 @@ -133,14 +141,6 @@
    1.19              <th><fmt:message key="issue.eta"/></th>
    1.20              <td><input name="eta" type="date" value="<fmt:formatDate value="${issue.eta}" pattern="YYYY-MM-dd" />" /> </td>
    1.21          </tr>
    1.22 -        <tr>
    1.23 -            <th><fmt:message key="issue.created"/></th>
    1.24 -            <td><fmt:formatDate value="${issue.created}" /></td>
    1.25 -        </tr>
    1.26 -        <tr>
    1.27 -            <th><fmt:message key="issue.updated"/></th>
    1.28 -            <td><fmt:formatDate value="${issue.updated}" /></td>
    1.29 -        </tr>
    1.30          </tbody>
    1.31          <tfoot>
    1.32          <tr>
     2.1 --- a/src/main/webapp/WEB-INF/jspf/issue-list.jsp	Sat Aug 29 11:51:12 2020 +0200
     2.2 +++ b/src/main/webapp/WEB-INF/jspf/issue-list.jsp	Sat Aug 29 12:15:48 2020 +0200
     2.3 @@ -3,16 +3,15 @@
     2.4  --%>
     2.5  
     2.6  <table class="fullwidth datatable medskip">
     2.7 +    <colgroup>
     2.8 +        <col width="auto" />
     2.9 +        <col width="10%" />
    2.10 +    </colgroup>
    2.11      <thead>
    2.12 -    <tr>
    2.13 -        <th><fmt:message key="issue.subject"/></th>
    2.14 -        <th><fmt:message key="issue.assignee"/></th>
    2.15 -        <th><fmt:message key="issue.category"/></th>
    2.16 -        <th><fmt:message key="issue.status"/></th>
    2.17 -        <th><fmt:message key="issue.created"/></th>
    2.18 -        <th><fmt:message key="issue.updated"/></th>
    2.19 -        <th><fmt:message key="issue.eta"/></th>
    2.20 -    </tr>
    2.21 +        <tr>
    2.22 +            <th><fmt:message key="issue.subject"/></th>
    2.23 +            <th><fmt:message key="issue.eta"/></th>
    2.24 +        </tr>
    2.25      </thead>
    2.26      <tbody>
    2.27      <c:forEach var="issue" items="${issues}">
    2.28 @@ -23,32 +22,15 @@
    2.29                          <c:out value="${issue.subject}" />
    2.30                      </a>
    2.31                  </span>
    2.32 -            </td>
    2.33 -            <td>
    2.34 -                <c:if test="${not empty issue.assignee}">
    2.35 -                    <c:out value="${issue.assignee.shortDisplayname}" />
    2.36 -                </c:if>
    2.37 -                <c:if test="${empty issue.assignee}">
    2.38 -                    <fmt:message key="placeholder.null-assignee" />
    2.39 -                </c:if>
    2.40 -            </td>
    2.41 -            <td>
    2.42 -                <div class="fullwidth issue-tag ${issue.category}">
    2.43 +                <div style="display: inline-block; width: .25em"></div>
    2.44 +                <div class="issue-tag ${issue.category}">
    2.45                      <fmt:message key="issue.category.${issue.category}" />
    2.46                  </div>
    2.47 -            </td>
    2.48 -            <td>
    2.49 -                <div class="fullwidth issue-tag phase-${issue.status.phase}">
    2.50 +                <div class="issue-tag phase-${issue.status.phase}">
    2.51                      <fmt:message key="issue.status.${issue.status}" />
    2.52                  </div>
    2.53              </td>
    2.54              <td>
    2.55 -                <fmt:formatDate value="${issue.created}" type="BOTH"/>
    2.56 -            </td>
    2.57 -            <td>
    2.58 -                <fmt:formatDate value="${issue.updated}" type="BOTH"/>
    2.59 -            </td>
    2.60 -            <td>
    2.61                  <fmt:formatDate value="${issue.eta}" />
    2.62              </td>
    2.63          </tr>
     3.1 --- a/src/main/webapp/lightpit.css	Sat Aug 29 11:51:12 2020 +0200
     3.2 +++ b/src/main/webapp/lightpit.css	Sat Aug 29 12:15:48 2020 +0200
     3.3 @@ -129,9 +129,9 @@
     3.4  button, a.button {
     3.5      display: inline-block;
     3.6      font-size: medium;
     3.7 -    border-style: outset;
     3.8 -    border-width: 2pt;
     3.9 -    border-color: #6060cc;
    3.10 +    border-style: solid;
    3.11 +    border-width: 1pt;
    3.12 +    border-color: #606060;
    3.13      color: inherit;
    3.14      background: #f0f0f0;
    3.15  
    3.16 @@ -167,18 +167,18 @@
    3.17  table.datatable th {
    3.18      white-space: nowrap;
    3.19      font-weight: bold;
    3.20 -    background: lightsteelblue;
    3.21 +    background: #f7f7ff;
    3.22  }
    3.23  
    3.24  table.datatable th, table.datatable td {
    3.25      border-style: solid;
    3.26      border-width: 1pt;
    3.27 -    border-color: black;
    3.28 +    border-color: lightgray;
    3.29      padding: .4em;
    3.30  }
    3.31  
    3.32  table.datatable tr:nth-child(2n) {
    3.33 -    background: #f0ffff;
    3.34 +    background: #faffff;
    3.35  }
    3.36  
    3.37  table.formtable {
     4.1 --- a/src/main/webapp/projects.css	Sat Aug 29 11:51:12 2020 +0200
     4.2 +++ b/src/main/webapp/projects.css	Sat Aug 29 12:15:48 2020 +0200
     4.3 @@ -69,15 +69,14 @@
     4.4      padding: .1em 2ex .1em 2ex;
     4.5      display: inline-block;
     4.6      box-sizing: border-box;
     4.7 -    border-style: outset;
     4.8 -    border-width: 2pt;
     4.9 +    border-style: solid;
    4.10 +    border-width: 1pt;
    4.11      border-color: silver;
    4.12 -    border-radius: 6pt;
    4.13 +    border-radius: 4pt;
    4.14      background: lightgray;
    4.15 -    text-transform: uppercase;
    4.16      text-align: center;
    4.17      font-weight: bolder;
    4.18 -    font-size: smaller;
    4.19 +    font-size: x-small;
    4.20      color: whitesmoke;
    4.21  }
    4.22  
    4.23 @@ -86,7 +85,7 @@
    4.24  }
    4.25  
    4.26  .issue-tag.Improvement, .issue-tag.Feature {
    4.27 -    background: green;
    4.28 +    background: limegreen;
    4.29  }
    4.30  
    4.31  .issue-tag.Task {

mercurial