add category links, styling

6 files changed, 80 insertions, 67 deletions

diff --git a/screenshots/admin.png b/screenshots/admin.png
index 6eea084..add23f7 100644
--- a/screenshots/admin.png
+++ b/screenshots/admin.png
diff --git a/templates/admin-edit.html b/templates/admin-edit.html
index 8455e25..a4cf2c7 100644
--- a/templates/admin-edit.html
+++ b/templates/admin-edit.html
@@ -19,6 +19,9 @@
   {{ end }}
   </tr>
 </table>
+<div class="cat">
+  <span>{{ range $category, $paper := .Papers }}[<a href="#{{ $category }}">{{ $category }}</a>] {{ end }}</span>
+</div>
 <table class='tabs'>
   <tr>
     <td><a class='active' href='/admin/'>Back</a></td>
@@ -27,6 +30,7 @@
 <div class='content'>
 {{ if gt $categoryCount 0 }}
 <form method='post' action='/admin/edit/'>
+  <div class="action">
   <select class="btn" name="action" id="Action">
     <optgroup label="Action">
       <option value="delete">Delete</option>
@@ -38,32 +42,29 @@
     </optgroup>
   </select>
   <input class='btn' type="submit" value="Save" />
-<table summary='paper list' class='list nowrap'>
+  </div>
+<div class='papers nowrap list'>
 {{ range $category, $papers := .Papers }}
   {{ $paperCount := len $papers }}
-  <tr class='nohover-highlight'>
-		<td colspan='4' class='papersection'>
-			<input type="checkbox" id="{{ $category }}" name="category" value="{{ $category }}">
-			<label for="{{ $category }}">{{ $category }}</label>
-		</td>
-	</tr>
+  <div class="papersection">
+  <input type="checkbox" id="{{ $category }}" name="category" value="{{ $category }}">
+  <label for="{{ $category }}"><span class='papersection' id='{{ $category }}'>{{ $category }}</span></label>
+  </div>
   {{ range $path, $paper := $papers }}
-  <tr>
+    <div class="paper">
     {{ if $paper.Meta.Title }}
-    <td class="sublevel-paper title"><input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"><label for="{{ $path }}"><a href='/download/{{ $path }}' title='{{ $paper.Meta.Title }}'>{{ $paper.Meta.Title }}</a></label></td>
+    <span class="title"><input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"> <a href='/download/{{ $path }}' title='{{ $paper.Meta.Title }}'>{{ $paper.Meta.Title }}</a></input></span><br>
     {{ else }}
-    <td class="sublevel-paper title"><input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"><label for="{{ $path }}"><a href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>{{ $paper.PaperName }}</a></label></td>
+    <span class="title"><input type="checkbox" id="{{ $path }}" name="paper" value="{{ $path }}"><label for="{{ $path }}"> <a href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>{{ $paper.PaperName }}</a></label></span><br>
     {{ end }}
-  </tr>
-  <tr>
+
     {{ if $paper.Meta.Title }}
-    <td class="sub">{{ $paper.Meta.PubYear }} - {{ $contCount := len $paper.Meta.Contributors }} {{ if gt $contCount 0 }}{{ $author := index $paper.Meta.Contributors 0 }}{{ $author.LastName }}{{ if gt $contCount 1 }} et al.{{ end }}{{ end }} - <a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a> - {{ $paper.Meta.Journal }}</td>
-    {{ else }}
-    <td></td>
+    <span class="authors">{{ range $index, $contributor := $paper.Meta.Contributors }}{{if $index}}, {{end}}{{ $contributor.FirstName }} {{ $contributor.LastName }}{{end}}</span><br>
+    <span class="year">{{ $paper.Meta.PubYear }}</span> - <span class="doi"><a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a></span> - <span class="journal">{{ $paper.Meta.Journal }}</span>
     {{ end }}
-  </tr>
+    </div>
   {{ end }}
 {{ end }}
 {{ end }}
-</table></form></div>
+</form></div>
 {{ end }}
diff --git a/templates/admin.html b/templates/admin.html
index 8c5222c..697b391 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -38,6 +38,9 @@
   {{ end }}
 </table>
 {{ if gt $categoryCount 0 }}
+<div class="cat">
+  <span>{{ range $category, $paper := .Papers }}[<a href="#{{ $category }}">{{ $category }}</a>] {{ end }}</span>
+</div>
 <table class='tabs'>
   <tr>
     <td><a class='active' href='/admin/edit/'>Edit</a></td>
diff --git a/templates/index.html b/templates/index.html
index 7de21f7..30023cd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,10 +4,13 @@
 </table>
 {{ $categoryCount := len .Papers }}
 {{ if gt $categoryCount 0 }}
+<div class="cat">
+  <span>{{ range $category, $paper := .Papers }}[<a href="#{{ $category }}">{{ $category }}</a>] {{ end }}</span>
+</div>
 <table class='tabs'>
   <td><a class='active' href='/admin/'>Manage</a></td>
 </table>
-<div class='content'>
+<div class="content">
 {{ block "list" . }}{{ end }}
 </div>
 {{ else }}
diff --git a/templates/layout.html b/templates/layout.html
index 39bb8bb..ae89ff1 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -18,15 +18,15 @@
 
 div#crane {
   font-family: monospace;
-  padding: 0em;
   background: white;
   padding: 4px;
