Revize 4c3f70c4

Issue #7845 @2h

Oprava designu seznamu artefaktu. Pridany obrazky, styl textu, pridana tlacitka na info a take "likey". Like jiz take maji hotovou animaci stisknuti. Dale je nutne dodelat akcni schopnosti informacniho tlacitka a like tlacitka.

app/Http/Controllers/FavoriteArtefactsController.php

@@ -6 +6 @@
 use Illuminate\Support\Facades\Auth;
 use App\User;
 use App\Artefact;
+use App\Http\Controllers\Image;
 
 class FavoriteArtefactsController extends Controller
 {
@@ -28 +29 @@
             $finalData = array();
             foreach($list as $item)
             {
-                array_push($finalData, Artefact::where('id', $item->artefact_id)->get());
+                $tmp = Artefact::where('id', $item->artefact_id)->get();
+                $tmp['likes'] = Artefact::find($item->artefact_id)->users()->count();
+                array_push($finalData, $tmp);
             }
 
             $data = array(
@@ -60 +63 @@
         $finalData = array();
         foreach($list as $item)
         {
-            array_push($finalData, Artefact::where('id', $item->artefact_id)->get());
+            $tmp = Artefact::where('id', $item->artefact_id)->get();
+            $tmp['likes'] = Artefact::find($item->artefact_id)->users()->count();
+            array_push($finalData, $tmp);
         }
 
         $data = array(

public/css/app.css

@@ -10882 +10882 @@
   }
 }
 
+@font-face {
+  font-family: "Avenir Black LINK";
+  src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot");
+  src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff") format("woff"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.svg#Avenir Black") format("svg");
+}
+
+@font-face {
+  font-family: "Avenir Roman LINK";
+  src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot");
+  src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff") format("woff"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.svg#Avenir") format("svg");
+}
+
+@font-face {
+  font-family: "Avenir Medium LINK";
+  src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot");
+  src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff") format("woff"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.svg#Avenir Medium") format("svg");
+}
+
 body {
   background-color: #272727;
 }
 
 .head-title.text-center h1 {
   color: #ffffff;
-  font-family: Avenir;
-  font-size: 60pt;
+  font-family: "Avenir Black LINK";
+  font-size: 45pt;
   font-weight: bold;
   letter-spacing: 3px;
 }
 
+h5 {
+  color: #efdab3;
+  font-family: "Avenir Medium LINK";
+  line-height: 20pt;
+  font-size: 21pt;
+}
+
+h6 {
+  color: #efdab3;
+  font-size: 14pt;
+  font-weight: lighter;
+  font-family: "Avenir Roman LINK";
+}
+
+img {
+  border: transparent;
+  border-radius: 1px;
+}
+
+.card {
+  margin: 10px;
+  border: none !important;
+}
+
+.left_panel_info {
+  margin-top: 20pt;
+  margin-left: -10pt;
+  max-width: 250px;
+}
+
+.right_panel_info {
+  margin-top: 15pt;
+}
+
+.card-cus-bottom {
+  background-color: #272727;
+}
+
 .bouton-image:before {
   content: "";
   width: 100px;
@@ -10911 +10967 @@
   border-color: transparent;
 }
 
