Revize bfa73340

Issue #7997 @2h
[+] Přidání vektorového tlačítka informace
[+] Zprovoznění likování artefaktů
[+] Přidán modal pro obálku knihy
[+] Přidán modal pro informace o knize
[+] Refraktoring

app/Http/Controllers/ArtefactController.php

@@ -5 +5 @@
 use App\Artefact;
 use App\ArtefactCategory;
 use App\Category;
+use App\Metadata;
+use App\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
 
 class ArtefactController extends Controller
@@ -61 +64 @@
     {
         $artefact = Artefact::find($id);
         $artefact['likes'] = Artefact::find($id)->users()->count();
+        $artefact['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($id)) ? false : true;
 
         return view('artefact.view', ['artefact' => $artefact]);
     }
+
+    /**
+     * 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());
+        $artefact = Artefact::find($id);
+
+        $user->likesArtefacts()->attach($artefact);
+
+        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());
+        $artefact = Artefact::find($id);
+
+        $user->likesArtefacts()->detach($artefact);
+
+        return back()->withInput();
+    }
 }

public/css/app.css

@@ -11308 +11308 @@
 }
 
 body .artefact-area .inter_like:before {
-  background-image: url(/images/Hearth_Empty_Small.png?252b4c7a69920aa18f2fc75a93aaa90a);
-  width: 25px;
-  height: 19px;
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 1.563rem;
+  height: 1.25rem;
+}
+
+body .artefact-area .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 1.563rem;
+  height: 1.25rem;
 }
 
 body .artefact-area .inter_info {
@@ -11318 +11324 @@
 }
 
 body .artefact-area .inter_info:before {
-  background-image: url(/images/Button_Info_Small.png?9bc35ac07e9ec5a6b75d9af964e80512);
-  width: 29px;
-  height: 29px;
+  background-image: url(/images/Button_Info.svg?92f55a6c483b585543ec80f3fd3461de);
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
 body .artefact-area .artefact-likes {
@@ -11440 +11446 @@
   box-shadow: none !important;
 }
 
+body .modal {
+  font-weight: 400;
+  color: #ddd1b9;
+  font-size: 8pt;
+}
+
+body .modal .modal-header {
+  border-bottom: 1px solid #ddd1b9;
+}
+
+body .modal .modal-header .close {
+  color: #ddd1b9;
+  text-shadow: none;
+}
+
+body .modal .modal-content {
+  background-color: #272727;
+}
+
+body .modal .modal-footer {
+  border-top: 1px solid #ddd1b9;
+}
+
+body .modal .modal-footer .btn {
+  background-color: #ddd1b9;
+  color: #272727;
+}
+
+body .image-modal .close {
+  font-size: 24pt;
+  color: #ddd1b9;
+  text-shadow: none;
+  position: absolute;
+  top: 1rem;
+  right: 0.125rem;
+  opacity: 1;
+  cursor: pointer;
+  pointer-events: initial;
+}
+
 body .cat-col-md-2 {
   margin: 2%;
 }

public/images/Button_Info.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ead4b0;}.cls-2{fill:#1d1d1b;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>

public/images/Heart_Empty.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.14 23.15"><defs><style>.cls-1{fill:none;stroke:#f7dbc0;stroke-miterlimit:10;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M15.07,22.53s12.44-9.37,13.31-10.78c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S11.21-.86,5.77.82c-6,1.84-6.16,7.39-4,10.93C2.63,13.16,15.07,22.53,15.07,22.53Z"/></g></g></svg>

resources/images/interface/Button_Info.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ead4b0;}.cls-2{fill:#1d1d1b;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>

resources/sass/_custom.scss

@@ -350 +350 @@
         }
     }
 
-
+    // Artefact area
     .artefact-area {
 
         .card-cus-bottom {
@@ -381 +381 @@
             display: block;
 
             &:before {
-                background-image: url(../images/interface/Hearth_Empty_Small.png);
-                width: 25px;
-                height: 19px;
+                background-image: url(../images/interface/Heart_Empty.svg);
+                width: 1.563rem;
+                height: 1.25rem;
+            }
+        }
+
+        .inter_like_filled {
+            &:before {
+                background-image : url(../images/interface/Heart_Filled.svg);
+                width: 1.563rem;
+                height: 1.25rem;
             }
         }
 
@@ -391 +399 @@
 
             padding-right: 1rem;
             &:before {
-                background-image: url(../images/interface/Button_Info_Small.png);
-                width: 29px;
-                height: 29px;
+                background-image: url(../images/interface/Button_Info.svg);
+                width: 1.875rem;
+                height: 1.875rem;
             }
         }
 
@@ -522 +530 @@
         }
     }
 
+    // Modal
+    .modal {
+        font-weight: $font-weight-one;
+        color: $theme-color-two;
+        font-size: 8pt;
+
+        .modal-header {
+            border-bottom: 1px solid $theme-color-two;
+
+            .close {
+                color: $theme-color-two;
+                text-shadow: none;
+            }
+        }
+
+        .modal-content {
+            background-color: $theme-color-five;
+        }
+
+        .modal-footer {
+            border-top: 1px solid $theme-color-two;
+
+            .btn {
+                background-color: $theme-color-two;
+                color: $theme-color-five;
+
+            }
+        }
+    }
+
+    .image-modal {
+        .close {
+            font-size: 24pt;
+            color: $theme-color-two;
+            text-shadow: none;
+            position: absolute;
+            top: 1rem;
+            right: 0.125rem;
+            opacity: 1;
+            cursor: pointer;
+            pointer-events: initial;
+        }
+    }
+
     /*.content {
         position: relative;
 
@@ -553 +605 @@
         }
     }*/
 
-
-
     //CATEGORIES - ROW BLOCK
     .cat-col-md-2
     {

resources/views/artefact/view.blade.php

@@ -18 +18 @@
         @else
             <div class="artefact-area mb-5">
                 <div class="card">
-                    <a href="{{ url('/artefact/' . $artefact->id) }}">
+                    <a href="#imageModal" data-toggle="modal">
                         <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
                     </a>
                     <div class="card-cus-bottom">
@@ -28 +28 @@
                         </div>
                         <div class="col-xs-2 float-right right_panel_info">
                             <div class="float-left">
-                                <button id="info_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_info"></button>
+                                <button type="button" class="btn btn-primary button-image inter_info" data-toggle="modal" data-target="#informationModal"></button>
                             </div>
                             <div class="float-right text-center">
-                                <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                @if ($artefact->favourite)
+                                    <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                                        <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                    </a>
+                                @else
+                                    <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>
                         </div>
@@ -40 +49 @@
             </div>
         @endif
     </div>
+
+    <!-- Image modal -->
+    <div class="modal image-modal fade" id="imageModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            <div class="modal-content">
+                <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+            </div>
+        </div>
+    </div>
+
+    <!-- Information modal -->
+    <div class="modal fade" id="informationModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{{$artefact->name}} - {{$artefact->author}}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    Addition information about book.
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
 @endsection

routes/web.php

@@ -17 +17 @@
 
 Route::get('/artefact', 'ArtefactController@default');
 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::resource('/detail', 'DetailsController', array('only' => array('index', 'show')));
 Route::resource('/categories', 'CategoriesController', array('only' => array('index')));