From ed7dcb8dd404985b89302e5cfe479dc5a8bedcd9 Mon Sep 17 00:00:00 2001
From: Matthew Hana <matthew.hana@nexuspoly.tech>
Date: Thu, 31 Aug 2023 23:34:10 +1000
Subject: [PATCH] General HTML fixes

Incorporated pull requests #1305 and #1306.

Restored declaration of 'hidden' class to index file.

Restored h2 in sections for navigation purposes.

Cleaned up index.html.
---
 radicale/web/internal_data/css/main.css |  11 +-
 radicale/web/internal_data/index.html   | 265 +++++++++++++-----------
 2 files changed, 152 insertions(+), 124 deletions(-)
diff --git a/radicale/web/internal_data/css/main.css b/radicale/web/internal_data/css/main.css
index 9a7c91a99..3d0805336 100644
--- a/radicale/web/internal_data/css/main.css
+++ b/radicale/web/internal_data/css/main.css
@@ -13,6 +13,10 @@ body{
     justify-content: space-around;
 }
 
+main{
+	width: 100%;
+}
+
 .container{
     height: auto;
     min-height: 450px;
@@ -74,7 +78,7 @@ body{
     z-index: 999;
 }
 
-#loadingscene span{
+#loadingscene h2{
     font-size: 2em;
     font-weight: bold;
 }
@@ -142,6 +146,7 @@ body{
     font-size: 1.5em;
     display: block;
     padding: 10px 0;
+	margin: 0;
 }
 
 #collectionsscene article small{
@@ -250,10 +255,6 @@ body{
     box-shadow: 2px 2px 7px #000000d6;
 }
 
