[tor-commits] [metrics-web/master] Apply new design to table and link pages.
karsten at torproject.org
karsten at torproject.org
Mon Jan 9 17:03:42 UTC 2017
commit d289a1b56f5a7d1a54a12911e8e613e550082144
Author: Karsten Loesing <karsten.loesing at 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>
More information about the tor-commits
mailing list