commit 1bcdcb058f8b80487fc3f8b3a81675d905d38ad6
Author: Adam Mištera <amistera@students.zcu.cz>
Date:   Fri May 8 21:40:11 2020 +0200

    Issue #7955 @1h
    [+] Vizualizace metadat
    [+] Zprovoznění like/unlike
    [+] Oprava dokumentace

diff --git a/app/Http/Controllers/ArtefactController.php b/app/Http/Controllers/ArtefactController.php
index 251e6d8..9133d7d 100644
--- a/app/Http/Controllers/ArtefactController.php
+++ b/app/Http/Controllers/ArtefactController.php
@@ -70,7 +70,7 @@ class ArtefactController extends Controller
     }
 
     /**
-     * Likes metadata given by its id.
+     * Likes artefact given by its id.
      *
      * @param $id int id of metadata
      * @return \Illuminate\Http\RedirectResponse
@@ -86,7 +86,7 @@ class ArtefactController extends Controller
     }
 
     /**
-     * Unlikes metadata given by its id.
+     * Unlikes artefact given by its id.
      *
      * @param $id int id of metadata
      * @return \Illuminate\Http\RedirectResponse
diff --git a/app/Http/Controllers/DetailsController.php b/app/Http/Controllers/DetailsController.php
index c9e45f5..4cef5e3 100644
--- a/app/Http/Controllers/DetailsController.php
+++ b/app/Http/Controllers/DetailsController.php
@@ -3,12 +3,16 @@
 namespace App\Http\Controllers;
 
 use App\ArtefactUser;
+use App\User;
 use Illuminate\Http\Request;
 use App\Metadata;
 use App\Artefact;
+use Illuminate\Support\Facades\Auth;
 
 class DetailsController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
@@ -32,17 +36,53 @@ class DetailsController extends Controller
      * Display the specified resource.
      *
      * @param  int  $id
-     * @return \Illuminate\Http\Response
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
     public function show($id)
     {
-        $data = array(
-            'id' => $id,
-            'arrArtefact' => Artefact::find($id),
-            'likes' => Artefact::find($id)->users()->count(),
-            'metadata' => Metadata::where('artefact_id', $id)->get()
-        );
-        return view('detail.index') -> with($data);
+        if (is_null(Artefact::find($id)))
+        {
+            return view('detail.index', ['metadata' => []]);
+        }
+
+        $metadata = Artefact::find($id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+        foreach($metadata as $item)
+        {
+            $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+        }
+
+        return view('detail.index', ['metadata' => $metadata]);
     }
 
+    /**
+     * Likes metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function like($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->attach($metadata);
+
+        return back()->withInput();
+    }
+
+    /**
+     * Unlikes metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->detach($metadata);
+
+        return back()->withInput();
+    }
 }
diff --git a/public/css/app.css b/public/css/app.css
index 463608c..1de8698 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10969,6 +10969,10 @@ body .carousel .carousel-caption {
   background-color: rgba(239, 218, 179, 0.5);
 }
 
+body .container {
+  margin-top: 4.99055rem;
+}
+
 body .text {
   font-weight: 400;
   font-size: 8pt;
@@ -11040,17 +11044,29 @@ body .auth .form-control {
   border-radius: 0;
 }
 
+body .auth .form-control:focus {
+  border-color: #ffffff;
+  box-shadow: none;
+}
+
+body .auth .card-body {
+  padding-bottom: 0px;
+  padding-top: calc(28vh - 4.99055rem);
+}
+
 body input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 50px #272727 inset;
+  -webkit-box-shadow: 0 0 0 50px #272727 inset !important;
   -webkit-text-fill-color: #ffffff;
+  background-color: #272727 !important;
 }
 
 body input:-webkit-autofill:active,
 body input:-webkit-autofill:focus,
 body input:-webkit-autofill:visited,
 body input:-webkit-autofill:hover {
-  -webkit-box-shadow: 0 0 0 50px #272727 inset;
+  -webkit-box-shadow: 0 0 0 50px #272727 inset !important;
   -webkit-text-fill-color: #ffffff;
+  background-color: #272727 !important;
 }
 
 body .card-body {
@@ -11069,11 +11085,14 @@ body .form-control {
   color: #ffffff;
   box-shadow: none;
   font-size: 8pt;
+  outline: none;
 }
 
 body .form-control:active,
 body .form-control:focus,
-body .form-control:visited {
+body .form-control:visited,
+body .form-control:hover {
+  outline: none;
   background-color: #272727;
   margin-top: -1px;
   border-top-color: #272727;
@@ -11138,7 +11157,7 @@ body .pin-left {
   display: inline-block;
   margin: 12rem 50px 0px -5rem;
   position: fixed;
-  top: 0;
+  top: 28vh;
   bottom: 0;
   text-align: left;
   width: 100%;
@@ -11336,6 +11355,7 @@ body .artefact-area .artefact-likes {
 }
 
 body .metadata-area h2 {
+  color: #ddd1b9;
   font-weight: 600;
   font-size: 12pt;
 }
@@ -11430,6 +11450,22 @@ body .metadata-area .metadata-text .artefact-info .artefact-author {
   font-size: 7pt;
 }
 
+body .metadata-area .metadata-text .artefact-info .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 3.125rem;
+  height: 3.125rem;
+  margin-right: 0;
+}
+
+body .metadata-area .metadata-text .artefact-info .inter_like:hover,
+body .metadata-area .metadata-text .artefact-info .inter_like:focus,
+body .metadata-area .metadata-text .artefact-info .inter_like:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
   background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
   width: 3.125rem;
@@ -11528,6 +11564,14 @@ body .category-h2 {
   border: 0.59055rem solid transparent;
 }
 
+.top-bar {
+  padding-bottom: 4.59055rem;
+  background-color: #272727;
+  position: fixed;
+  width: 100%;
+  top: 0;
+}
+
 .arrow-left {
   margin-left: 80%;
   border-right: 0.59055rem solid #272727;
@@ -11542,6 +11586,10 @@ body .category-h2 {
   left: 0;
 }
 
+.separator {
+  border-bottom: 1px solid #272727;
+}
+
 .sidenav {
   height: 100%;
   width: 250px;
@@ -11566,6 +11614,39 @@ body .category-h2 {
   background-color: #ffffff;
 }
 
+.sidenav a:active,
+.sidenav a:focus,
+.sidenav a .active {
+  color: #ffffff;
+  background-color: #ead4b0;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  color: #272727;
+  background-color: #ffffff;
+}
+
+.logo-kaplicky {
+  position: fixed;
+  top: 0;
+  left: calc(50vw - 50pt);
+  margin-top: 2rem;
+}
+
+.vertical-center {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.error {
+  color: #ffffff;
+  font-size: xx-large;
+  display: block;
+  text-align: center;
+}
+
 @media screen and (max-height: 450px) {
   .sidenav a {
     font-size: 18px;
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index 7a90af9..39abedf 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -436,6 +436,7 @@ body {
     .metadata-area {
 
         h2 {
+            color: $theme-color-two;
             font-weight: $font-weight-two;
             font-size: 12pt;
         }
@@ -530,6 +531,23 @@ body {
                     font-size: 7pt;
                 }
 
+                .inter_like {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                        width: 3.125rem;
+                        height: 3.125rem;
+                        margin-right: 0;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
                 .inter_like_filled {
 
                     &:before {
diff --git a/resources/views/artefact/view.blade.php b/resources/views/artefact/view.blade.php
index 29335fd..2f61696 100644
--- a/resources/views/artefact/view.blade.php
+++ b/resources/views/artefact/view.blade.php
@@ -39,7 +39,6 @@
                                     <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
                                         <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
                                     </a>
-
                                 @endif
                                 <h6 class="artefact-likes">{{$artefact->likes}}</h6>
                             </div>
diff --git a/resources/views/detail/index.blade.php b/resources/views/detail/index.blade.php
index 2ceba4e..1a812bb 100644
--- a/resources/views/detail/index.blade.php
+++ b/resources/views/detail/index.blade.php
@@ -2,57 +2,71 @@
 
 @section('title', 'Detail')
 
-@section('breadcrumb')
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/') }}">Home</a></li>
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/artefact') }}">Artefacts</a></li>
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/artefact/' . $id) }}">Artefact</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Notes</li>
-@endsection
-
 @section('content')
     <div class="container">
-        <div class="jumbotron mt-5">
-            <div class="text-center">
-                @if (isset($arrArtefact))
-                    <h1>Notes list</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>
-                @else
-                    <h2>Given artefact does not exist!</h2>
-                @endif
+        <div class="metadata-area">
+            <div class="text-center mt-5">
+                <h2>notes</h2>
             </div>
-        </div>
-        @if(isset($arrArtefact))
-            <div class="artefact-area text-center mb-4">
-                <h2>{{$arrArtefact->name}}</h2>
-                <h4>{{$arrArtefact->author}}, {{$arrArtefact->year}}</h4>
-                <h5 class="text-muted">{{$arrArtefact->pages}} pages, <i class="fas fa-thumbs-up"></i> {{$likes}}</h5>
-            </div>
-            @if(count($metadata) > 0)
-                <ul class="list-group">
-                    @foreach($metadata as $meta)
-                        <div class="note-area mb-3">
-                            <li class="list-group-item">
-                                On {{$meta->page}} page:<br>
-                                {{$meta->noteCZ}}<br>
-                                {{$meta->noteEN}}<br>
-                            </li>
+            <span class="arrow-down"></span>
+
+            @if(!empty($metadata) || count($metadata) > 0)
+                @foreach($metadata as $meta)
+                    <div  id="row_{{$meta->id}}" class="row text-page">
+                        <div class="pin-horizontal">
+                            <div class="metadata">
+                                <span>page {{$meta->page}}</span>
+                                <a href="#meta_{{$meta->id}}" class="arrow-down" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')"></a>
+                            </div>
                         </div>
-                    @endforeach
-                </ul>
+                        <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                            <p>
+                                {{$meta->noteEN}}
+                            </p>
+                            <div class="artefact-info">
+                                <div class="artefact-name">
+                                    {{$meta->artefact->name}}
+                                </div>
+                                <div class="artefact-author">
+                                    {{$meta->artefact->author}}
+                                </div>
+                                <div class="text-center">
+                                    @if ($meta->favourite)
+                                        <a href="{{  action('DetailsController@unlike', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                        </a>
+                                    @else
+                                        <a href="{{  action('DetailsController@like', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                        </a>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
             @else
-                <ul class="list-group">
-                    <li class="list-group-item">
-                        <h3>No notes for this BOOK were found!</h3>
-                    </li>
-                </ul>
+                <div class="text-center mt-5">
+                    <h2>No metadata!</h2>
+                </div>
             @endif
-        @endif
+        </div>
     </div>
+
+    <script>
+        function openNote(element) {
+            let metadata = $(element);
+            let showed = metadata.find(".metadata-text").hasClass('show');
+
+            if (showed === false)
+            {
+                metadata.find('.pin-horizontal').addClass("white-pin");
+            }
+            else
+            {
+                metadata.find('.pin-horizontal').removeClass("white-pin");
+            }
+
+        }
+    </script>
 @endsection
diff --git a/routes/web.php b/routes/web.php
index 6c3e624..06c6137 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -20,6 +20,8 @@ Route::get('/artefact/{id}', 'ArtefactController@view');
 Route::get('/artefact/like/{id}', 'ArtefactController@like');
 Route::get('/artefact/unlike/{id}', 'ArtefactController@unlike');
 Route::get('/category/{id}', 'ArtefactController@showCategory');
+Route::get('/detail/like/{id}', 'DetailsController@like');
+Route::get('/detail/unlike/{id}', 'DetailsController@unlike');
 Route::resource('/detail', 'DetailsController', array('only' => array('index', 'show')));
 Route::resource('/categories', 'CategoriesController', array('only' => array('index')));
 Route::resource('/favartefacts', 'FavoriteArtefactsController', array('only' => array('index', 'show', 'store')));