-.hidden{
-    display: none !important;
-}
-
 .title{
     word-wrap: break-word;
     font-weight: bold;
diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index 19d0c20eb..068dd1b59 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -1,50 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<script src="fn.js"></script>
-<title>Radicale Web Interface</title>
-<link href="css/main.css" media="screen" rel="stylesheet">
-<link href="css/icon.png" type="image/png" rel="shortcut icon">
-
-<nav id="logoutview" class="hidden">
-    <span data-name="user" style="word-wrap:break-word;"></span>
-    <a href="" class="red" data-name="link" title="Logout">Logout</a>
-</nav>
-
-<section id="loadingscene">
-    <img src="css/loading.svg" />
-    <span>Loading</span>
-    <p>Please wait...</p>
-    <noscript>JavaScript is required</noscript>
-</section>
-
-<section id="loginscene" class="container hidden">
-    <div class="logocontainer">
-        <img src="css/logo.svg" />
-    </div>
-    <h1>Sign in</h1><br />
-    <form data-name="form">
-        <input data-name="user" type="text" placeholder="Username">
-        <input data-name="password" type="password" placeholder="Password">
-        <button class="green" type="submit">Next</button>
-        <span class="error" data-name="error"></span>
-    </form>
-</section>
-
-<section id="collectionsscene" class="hidden">
-    <div class="fabcontainer">
-        <a href="" class="green" data-name="new" title="Create a new addressbook or calendar"><img src="css/icons/new.svg" class="icon" alt="➕"></a></a>
-        <a href="" class="blue" data-name="upload" title="Upload an addressbook or calendar"><img src="css/icons/upload.svg" class="icon" alt="⬆️"></a></a>    
-    </div>
-    
-    <article data-name="collectiontemplate" class="hidden">
-        <div class="colorbar" data-name="color"></div>
-        <span class="title" data-name="title">Title</span>
-        </h2>
-        <small>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Radicale Web Interface</title>
+    <link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
+    <link href="css/icon.png" type="image/png" rel="icon">
+    <style>.hidden {display: none !important;}</style>
+    <script src="fn.js"></script>
+  </head>
+  
+  <body>
+    <nav id="logoutview" class="hidden">
+      <span data-name="user" style="word-wrap:break-word;"></span>
+      <a href="" class="red" data-name="link" title="Logout">Logout</a>
+    </nav>
+	
+    <main>
+      <section id="loadingscene">
+        <img src="css/loading.svg" alt="Loading">
+        <h2>Loading</h2>
+        <p>Please wait...</p>
+        <noscript>JavaScript is required</noscript>
+      </section>
+	  
+      <section id="loginscene" class="container hidden">
+        <div class="logocontainer">
+          <img src="css/logo.svg" alt="Radicale">
+        </div>
+        <h1>Sign in</h1>
+        <br>
+        <form data-name="form">
+          <input data-name="user" type="text" placeholder="Username">
+          <input data-name="password" type="password" placeholder="Password">
+          <button class="green" type="submit">Next</button>
+          <span class="error" data-name="error"></span>
+        </form>
+      </section>
+	  
+      <section id="collectionsscene" class="hidden">
+        <div class="fabcontainer">
+          <a href="" class="green" data-name="new" title="Create a new addressbook or calendar">
+            <img src="css/icons/new.svg" class="icon" alt="➕">
+          </a>
+          <a href="" class="blue" data-name="upload" title="Upload an addressbook or calendar">
+            <img src="css/icons/upload.svg" class="icon" alt="⬆️">
+          </a>
+        </div>
+        <article data-name="collectiontemplate" class="hidden">
+          <div class="colorbar" data-name="color"></div>
+          <h3 class="title" data-name="title">Title</h3>
+          <small>
             <span data-name="ADDRESSBOOK">Address book</span>
             <span data-name="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</span>
             <span data-name="CALENDAR_JOURNAL">Calendar and journal</span>
@@ -53,23 +60,35 @@ <h1>Sign in</h1><br />
             <span data-name="CALENDAR">Calendar</span>
             <span data-name="JOURNAL">Journal</span>
             <span data-name="TASKS">Tasks</span>
-        </small>
-        <input type="text" data-name="url" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);">
-        <p data-name="description" style="word-wrap:break-word;">Description</p>
-        <ul>
-            <li><a href="" title="Download" class="green" data-name="download"><img src="css/icons/download.svg" class="icon" alt="🔗"></a></li>
-            <li><a href="" title="Edit" class="blue" data-name="edit"><img src="css/icons/edit.svg" class="icon" alt="✏️"></a></li>
-            <li><a href="" title="Delete" class="red" data-name="delete"><img src="css/icons/delete.svg" class="icon" alt="❌"></a></li>
-        </ul>
-    </article>
-</section>
-
-<section id="editcollectionscene" class="container hidden">
-    <h1>Edit Collection</h1>
-    <p>Editing collection <span class="title" data-name="title">title</span></p>
-    <form>
-        Type:<br>
-        <select data-name="type">
+          </small>
+          <input type="text" data-name="url" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);">
+          <p data-name="description" style="word-wrap:break-word;">Description</p>
+          <ul>
+            <li>
+              <a href="" title="Download" class="green" data-name="download">
+                <img src="css/icons/download.svg" class="icon" alt="🔗">
+              </a>
+            </li>
+            <li>
+              <a href="" title="Edit" class="blue" data-name="edit">
+                <img src="css/icons/edit.svg" class="icon" alt="✏️">
+              </a>
+            </li>
+            <li>
+              <a href="" title="Delete" class="red" data-name="delete">
+                <img src="css/icons/delete.svg" class="icon" alt="❌">
+              </a>
+            </li>
+          </ul>
+        </article>
+      </section>
+	  
+      <section id="editcollectionscene" class="container hidden">
+        <h1>Edit Collection</h1>
+        <p>Editing collection <span class="title" data-name="title">title</span>
+        </p>
+        <form> Type: <br>
+          <select data-name="type">
             <option value="ADDRESSBOOK">addressbook</option>
             <option value="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</option>
             <option value="CALENDAR_JOURNAL">calendar and journal</option>
@@ -78,25 +97,26 @@ <h1>Edit Collection</h1>
             <option value="CALENDAR">calendar</option>
             <option value="JOURNAL">journal</option>
             <option value="TASKS">tasks</option>
