style.css, repo_index: Use div, not table, for expandables

3 files changed, 51 insertions, 52 deletions

diff --git a/static/style.css b/static/style.css
index 8441a0c..37ba741 100644
--- a/static/style.css
+++ b/static/style.css
@@ -41,6 +41,29 @@ html, code, pre {
 	font-size: 1rem; /* TODO: Not always correct */
 }
 
+/* Toggle table controls */
+.toggle-table-off, .toggle-table-on {
+       display: none;
+}
+.toggle-table-off + table > thead > tr > th, .toggle-table-on + table > thead > tr > th {
+       padding: 0;
+}
+.toggle-table-off + table > thead > tr > th > label, .toggle-table-on + table > thead > tr > th > label {
+       width: 100%;
+       display: inline-block;
+       padding: 3px 0;
+       cursor: pointer;
+}
+.toggle-table-off:checked + table > tbody {
+       display: none;
+}
+.toggle-table-on + table > tbody {
+       display: none;
+}
+.toggle-table-on:checked + table > tbody {
+       display: table-row-group;
+}
+
 /* Footer styles */
 footer {
 	margin-top: 1rem;
@@ -92,6 +115,9 @@ td, th {
 	padding: 3px 5px;
 	border: var(--lighter-border-color) solid 1px;
 }
+.pad {
+	padding: 3px 5px;
+}
 th, thead, tfoot {
 	background-color: var(--lighter-box-background-color);
 }
@@ -104,10 +130,10 @@ tr.title-row > th, th.title-row, .title-row {
 td > pre {
 	margin: 0;
 }
-td#readme > *:last-child {
+#readme > *:last-child {
 	margin-bottom: 0;
 }
-td#readme > *:first-child {
+#readme > *:first-child {
 	margin-top: 0;
 }
 
@@ -119,29 +145,6 @@ td#readme > *:first-child {
 	overflow-x: auto;
 }
 
-/* Toggle table controls */
-.toggle-table-off, .toggle-table-on {
-	display: none;
-}
-.toggle-table-off + table > thead > tr > th, .toggle-table-on + table > thead > tr > th {
-	padding: 0;
-}
-.toggle-table-off + table > thead > tr > th > label, .toggle-table-on + table > thead > tr > th > label {
-	width: 100%;
-	display: inline-block;
-	padding: 3px 0;
-	cursor: pointer;
-}
-.toggle-table-off:checked + table > tbody {
-	display: none;
-}
-.toggle-table-on + table > tbody {
-	display: none;
-}
-.toggle-table-on:checked + table > tbody {
-	display: table-row-group;
-}
-
 /* Diff/chunk styles */
 .chunk-unchanged {
 	color: grey;
@@ -164,23 +167,27 @@ pre.chunk {
 	margin-top: 0;
 	margin-bottom: 0;
 }
+.centering {
+	text-align: center;
+}
 
 /* Toggle content sections */
-.toggle-on-wrapper {
+.toggle-off-wrapper, .toggle-on-wrapper {
 	border: var(--lighter-border-color) solid 1px;
 }
-.toggle-on-toggle {
+.toggle-off-toggle, .toggle-on-toggle {
 	display: none;
 }
-.toggle-on-header {
+.toggle-off-header, .toggle-on-header {
+	font-weight: bold;
 	cursor: pointer;
 	display: block;
 	width: 100%;
 	background-color: var(--lighter-box-background-color);
 }
-.toggle-on-header > span {
+.toggle-off-header > div, .toggle-on-header > div {
 	padding: 3px 5px;
-	display: inline-block;
+	display: block;
 }
 .toggle-on-content {
 	display: none;
@@ -188,6 +195,12 @@ pre.chunk {
 .toggle-on-toggle:checked + .toggle-on-header + .toggle-on-content {
 	display: block;
 }
+.toggle-off-content {
+	display: block;
+}
+.toggle-off-toggle:checked + .toggle-off-header + .toggle-off-content {
+	display: none;
+}
 
 /* File display styles */
 .file-patch + .file-patch {
diff --git a/templates/repo_commit.html.tmpl b/templates/repo_commit.html.tmpl
index d07845b..8797092 100644
--- a/templates/repo_commit.html.tmpl
+++ b/templates/repo_commit.html.tmpl
@@ -53,7 +53,7 @@
 				<div class="file-patch toggle-on-wrapper">
 					<input type="checkbox" id="toggle-{{ .From.Hash }}{{ .To.Hash }}" class="file-toggle toggle-on-toggle">
 					<label for="toggle-{{ .From.Hash }}{{ .To.Hash }}" class="file-header toggle-on-header">
-						<span>
+						<div>
 							{{ if eq .From.Path "" }}
 								--- /dev/null
 							{{ else }}
@@ -65,7 +65,7 @@
 							{{ else }}
 								+++ b/<a href="../tree/{{ .To.Path }}?commit={{ $commit_object.Hash }}">{{ .To.Path }}</a> {{ .To.Mode }}
 							{{ end }}
-						</span>
+						</div>
 					</label>
 					<div class="file-content toggle-on-content scroll">
 						{{ range .Chunks }}
diff --git a/templates/repo_index.html.tmpl b/templates/repo_index.html.tmpl
index 806ceda..3f5436d 100644
--- a/templates/repo_index.html.tmpl
+++ b/templates/repo_index.html.tmpl
@@ -77,28 +77,14 @@
 			</table>
 		</div>
 		<div class="padding-wrapper">
-			<div id="refs">
+			<div class="toggle-off-wrapper">
+				<input type="checkbox" id="toggle-readme" class="toggle-off-toggle" />
+				<label for="toggle-readme" class="toggle-off-header centering"><div>{{ .readme_filename }}</div></label>
+				<div class="toggle-off-content pad" id="readme">
+					{{ .readme }}
+				</div>
 			</div>
 		</div>
-		<div class="padding-wrapper">
-			{{ if .readme }}
-				<input id="toggle-table-readme" type="checkbox" class="toggle-table-off" />
-				<table class="wide">
-					<thead>
-						<tr class="title-row">
-							<th><label for="toggle-table-readme">{{ .readme_filename }}</label></th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td id="readme">
-								{{ .readme -}}
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			{{ end }}
-		</div>
 		<footer>
 			{{ template "footer" . }}
 		</footer>