From cd3ac0bcaa4545a26f2ed69c1ecd5ed4ab8802e6 Mon Sep 17 00:00:00 2001
From: John Benediktsson <mrjbq7@gmail.com>
Date: Sun, 7 Aug 2022 13:49:27 -0700
Subject: [PATCH] webapps.wiki: simplify and fix table layouts

---
 extra/webapps/wiki/revisions-common.xml |  46 ++++-----
 extra/webapps/wiki/wiki-common.xml      |  16 ++--
 extra/webapps/wiki/wiki.css             | 122 ++++++++++++------------
 3 files changed, 91 insertions(+), 93 deletions(-)

diff --git a/extra/webapps/wiki/revisions-common.xml b/extra/webapps/wiki/revisions-common.xml
index 1a6c8e4673..4c5f7acf2d 100644
--- a/extra/webapps/wiki/revisions-common.xml
+++ b/extra/webapps/wiki/revisions-common.xml
@@ -2,31 +2,27 @@
 
 <t:chloe xmlns:t="http://factorcode.org/chloe/1.0">
 
-	<div class="revisions">
-
-		<table>
-
-			<tr>
-				<th>Article</th>
-				<th>Date</th>
-				<th>By</th>
-				<th>Description</th>
-				<th>Rollback</th>
-			</tr>
-
-			<t:bind-each t:name="revisions">
-				<tr>
-					<td> <t:a t:href="$wiki/view" t:rest="title"><t:label t:name="title" /></t:a> </td>
-					<td> <t:a t:href="$wiki/revision" t:rest="id" rel="nofollow"><t:label t:name="date" /></t:a> </td>
-					<td> <t:a t:href="$wiki/user-edits" t:rest="author"><t:label t:name="author" /> </t:a></td>
-					<td> <t:label t:name="description" /> </td>
-					<td> <t:button class="link link-button" t:action="$wiki/rollback" t:for="id">Rollback</t:button> </td>
-				</tr>
-			</t:bind-each>
-
-		</table>
-
-	</div>
+    <table class="revisions">
+
+        <tr>
+            <th>Article</th>
+            <th>Date</th>
+            <th>By</th>
+            <th>Description</th>
+            <th>Rollback</th>
+        </tr>
+
+        <t:bind-each t:name="revisions">
+            <tr>
+                <td> <t:a t:href="$wiki/view" t:rest="title"><t:label t:name="title" /></t:a> </td>
+                <td> <t:a t:href="$wiki/revision" t:rest="id" rel="nofollow"><t:label t:name="date" /></t:a> </td>
+                <td> <t:a t:href="$wiki/user-edits" t:rest="author"><t:label t:name="author" /> </t:a></td>
+                <td> <t:label t:name="description" /> </td>
+                <td> <t:button class="link link-button" t:action="$wiki/rollback" t:for="id">Rollback</t:button> </td>
+            </tr>
+        </t:bind-each>
+
+    </table>
 
 	<t:call-next-template />
 
diff --git a/extra/webapps/wiki/wiki-common.xml b/extra/webapps/wiki/wiki-common.xml
index 2c4afd799e..2c572e852b 100644
--- a/extra/webapps/wiki/wiki-common.xml
+++ b/extra/webapps/wiki/wiki-common.xml
@@ -30,6 +30,7 @@
     </nav>
 
     <div class="page">
+
         <div id="left">
             <t:if t:value="contents">
 
@@ -52,15 +53,16 @@
         <div id="right">
             <h1 class="title"><t:write-title /></h1>
             <t:call-next-template />
+
+            <t:if t:value="footer">
+                <footer>
+                    <t:bind t:name="footer">
+                        <t:farkup t:name="content" t:no-follow="true" />
+                    </t:bind>
+                </footer>
+            </t:if>
         </div>
 
-        <t:if t:value="footer">
-            <footer>
-                <t:bind t:name="footer">
-                    <t:farkup t:name="content" t:no-follow="true" />
-                </t:bind>
-            </footer>
-        </t:if>
     </div>
 
     <span style="display:none"></span>
diff --git a/extra/webapps/wiki/wiki.css b/extra/webapps/wiki/wiki.css
index 8fed0adaff..295f3a957b 100644
--- a/extra/webapps/wiki/wiki.css
+++ b/extra/webapps/wiki/wiki.css
@@ -1,69 +1,57 @@
-.comparison th {
-    border-width: 1px;
-    border-color: #666;
-    border-style: solid;
-    width: 50%;
-}
-
-.comparison table {
-    border-color: #666;
-    border-style: solid;
-    border-width: 1px;
+table {
     border-spacing: 0;
     border-collapse: collapse;
+    table-layout: fixed;
 }
 
-.insert {
-    background-color: #9f9;
+td {
+    word-wrap: break-word;
 }
 
-.delete {
-    background-color: #f99;
+table.comparison {
+    width: 100%;
 }
 
-.revisions table, .revisions td, .revisions th {
-    border-color: #666;
-    border-style: solid;
+table.comparison th {
+    width: 50%;
 }
 
-.revisions table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
+table.comparison th, table.comparison td {
+    border: 1px solid #ccc;
 }
 
-.revisions td, .revisions th {
-    margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
+.insert {
+    background-color: #9f9;
+    color: black;
 }
 
-.contents {
-    font-size: 90%;
-    margin: 0;
-    padding: 15px;
-    padding-top: 0px;
-    line-height: 130%;
+.delete {
+    background-color: #f99;
+    color: black;
 }
 
-.contents ul {
-    list-style-type: none;
-    margin: 0;
-    padding-left: 20px;
+table.revisions {
+    width: 100%;
 }
 
-.page nav {
-    margin: -15px;
-    margin-top: 0px;
-    background: none;
+table.revisions td, table.revisions th {
+    margin: 0;
+    padding: 4px;
 }
 
-.page img {
-    max-width: 100%;
+table.revisions, table.revisions th, table.revisions td {
+    border: 1px solid #ccc;
 }
 
-.page hr {
-    height: 1px;
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    table.comparison, table.comparison th, table.comparison td {
+        border-color: #666;
+    }
+
+    table.revisions, table.revisions th, table.revisions td {
+        border-color: #666;
+    }
 }
 
 .description {
@@ -85,23 +73,6 @@
 .description p:first-child { margin-top: 0px; }
 .description p:last-child { margin-bottom: 0px; }
 
-.description table, .description td {
-    border-color: #666;
-    border-style: solid;
-}
-
-.description table {
-    border-width: 0 0 1px 1px;
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-
-.description td {
-    margin: 0;
-    padding: 4px;
-    border-width: 1px 1px 0 0;
-}
-
 #left {
     position: absolute;
     top: 0;
@@ -117,6 +88,34 @@
     max-width: calc(min(100vw - 230px, 770px));
 }
 
+.contents {
+    font-size: 90%;
+    margin: 0;
+    padding: 15px;
+    padding-top: 0px;
+    line-height: 130%;
+}
+
+.contents ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 20px;
+}
+
+.page nav {
+    margin: -15px;
+    margin-top: 0px;
+    background: none;
+}
+
+.page img {
+    max-width: 100%;
+}
+
+.page hr {
+    height: 1px;
+}
+
 nav img {
     margin-right: 5px;
     display: none;
@@ -128,6 +127,7 @@ nav img {
     left: 0;
     border-top: 1px dashed #ccc;
     border-bottom: 1px dashed #ccc;
+    margin-top: 15px;
 }
 
 .page footer {
-- 
2.34.1