From c009b8726cc9d72fbd6481bf51f799723cb169d6 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Mon, 8 Jun 2020 19:12:03 -0400
Subject: [PATCH] Simplified search bar The last one didn't stage all the files

---
 includes/SkinCitizen.php                      |  2 --
 includes/templates/Searchbox.mustache         |  1 +
 resources/components/Searchbox.less           |  2 --
 .../icons => skins.citizen.icons}/more.svg    |  0
 .../toc-ltr.svg}                              |  0
 resources/skins.citizen.icons/toc-rtl.svg     |  7 ++++
 .../skins.citizen.styles.search/search.less   |  6 ++--
 resources/variables.less                      |  4 +++
 skin.json                                     | 34 +++++++++----------
 9 files changed, 30 insertions(+), 26 deletions(-)
 rename resources/{images/icons => skins.citizen.icons}/more.svg (100%)
 rename resources/{images/icons/ToC.svg => skins.citizen.icons/toc-ltr.svg} (100%)
 create mode 100644 resources/skins.citizen.icons/toc-rtl.svg

diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php
index 8210bac9..23475a00 100644
--- a/includes/SkinCitizen.php
+++ b/includes/SkinCitizen.php
@@ -234,8 +234,6 @@ class SkinCitizen extends SkinTemplate {
 			'skins.citizen.styles.fonts',
 			'skins.citizen.icons',
 			'skins.citizen.icons.ca',
-			'skins.citizen.icons.p',
-			'skins.citizen.icons.toc',
 			'skins.citizen.icons.es',
 			'skins.citizen.icons.n',
 			'skins.citizen.icons.t',
diff --git a/includes/templates/Searchbox.mustache b/includes/templates/Searchbox.mustache
index b4ad44c5..26a1a5a0 100644
--- a/includes/templates/Searchbox.mustache
+++ b/includes/templates/Searchbox.mustache
@@ -27,5 +27,6 @@
 <form action="{{form-action}}" role="search" id="searchform">
 	<input type="hidden" name="title" value="{{page-title}}">
 	<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
+	<div id="searchform-icon"></div>
 	{{{html-input}}}
 </form>
\ No newline at end of file
diff --git a/resources/components/Searchbox.less b/resources/components/Searchbox.less
index 9e85aed7..5166564b 100644
--- a/resources/components/Searchbox.less
+++ b/resources/components/Searchbox.less
@@ -3,8 +3,6 @@
 // https://starcitizen.tools
 //
 
-@search-bar-icon-size: 14px;
-
 #search {
 	&form {
 		position: absolute;
diff --git a/resources/images/icons/more.svg b/resources/skins.citizen.icons/more.svg
similarity index 100%
rename from resources/images/icons/more.svg
rename to resources/skins.citizen.icons/more.svg
diff --git a/resources/images/icons/ToC.svg b/resources/skins.citizen.icons/toc-ltr.svg
similarity index 100%
rename from resources/images/icons/ToC.svg
rename to resources/skins.citizen.icons/toc-ltr.svg
diff --git a/resources/skins.citizen.icons/toc-rtl.svg b/resources/skins.citizen.icons/toc-rtl.svg
new file mode 100644
index 00000000..43de5d64
--- /dev/null
+++ b/resources/skins.citizen.icons/toc-rtl.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		stripe ToC
+	</title>
+	<path d="M1 3h14v2H1zm0 6h14v2H1zm0 6h14v2H1zM17 3h2v2h-2zm0 6h2v2h-2zm0 6h2v2h-2z"/>
+</svg>
diff --git a/resources/skins.citizen.styles.search/search.less b/resources/skins.citizen.styles.search/search.less
index 2ea5ea8c..58386d4c 100644
--- a/resources/skins.citizen.styles.search/search.less
+++ b/resources/skins.citizen.styles.search/search.less
@@ -6,8 +6,6 @@
 @import '../variables.less';
 @import '../mixins.less';
 
-@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px
-
 #typeahead-suggestions {
 	position: absolute;
 	top: 42px;
@@ -15,7 +13,7 @@
 }
 
 .suggestions-dropdown {
-	width: @suggestion-max-width;
+	width: @search-bar-width;
 	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
 	display: flex; // Needed to show margin
 	flex-direction: column;
@@ -128,7 +126,7 @@ a.suggestion-link:hover {
 	}
 }
 
-@media only screen and ( max-width: @suggestion-max-width ) {
+@media only screen and ( max-width: @search-bar-width ) {
 	.suggestions-dropdown {
 		position: fixed;
 		left: 0;
diff --git a/resources/variables.less b/resources/variables.less
index 0689d1ce..55888a36 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -24,6 +24,10 @@
 @padding-menu-item-big: 10px 20px;
 @negative-margin: (@footer-width - @page-width) / -2;
 
+@search-bar-width: 454px;
+@search-bar-height: 42px;
+@search-bar-icon-size: 14px;
+
 @border-radius-small: 4px;
 @border-radius-medium: @border-radius-small * 2;
 @border-radius-large: @border-radius-small * 3;
diff --git a/skin.json b/skin.json
index e678e5b9..4e429999 100644
--- a/skin.json
+++ b/skin.json
@@ -222,6 +222,22 @@
 				"resources/skins.citizen.scripts.lazyload/lazyload.js"
 			]
 		},
+		"skins.citizen.icons": {
+			"class": "ResourceLoaderImageModule",
+			"selector": "{name}",
+			"defaultColor": "#000",
+			"useDataURI": false,
+			"images": {
+				".toctoggle > a:before": {
+					"file": {
+						"ltr": "resources/skins.citizen.icons/toc-ltr.svg",
+						"rtl": "resources/skins.citizen.icons/toc-rtl.svg"
+					}
+				},
+				"#p-actions:before": "resources/skins.citizen.icons/more.svg",
+				"#searchform-icon": "resources/images/icons/search.svg"
+			}
+		},
 		"skins.citizen.icons.ca": {
 			"class": "ResourceLoaderImageModule",
 			"selector": "#ca-{name} > *:after",
@@ -244,24 +260,6 @@
 				"translate": "resources/images/icons/language.svg"
 			}
 		},
-		"skins.citizen.icons.p": {
-			"class": "ResourceLoaderImageModule",
-			"selector": "#p-{name}:before",
-			"defaultColor": "#000",
-			"useDataURI": false,
-			"images": {
-				"actions": "resources/images/icons/more.svg"
-			}
-		},
-		"skins.citizen.icons.toc": {
-			"class": "ResourceLoaderImageModule",
-			"selector": ".toctoggle > a:before",
-			"defaultColor": "#000",
-			"useDataURI": false,
-			"images": {
-				"": "resources/images/icons/ToC.svg"
-			}
-		},
 		"skins.citizen.icons.es": {
 			"class": "ResourceLoaderImageModule",
 			"selector": ".mw-editsection > a{name}:before",