From 087df18fea1e94183268cf2d520a6d51a1c58224 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Wed, 9 Nov 2022 23:42:56 +0100
Subject: [PATCH 1/3] Add Wiki links to help&community page

---
 ui/index.html         | 44 ++++++++++++++++++++++++++++++++++++-------
 ui/media/css/main.css | 34 +++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 1872b4fb..5e237afa 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -243,13 +243,43 @@
         </div>
         <div id="tab-content-about" class="tab-content">
             <div class="tab-content-inner">
-                <h1>Help & Community</h1>
-                <ul id="community-links">
-                    <li><a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
-                    <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
-                    <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
-                    <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
-                </ul>
+                <div class="float-container">
+                    <div class="float-child">
+			<h1>Help</h1>
+			<hr>
+                        <ul id="help-links">
+                            <li><span class="help-section">Using the software</span>
+                            <ul>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-To-Use" target="_blank"><i class="fa-solid fa-book fa-fw"></i> How to use</a>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Overview" target="_blank"><i class="fa-solid fa-list fa-fw"></i> UI Overview</a>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-Prompts" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> Writing prompts</a>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Inpainting</a>
+                            </ul>
+  
+                            <li><span class="help-section">Installation</span>
+                            <ul>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Troubleshooting</a>
+                            </ul>
+  
+                            <li><span class="help-section">Downloadable Content</span>
+                            <ul>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-images fa-fw"></i> Custom Models</a>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a>
+                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a>
+                            </ul>
+                        </ul>
+                    </div>
+  
+                    <div class="float-child">
+			<h1>Community</h1>
+			<hr>
+                        <ul id="community-links">
+                            <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
+                            <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
+                            <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
+                        </ul>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index cc371b38..1a7a1941 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -341,6 +341,32 @@ img {
     color: var(--text-color);
     text-decoration: none;
 }
+#help-links {
+    display: inline-block;
+    list-style-type: none;
+    text-align: left;
+    margin: auto;
+    padding: 0px;
+}
+#help-links li {
+    padding-bottom: 12pt;
+    display: block;
+    font-size: 10pt;
+}
+#help-links li .fa-fw {
+    padding-right: 2pt;
+}
+#help-links li a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+#help-links li ul {
+    padding-inline-start: 10px;
+    margin-top: 8px;
+}
+.help-section {
+    font-size: 130%;
+}
 .dropdown {
     overflow: hidden;
 }
@@ -620,6 +646,14 @@ input::file-selector-button {
     #editor {
         max-width: 480px;
     }
+    .float-container {
+        padding: 20px;
+    }
+    .float-child {
+        width: 50%;
+        float: left;
+        padding: 20px;
+    }
 }
 
 .help-btn {

From 4913dc1aadac7d8459109c80057f5b5da67d3e90 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Wed, 9 Nov 2022 23:57:48 +0100
Subject: [PATCH 2/3] Replace hr by border-bottom

---
 ui/index.html         | 2 --
 ui/media/css/main.css | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 5e237afa..a5cae6b2 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -246,7 +246,6 @@
                 <div class="float-container">
                     <div class="float-child">
 			<h1>Help</h1>
-			<hr>
                         <ul id="help-links">
                             <li><span class="help-section">Using the software</span>
                             <ul>
@@ -272,7 +271,6 @@
   
                     <div class="float-child">
 			<h1>Community</h1>
-			<hr>
                         <ul id="community-links">
                             <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
                             <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 1a7a1941..fd86655b 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -341,6 +341,9 @@ img {
     color: var(--text-color);
     text-decoration: none;
 }
+.float-child h1 {
+    border-bottom: solid 1px silver;
+}
 #help-links {
     display: inline-block;
     list-style-type: none;

From 93a2e9169412a1f1a63c462d9586c40eff0e80be Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Thu, 10 Nov 2022 00:44:42 +0100
Subject: [PATCH 3/3] Use theme variable for bottom border design

---
 ui/media/css/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index fd86655b..da87216d 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -342,7 +342,7 @@ img {
     text-decoration: none;
 }
 .float-child h1 {
-    border-bottom: solid 1px silver;
+    border-bottom: var(--button-border);
 }
 #help-links {
     display: inline-block;