-        </select><br>
-        Title:<br>
-        <input data-name="displayname" type="text"><br>
-        Description:<br>
-        <input data-name="description" type="text"><br>
-        Color:<br>
-        <input data-name="color" type="color"><br>
-        <span class="error hidden" data-name="error"></span><br>
-        <button type="submit" class="green" data-name="submit">Save</button>
-        <button type="button" class="red" data-name="cancel">Cancel</button>
-    </form>
-</section>
-
-<section id="createcollectionscene" class="container hidden">
-    <h1>Create a new Collection</h1>
-    <p>Enter the details of your new collection.</p>
-    <form>
-        Type:<br>
-        <select data-name="type">
+          </select>
+          <br> Title: <br>
+          <input data-name="displayname" type="text">
+          <br> Description: <br>
+          <input data-name="description" type="text">
+          <br> Color: <br>
+          <input data-name="color" type="color">
+          <br>
+          <span class="error hidden" data-name="error"></span>
+          <br>
+          <button type="submit" class="green" data-name="submit">Save</button>
+          <button type="button" class="red" data-name="cancel">Cancel</button>
+        </form>
+      </section>
+	  
+      <section id="createcollectionscene" class="container hidden">
+        <h1>Create a new Collection</h1>
+        <p>Enter the details of your new collection.</p>
+        <form> Type: <br>
+          <select data-name="type">
             <option value="ADDRESSBOOK">Address book</option>
             <option value="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</option>
             <option value="CALENDAR_JOURNAL">Calendar and journal</option>
@@ -105,41 +125,48 @@ <h1>Create a new Collection</h1>
             <option value="CALENDAR">Calendar</option>
             <option value="JOURNAL">Journal</option>
             <option value="TASKS">Tasks</option>
-        </select><br>
-        Title:<br>
-        <input data-name="displayname" type="text"><br>
-        Description:<br>
-        <input data-name="description" type="text"><br>
-        Color:<br>
-        <input data-name="color" type="color"><br>
-        <span class="error" data-name="error"></span><br>
-        <button type="submit" class="green" data-name="submit">Create</button>
-        <button type="button" class="red" data-name="cancel">Cancel</button>
-    </form>
-</section>
-
-<section id="uploadcollectionscene" class="container hidden">
-    <h1>Upload Collection</h1>
-    <ul>
-        <li data-name="filetemplate" class="hidden">
-                Uploading <span data-name="name">name</span><br>
-                <img data-name="pending" src="css/loading.svg" alt="Please wait..."/>
-                <span clas="successmessage";" data-name="success">Uploaded Successfully!</span>
-                <span class="error" data-name="error"></span>
-        </li>
-    </ul>
-    <form>
-        <button type="button" class="red" data-name="close">Close</button>
-    </form>
-</section>
-
-<section id="deletecollectionscene" class="container hidden">
-    <h1>Delete Collection</h1>
-    <p>Do you want to delete the collection <span class="title" data-name="title">title</span>?</p>
-    <p class="red">Warning: This action cannot be reversed.</p>
-    <form>
-        <button type="button" class="red" data-name="delete">Delete</button>
-        <button type="button" class="blue" data-name="cancel">Cancel</button>
-    </form>
-    <span class="error hidden" data-name="error"></span><br>
-</section>
+          </select>
+          <br> Title: <br>
+          <input data-name="displayname" type="text">
+          <br> Description: <br>
+          <input data-name="description" type="text">
+          <br> Color: <br>
+          <input data-name="color" type="color">
+          <br>
+          <span class="error" data-name="error"></span>
+          <br>
+          <button type="submit" class="green" data-name="submit">Create</button>
+          <button type="button" class="red" data-name="cancel">Cancel</button>
+        </form>
+      </section>
+	  
+      <section id="uploadcollectionscene" class="container hidden">
+        <h1>Upload Collection</h1>
+        <ul>
+          <li data-name="filetemplate" class="hidden"> Uploading <span data-name="name">name</span>
+            <br>
+            <img data-name="pending" src="css/loading.svg" alt="Please wait...">
+            <span class="successmessage" data-name="success">Uploaded Successfully!</span>
+            <span class="error" data-name="error"></span>
+          </li>
+        </ul>
+        <form>
+          <button type="button" class="red" data-name="close">Close</button>
+        </form>
+      </section>
+	  
+      <section id="deletecollectionscene" class="container hidden">
+        <h1>Delete Collection</h1>
+        <p>Do you want to delete the collection <span class="title" data-name="title">title</span>? </p>
+        <p class="red">WARNING: This action cannot be reversed.</p>
+        <form>
+          <button type="button" class="red" data-name="delete">Delete</button>
+          <button type="button" class="blue" data-name="cancel">Cancel</button>
+        </form>
+        <span class="error hidden" data-name="error"></span>
+        <br>
+      </section>
+	  
+    </main>
+  </body>
+</html>
\ No newline at end of file
