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

Merge branch '796-ergebnisse-lesbarer-machen' into 'development' 

Resolve "Ergebnisse lesbarer machen"

Closes #796

See merge request !1306
parents 0876937d c06e33c0
No related branches found
No related tags found
1 merge request!1306Resolve "Ergebnisse lesbarer machen"
Hide whitespace changes
Inline Side-by-side
app/Models/Result.php
+ 3
− 2
View file @ 3f18ab39
......@@ -35,11 +35,12 @@ class Result
$this->titel = strip_tags(trim($titel));
$this->link = trim($link);
$this->anzeigeLink = trim($anzeigeLink);
$this->anzeigeLink = preg_replace("/http[s]{0,1}:\/\/(www\.){0,1}/si", "", $this->anzeigeLink);
$this->descr = strip_tags(trim($descr), '<p>');
$this->descr = preg_replace("/\n+/si", " ", $this->descr);
$this->longDescr = $this->descr;
if (strlen($this->descr) > 250) {
$this->descr = wordwrap($this->descr, 250);
if (strlen($this->descr) > 150) {
$this->descr = wordwrap($this->descr, 150);
$this->descr = substr($this->descr, 0, strpos($this->descr, "\n"));
}
......
resources/assets/less/metager/quicktips.less
+ 129
− 130
View file @ 3f18ab39
......@@ -4,143 +4,142 @@
@quicktip-font-medium: @result-font-medium;
@quicktip-font-small: @result-font-small;
#quicktips {
display: flex;
flex-direction: column;
.quicktip {
.card-light;
position: relative;
details[open=""] .quicktip-extender {
animation-name: quicktip-extender-turn;
animation-fill-mode: forwards;
}
margin: 10px 0px;
padding: 10px 10px 10px 10px;
display: flex;
flex-direction: column;
.quicktip {
.card-light;
position: relative;
details[open=""] .quicktip-extender {
animation-name: quicktip-extender-turn;
animation-fill-mode: forwards;
}
margin: 10px 0px;
padding: 10px 10px 10px 10px;
width: 100%;
border: 1px solid #ccc;
background-color: white;
details:not([open=""]) {
.quicktip-summary p {
.overflow-ellipsis;
}
}
.quicktip-summary {
.quicktip-headline {
width: 100%;
border: 1px solid #ccc;
background-color: white;
details:not([open=""]) {
.quicktip-summary p {
.overflow-ellipsis;
}
display: flex;
justify-content: space-between;
.quicktip-title,
.quicktip-title a {
flex-grow: 0;
margin: 0px 0px 5px 0px;
font-size: 13px;
display: flex;
justify-content: space-between;
}
.quicktip-summary {
.quicktip-headline {
width: 100%;
display: flex;
justify-content: space-between;
.quicktip-title,
.quicktip-title a {
flex-grow: 0;
margin: 0px 0px 5px 0px;
font-size: 18px;
display: flex;
justify-content: space-between;
font-size: @quicktip-font-large;
}
.space-taker {
flex-grow: 1;
}
.quicktip-hoster {
flex-grow: 0;
font-size: @quicktip-font-small;
color: #808080;
white-space: nowrap;
}
.quicktip-extender {
flex-grow: 0;
color: #777;
font-size: 20px;
height: 20px;
font-size: @quicktip-font-large;
}
>* {
margin: 0px 5px;
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
}
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
p {
font-size: 16px;
}
.space-taker {
flex-grow: 1;
}
.quicktip-detail {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
h2 {
margin: 10px 0px;
font-size: 16px;
}
p {
display: none;
font-size: 14px;
}
.quicktip-hoster {
flex-grow: 0;
font-size: @quicktip-font-small;
color: #808080;
white-space: nowrap;
}
&[type=spendenaufruf] {
order: 100;
border: none;
box-shadow: none;
background-color: inherit;
.quicktip-summary {
display: flex;
justify-content: space-between;
align-items: center;
h1 {
margin: 0px;
}
p {
margin: 5px;
.spendenaufruf-btn {
color: white;
background-color: @link-color;
font-size: 16px;
}
}
}
.quicktip-extender {
flex-grow: 0;
color: #777;
font-size: 20px;
height: 20px;
font-size: @quicktip-font-large;
}
&[type=spruch] {
order: 1;
p {
display: flex;
flex-direction: column;
text-align: justify;
.author {
color: #404040;
font-style: italic;
align-self: flex-end;
}
}
> * {
margin: 0px 5px;
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
}
&[type=duckDuckGo-bang] {
order: 2;
.bang-btn {
width: 100%;
margin-top: 5px;
color: #fff;
background-color: #286992;
font-size: 16px;
}
}
&[type=wikipedia] {
order: 3;
}
&[type=dictCC] {
order: 4;
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
p {
font-size: 13px;
}
}
.quicktip-detail {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
h2 {
margin: 10px 0px;
font-size: 16px;
}
p {
display: none;
font-size: 14px;
}
}
&[type="spendenaufruf"] {
order: 100;
border: none;
box-shadow: none;
background-color: inherit;
.quicktip-summary {
display: flex;
justify-content: space-between;
align-items: center;
h1 {
margin: 0px;
}
&[type=tip] {
order: 5;
p {
margin: 5px;
.spendenaufruf-btn {
color: white;
background-color: @link-color;
font-size: 16px;
}
}
&[type=ad] {
order: 6;
}
}
&[type="spruch"] {
order: 1;
p {
display: flex;
flex-direction: column;
text-align: justify;
.author {
color: #404040;
font-style: italic;
align-self: flex-end;
}
}
}
&[type="duckDuckGo-bang"] {
order: 2;
.bang-btn {
width: 100%;
margin-top: 5px;
color: #fff;
background-color: #286992;
font-size: 16px;
}
}
&[type="wikipedia"] {
order: 3;
}
&[type="dictCC"] {
order: 4;
}
&[type="tip"] {
order: 5;
}
&[type="ad"] {
order: 6;
}
}
\ No newline at end of file
}
}
resources/assets/less/metager/result.less
+ 193
− 181
View file @ 3f18ab39
......@@ -2,193 +2,205 @@
@result-font-large: 18px;
@result-font-medium: 16px;
@result-font-small: 14px;
@result-font-url: 14px;
@result-font-small: 12px;
.result {
.card;
margin: @resultpage-leftbox-min-dist-top-bottom 0px @resultpage-leftbox-min-dist-top-bottom 0px;
padding: 15px;
width: 100%;
.result-header {
.result-headline {
display: flex;
justify-content: space-between;
.result-title {
margin: 0px;
&>* {
font-size: @result-font-large;
}
.overflow-ellipsis;
.result-price {
padding: 0px 10px;
color: white;
background-color: #666699;
border-radius: 3px;
}
a {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
text-decoration: none;
}
}
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
.card;
margin: @resultpage-leftbox-min-dist-top-bottom 0px
@resultpage-leftbox-min-dist-top-bottom 0px;
padding: 15px;
width: 100%;
.result-header {
.result-headline {
display: flex;
justify-content: space-between;
.result-title {
margin: 0px;
& > * {
font-size: @result-font-large;
}
.result-link {
.overflow-ellipsis;
display: block;
font-size: @result-font-small;
width: fit-content;
max-width: 100%;
&,
&:active,
&:hover,
&:focus,
&:visited {
color: #333;
text-decoration: none;
}
.overflow-ellipsis;
.result-price {
padding: 0px 10px;
color: white;
background-color: #666699;
border-radius: 3px;
}
}
.result-body {
margin-top: 10px;
width: 90%;
display: flex;
text-align: justify;
.result-image {
width: 180px;
padding-right: 10px;
margin-right: 10px;
& img {
display: block;
max-width: 160px;
max-height: 120px;
width: auto;
height: auto;
}
}
.result-description {
margin-bottom: 3px;
word-break: break-word;
color: @result-description-color;
font-size: @result-font-medium;
line-height: 1.3;
clear: both;
.date {
font-weight: bold;
}
p {
margin: 0;
margin-bottom: 4px;
}
img {
margin: 5px;
margin-left: 0px;
margin-right: 15px;
height: auto;
width: auto;
max-width: 120px;
max-height: 200px;
border: solid 1px @result-description-img-border-color;
}
a {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
text-decoration: none;
}
}
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
}
.result-footer {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
&>*:not(:first-child) {
margin-left: 20px;
}
.result-open,
.result-open-newtab {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
}
@media (max-width: 499px) {
.result-open-newtab {
display: none;
}
}
.result-open-proxy {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px
}
}
.open-result-options {
font-weight: normal;
flex-grow: 1;
text-align: right;
@media (max-width: 499px) {
display: none;
}
}
.result-link {
.overflow-ellipsis;
display: block;
font-size: @result-font-small;
width: fit-content;
max-width: 100%;
&,
&:active,
&:hover,
&:focus,
&:visited {
font-size: @result-font-url;
text-decoration: none;
}
span.advertisement-mark {
background-color: #0d9c0d;
color: white;
padding: 3px;
border-radius: 4px;
font-weight: bold;
font-size: 10px;
margin-right: 10px;
}
}
&.ad .ad-label {
&,
& a,
& a:active,
& a:hover,
& a:focus,
& a:visited {
font-size: @result-font-small;
color: #808080;
}
}
.result-body {
margin-top: 1px;
width: 90%;
display: flex;
text-align: justify;
.result-image {
width: 180px;
padding-right: 10px;
margin-right: 10px;
& img {
display: block;
max-width: 160px;
max-height: 120px;
width: auto;
height: auto;
}
}
&>.remover {
cursor: pointer;
text-align: right;
color: #777;
.result-description {
margin-bottom: 3px;
word-break: break-word;
color: @result-description-color;
font-size: 13px;
line-height: 1.3;
clear: both;
.date {
font-weight: bold;
}
p {
margin: 0;
margin-bottom: 4px;
}
img {
margin: 5px;
margin-left: 0px;
margin-right: 15px;
height: auto;
width: auto;
max-width: 120px;
max-height: 200px;
border: solid 1px @result-description-img-border-color;
}
}
&>.result-options {
&>.options {
width: 100%;
text-align: right;
overflow: hidden;
max-height: 0px;
transition: all 1.0s;
-webkit-transition: all 1.0s;
opacity: 0;
}
&>.result-toggle:checked+.options {
max-height: 150px;
overflow: initial;
opacity: 1;
}
li {
font-size: 14px;
text-transform: uppercase;
margin: 10px 0;
}
li>a {
color: black;
}
}
.result-footer {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
& > *:not(:first-child) {
margin-left: 20px;
}
.result-open,
.result-open-newtab {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
}
@media (max-width: 499px) {
.result-open-newtab {
display: none;
}
}
.result-open-proxy {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px;
}
}
.open-result-options {
font-weight: normal;
font-size: @result-font-small;
flex-grow: 1;
text-align: right;
@media (max-width: 499px) {
display: none;
}
}
}
&.ad .ad-label {
&,
& a,
& a:active,
& a:hover,
& a:focus,
& a:visited {
font-size: @result-font-small;
color: #808080;
}
}
& > .remover {
cursor: pointer;
text-align: right;
color: #777;
}
& > .result-options {
& > .options {
width: 100%;
text-align: right;
overflow: hidden;
max-height: 0px;
transition: all 1s;
-webkit-transition: all 1s;
opacity: 0;
}
& > .result-toggle:checked + .options {
max-height: 150px;
overflow: initial;
opacity: 1;
}
li {
font-size: 14px;
text-transform: uppercase;
margin: 10px 0;
}
li > a {
color: black;
}
}
\ No newline at end of file
}
}
resources/views/layouts/ad.blade.php
+ 2
− 1
View file @ 3f18ab39
......@@ -8,9 +8,10 @@
{{ $ad->titel }}
</a>
</h2>
<a class="ad-label" href="{{ $ad->gefVonLink }}" target="_blank" rel="noopener">Werbung von {!! $ad->gefVon !!}</a>
<a class="ad-label" href="{{ $ad->gefVonLink }}" target="_blank" rel="noopener">{!! $ad->gefVon !!}</a>
</div>
<a class="result-link" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}">
<span class="advertisement-mark">Anzeige</span>
{{ $ad->anzeigeLink }}
</a>
</div>
......
resources/views/layouts/result.blade.php
+ 1
− 1
View file @ 3f18ab39
......@@ -9,7 +9,7 @@
<span class="result-price">{!! $result->price_text !!}</span>
@endif
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" rel="noopener">
{{ $result->number }}. {!! $result->titel !!}
{!! $result->titel !!}
</a>
</h2>
<a class="result-hoster" href="{{ $result->gefVonLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">{{ $result->gefVon }}</a>
......
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