Skip to content
Snippets Groups Projects
Commit 190725b1 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

Suchleiste an das neue Design angepasst 

Außerdem habe ich die Ergebnisoptionen umformatiert, sodass diese auf allen Displays und ohne JS gut zu benutzen sind.
parent 995e9dbd
No related branches found
No related tags found
4 merge requests!1262WIP: Resolve "Spendenseite Texte anpassen",!1207WIP: Resolve "Rechtschreibfehler",!1198Meta ger redesign,!1131Meta ger redesign
Hide whitespace changes
Inline Side-by-side
Showing
with 111 additions and 80 deletions
resources/assets/less/metager/quicktips.less
+ 3
− 3
View file @ 190725b1
......@@ -9,10 +9,10 @@
}
.quicktip {
margin: 10px 0px;
padding: 10px 0px 10px 10px;
padding: 10px 10px 10px 10px;
width: 100%;
border: 1px solid #ccc;
border-left: 3px solid #fb0;
background-color: white;
@media(max-width: @screen-xs-max) {
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
......@@ -27,7 +27,6 @@
h1 {
margin: 0px 0px 5px 0px;
font-size: 18px;
font-weight: bold;
display: flex;
justify-content: space-between;
.quicktip-extender {
......@@ -73,6 +72,7 @@
&[type=spendenaufruf] {
border: none;
color: #ff8000;
background-color: inherit;
.quicktip-summary {
display: flex;
justify-content: space-between;
......
resources/assets/less/metager/result-page.less
+ 1
− 0
View file @ 190725b1
......@@ -350,6 +350,7 @@ p.mg-logo {
#header-logo {
z-index: 0;
padding-right: 10px;
a h1 {
margin: 0px;
}
......
resources/assets/less/metager/result.less
+ 43
− 34
View file @ 190725b1
......@@ -8,6 +8,7 @@
padding: 15px;
width: 100%;
border: 1px solid #ccc;
background-color: white;
@media(max-width: @screen-xs-max) {
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
......@@ -30,6 +31,7 @@
}
}
.result-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -48,6 +50,7 @@
margin-top: 20px;
.result-description {
margin-bottom: 3px;
word-break: break-word;
color: @result-description-color;
font-size: @result-font-medium;
line-height: 1.3;
......@@ -80,6 +83,7 @@
margin-top: 25px;
display: flex;
flex-wrap: wrap;
overflow: auto;
&>*:not(:first-child) {
margin-left: 20px;
}
......@@ -102,6 +106,12 @@
font-size: @result-font-small;
text-decoration: none;
}
margin-left: 25px;
}
@media (max-width: 499px) {
.result-open-newtab {
display: none;
}
}
.result-open-proxy {
&,
......@@ -114,45 +124,18 @@
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px
}
}
.result-options {
margin-left: auto;
.option-opener-icon {
display: block;
font-size: @result-font-small;
color: black;
}
.option-content {
background-color: white;
z-index: 1000;
position: absolute;
border: grey solid 1px;
color: black;
font-size: 16px;
border-radius: 5px;
hr {
margin: 5px;
}
li {
padding: 5px
}
li:not(.option-title):hover {
background-color: #e0e0e0;
}
a,
a:active,
a:hover,
a:focus,
a:visited {
color: black;
display: block;
}
}
.open-result-options {
font-weight: normal;
flex-grow: 1;
text-align: right;
}
}
&.ad .ad-label {
&,
......@@ -170,4 +153,30 @@
text-align: right;
color: #777;
}
}
\ No newline at end of file
&>.result-options {
&>.options {
width: 100%;
text-align: right;
overflow: hidden;
max-height: 0px;
transition: max-height 1.0s;
-webkit-transition: max-height 1.0s;
}
&>.result-toggle:checked + .options {
max-height: 150px;
}
li {
font-size: 14px;
text-transform: uppercase;
margin: 10px 0;
}
li > a {
color: black;
}
}
}
resources/assets/less/metager/searchbar.less
+ 30
− 16
View file @ 190725b1
......@@ -140,7 +140,9 @@
flex-grow: 1;
input {
border: none;
border-bottom: 1px solid #ccc;
height: 40px;
box-shadow: none;
&:focus {
outline-color: rgb(255, 128, 0);
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
......@@ -186,13 +188,13 @@ div:hover>.searchbar-tooltip {
.startpage-searchbar {
>* {
border: 1px solid #aaa;
border: 1px solid #a2a2a2;
&:not(:first-child) {
border-left: none;
}
}
.search-input-submit {
border-radius: 0px 5px 5px 0px;
border-radius: 5px;
}
.search-submit {
border-left: 1px solid #aaa;
......@@ -220,21 +222,15 @@ div:hover>.searchbar-tooltip {
.resultpage-searchbar {
padding: 5px;
:first-child {
border-left: none;
}
@media (max-width: @screen-xs-max) {
.search-focus-selector {
border: 1px solid #aaa;
border-top: none;
border-radius: 5px;
}
.search-input-submit {
border: 1px solid #aaa;
border-radius: 5px;
}
>* {
border: 1px solid #aaa;
border-radius: 5px;
min-height: 40px;
&:not(:first-child) {
......@@ -276,18 +272,36 @@ div:hover>.searchbar-tooltip {
}
}
#research-bar {
header {
margin-left: 50px;
padding-top: 10px;
display:flex;
position: fixed;
z-index: 100;
width: 100%;
padding: 10px 60px 0px 10px;
max-width: 700px;
width:100%;
background-color: #FAFAFA;
@media (max-width: 799px) {
margin-left: 0px;
-webkit-box-pack: center;
justify-content: center;
max-width: 799px;
}
}
#research-bar {
max-width: 700px;
width:100%;
padding: 0px 30px 0px 10px;
background-color: white;
border: 1px solid #ccc;
border-bottom: 2px solid rgb(255, 128, 0);
display: flex;
justify-content: center;
@media (max-width: @screen-xs-max) {
flex-direction: column;
padding-right: 10px;
align-items: center;
justify-content: center;
@media (max-width: 799px) {
margin: 0px 8px;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
}
......@@ -295,6 +309,6 @@ div:hover>.searchbar-tooltip {
width: 100%;
height: 60px;
@media (max-width: @screen-xs-max) {
height: 100px;
height: 65px;
}
}
\ No newline at end of file
resources/assets/less/metager/sidebar.less
+ 2
− 2
View file @ 190725b1
......@@ -146,8 +146,8 @@ input#sideBarToggle:checked {
label#openSidebar {
position: fixed;
top: 15px;
right: 20px;
top: 23px;
right: 25px;
z-index: 998;
font-size: 36px;
line-height: 23px;
......
resources/assets/less/metager/start-page.less
+ 2
− 2
View file @ 190725b1
......@@ -2,7 +2,7 @@
@search-bar-width: 1000px;
#mglogo {
font-size: 90px;
font-size: 75px;
@media(max-width: @screen-xs-max) {
font-size: 50px;
}
......@@ -20,7 +20,7 @@
width: @search-bar-width;
}
#mglogo {
margin: 0px 0px 30px 0px;
margin: 0px 0px 45px 0px;
}
.settings-modal-buttons {
padding: 5px;
......
resources/assets/less/metager/variables.less
+ 2
− 2
View file @ 190725b1
......@@ -21,7 +21,7 @@ Helvetica,
Arial,
sans-serif;
// Global textual link color.
@link-color: #2A2ADE;
@link-color: rgb(255,128,0);
// static-pages.less
@static-pages-color-white: @color-white;
@static-pages-color-almost-white: @color-almost-white;
......@@ -45,7 +45,7 @@ sans-serif;
//
@result-page-body-background-color: @background-color;
@result-page-a-hover-color: red;
@result-page-a-visited-color: #792ea1;
@result-page-a-visited-color: rgb(255,128,0);
@result-page-product-shop-color: green;
// start-page.less
@focus-hover-focus-edit-background-color: #e3e3e3;
......
resources/lang/de/result.php
+ 1
− 1
View file @ 190725b1
......@@ -3,7 +3,7 @@
return [
'options.headline' => 'Optionen',
'options.savetab' => 'Ergebnis in Tab speichern.',
'options.1' => 'Suche auf dieser Domain neu starten',
'options.1' => 'Auf dieser Domain neu suchen',
'options.2' => ':host ausblenden',
'options.3' => '*.:domain ausblenden',
'options.4' => 'Partnershop',
......
resources/views/layouts/ad.blade.php
+ 8
− 0
View file @ 190725b1
......@@ -17,5 +17,13 @@
{{ $ad->descr }}
</div>
</div>
<div class="result-footer">
<a class="result-open" href="{{ $ad->link }}" target="_self" rel="noopener">
ÖFFNEN
</a>
<a class="result-open-newtab" href="{{ $ad->link }}" target="_blank" rel="noopener">
IN NEUEM TAB
</a>
</div>
</div>
@endif
resources/views/layouts/researchandtabs.blade.php
+ 9
− 6
View file @ 190725b1
......@@ -8,12 +8,15 @@
</div>
</div>
@endif
<header id="research-bar">
<div id="header-logo">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
<header>
<div id="research-bar">
<div id="header-logo">
<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
<a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">M</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
</div>
</header>
<div id="research-bar-placeholder"></div>
......
resources/views/layouts/result.blade.php
+ 7
− 11
View file @ 190725b1
......@@ -50,19 +50,16 @@
IN NEUEM TAB
</a>
<a class="result-open-proxy" onmouseover="$(this).popover('show');" onmouseout="$(this).popover('hide');" data-toggle="popover" data-placement="auto right" data-container="body" data-content="@lang('result.proxytext')" href="{{ $result->proxyLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">
<img src="/img/proxyicon.png" alt="" />
ANONYM ÖFFNEN
</a>
<div class="result-options">
<a class="dropdown-opener" href="javascript:void(0);">
<i class="fa fa-chevron-down option-opener-icon" aria-hidden="true"></i>
</a>
<div class="dropdown-content option-content">
<label class="open-result-options" for="result-toggle-{{$result->number}}" role="button">
MEHR
</label>
</div>
<div class="result-options">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options">
<ul class="option-list list-unstyled small">
<li class="option-title">
<i class="fa fa-cog"></i> {!! trans('result.options.headline') !!}
</li>
<hr>
<li class="js-only">
<a href="javascript:resultSaver({{ $result->number }});" class="saver">
<i class="fa fa-floppy-o"></i> {!! trans('result.options.savetab') !!}
......@@ -88,7 +85,6 @@
</li>
@endif
</ul>
</div>
</div>
</div>
</div>
resources/views/parts/searchbar.blade.php
+ 3
− 3
View file @ 190725b1
......@@ -2,7 +2,7 @@
{{-- Don't forget <script type="text/javascript" src="{{ elixir('js/searchbar.js') }}"></script> --}}
<fieldset>
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
<div class="searchbar {{$class or ''}}">
<div class="searchbar {{$class or ''}}"><!--
<div class="search-focus-selector">
<button type="button" id="toggleOptBtn" class="js-only" data-mode="o">
<i class="fa fa-sliders"></i>
......@@ -75,10 +75,10 @@
</div>
</div>
</div>
</div>
</div>-->
<div class="search-input-submit">
<div class="search-input">
<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete or 'off'}}" class="form-control"placeholder="{{ trans('index.placeholder') }}">
<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
</div>
<div class="search-submit" id="submit-inputgroup">
<button type="submit">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment