Skip to content
Snippets Groups Projects
Commit bbe00fbc authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Hilfeseite um Beispiel für aktuelle Ergebnisversion erweitert

Tooltips css hinzugefügt und in Hilfe für Beispielergebnis verwendet
parent 9753fb25
No related branches found
No related tags found
1 merge request!1365Resolve "Filter Options for MetaGer"
public/img/blacklist-tutorial-searchexample.png

16.7 KiB

......@@ -211,4 +211,29 @@ label a {
button {
border: none;
}
/* Tooltips */
*[data-tooltip]:hover {
position: relative;
&:after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 0;
color: black;
background-color: white;
border: 2px solid @metager-orange;
border-radius: 6px;
padding: 3px 8px;
width: 200px;
white-space: pre-wrap;
font-size: 15px;
font-weight: normal;
text-decoration: none;
text-align: center;
pointer-events: none;
}
}
\ No newline at end of file
......@@ -165,6 +165,7 @@
}
&>.result-toggle:checked + .options {
max-height: 150px;
overflow: initial;
}
li {
font-size: 14px;
......
......@@ -223,4 +223,22 @@ main {
border-top: 1px dashed black;
width: 50%;
margin-top: 16px;
}
.fake-result {
*:hover {
overflow: visible !important;
}
.result-footer {
align-items: center;
}
.open-result-options label {
padding: 10px;
border: 2px dashed red;
border-radius: 100%;
color: black;
font-size: 14px;
text-decoration: none;
font-weight: normal;
}
}
\ No newline at end of file
@metager-orange: rgb(255,128,0);
// General
@color-white: white;
@color-almost-white: mix(@color-white, @color-black, 90%);
......@@ -14,14 +15,14 @@
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@body-bg: rgb(250, 250, 250);
@input-border-focus: rgb(255, 128, 0);
@input-border-focus: @metager-orange;
@font-family-sans-serif: "Liberation Sans",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
// Global textual link color.
@link-color: rgb(255,128,0);
@link-color: @metager-orange;
// static-pages.less
@static-pages-color-white: @color-white;
@static-pages-color-almost-white: @color-almost-white;
......@@ -45,7 +46,7 @@ sans-serif;
//
@result-page-body-background-color: @background-color;
@result-page-a-hover-color: red;
@result-page-a-visited-color: rgb(255,128,0);
@result-page-a-visited-color: @metager-orange;
@result-page-product-shop-color: green;
// start-page.less
@focus-hover-focus-edit-background-color: #e3e3e3;
......@@ -72,7 +73,7 @@ sans-serif;
@metager-navbar-toggle-border-color: @static-pages-color-almost-white;
@metager-navbar-toggle-visited-color: @static-pages-color-grey;
@metager-navbar-toggle-hover-background-color: @static-pages-color-almost-white;
@toggle-nav-hide-or-metager-navbar-toggle-background-color: rgb(255, 128, 0);
@toggle-nav-hide-or-metager-navbar-toggle-background-color: @metager-orange;
@more-information-ul-li-color: @static-pages-color-grey;
@more-information-h2-color: @static-pages-color-grey;
@div-right-background-color: @static-pages-color-almost-white;
......
......@@ -46,9 +46,8 @@ return [
"domains.blacklist.example.4" => "Sie erhalten nun weiterhin Ergebnisse von beispielsweise en.wikipedia.org, solange diese zu Ihrer Suche passen",
"domains.blacklist.example.5" => "Sie schließen generell alle Ergebnisse von allen Wikipedia-Domains aus",
"domains.blacklist.example.6" => "<i>meine suche</i> -site:*.wikipedia.org",
"domains.showcase.explanation.1" => "Zusätzlich bieten wir Ihnen die Möglichkeit Subdomains beziehungsweise Top-Level-Domains direkt auf der Ergebnisseite auszuschließen. Bei jedem unserer Ergebnisse erscheint dieses kleine Symbol für die Optionen:",
"domains.showcase.explanation.2" => "Wenn Sie auf dieses Symbol klicken, erscheint folgendes Menü:",
"domains.showcase.menu.1" => "Mit diesem Menü lassen sich:",
"domains.showcase.explanation.1" => 'Zusätzlich bieten wir Ihnen die Möglichkeit Subdomains beziehungsweise Top-Level-Domains direkt auf der Ergebnisseite auszuschließen. Bei jedem unserer Ergebnisse erscheint dieser "Mehr"-Knopf für die Optionen:',
"domains.showcase.menu.1" => "Wenn Sie auf dieses Symbol klicken, erscheint ein Menü mit folgenden Optionen:",
"domains.showcase.menu.2" => "Ergebnisse zwischenspeichern zum weiteren filtern (siehe <a href=\"#searchinsearch\"> hier</a>)",
"domains.showcase.menu.3" => "Eine neue Suche nur auf der Domain des Ergebnisses (de.wikipedia.de) starten",
"domains.showcase.menu.4" => "Eine Suche ohne Ergebnisse der Subdomain (de.wikipedia.de) starten",
......
......@@ -38,7 +38,7 @@
</div>
</div>
<h2>{!! trans('hilfe.sucheingabe.title') !!}</h2>
<p>{!! trans('hilfe.sucheingabe.hint') !!}</p>
<div class="alert alert-warning" role="alert">{!! trans('hilfe.sucheingabe.hint') !!}</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{!! trans('hilfe.stopworte.title') !!}</h3>
......@@ -99,40 +99,7 @@
<div class="well well-sm">{!! trans('hilfe.domains.blacklist.example.6') !!}</div></li>
</ul>
<p>{!! trans('hilfe.domains.showcase.explanation.1') !!}</p>
<img id="exampleimg" src="/img/blacklist-tutorial-searchexample.png">
<p>{!! trans('hilfe.domains.showcase.explanation.2') !!}<p>
<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"><i class="fa fa-cog" aria-hidden="true"></i> Optionen</h3>
<div class="popover-content">
<ul class="options-list list-unstyled small">
<li>
<a href="#exampleimg">
<i class="glyphicon glyphicon-floppy-disk"></i>
Ergebnis in Tab speichern.
</a>
</li>
<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>
@include('parts/fake-result')
<script type="text/javascript">
function setDummySearch(value) {
document.getElementById("dummy_search").innerHTML = value
......
<div class="result fake-result" data-count="1">
<div class="result-header">
<h2 class="result-title">
<a href="javascript:void(0);" data-tooltip="Ergebnistitel">
Wikipedia – Die freie Enzyklopädie
</a>
</h2>
<a class="result-link" href="javascript:void(0);" data-tooltip="Ergebnislink">
de.wikipedia.org
</a>
</div>
<div class="result-body">
<div class="result-description" data-tooltip="Zusammenfassung der Ergebnisseite">
Wikipedia ist ein Projekt zum Aufbau einer Enzyklopädie aus freien Inhalten, zu denen du sehr gern beitragen kannst. Seit Mai 2001 sind 2.150.918 Artikel in ...
</div>
</div>
<div class="result-footer">
<a class="result-open" href="javascript:void(0);" data-tooltip="Ergebnis in diesem Tab öffnen">
ÖFFNEN
</a>
<a class="result-open-newtab" href="javascript:void(0);" data-tooltip="Ergebnis in einem neuen Tab öffnen">
IN NEUEM TAB
</a>
<a class="result-open-proxy" href="javascript:void(0);" data-tooltip="Ergebnis anonym (über den MetaGer-Proxy) öffnen">
ANONYM ÖFFNEN
</a>
<div class="open-result-options">
<label for="result-toggle-1" role="button" data-tooltip="Zusätzliche optionen anzeigen">
MEHR
</label>
</div>
</div>
<div class="result-options">
<input type="checkbox" id="result-toggle-1" class="result-toggle" style="display: none">
<div class="options">
<ul class="option-list list-unstyled small">
<li class="">
<a class="saver" href="javascript:setDummySearch('wikipedia site:de.wikipedia.org wurde zum weiteren Filtern gespeichert')" data-tooltip="Ergebnis zum weiteren Filtern speichern">
<i class="fa fa-floppy-o"></i> Ergebnis in Tab speichern.
</a>
</li>
<li>
<a href="javascript:setDummySearch('wikipedia site:de.wikipedia.org')" data-tooltip="Neue auf diese Domain beschränkte Suche starten">
Auf dieser Domain neu suchen
</a>
</li>
<li>
<a href="javascript:setDummySearch('wikipedia -site:de.wikipedia.org')" data-tooltip="Neue Suche ohne diese Subdomain starten">
de.wikipedia.org ausblenden
</a>
</li>
<li>
<a href="javascript:setDummySearch('wikipedia -site:*.wikipedia.org')" data-tooltip="Neue Suche ohne diese Domain starten">
*.wikipedia.org ausblenden
</a>
</li>
</ul>
</div>
</div>
</div>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment