Improves mimicing of WP. (site)

4 files changed, 372 insertions, 41 deletions

diff --git a/site/public/css/fk-custom.css b/site/public/css/fk-custom.css
new file mode 100644
index 0000000..9a58e37
--- /dev/null
+++ b/site/public/css/fk-custom.css
@@ -0,0 +1,183 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+body > .container {
+  padding: 30px 15px 0;
+}
+
+.card-img-right {
+  height: 100%;
+  border-radius: 0 3px 3px 0;
+}
+.custom-flex-child {
+	min-width: 0;
+}
+.h3-truncate {
+	min-width: 0;
+}
+.custom-flex-child > .h3-truncate > .hide-overflow{
+	overflow: hidden;
+	text-overflow: ellipsis !important;
+}
+.custom-flex-child > .hide-overflow{
+	overflow: hidden;
+	text-overflow: ellipsis !important;
+}
+.hide-overflow{
+	overflow: hidden;
+	text-overflow: ellipsis !important;
+}
+.footer-col {
+	padding-right: 20px;
+	padding-left: 20px;
+}
+.w-55 {
+	width: 55% !important;
+}
+.h-40 {
+	height: 40% !important;
+}
+.h-45 {
+	height: 45% !important;
+}
+.text-small {
+	font-size: 80%;
+}
+.mt-10 {
+	margin-top: 10px;
+}
+.mt-20 {
+	margin-top: 20px;
+}
+.text-dotted {
+	text-decoration: underline dotted;
+}
+.off-badge {
+	color: white; 
+	font-size: 150%; 
+	padding-right: 10px; 
+	padding-left:10px; 
+	opacity: 0.9;
+}
+.off-badge-small {
+	font-size: 120%; 
+}
+.text-large {
+	font-size: 120%; 
+}
+.img-grey {
+	opacity: 0.7; 
+	filter: grayscale(100%);
+}
+.u {
+	text-decoration: underline;
+}
+.card {
+	/*
+	background-color: #d1d8e0;
+	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+	box-shadow: 0 .25rem .75rem #d1d8e0;
+	border: 0.5px solid #d1d8e0 !important;
+	box-shadow: 1rem 1rem 1rem #d1d8e0 !important;
+
+	box-shadow: 1rem 1rem 1rem #aaa !important;
+	box-shadow: .5rem .5rem 1rem #aaa, 1rem 1rem 1rem #aaa !important;
+
+	border-top: 2px solid white; 
+	*/
+	box-shadow: 0rem 0rem .1rem .01rem #d1d8e0, 1rem 1rem 1rem #d1d8e0 !important;
+	border-left: 3px solid white; 
+}
+.card:hover {
+	box-shadow: 0.5rem 0.5rem 0.5rem #aaa !important;
+	transition: box-shadow .1s cubic-bezier(.4,0,1,1);
+
+	will-change: box-shadow,transform;
+	/*
+	border-left: 4px solid #d1d8e0; 
+	border-left: 4px solid #12CBC4; 
+	border-left: 3px solid #142639 ; 
+	border-left: 4px solid white; 
+	*/
+	border-left: 3px solid #1289A7; 
+	/*
+	border-top: 4px solid #1289A7; 
+	border-top: 2px solid #1289A7; 
+	*/
+}
+.card-link {
+	position: relative;
+}
+
+footer {
+	/*
+	background-color: #d1d8e0 !important;
+	box-shadow: -0.5rem 0 .1rem .15rem #d1d8e0;
+	box-shadow: 0 -0.5rem .1rem .05rem #d1d8e0;
+	*/
+	box-shadow: 0 -0.2rem .1rem .05rem #d1d8e0;
+}
+.jumbotron.box-shadow {
+	box-shadow: 0rem 0rem .5rem .15rem #d1d8e0, 1rem 1rem 1rem #d1d8e0 !important;
+}
+.text-fade-out {
+	position: absolute; 
+	bottom: 45%;
+	left: 0;
+	width: 100%; 
+	text-align: center; 
+	margin: 0; padding: 8px 0; 
+	background-image: linear-gradient(to bottom, transparent, white);
+}
+/*
+ * Not used.
+ */
+.created_at {
+	bottom: 5px;
+	/*
+	margin-top: 200%;
+	*/
+	position: absolute;
+	background-color: #d1d8e0 !important;
+	color: #142639 !important;
+	padding-left:5px; 
+	padding-right: 5px; 
+	opacity: 0.9;
+}
+.footer-link {
+	padding-left: 0px !important;
+}
+.navbar-small {
+	font-size: 70% !important;
+}
+.search-btn-bg-white {
+	/*
+	*/
+	background-color: rgba(255,255,255,0.05)!important;
+}
+.search-btn-bg-white:hover {
+	background-color: rgba(255,255,255,.15)!important;
+}
+.s-link:hover {
+	color: inherit;
+}
+
+.flex-auto {
+  -ms-flex: 0 0 auto;
+  -webkit-box-flex: 0;
+  flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+.border-white { border: 1px solid white; }
+
+.ml-10 {
+	margin-left: 10px !important;
+}
diff --git a/site/resources/views/fk-offer.blade.php b/site/resources/views/fk-offer.blade.php
index 10f50a1..ad9b88c 100644
--- a/site/resources/views/fk-offer.blade.php
+++ b/site/resources/views/fk-offer.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.base')
+@extends('layouts.fk-base')
 
 @section('header')
 {{ ucfirst($title) }}
@@ -9,7 +9,39 @@
 @endsection
 
 @section('content')
+<?php
+	$header;
+	if ( "Alle Angebote" == $spirit_type ) {
+		$header = "Alle aktuellen Sonderangebote";
+	} else if ( "Andere Angebote" == $spirit_type ){
+		$header = "Aktuelle Spirituosen-Sonderangebote";
+	} else {
+		$header = "Aktuelle " . ucfirst($spirit_type) . "-Angebote";
+	}
+?>
+<div class="container">
+		<nav class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumb">
+		    <ol class="breadcrumb">
+			<!-- Breadcrumb NavXT 6.2.1 -->
+<li class="home breadcrumb-item"><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Gehe zur Startseite: Fuselkönig.de" href="https://www.fuselkoenig.de" class="home"><span property="name">Startseite</span></a><meta property="position" content="1"></span></li>
+<li class="post post-angebote-archive breadcrumb-item"><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Schau dir Angebote an." href="/angebote/" class="post post-angebote-archive"><span property="name">Angebote</span></a><meta property="position" content="2"></span></li>
+<li class="archive taxonomy type current-item breadcrumb-item active" aria-current="page"><span property="itemListElement" typeof="ListItem"><span property="name">{{ ucfirst($spirit_type) }}</span><meta property="position" content="3"></span></li>
+		    </ol>
+		</nav>
+	</div>
+
     <div class="container">
+
+<header class="page-header">
+	<div class="card taxonomy-card">
+		<div class="card-body">
+			<h1 class="card-title page-title">{{ $header }}</h1>
+		</div>
+	</div>
+</header><!-- .page-header -->
+
+<?php
+/*
       <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark bbg-white ttext-dark box-shadow">
         <div class="col-md-6 px-0">
 	  <h1 class="display-4 font-italic">{{ ucfirst($spirit_type) }} <span class="text-mute ml-10">({{$count}} Angebote)</span><!-- --></h1> 
@@ -17,6 +49,7 @@
           <p class="lead mb-0"><a href="/" class="text-white font-weight-bold">Zurück zur Übersicht...</a></p>
         </div>
       </div>
+ */ ?>
 
 <?php 
 if ( !$data->count() ) {
@@ -31,22 +64,88 @@ if ( !$data->count() ) {
 } else {
 	/* Liste Angebote */
 
+//@include('snippets.sortbuttons')
+$css_border_left = "";
+
+foreach( $data as $offer) {
 ?>
 
-@include('snippets.sortbuttons')
-<?php
-	$count = 0;
-	foreach( $data as $offer) {
 
-		if ( $count % 2 == 0) {
+
+
+
+	<div class="card <?php echo $css_border_left; ?>">
+      <div class="row ">
+        <div class="col-md-4">
+	    <div class="card-header-dp-none">
+		<p><strong>
+		<span style="visibility: hidden;">
+		{{ ucfirst($offer->spirit_type) }} <span class="float-right">{{ $offer->shop }}</span>
+		</span>
+		</strong></p>
+	    </div>
+	    <div class="card-img-overlay card-img-overlay-badge" >
+	    <p class="card-text float-right rounded off-badge"  >{{ $offer->procent}} %</p>
+            </div>
+	    <img src="{{ $offer->image_url }}" class="card-img img-fluid mx-auto d-block" >
+          </div>
+          <div class="col-md-8 px-10">
+	    <div class="card-header">
+		<p><strong>
+		{{ ucfirst($offer->spirit_type) }} <span class="float-right">{{ $offer->shop }}</span>
+		</strong></p>
+	    </div>
+            <div class="card-block card-body px-3">
+
+	    <h3 class="card-title">{{ $offer->name }}</h3>
+
+		<div class="row">
+		      <p class="card-text col-md-6">
+			      <span style="color:red;">Alter Preis: {{ TF::fF($offer->original_price) }} €</span>
+			      <br>
+		              <strong>Neuer Preis: {{ TF::fF($offer->discounted_price) }} €</strong>
+			      <br>
+			      {{ TF::fF($offer->base_price ) }} € / Liter
+		      </p>
+		      <p class="card-text col-md-6">
+		      	      Alkohol: {{ TF::fF($offer->abv) }} %
+			      <br>
+			      Volumen: {{ TF::fF($offer->volume) }} Liter
+			      <br>
+			      Versand: {{ TF::fF($offer->shipping_costs) }} €
+			      <br>
+			      <br>
+		      </p>
+                </div>
+            </div>
+            <div class="card-footer row">
+		<div class="col-md-6 col-sm-6">
+		    <a href="{{ $offer->url }}" class="btn btn-primary">Zum Shop</a>
+		</div>
+		<div class="col-md-6 col-sm-6">
+		<p>
+				Preis vom {{ strftime("%d. %B", $offer->created_at) }}
+		</p>
+		</div>
+<?php
+	/*if ( $offer['include_post_link'] ) {
 ?>
-<!-- .row -->
- <div class="row mb-2">
+	    <a href="<?php echo get_post_permalink( $post ); ?>#title" class="btn btn-light" title="Kommentieren und mehr">Detailansicht</a>
 <?php
 	}
-
+	*/
 ?>
-	<div class="col-md-6 col-sm-12" id="{{ $offer->name }}" data-track-content data-content-name="{{ ucfirst($spirit_type) }}" data-content-piece="{{ $offer->name }}" data-content-target="{{ $offer->url }}">
+	    <!--p class="float-right">Preis vom {{ strftime("%d. %B", $offer->created_at) }}</p-->
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+<?php
+	}
+/*
+<div class="col-md-6 col-sm-12" id="{{ $offer->name }}" data-track-content data-content-name="{{ ucfirst($spirit_type) }}" data-content-piece="{{ $offer->name }}" data-content-target="{{ $offer->url }}">
 		<div class="card flex-md-row mb-4 box-shadow h-md-250 h-sm-500">
 
 			<!-- >= md -->
@@ -163,29 +262,8 @@ if ( !$data->count() ) {
 			</div>
 		</div>
 	</div>
-
-<?php
-
-		
-		if ( $count % 2 == 1) {
-?>
-	<!-- ./row -->
-	 </div>
-<?php
-		}
-
-		$count++;
-
-	}
-
-	// schließt den div bei ungerade einträgen
-	if ( $count % 2 == 1) {
-?>
-	<!-- ./row -->
-	 </div>
 <?php
-	}
-
+*/
 ?>
 
 	{{ $data->appends(Input::except('page'))->links() }}
diff --git a/site/resources/views/layouts/fk-base.blade.php b/site/resources/views/layouts/fk-base.blade.php
index ac72844..14352a1 100644
--- a/site/resources/views/layouts/fk-base.blade.php
+++ b/site/resources/views/layouts/fk-base.blade.php
@@ -3,9 +3,11 @@
 <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0" />
+	<meta name="robots" content="noindex,follow"/>
         <meta name="description" content="">
         <meta name="author" content="">
         <link rel="icon" href="https://files.fuselkoenig.de/favicon.ico">
+
         <title>@yield('header') | {{ env("APP_BRANDING") }}</title>
 
 	<link rel="alternate" type="application/rss+xml" title="Fuselkönig &raquo; Feed" href="https://www.fuselkoenig.de/feed/" />
@@ -21,12 +23,19 @@
 	<link rel='stylesheet' id='elasticpress-facets-css'  href='https://www.fuselkoenig.de/wp-content/plugins/elasticpress/features/facets/assets/css/facets.min.css?ver=2.8.2' type='text/css' media='all' />
 	<link rel='stylesheet' id='recent-posts-widget-with-thumbnails-public-style-css'  href='https://www.fuselkoenig.de/wp-content/plugins/recent-posts-widget-with-thumbnails/public.css?ver=6.4.0' type='text/css' media='all' />
 
-	<link href="/font/css/open-iconic-bootstrap.css" rel="stylesheet">
-        <link href="/css/custom.css" rel="stylesheet">
-        <link href="/css/colors.css" rel="stylesheet">
+	<!--link href="https://angebote.fuselkoenig.de/font/css/open-iconic-bootstrap.css" rel="stylesheet">
+        <link href="https://angebote.fuselkoenig.de/css/custom.css" rel="stylesheet">
+        <link href="https://angebote.fuselkoenig.de/css/fk-custom.css" rel="stylesheet">
+        <link href="/css/colors.css" rel="stylesheet"-->
 
 	<script type='text/javascript' src='https://www.fuselkoenig.de/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
 	<script type='text/javascript' src='https://www.fuselkoenig.de/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
+	<link rel="shortcut icon" href="https://www.fuselkoenig.de/wp-content/themes/fuselkoenig_de_v2/img/favicon.png">
+	<style>
+	.main-header {
+		background-image: url("https://www.fuselkoenig.de/wp-content/themes/fuselkoenig_de_v2/img/background_mini_farbig.jpg");");
+	}
+	</style>
 
 
 
@@ -68,17 +77,17 @@ if ( "" != env('PIWIK_URL') && "" != env('PIWIK_ID') ) {
 }
 ?>
 
-	@include('snippets.navbar')
+	@include('snippets.fk-navbar')
 
 	@yield('content')
 
 	@include('snippets.fk-footer')
 
-<script type='text/javascript' src='https://test.fuselkoenig.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.1'></script>
-<script type='text/javascript' src='https://test.fuselkoenig.com/wp-content/themes/fuselkoenig_de_v2/js/theme.min.js?ver=0.1.1551979696'></script>
-<script type='text/javascript' src='https://test.fuselkoenig.com/wp-includes/js/underscore.min.js?ver=1.8.3'></script>
-<script type='text/javascript' src='https://test.fuselkoenig.com/wp-content/plugins/elasticpress/features/facets/assets/js/facets.min.js?ver=2.8.2'></script>
-<script type='text/javascript' src='https://test.fuselkoenig.com/wp-includes/js/wp-embed.min.js?ver=5.1.1'></script>
+<script type='text/javascript' src='https://www.fuselkoenig.de/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.1'></script>
+<script type='text/javascript' src='https://www.fuselkoenig.de/wp-content/themes/fuselkoenig_de_v2/js/theme.min.js?ver=0.1.1551979696'></script>
+<script type='text/javascript' src='https://www.fuselkoenig.de/wp-includes/js/underscore.min.js?ver=1.8.3'></script>
+<script type='text/javascript' src='https://www.fuselkoenig.de/wp-content/plugins/elasticpress/features/facets/assets/js/facets.min.js?ver=2.8.2'></script>
+<script type='text/javascript' src='https://www.fuselkoenig.de/wp-includes/js/wp-embed.min.js?ver=5.1.1'></script>
 
 	@yield('scripts')
 </body>
diff --git a/site/resources/views/snippets/fk-navbar.blade.php b/site/resources/views/snippets/fk-navbar.blade.php
new file mode 100644
index 0000000..2b91217
--- /dev/null
+++ b/site/resources/views/snippets/fk-navbar.blade.php
@@ -0,0 +1,61 @@
+<div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite">
+
+		<a class="skip-link sr-only sr-only-focusable" href="#content">Skip to content</a>
+
+		<nav class="navbar navbar-expand-md">
+
+		
+					<!-- Your site title as branding in the menu -->
+					
+						
+							<a class="navbar-brand" rel="home" href="https://www.fuselkoenig.de/" title="Fuselkönig" itemprop="url"><img src="https://www.fuselkoenig.de/wp-content/themes/fuselkoenig_de_v2/img/paw_with_glencairn.png" width=60 height=60 alt="logo"> Fuselkönig</a>
+
+						
+
+					<!-- end custom logo -->
+
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+
+				<!-- The WordPress Menu goes here -->
+				<div id="navbarNavDropdown" class="collapse navbar-collapse"><ul id="main-menu" class="navbar-nav ml-auto flex-column-sm"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3760" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children dropdown menu-item-3760 nav-item"><a title="Was wurde getrunken?" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-3760">Was wurde getrunken?</a>
+<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-3760" role="menu">
+	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3769" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item active menu-item-3769 nav-item"><a title="Whisky" href="https://www.fuselkoenig.de/category/whisky/" class="dropdown-item">Whisky</a></li>
+	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3770 nav-item"><a title="Wodka" href="https://www.fuselkoenig.de/category/wodka/" class="dropdown-item">Wodka</a></li>
+	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3768 nav-item"><a title="Weinbrand" href="https://www.fuselkoenig.de/category/weinbrand/" class="dropdown-item">Weinbrand</a></li>
+	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3767 nav-item"><a title="Obstbrand" href="https://www.fuselkoenig.de/category/obstbrand/" class="dropdown-item">Obstbrand</a></li>
+	<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3766" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3766 nav-item"><a title="Likör" href="https://www.fuselkoenig.de/category/likoer/" class="dropdown-item">Likör</a></li>
+</ul>
+</li>
+<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3761" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3761 nav-item active"><a title="Sonderangebote" href="/angebote/" class="nav-link">Sonderangebote</a></li>
+<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3764" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3764 nav-item"><a title="Empfehlung" href="/empfehlung/" class="nav-link">Empfehlung</a></li>
+<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3762" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3762 nav-item"><a title="Fuselfotos" href="https://www.fuselkoenig.de/fuselfotos/" class="nav-link">Fuselfotos</a></li>
+<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3763" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3763 nav-item"><a title="Über mich" href="https://www.fuselkoenig.de/ueber-diesen-blog/" class="nav-link">Über mich</a></li>
+</ul></div>			
+		</nav><!-- .site-navigation -->
+
+	</div><!-- #wrapper-navbar end -->
+	<div class="main-header">
+		<div class="container">
+			<div class="row">
+				<div class="col-sm col-xl-8 align-self-center">
+					<h1 class="d-none d-lg-inline"><a class="brand-url" rel="home" href="https://www.fuselkoenig.de/" title="Fuselkönig" itemprop="url">Fuselkönig</a></h1>
+					<p class="slogan">Supermarkt-Spirituosen im Test</p>
+				</div>
+				<div class="col-sm col-xl-4 align-self-center">
+					
+<form class="form-inline my-2 my-lg-0 float-none float-sm-right" method="get" id="searchform" action="https://www.fuselkoenig.de/" role="search">
+	<label class="sr-only" for="s">Search</label>
+	<div class="input-group">
+		<input class="field form-control" id="s" name="s" type="text"
+			placeholder="Den Blog durchsuchen&hellip;" value="">
+		<span class="input-group-append">
+			<button class="btn btn-dark my-2 my-sm-0" id="searchsubmit" name="submit" type="submit"><i class="material-icons">search</i></button>
+	</span>
+	</div>
+</form>
+				</div>
+			</div>
+		</div>
+	</div>