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
--- a/src/main/webapp/WEB-INF/jsp/issue-form.jsp	Sat Aug 29 11:51:12 2020 +0200
+++ b/src/main/webapp/WEB-INF/jsp/issue-form.jsp	Sat Aug 29 12:15:48 2020 +0200
@@ -59,6 +59,14 @@
             </td>
         </tr>
         <tr>
+            <th><fmt:message key="issue.created"/></th>
+            <td><fmt:formatDate value="${issue.created}" /></td>
+        </tr>
+        <tr>
+            <th><fmt:message key="issue.updated"/></th>
+            <td><fmt:formatDate value="${issue.updated}" /></td>
+        </tr>
+        <tr>
             <th><fmt:message key="issue.category"/></th>
             <td>
                 <select name="category">
@@ -133,14 +141,6 @@
             <th><fmt:message key="issue.eta"/></th>
             <td><input name="eta" type="date" value="<fmt:formatDate value="${issue.eta}" pattern="YYYY-MM-dd" />" /> </td>
         </tr>
-        <tr>
-            <th><fmt:message key="issue.created"/></th>
-            <td><fmt:formatDate value="${issue.created}" /></td>
-        </tr>
-        <tr>
-            <th><fmt:message key="issue.updated"/></th>
-            <td><fmt:formatDate value="${issue.updated}" /></td>
-        </tr>
         </tbody>
         <tfoot>
         <tr>
--- a/src/main/webapp/WEB-INF/jspf/issue-list.jsp	Sat Aug 29 11:51:12 2020 +0200
+++ b/src/main/webapp/WEB-INF/jspf/issue-list.jsp	Sat Aug 29 12:15:48 2020 +0200
@@ -3,16 +3,15 @@
 --%>
 
 <table class="fullwidth datatable medskip">
+    <colgroup>
+        <col width="auto" />
+        <col width="10%" />
+    </colgroup>
     <thead>
-    <tr>
-        <th><fmt:message key="issue.subject"/></th>
-        <th><fmt:message key="issue.assignee"/></th>
-        <th><fmt:message key="issue.category"/></th>
-        <th><fmt:message key="issue.status"/></th>
-        <th><fmt:message key="issue.created"/></th>
-        <th><fmt:message key="issue.updated"/></th>
-        <th><fmt:message key="issue.eta"/></th>
-    </tr>
+        <tr>
+            <th><fmt:message key="issue.subject"/></th>
+            <th><fmt:message key="issue.eta"/></th>
+        </tr>
     </thead>
     <tbody>
     <c:forEach var="issue" items="${issues}">
@@ -23,32 +22,15 @@
                         <c:out value="${issue.subject}" />
                     </a>
                 </span>
-            </td>
-            <td>
-                <c:if test="${not empty issue.assignee}">
-                    <c:out value="${issue.assignee.shortDisplayname}" />
-                </c:if>
-                <c:if test="${empty issue.assignee}">
-                    <fmt:message key="placeholder.null-assignee" />
-                </c:if>
-            </td>
-            <td>
-                <div class="fullwidth issue-tag ${issue.category}">
+                <div style="display: inline-block; width: .25em"></div>
+                <div class="issue-tag ${issue.category}">
                     <fmt:message key="issue.category.${issue.category}" />
                 </div>
-            </td>
-            <td>
-                <div class="fullwidth issue-tag phase-${issue.status.phase}">
+                <div class="issue-tag phase-${issue.status.phase}">
                     <fmt:message key="issue.status.${issue.status}" />
                 </div>
             </td>
             <td>
-                <fmt:formatDate value="${issue.created}" type="BOTH"/>
-            </td>
-            <td>
-                <fmt:formatDate value="${issue.updated}" type="BOTH"/>
-            </td>
-            <td>
                 <fmt:formatDate value="${issue.eta}" />
             </td>
         </tr>
--- a/src/main/webapp/lightpit.css	Sat Aug 29 11:51:12 2020 +0200
+++ b/src/main/webapp/lightpit.css	Sat Aug 29 12:15:48 2020 +0200
@@ -129,9 +129,9 @@
 button, a.button {
     display: inline-block;
     font-size: medium;
-    border-style: outset;
-    border-width: 2pt;
-    border-color: #6060cc;
+    border-style: solid;
+    border-width: 1pt;
+    border-color: #606060;
     color: inherit;
     background: #f0f0f0;
 
@@ -167,18 +167,18 @@
 table.datatable th {
     white-space: nowrap;
     font-weight: bold;
-    background: lightsteelblue;
+    background: #f7f7ff;
 }
 
 table.datatable th, table.datatable td {
     border-style: solid;
     border-width: 1pt;
-    border-color: black;
+    border-color: lightgray;
     padding: .4em;
 }
 
 table.datatable tr:nth-child(2n) {
-    background: #f0ffff;
+    background: #faffff;
 }
 
 table.formtable {
--- a/src/main/webapp/projects.css	Sat Aug 29 11:51:12 2020 +0200
+++ b/src/main/webapp/projects.css	Sat Aug 29 12:15:48 2020 +0200
@@ -69,15 +69,14 @@
     padding: .1em 2ex .1em 2ex;
     display: inline-block;
     box-sizing: border-box;
-    border-style: outset;
-    border-width: 2pt;
+    border-style: solid;
+    border-width: 1pt;
     border-color: silver;
-    border-radius: 6pt;
+    border-radius: 4pt;
     background: lightgray;
-    text-transform: uppercase;
     text-align: center;
     font-weight: bolder;
-    font-size: smaller;
+    font-size: x-small;
     color: whitesmoke;
 }
 
@@ -86,7 +85,7 @@
 }
 
 .issue-tag.Improvement, .issue-tag.Feature {
-    background: green;
+    background: limegreen;
 }
 
 .issue-tag.Task {

mercurial