Search Improved: dropdown (#4994)

* first draft

* fix

* RTL CSS

* add link to documentation

* hide search button in desktop view

* rename .no-desktop to .only-mobile

* i18n

* add ID

* Theme: Swage

* Theme Scewdriver

* Theme Pafat

* Theme flat

* Theme: Adark

* Theme: Dark

* i18n: German

* i18n en-us

* fix i18n

* Update app/i18n/fr/gen.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* wip

* mapco theme

* RTL for Ansum and Mapco

* fix

* fix

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

3 files changed, 88 insertions, 0 deletions

diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 02fd9471f..6478c0581 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -342,12 +342,32 @@ form th {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
 }
+.dropdown-menu .help a {
+	color: var(--color-text-light);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+.dropdown-menu .help a:hover {
+	text-decoration-style: solid;
+}
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search {
+	width: 100%;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] {
+	width: 100%;
+	border: 0;
+}
+
 .labels .dropdown-menu,
 .tags .dropdown-menu,
 .share .dropdown-menu {
@@ -912,6 +932,9 @@ a.signin {
 	.dropdown {
 		position: relative;
 	}
+	.dropdown .dropdown-menu {
+		width: auto;
+	}
 	#new-article {
 		margin-top: 2rem;
 		width: 100%;
@@ -1151,10 +1174,15 @@ button.as-link {
 	left: 0;
 	right: auto;
 }
+
 #nav_menu_actions ul.dropdown-menu::after {
 	display: none;
 }
 
+#nav_menu_actions .dropdown.only-mobile {
+	display: initial !important;
+}
+
 #nav_menu_read_all ul.dropdown-menu {
 	right: 0;
 	left: auto;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 9cee872c9..a4ba4f159 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -342,12 +342,32 @@ form th {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
 }
+.dropdown-menu .help a {
+	color: var(--color-text-light);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+.dropdown-menu .help a:hover {
+	text-decoration-style: solid;
+}
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search {
+	width: 100%;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] {
+	width: 100%;
+	border: 0;
+}
+
 .labels .dropdown-menu,
 .tags .dropdown-menu,
 .share .dropdown-menu {
@@ -912,6 +932,9 @@ a.signin {
 	.dropdown {
 		position: relative;
 	}
+	.dropdown .dropdown-menu {
+		width: auto;
+	}
 	#new-article {
 		margin-top: 2rem;
 		width: 100%;
@@ -1151,10 +1174,15 @@ button.as-link {
 	right: 0;
 	left: auto;
 }
+
 #nav_menu_actions ul.dropdown-menu::after {
 	display: none;
 }
 
+#nav_menu_actions .dropdown.only-mobile {
+	display: initial !important;
+}
+
 #nav_menu_read_all ul.dropdown-menu {
 	left: 0;
 	right: auto;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index c3092b2e1..cc7aed10e 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -455,6 +455,16 @@ form {
 		}
 	}
 
+	.help a {
+		color: var(--color-text-light);
+		text-decoration: underline;
+		text-decoration-style: dotted;
+
+		&:hover {
+			text-decoration-style: solid;
+		}
+	}
+
 	.input {
 		select,
 		input {
@@ -464,6 +474,20 @@ form {
 	}
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+
+	.stick.search {
+		width: 100%;
+
+		input[type="search"] {
+			width: 100%;
+			border: 0;
+		}
+	}
+}
+
 .labels,
 .tags,
 .share {
@@ -1171,6 +1195,10 @@ a.signin {
 
 	.dropdown {
 		position: relative;
+
+		.dropdown-menu {
+			width: auto;
+		}
 	}
 
 	#new-article {
@@ -1476,6 +1504,10 @@ button.as-link {
 			display: none;
 		}
 	}
+
+	.dropdown.only-mobile {
+		display: initial !important;
+	}
 }
 
 #nav_menu_read_all {