+.inter_info:before {
+  background-image: url(/images/Button_Info_60.png?fed957d534034a220f3fb939523ba297);
+  content: "";
+  width: 60px;
+  height: 60px;
+}
+
+.inter_info:focus,
+.inter_info:active,
+.inter_info:hover {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.inter_like:before,
+.inter_like_filled:before {
+  background-image: url(/images/Hearth_Empty_60.png?07807b2bf7f8018c15473360e4cb97e0);
+  width: 60px;
+  height: 60px;
+}
+
+.inter_like_filled:before {
+  background-image: url(/images/Hearth_Filled_60.png?e1a8e6298bf4fdce9b9592128ee82e81);
+  width: 60px;
+  height: 60px;
+}
+
+.inter_like {
+  display: none;
+}
+
+.inter_like:focus,
+.inter_like:active,
+.inter_like:hover {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 .monBouton:before {
   background-image: url(/images/Button_Arrow_Small.png?a8cfe4b884bf46d3f59113e2a5fb1c4c);
 }

resources/sass/_custom.scss

@@ -1 +1 @@
 // Ready for custom styling
+@font-face {font-family: "Avenir Black LINK"; src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot"); src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff") format("woff"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.svg#Avenir Black") format("svg"); }
+@font-face {font-family: "Avenir Roman LINK"; src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot"); src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff") format("woff"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.svg#Avenir") format("svg"); }
+@font-face {font-family: "Avenir Medium LINK"; src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot"); src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff") format("woff"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.svg#Avenir Medium") format("svg"); }
 
 body
 {
@@ -8 +11 @@
 .head-title.text-center h1
 {
     color: $cusWhite;
-    font-family: Avenir;
-    font-size: 60pt;
+    font-family: "Avenir Black LINK";
+    font-size: 45pt;
     font-weight: bold;
     letter-spacing: 3px;
 }
 
+h5
+{
+    color: $cusBrown2;
+    font-family: "Avenir Medium LINK";
+    line-height: 20pt;
+    font-size: 21pt;
+}
+
+h6
+{
+    color: $cusBrown2;
+    font-size: 14pt;
+    font-weight: lighter;
+    font-family: "Avenir Roman LINK";
+}
+
+img
+{
+    border: transparent;
+    border-radius: 1px;
+}
+
+.card
+{
+    margin: 10px;
+    border: none !important;
+}
+
+.left_panel_info
+{
+    margin-top: 20pt;
+    margin-left: -10pt;
+    max-width: 250px;
+}
+
+.right_panel_info
+{
+    margin-top: 15pt;
+}
+
+.card-cus-bottom
+{
+    background-color: $cusBlack;
+}
+
 .bouton-image:before
 {
     content: "";
@@ -33 +81 @@
     border-color: transparent;
 }
 
+.inter_info:before
+{
+    background-image : url(../images/interface/Button_Info_60.png);
+    content: "";
+    width: 60px;
+    height: 60px;
+}
+
+.inter_info:focus, .inter_info:active, .inter_info:hover{
+    background-color: transparent !important;
+    border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.inter_like:before, .inter_like_filled:before
+{
+    background-image : url(../images/interface/Hearth_Empty_60.png);
+    width: 60px;
+    height: 60px;
+}
+
+.inter_like_filled:before
+{
+    background-image : url(../images/interface/Hearth_Filled_60.png);
+    width: 60px;
+    height: 60px;
+}
+
+.inter_like
+{
+    display: none;
+}
+
+
+.inter_like:focus, .inter_like:active, .inter_like:hover{
+    background-color: transparent !important;
+    border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
 .monBouton:before
 {
     background-image : url(../images/Button_Arrow_Small.png);

resources/views/favartefacts/index.blade.php

@@ -1 @@
-@extends('layouts.app')
+@extends('layouts.art')
 
 @section('title', 'Favorite artefacts')
 
-@section('breadcrumb')
-    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Favorite artefacts</li>
-@endsection
-
 @section('content')
-    <div class="jumbotron">
-        <div class="text-center">
-            <h1>Favorite artefacts</h1>
-            <p>
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                Morbi scelerisque luctus velit.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-        </div>
-    </div>
     {{--<p>The id of the user is {{$user->id}}</p>--}}
     @if(isset($artefacts))
         @if(count($artefacts) >= 1)
             @foreach($artefacts as $artefact)
                 <div class="artefacts-area mb-5">
                     <div class="card">
-                        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em">Artefact image</text></svg>
-                        <div class="card-body">
-                            <h5 class="card-title"><a href="{{ url('/artefact/' . $artefact[0]->id) }}">{{$artefact[0]->name}}</a> - {{$artefact[0]->author}}</h5>
-                            <h6 class="card-subtitle mb-2 text-muted">{{$artefact[0]->year}}, {{$artefact[0]->pages}} pages</h6>
-                            <p class="card-text">
-                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                                Morbi scelerisque luctus velit.
-                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                            </p>
+                        {{--<svg class="bd-placeholder-img card-img-top" width="100%" height="180" src="{{asset('images/artefacts/book_cover_01.jpg')}}" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>{{$artefact[0]->name}}</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>--}}
+                        <a href="{{ url('/artefact/' . $artefact[0]->id) }}">
+                            <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto>
+                        </a>
+                        <div class="container card-cus-bottom">
+                            <div class="flex-row row-list">
+                                <div class="col-xs-2 float-left left_panel_info">
+                                    <h5 class="card-title ">{{$artefact[0]->name}}</h5>
+                                    <h6 class="card-title">{{$artefact[0]->author}}</h6>
+                                </div>
+                                <div class="col-xs-2 float-right right_panel_info">
+                                    <div class="float-left">
+                                        <button id="info_butt_{{$artefact[0]->id}}" type="button" class="btn btn-primary bouton-image inter_info"></button>
+                                    </div>
+                                    <div class="float-right text-center">
+                                        <button id="like_butt_{{$artefact[0]->id}}" onclick="myFunction({{$artefact[0]->id}}, 1)" type="button" class="btn btn-primary bouton-image inter_like"></button>
+                                        <button id="like_butt2_{{$artefact[0]->id}}" onclick="myFunction({{$artefact[0]->id}}, 0)" type="button" class="btn btn-primary bouton-image inter_like_filled"></button>
+                                        <span class="likes_text">
+                                          <h6>{{$artefact['likes']}}</h6>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -57 +50 @@
             </li>
         </ul>
     @endif
+    <script>
+        function myFunction(id, type)
+        {
+            if(type === 1)
+            {
+                $('#like_butt_' + id).css('display', "none");
+                $('#like_butt2_' + id).css('display', "inline");
+            }
+            else
+            {
+                $('#like_butt_' + id).css('display', "inline");
+                $('#like_butt2_' + id).css('display', "none");
+            }
+        }
+    </script>
 @endsection