Merge branch '407-suchergebnis-optionen-box-auf-hilfe-seite-als-html-einfugen' into 'development'

Die Hilfe zum Blacklisting hat jetz eine Live-Demo

Closes #407

See merge request !691

resources/lang/de/hilfe.php

@@ -44,6 +44,7 @@ return [
     "domains.showcase.menu.2"        => "Eine neue Suche nur auf der Domain des Ergebnisses (de.wikipedia.de) starten",
     "domains.showcase.menu.3"        => "Eine Suche ohne Ergebnisse der Subdomain (de.wikipedia.de) starten",
     "domains.showcase.menu.4"        => "Eine Suche ohne Ergebnisse der Top-Level-Domain (wikipedia.de) starten",
+    "domains.showcase.menu.5"        => "Probieren Sie es doch gleich einmal aus, indem Sie die Optionen anklicken.",
     "dienste"                        => "Weitere Dienste um die Suche herum",
     "app.title"                      => "Android-App",
     "app.1"                          => "Sie können MetaGer auch als App nutzen. Laden Sie sich dazu einfach die <a href=\"https://play.google.com/store/apps/details?id=de.metager.metagerapp\" target=\"_blank\" rel=\"noopener\">MetaGer App</a> auf ihr Android Smartphone.",
@@ -73,5 +74,5 @@ return [
     "maps.1"                         => "Metager bietet eine Kartenfunktion. Sobald Sie nach einem Begriff gesucht haben, sehen Sie oben rechts einen neuen Suchfokus \"maps.MetaGer.de\". Beim Klick darauf gelangen Sie zur Karte (momentan nur deutschlandweit). Sie können die Funktion unter \"Anpassen\" auch dauerhaft anschalten. Sollten Sie speichern, so erhalten Sie ab diesem Moment einen Kartenausschnitt in der Ergebnisliste.",
     "maps.2"                         => "Die Karte zeigt nach dem Aufrufen die auch in der Spalte rechts wieder gegebenen von MetaGer gefundenen Punkte (POIs). Beim Zoomen passt sich die Liste an den Kartenausschnitt an. Wenn Sie die Maus über eine Markierung in der Karte oder in der Liste halten, wird das jeweilige Gegenstück hervorgehoben. Klicken Sie auf \"Details\", um genauere Informationen zu diesem Punkt aus der Nominatim-Datenbank zu erhalten.",
     "maps.3"                         => "Die Karten sind mit Ausnahme der drei letzten Zoomstufen vorgerendert und damit schnell verfügbar. Die Zoomstufe steuern Sie mit dem Mausrad oder mit den Plus-Minus-Buttons oben links in der Karte.",
-    "sucheingabe"	                 =>	"Sucheingabe",
+    "sucheingabe"                    => "Sucheingabe",
 ];

resources/views/hilfe.blade.php

@@ -90,19 +90,49 @@
 		<p>{!! trans('hilfe.domains.showcase.explanation.1') !!}</p>
 		<img src="/img/blacklist-tutorial-searchexample.png">
 		<p>{!! trans('hilfe.domains.showcase.explanation.2') !!}<p>
-		<div class="media">
-			<div class="media-left">
-				<img src="/img/blacklist-tutorial-options.png">
-			</div>
-			<div class="media-body">
-				<p>{!! trans('hilfe.domains.showcase.menu.1') !!}</p>
-				<ul class="dotlist">
-					<li>{!! trans('hilfe.domains.showcase.menu.2') !!}</li>
-					<li>{!! trans('hilfe.domains.showcase.menu.3') !!}</li>
-					<li>{!! trans('hilfe.domains.showcase.menu.4') !!}</li>
-				</ul>
+		<div id="result_option_showcase" style="margin-top: -300px"></div>
+		<div style="margin-top: 315px; margin-bottom: 10px;">
+			<div class="popover fade bottom in" role="tooltip" style="top: auto; left: auto; display: block; position: relative">
+				<div class="arrow" style="left: 50%;"></div>
+				<h3 class="popover-title"><span class="glyphicon glyphicon-cog"></span> Optionen</h3>
+				<div class="popover-content">
+					<ul class="options-list list-unstyled small">
+						<li>
+							<a href="javascript:setDummySearch('wikipedia site:de.wikipedia.org')">
+								Suche auf dieser Domain neu starten
+							</a>
+						</li>
+						<li>
+							<a href="javascript:setDummySearch('wikipedia -site:de.wikipedia.org')">
+								de.wikipedia.org ausblenden
+							</a>
+						</li>
+						<li>
+							<a href="javascript:setDummySearch('wikipedia -site:*.wikipedia.org')">
+								*.wikipedia.org ausblenden
+							</a>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</div>
+		<script type="text/javascript">
+			function setDummySearch(value) {
+				document.getElementById("dummy_search").innerHTML = value
+			}
+		</script>
+		<div>
+			<p>{!! trans('hilfe.domains.showcase.menu.1') !!}</p>
+			<ul class="dotlist">
+				<li>{!! trans('hilfe.domains.showcase.menu.2') !!}</li>
+				<li>{!! trans('hilfe.domains.showcase.menu.3') !!}</li>
+				<li>{!! trans('hilfe.domains.showcase.menu.4') !!}</li>
+			</ul>
+			<p>{!! trans('hilfe.domains.showcase.menu.5') !!}</p>
+		</div>
+		<div>
+			<div class="well well-sm"><i>meine suche</i> <span id="dummy_search"></span></div>
+		</div>
 	</div>
 </div>