-  max-width: 45em;
+  max-width: 55em;
   margin: auto;
+  overflow-wrap: break-word;
 }
 
 div#crane a {
-  color: blue;
+  color: #000;
   text-decoration: none;
 }
 
@@ -62,13 +62,6 @@ div#crane .btn {
 	border-radius: 0;
 }
 
-div#crane a:hover {
-  text-decoration: underline;
-}
-div#crane a {
-  color: #000;
-}
-
 div#crane table {
   border-collapse: collapse;
 }
@@ -99,11 +92,6 @@ div#crane table#header td.form {
   white-space: nowrap;
 }
 
-div#crane table#header td.form form,
-div#crane table#header td.form input,
-div#crane table#header td.form select {
-}
-
 div#crane table#header td.sub {
   color: #777;
   border-top: solid 1px #ccc;
@@ -140,51 +128,72 @@ div#crane table.tabs td.form form {
   padding-left: 1em;
 }
 
-div#crane table.tabs td.form input,
-div#crane table.tabs td.form select {
-}
-
 div#crane div.content {
   margin-top: 1em;
   padding-bottom: 1em;
   border-bottom: solid 2px #ccc;
 }
 
-div#crane table.list {
+div#crane div.cat {
+  font-size: 80%;
+  color: #555;
+  padding-bottom: 1em;
+}
+
+div#crane div.list {
   width: 100%;
   border: none;
   border-collapse: collapse;
+  text-align: left;
 }
 
-div#crane table.list:first-child tr:first-child td:first-child {
-  padding-top: 0em;
+div#crane div.content div.action {
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
-div#crane table.list td.sub {
-  padding-left: 4em;
+div#crane div.list div.paper {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-left: 10px;
+}
+
+div#crane div.list span.authors {
   font-size: 80%;
+  color: #900;
 }
 
-div#crane table.list td {
+div#crane div.list span.year {
+  font-size: 80%;
+  color: #090;
+}
+
+div#crane div.list span.doi a {
+  font-size: 80%;
+}
+
+div#crane div.list span.journal {
+  font-size: 80%;
+}
+
+div#crane div.list span {
   border: none;
-  padding: 0.1em 0.5em 0.1em 0.5em;
 }
 
-div#crane table.list td.title {
-  text-decoration: underline;
+div#crane div.list span.title {
   padding-top: 0.5em;
-  padding-left: 1.5em;
 }
 
-div#crane table.list td a:hover {
-  color: #00f;
+div#crane div.list span.title a {
+  text-decoration: underline;
 }
 
-div#crane table.list td.papersection {
+div#crane div.list div.papersection {
   font-weight: bold;
-  padding-top: 1em;
-  padding-bottom: .5em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
   color: black;
+  font-size: 120%;
 }
 
 div#crane div.footer {
diff --git a/templates/list.html b/templates/list.html
index 1a482d1..8f6382d 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -1,29 +1,26 @@
 {{ define "list" }}
-<table summary='paper list' class='list nowrap'>
+<div class='papers nowrap list'>
 {{ range $category, $papers := .Papers }}
   {{ $paperCount := len $papers }}
   {{ if ge $paperCount 1 }}
-  <tr class='nohover-highlight'>
-		<td colspan='4' class='papersection'>{{ $category }}</td>
-	</tr>
+  <div class="papersection">
+  <span class='papersection' id='{{ $category }}'>{{ $category }}</span>
+  </div>
   {{ range $path, $paper := $papers }}
-  <tr>
+    <div class="paper">
     {{ if $paper.Meta.Title }}
-    <td class="sublevel-paper title"><a href='/download/{{ $path }}' title='{{ $paper.Meta.Title }}'>{{ $paper.Meta.Title }}</a></td>
+    <span class="title"><a href='/download/{{ $path }}' title='{{ $paper.Meta.Title }}'>{{ $paper.Meta.Title }}</a></span><br>
     {{ else }}
-    <td class="sublevel-paper title"><a href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>{{ $paper.PaperName }}</a></td>
+    <span class="title"><a href='/download/{{ $path }}' title='{{ $paper.PaperName }}'>{{ $paper.PaperName }}</a></span><br>
     {{ end }}
-  </tr>
-  <tr>
+
     {{ if $paper.Meta.Title }}
-    <td class="sub">{{ $paper.Meta.PubYear }} - {{ $contCount := len $paper.Meta.Contributors }} {{ if gt $contCount 0 }}{{ $author := index $paper.Meta.Contributors 0 }}{{ $author.LastName }}{{ if gt $contCount 1 }} et al.{{ end }}{{ end }} - <a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a> - {{ $paper.Meta.Journal }}</td>
-    {{ else }}
-    <td></td>
+    <span class="authors">{{ range $index, $contributor := $paper.Meta.Contributors }}{{if $index}}, {{end}}{{ $contributor.FirstName }} {{ $contributor.LastName }}{{end}}</span><br>
+    <span class="year">{{ $paper.Meta.PubYear }}</span> - <span class="doi"><a href="https://doi.org/{{ $paper.Meta.DOI }}">{{ $paper.Meta.DOI }}</a></span> - <span class="journal">{{ $paper.Meta.Journal }}</span>
     {{ end }}
-  </tr>
+    </div>
   {{ end }}
-  {{ else }}
   {{ end }}
 {{ end }}
-</table>
+</div>
 {{ end }}