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

Designänderungen an Startseite

Kartendesign für Ergebnisseite
parent 407d5a59
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
......@@ -21,7 +21,6 @@ input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=tel]
#mglogo > a {
color: rgb(255,128,0);
font-size: 90px;
}
.logo h1{
......
......@@ -8,6 +8,7 @@
body {
&#resultBody {
background-image: inherit;
background-color: #FAFAFA;
}
&.quicktips {
background-color: @quicktip-background-color;
......@@ -356,21 +357,27 @@ p.mg-logo {
@result-width: 700px;
@quicktip-width: 500px;
@results-margin-left: 50px;
#resultpage-container {
width: @result-width + @quicktip-width;
align-self: center;
@media (max-width: (@result-width + @quicktip-width - 1px)) {
align-self: left;
display: flex;
justify-content: left;
margin-left: @results-margin-left;
background-color: #FAFAFA;
@media (max-width: (2 * @results-margin-left + @result-width + @quicktip-width - 1px)) {
width: @result-width;
#additions-container {
display: none;
float: right;
}
}
@media (max-width: @result-width) {
@media (max-width: (2 * @results-margin-left + @result-width - 1px)) {
width: 100%;
justify-content: center;
margin: 0px;
padding: 0px 8px;
}
display: flex;
justify-content: center;
#results-container {
max-width: @result-width;
width: 100%;
......
/* Ergebnis */
@result-font-large: 18px;
@result-font-medium: 16px;
@result-font-small: 14px;
.result {
margin-top: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
padding-left: 4px;
padding-right: 4px;
margin: 8px 0px 8px 0px;
padding: 15px;
width: 100%;
border: 1px solid #ccc;
@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);
}
.result-title {
margin: 0px;
overflow: hidden;
......@@ -14,10 +18,11 @@
white-space: nowrap;
a,
a:active,
a:hover,
a:focus,
a:visited {
color: black;
font-size: 18px;
font-size: @result-font-large;
font-weight: bold;
text-decoration: none;
}
......@@ -25,77 +30,31 @@
.result-header {
display: flex;
>*:not(:first-child) {
margin-left: 10px;
margin-left: 15px;
}
.result-link {
overflow: auto;
a {
a,
a:active,
a:hover,
a:focus,
a:visited {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.result-options {
.option-opener-icon {
display: block;
font-size: 16px;
color: #2A2ADE;
}
.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:hover,
a:focus,
a:visited {
color: black;
display: block;
}
}
}
.result-hoster {
font-size: 13px;
color: @result-hoster-color;
white-space: nowrap;
a {
color: @result-hoster-a-color;
}
}
.partnershop-info {
font-size: 13px;
margin-top: 0;
margin-left: 10px;
}
.result-proxy, .result-proxy a {
font-size: 13px;
margin-top: 0;
white-space: nowrap;
img {
margin-bottom: 0px;
margin-right: 2px
color: #333;
font-size: @result-font-small;
text-decoration: none;
}
}
}
.result-body {
margin-top: 20px;
.result-description {
margin-bottom: 3px;
color: @result-description-color;
font-size: 16px;
font-size: @result-font-medium;
line-height: 1.3;
clear: both;
.date {
......@@ -122,6 +81,78 @@
max-width: 100%;
}
}
.result-footer {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
&>* {
margin: 10px;
}
.result-open a {
color: #ff8000;
}
.result-open-newtab a {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
}
.result-open-proxy,
.result-open-proxy a {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
white-space: nowrap;
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:hover,
a:focus,
a:visited {
color: black;
display: block;
}
}
}
}
&.ad .ad-label {
border: green solid 1px;
padding: 1px;
......
......@@ -12,6 +12,9 @@
display: flex;
align-items: center;
position: relative;
@media(max-width: @screen-xs-max) {
display: none;
}
&>button {
border: none;
border-right: 1px solid rgb(170, 170, 170);
......@@ -292,6 +295,6 @@ div:hover>.searchbar-tooltip {
width: 100%;
height: 60px;
@media (max-width: @screen-xs-max) {
height: 141.6px;
height: 100px;
}
}
\ No newline at end of file
/* Startseite */
@search-bar-width: 1000px;
#mglogo {
font-size: 90px;
@media(max-width: @screen-xs-max) {
font-size: 50px;
}
}
.mg-panel {
flex-grow: 1;
display: flex;
......@@ -71,52 +78,49 @@
}
}
#sponsors {
#more-information {
flex-grow: 2;
margin-top: 50px;
text-align: center;
ul {
padding: 0px;
text-align: right;
li.sponsor {
display: flex;
justify-content: space-between;
a {
margin-left: 10px;
color: inherit;
font-size: 16px;
}
padding-top: 50px;
display: flex;
@media(max-width: @screen-xs-max) {
flex-direction: column;
}
#about-us {
max-width: 500px;
margin-right: 50px;
@media(max-width: @screen-xs-max) {
margin: 0px 8px;
}
h2 {
font-size: 21px;
}
p {
text-align: justify;
font-size: 15px;
}
}
h2 {
font-size: 20px;
}
}
#about-us a:visited {
color: @link-color;
}
#more-information {
box-shadow: none;
margin-top: 5%;
text-align: center;
-moz-box-shadow: none;
ul {
padding: 0;
}
ul li {
color: @more-information-ul-li-color;
}
&>div {
font-size: 15px;
}
h2 {
color: @more-information-h2-color;
font-size: 25px;
}
a:hover {
text-decoration: underline;
#sponsors {
@media(max-width: @screen-xs-max) {
margin: 0px 5px;
}
h2 {
font-size: 21px;
}
ul {
padding: 0px;
text-align: left;
li.sponsor {
a {
color: inherit;
display: flex;
justify-content: space-between;
font-size: 15px;
i {
margin-left: 10px;
}
}
}
}
}
}
......
<?php
return [
'index' => 'MetaGer, mehr als eine Suchmaschine: unabhängig, transparent, demokratisch, quellcode-offen, datensicher, privatsphären-geschützt ',
'index' => 'MetaGer - Mehr als eine Suchmaschine',
'impressum' => 'Impressum - MetaGer',
'about' => 'Über Uns - MetaGer',
'team' => 'Team - MetaGer',
......
......@@ -6,7 +6,7 @@
@include('modals.create-focus-modal')
@include('modals.plugin-modal')
<h1 id="mglogo">
<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">MetaGer</a>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">MetaGer</a>
</h1>
@include('parts.searchbar', ['class' => 'startpage-searchbar'])
<script type="text/javascript" src="{{ elixir('js/scriptStartPage.js') }}"></script>
......@@ -14,19 +14,25 @@
@endsection
@section('optionalContent')
<div id="sponsors">
<h2>{{ trans('index.sponsors.head.2') }}</h2>
<ul class="startpage">
<li class="sponsor">
<p>@lang('index.sponsors.woxikon')</p><a href="http://www.tagesgeld.jetzt" target="_blank" rel="noopener"><i class="fa fa-external-link"></i></a>
</li>
<li class="sponsor">
<p>@lang('index.sponsors.seo')</p><a href="http://www.gutschein-magazin.de/" target="_blank" rel="noopener"><i class="fa fa-external-link"></i></a>
</li>
<li class="sponsor">
<p>@lang('index.sponsors.gutscheine')</p><a href="https://www.semtrix.de/suchmaschinenoptimierung/" target="_blank" rel="noopener"><i class="fa fa-external-link"></i></a>
</li>
</ul>
<div id="more-information">
<div id="about-us">
<h2>Besser&nbsp;suchen, schneller&nbsp;finden</h2>
<p>MetaGer ist die einzige Suchmaschine, die nicht profitgetrieben, sondern gemeinnützig arbeitet. Wir speichern keine persönlichen Daten und bevorzugen keine Ergebnisse für Geld.</p>
<p>Mit MetaGer bewahren Sie einen neutralen Blick aufs Web!</p>
</div>
<div id="sponsors">
<h2>{{ trans('index.sponsors.head.2') }}</h2>
<ul class="startpage">
<li class="sponsor">
<a href="http://www.tagesgeld.jetzt" target="_blank" rel="noopener"><p>@lang('index.sponsors.woxikon')</p> <i class="fa fa-external-link"></i></a>
</li>
<li class="sponsor">
<a href="http://www.gutschein-magazin.de/" target="_blank" rel="noopener"><p>@lang('index.sponsors.seo')</p> <i class="fa fa-external-link"></i></a>
</li>
<li class="sponsor">
<a href="https://www.semtrix.de/suchmaschinenoptimierung/" target="_blank" rel="noopener"><p>@lang('index.sponsors.gutscheine')</p> <i class="fa fa-external-link"></i></a>
</li>
</ul>
</div>
</div>
<div></div>
@endsection
@extends('layouts.staticPages', ['page' => 'startpage'])
@section('homeIcon')
<a class="navbar-brand visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
<div class="logo">
<h1>MetaGer</h1>
</div>
</a>
@endsection
......@@ -10,9 +10,60 @@
{{ $result->anzeigeLink }}
</a>
</div>
@if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info">
<img src="/img/boosticon.png" height="13" alt="">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/partnershops") }}" target="_blank" rel="noopener">{!! trans('result.options.4') !!}</a>
</span>
@endif
</div>
<div class="result-body">
@if( isset($result->logo) )
<div class="result-logo">
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}">
<img src="{{ $metager->getImageProxyLink($result->logo) }}" alt="" />
</a>
</div>
@endif
@if( $result->image !== "" )
<div class="result-image result-description">
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener">
<img src="{{ $metager->getImageProxyLink($result->image) }}" align="left" width="120px" height="60px" alt="" />
</a>
{!! $result->descr !!}
</div>
@else
@if( $metager->getFokus() == "nachrichten" )
<div class="result-description">
<span class="date">{{ isset($result->additionalInformation["date"])?date("Y-m-d H:i:s", $result->additionalInformation["date"]):"" }}</span> {{ $result->descr }}
</div>
@else
<div class="result-description">
{{ $result->descr }}
</div>
@endif
@endif
</div>
<div class="result-footer">
<div class="result-open">
<a href="{{ $result->link }}" target="_self" data-hoster="{{ strip_tags($result->gefVon) }}" rel="noopener">
<span>ÖFFNEN</span>
</a>
</div>
<div class="result-open-newtab">
<a href="{{ $result->link }}" target="_blank" data-hoster="{{ strip_tags($result->gefVon) }}" rel="noopener">
<span>IN NEUEM TAB</span>
</a>
</div>
<div class="result-open-proxy">
<a 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="" />
<span>ANONYM ÖFFNEN</span>
</a>
</div>
<div class="result-options">
<a class="dropdown-opener" href="javascript:void(0);">
<i class="fa fa-caret-down option-opener-icon" aria-hidden="true"></i>
<i class="fa fa-chevron-down option-opener-icon" aria-hidden="true"></i>
</a>
<div class="dropdown-content option-content">
<ul class="option-list list-unstyled small">
......@@ -47,47 +98,5 @@
</ul>
</div>
</div>
<span class="result-hoster">
von {!! $result->gefVon !!}
</span>
@if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info">
<img src="/img/boosticon.png" height="13" alt="">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/partnershops") }}" target="_blank" rel="noopener">{!! trans('result.options.4') !!}</a>
</span>
@endif
<span class="result-proxy">
<a 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="" />
<span>{!! trans('result.options.5') !!}</span>
</a>
</span>
</div>
<div class="result-body">
@if( isset($result->logo) )
<div class="result-logo">
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}">
<img src="{{ $metager->getImageProxyLink($result->logo) }}" alt="" />
</a>
</div>
@endif
@if( $result->image !== "" )
<div class="result-image result-description">
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener">
<img src="{{ $metager->getImageProxyLink($result->image) }}" align="left" width="120px" height="60px" alt="" />
</a>
{!! $result->descr !!}
</div>
@else
@if( $metager->getFokus() == "nachrichten" )
<div class="result-description">
<span class="date">{{ isset($result->additionalInformation["date"])?date("Y-m-d H:i:s", $result->additionalInformation["date"]):"" }}</span> {{ $result->descr }}
</div>
@else
<div class="result-description">
{{ $result->descr }}
</div>
@endif
@endif
</div>
</div>
@if ($type === 'startpage' || $type === 'subpage')
<footer class="{{ $id }} noprint">
<div class="imagebox">
<a href="https://www.suma-ev.de/" >
<img src="/img/suma_ev_logo-m1-greyscale.png" alt="SUMA-EV Logo">
</a>
</div>
<div id="info">
<span><a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "kontakt") }}">{{ trans('staticPages.nav5') }}</a> - <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "impressum") }}">{{ trans('staticPages.nav8') }}</a></span>
<span class="hidden-xs">{{ trans('staticPages.sumaev.1') }}<a href="https://www.suma-ev.de/">{{ trans('staticPages.sumaev.2') }}</a></span>
</div>
<div class="imagebox">
<a href="https://www.uni-hannover.de/">
<img src="/img/luh_metager.png" alt="LUH Logo">
</a>
</div>
</footer>
@elseif ($type === 'resultpage')
<footer class="footer-resultpage">
......
......@@ -21,11 +21,11 @@
</div>
</div>
<select id="focus-select" name="focus" style="font-family: FontAwesome, sans-serif;">
<option value="web" style="font-family: FontAwesome, sans-serif;" selected>&#xf0ac; Websuche</option>
<option value="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichtensuche</option>
<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;">&#xf15c; Wissenschaftssuche</option>
<option value="produktsuche" style="font-family: FontAwesome, sans-serif;">&#xf07a; Produktsuche</option>
<option value="maps" style="font-family: FontAwesome, sans-serif;">&#xf279; Kartensuche</option>
<option value="web" style="font-family: FontAwesome, sans-serif;" selected>&#xf0ac; Web</option>
<option value="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichten</option>
<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;">&#xf15c; Wissenschaft</option>
<option value="produktsuche" style="font-family: FontAwesome, sans-serif;">&#xf07a; Produkte</option>
<option value="maps" style="font-family: FontAwesome, sans-serif;">&#xf279; Karten</option>
</select>
<div class="search-option-frame hide">
<div class="searchbar-options-arrow"></div>
......
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