[metrics-web/master] Apply new design to table and link pages.

9 Jan 2017

commit d289a1b56f5a7d1a54a12911e8e613e550082144
Author: Karsten Loesing <karsten.loesing@gmx.net>
Date:   Wed Dec 21 12:26:47 2016 +0100

    Apply new design to table and link pages.
---
 .../org/torproject/metrics/web/LinkServlet.java    |   4 +-
 .../org/torproject/metrics/web/TableServlet.java   |   4 +-
 website/web/WEB-INF/link.jsp                       | 106 ++++++++----------
 website/web/WEB-INF/table.jsp                      | 123 +++++++++------------
 4 files changed, 100 insertions(+), 137 deletions(-)

diff --git a/website/src/org/torproject/metrics/web/LinkServlet.java b/website/src/org/torproject/metrics/web/LinkServlet.java
index 7caeca2..be37a03 100644
--- a/website/src/org/torproject/metrics/web/LinkServlet.java
+++ b/website/src/org/torproject/metrics/web/LinkServlet.java
@@ -44,9 +44,7 @@ public class LinkServlet extends MetricServlet {
       request.setAttribute("categoryDescription", category.getDescription());
       List<String[]> categoryTabs = new ArrayList<String[]>();
       for (String metricId : category.getMetrics()) {
-        categoryTabs.add(new String[] {
-            this.titles.get(metricId),
-            requestedId.equals(metricId) ? null : metricId });
+        categoryTabs.add(new String[] { this.titles.get(metricId), metricId });
       }
       request.setAttribute("categoryTabs", categoryTabs);
     }
diff --git a/website/src/org/torproject/metrics/web/TableServlet.java b/website/src/org/torproject/metrics/web/TableServlet.java
index 0236777..7e6619c 100644
--- a/website/src/org/torproject/metrics/web/TableServlet.java
+++ b/website/src/org/torproject/metrics/web/TableServlet.java
@@ -56,9 +56,7 @@ public class TableServlet extends MetricServlet {
       request.setAttribute("categoryDescription", category.getDescription());
       List<String[]> categoryTabs = new ArrayList<String[]>();
       for (String metricId : category.getMetrics()) {
-        categoryTabs.add(new String[] {
-            this.titles.get(metricId),
-            requestedId.equals(metricId) ? null : metricId });
+        categoryTabs.add(new String[] { this.titles.get(metricId), metricId });
       }
       request.setAttribute("categoryTabs", categoryTabs);
     }
diff --git a/website/web/WEB-INF/link.jsp b/website/web/WEB-INF/link.jsp
index efff3b4..dcead41 100644
--- a/website/web/WEB-INF/link.jsp
+++ b/website/web/WEB-INF/link.jsp
@@ -1,73 +1,57 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-  <title>Tor Metrics — ${title}</title>
-  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-  <link href="css/stylesheet-ltr.css" type="text/css" rel="stylesheet">
-  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
-  <link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon">
-</head>
-<body>
-  <div class="center">
-    <div class="main-column">
-        <h2><a href="/"><img src="images/metrics-logo.png" width="153" height="200" alt="Metrics logo"><img src="images/metrics-wordmark.png" width="384" height="50" alt="Metrics wordmark"></a></h2>
-        <br>
+<jsp:include page="top.jsp">
+  <jsp:param name="pageTitle" value="${categoryHeader} – Tor Metrics"/>
+  <jsp:param name="navActive" value="${categoryHeader}"/>
+</jsp:include>
+
+    <div class="container">
+      <ul class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li class="active">${categoryHeader}</li>
+      </ul>
+    </div>
 
-<p>"Tor metrics are the ammunition that lets Tor and other security
-advocates argue for a more private and secure Internet from a position
-of data, rather than just dogma or perspective."
-<i>- Bruce Schneier (June 1, 2016)</i></p>
+    <div class="container">
+      <h1>${categoryHeader}</h1>
+      <p>${categoryDescription}</p>
+    </div>
 
-        <!-- Navigation start -->
-        Metrics |
-        <a href="about.html">About</a> |
-        <a href="news.html">News</a> |
-        <a href="tools.html">Tools</a> |
-        <a href="research.html">Research</a>
-        <br>
-        <br>
-        <!-- Navigation end -->
+    <div class="container">
 
-<c:forEach var="category" items="${categories}"><c:if test="${fn:length(category[0]) > 0}"><a href="${category[0]}.html"></c:if>${category[1]}<c:if test="${fn:length(category[0]) > 0}"></a></c:if> |
-</c:forEach>
-<br>
+      <!-- tabs -->
+      <ul class="nav nav-tabs">
+        <c:forEach var="tab" items="${categoryTabs}">
+        <li role="presentation"<c:if test="${id.equals(tab[1])}"> class="active"</c:if>><a href="${tab[1]}.html" data-tab="${tab[1]}">${tab[0]}</a></li>
+        </c:forEach>
+      </ul>
 
-<h2>${categoryHeader}</h2>
+      <!-- tab-content -->
+      <div class="tab-content">
+        <div class="tab-pane active" id="tab-${tab[1]}">
 
-<p>${categoryDescription}</p>
+          <div class="row">
+            <div class="col-md-8">
+              ${description}
+            </div>
+            <div class="col-md-4">
 
-<c:forEach var="tab" items="${categoryTabs}">
-<c:if test="${fn:length(tab[1]) > 0}"><a href="${tab[1]}.html"></c:if>${tab[0]}<c:if test="${fn:length(tab[1]) > 0}"></a></c:if> |
-</c:forEach>
-<br>
+              <p>
 
-<br>
-${description}
+              <c:if test="${fn:length(data) > 0}">
+              <h4>Underlying data</h4>
+              <ul>
+              <c:forEach var="row" items="${data}">
+              <li><a href="${row[0]}">${row[1]}</a></li>
+              </c:forEach>
+              </ul>
+              </c:if>
 
-<c:if test="${fn:length(data) > 0}">
-<h4>Underlying data</h4>
-<ul>
-<c:forEach var="row" items="${data}">
-<li><a href="${row[0]}">${row[1]}</a></li>
-</c:forEach>
-</ul>
-</c:if>
+            </div><!-- col-md-4 -->
+          </div><!-- row -->
+        </div><!-- tab-pane -->
+      </div><!-- tab-content -->
+    </div><!-- container -->
 
-<c:if test="${fn:length(related) > 0}">
-<h4>Related metrics</h4>
-<ul>
-<c:forEach var="row" items="${related}">
-<li><a href="${row[0]}">${row[1]}</a></li>
-</c:forEach>
-</ul>
-</c:if>
+<jsp:include page="bottom.jsp"/>
 
-    </div>
-  </div>
-  <div class="bottom" id="bottom">
-    <%@ include file="footer.jsp"%>
-  </div>
-</body>
-</html>
diff --git a/website/web/WEB-INF/table.jsp b/website/web/WEB-INF/table.jsp
index ab91db7..b6fd541 100644
--- a/website/web/WEB-INF/table.jsp
+++ b/website/web/WEB-INF/table.jsp
@@ -1,52 +1,58 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
-  <title>Tor Metrics — ${title}</title>
-  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-  <link href="css/stylesheet-ltr.css" type="text/css" rel="stylesheet">
-  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
-  <link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon">
-</head>
-<body>
-  <div class="center">
-    <div class="main-column">
-        <h2><a href="/"><img src="images/metrics-logo.png" width="153" height="200" alt="Metrics logo"><img src="images/metrics-wordmark.png" width="384" height="50" alt="Metrics wordmark"></a></h2>
-        <br>
+<jsp:include page="top.jsp">
+  <jsp:param name="pageTitle" value="${categoryHeader} – Tor Metrics"/>
+  <jsp:param name="navActive" value="${categoryHeader}"/>
+</jsp:include>
 
-<p>"Tor metrics are the ammunition that lets Tor and other security
-advocates argue for a more private and secure Internet from a position
-of data, rather than just dogma or perspective."
-<i>- Bruce Schneier (June 1, 2016)</i></p>
+    <div class="container">
+      <ul class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li class="active">${categoryHeader}</li>
+      </ul>
+    </div>
 
-        <!-- Navigation start -->
-        Metrics |
-        <a href="about.html">About</a> |
-        <a href="news.html">News</a> |
-        <a href="tools.html">Tools</a> |
-        <a href="research.html">Research</a>
-        <br>
-        <br>
-        <!-- Navigation end -->
+    <div class="container">
+      <h1>${categoryHeader}</h1>
+      <p>${categoryDescription}</p>
+    </div>
 
-<c:forEach var="category" items="${categories}"><c:if test="${fn:length(category[0]) > 0}"><a href="${category[0]}.html"></c:if>${category[1]}<c:if test="${fn:length(category[0]) > 0}"></a></c:if> |
-</c:forEach>
-<br>
+    <div class="container">
 
-<h2>${categoryHeader}</h2>
+      <!-- tabs -->
+      <ul class="nav nav-tabs">
+        <c:forEach var="tab" items="${categoryTabs}">
+        <li role="presentation"<c:if test="${id.equals(tab[1])}"> class="active"</c:if>><a href="${tab[1]}.html" data-tab="${tab[1]}">${tab[0]}</a></li>
+        </c:forEach>
+      </ul>
 
-<p>${categoryDescription}</p>
+      <!-- tab-content -->
+      <div class="tab-content">
+        <div class="tab-pane active" id="tab-${tab[1]}">
 
-<c:forEach var="tab" items="${categoryTabs}">
-<c:if test="${fn:length(tab[1]) > 0}"><a href="${tab[1]}.html"></c:if>${tab[0]}<c:if test="${fn:length(tab[1]) > 0}"></a></c:if> |
-</c:forEach>
-<br>
+          <div class="row">
+            <div class="col-md-8">
+
+              <table>
+                <tr>
+                <c:forEach var="row" items="${tableheader}">
+                  <th>${row}</th>
+                </c:forEach>
+                </tr>
+                <c:forEach var="row" items="${tabledata}">
+                  <tr>
+                  <c:forEach var="col" items="${row}">
+                    <td>${col}</td>
+                  </c:forEach>
+                  </tr>
+                </c:forEach>
+              </table>
+
+              ${description}
+            </div>
+            <div class="col-md-4">
 
-<br>
-${description}
 <form action="${id}.html">
-  <div class="formrow">
     <p>
     <label>Start date (yyyy-mm-dd):
       <input type="text" name="start" size="10" value="${start[0]}">
@@ -58,23 +64,8 @@ ${description}
     </p><p>
     <input class="submit" type="submit" value="Update table">
     </p>
-  </div>
 </form>
-<br>
-<table>
-  <tr>
-  <c:forEach var="row" items="${tableheader}">
-    <th>${row}</th>
-  </c:forEach>
-  </tr>
-  <c:forEach var="row" items="${tabledata}">
-    <tr>
-    <c:forEach var="col" items="${row}">
-      <td>${col}</td>
-    </c:forEach>
-    </tr>
-  </c:forEach>
-</table>
+
 <p>
 
 <c:if test="${fn:length(data) > 0}">
@@ -86,19 +77,11 @@ ${description}
 </ul>
 </c:if>
 
-<c:if test="${fn:length(related) > 0}">
-<h4>Related metrics</h4>
-<ul>
-<c:forEach var="row" items="${related}">
-<li><a href="${row[0]}">${row[1]}</a></li>
-</c:forEach>
-</ul>
-</c:if>
+            </div><!-- col-md-4 -->
+          </div><!-- row -->
+        </div><!-- tab-pane -->
+      </div><!-- tab-content -->
+    </div><!-- container -->
+
+<jsp:include page="bottom.jsp"/>
 
-    </div>
-  </div>
-  <div class="bottom" id="bottom">
-    <%@ include file="footer.jsp"%>
-  </div>
-</body>
-</html>

    

karsten＠torproject.org

tags

participants (1)