Revize 70f69b41

Issue #7956 @1.5h
[+] Stylování stránky informace o artefaktu
[+] Přidání obrázků pro malé info a like

app/Http/Controllers/ArtefactController.php

@@ -60 +60 @@
     public function view($id)
     {
         $artefact = Artefact::find($id);
+        $artefact['likes'] = Artefact::find($id)->users()->count();
 
         return view('artefact.view', ['artefact' => $artefact]);
     }

public/css/app.css

@@ -6383 +6383 @@
   text-align: left;
   text-align: start;
   text-decoration: none;
-  text-shadow: none;    
+  text-shadow: none;
   text-transform: none;
   letter-spacing: normal;
   word-break: normal;
@@ -11148 +11148 @@
   background-repeat: no-repeat;
 }
 
-body .artefacts-area h5 {
+body .artefacts-area h5,
+body .artefact-area h5 {
   color: #ddd1b9;
   font-weight: 600;
   line-height: 20pt;
   font-size: 21pt;
 }
 
-body .artefacts-area h6 {
+body .artefacts-area h6,
+body .artefact-area h6 {
   color: #ddd1b9;
   font-size: 14pt;
   font-weight: 400;
 }
 
-body .artefacts-area img {
+body .artefacts-area img,
+body .artefact-area img {
   border: transparent;
   border-radius: 1px;
 }
 
-body .artefacts-area .card {
+body .artefacts-area .card,
+body .artefact-area .card {
   margin: 10px;
   border: none !important;
 }
 
-body .artefacts-area .left_panel_info {
+body .artefacts-area .left_panel_info,
+body .artefact-area .left_panel_info {
   margin-top: 15px;
   margin-left: -10px;
   max-width: 250px;
 }
 
-body .artefacts-area .right_panel_info {
+body .artefacts-area .right_panel_info,
+body .artefact-area .right_panel_info {
   margin-top: 15px;
   margin-right: -15px;
 }
 
-body .artefacts-area .card-cus-bottom {
+body .artefacts-area .card-cus-bottom,
+body .artefact-area .card-cus-bottom {
   background-color: #272727;
 }
 
-body .artefacts-area .inter_info:before {
+body .artefacts-area .inter_info:before,
+body .artefact-area .inter_info:before {
   background-image: url(/images/Button_Info_50.png?cf6e509b9294d4138459f1846c7effdf);
   width: 60px;
   height: 60px;
 }
 
-body .artefacts-area .inter_like {
+body .artefacts-area .inter_like,
+body .artefact-area .inter_like {
   display: none;
 }
 
-body .artefacts-area .inter_like:before {
+body .artefacts-area .inter_like:before,
+body .artefact-area .inter_like:before {
   background-image: url(/images/Hearth_Empty_50.png?d969cd4d381634ef975e503608b3ab48);
   width: 60px;
   height: 60px;
 }
 
-body .artefacts-area .inter_like_filled:before {
+body .artefacts-area .inter_like_filled:before,
+body .artefact-area .inter_like_filled:before {
   background-image: url(/images/Hearth_Filled_50.png?77bb26c3aba063c00aba1a2f07059d71);
   width: 60px;
   height: 60px;
@@ -11210 +11221 @@
 
 body .artefacts-area .inter_info,
 body .artefacts-area .inter_like,
-body .artefacts-area .inter_like_filled {
+body .artefacts-area .inter_like_filled,
+body .artefact-area .inter_info,
+body .artefact-area .inter_like,
+body .artefact-area .inter_like_filled {
   padding: 0;
 }
 
@@ -11222 +11236 @@
 body .artefacts-area .inter_like:hover,
 body .artefacts-area .inter_like_filled:focus,
 body .artefacts-area .inter_like_filled:active,
-body .artefacts-area .inter_like_filled:hover {
+body .artefacts-area .inter_like_filled:hover,
+body .artefact-area .inter_info:focus,
+body .artefact-area .inter_info:active,
+body .artefact-area .inter_info:hover,
+body .artefact-area .inter_like:focus,
+body .artefact-area .inter_like:active,
+body .artefact-area .inter_like:hover,
+body .artefact-area .inter_like_filled:focus,
+body .artefact-area .inter_like_filled:active,
+body .artefact-area .inter_like_filled:hover {
   background-color: transparent !important;
   border-color: transparent !important;
   outline: none !important;
   box-shadow: none !important;
 }
 
+body .artefact-area .card-cus-bottom .left_panel_info,
+body .artefact-area .card-cus-bottom .right_panel_info {
+  margin: 0.9375rem 0 0 0;
+}
+
+body .artefact-area .card-cus-bottom .right_panel_info .float-right {
+  margin-right: -0.35rem;
+}
+
+body .artefact-area .artefact-name {
+  font-weight: 600;
+  font-size: 8pt;
+  line-height: 10pt;
+  margin-bottom: 0;
+}
+
+body .artefact-area .artefact-author {
+  font-size: 7pt;
+  line-height: 8pt;
+}
+
+body .artefact-area .inter_like {
+  display: block;
+}
+
+body .artefact-area .inter_like:before {
+  background-image: url(/images/Hearth_Empty_Small.png?252b4c7a69920aa18f2fc75a93aaa90a);
+  width: 25px;
+  height: 19px;
+}
+
+body .artefact-area .inter_info {
+  padding-right: 1rem;
+}
+
+body .artefact-area .inter_info:before {
+  background-image: url(/images/Button_Info_Small.png?9bc35ac07e9ec5a6b75d9af964e80512);
+  width: 29px;
+  height: 29px;
+}
+
+body .artefact-area .artefact-likes {
+  font-weight: 600;
+  font-size: 5pt;
+  padding-right: 0.25rem;
+}
+
 body .metadata-area h2 {
   font-weight: 600;
   font-size: 12pt;
@@ -11368 +11438 @@
   color: #272727;
 }
 
+body .cat-col-md-2 {
+  margin: 2%;
+}
+
 body .btn.btn-dark.cat-tile {
   border-color: #ead4b0;
   border-radius: 0;
@@ -11380 +11454 @@
   box-shadow: none !important;
   font-size: 8mm;
   word-wrap: break-word;
-  margin: 10pt 32pt;
   height: 40mm;
-  width: 86%;
+  width: 100%;
 }
 
 body .btn.btn-dark.cat-tile:active,
@@ -11394 +11467 @@
   color: #272727;
 }
 
-body .btn.button-square.cat-enter-butt {
-  position: fixed;
-  bottom: 8%;
-  right: 40%;
-  display: none;
+body .category-h2 {
+  color: #ead4b0;
 }
 
 .arrow {
@@ -11479 +11549 @@
   .head-title.text-center h1 {
     font-size: 23pt;
     padding-top: 50pt;
-    margin-left: 36pt;
     white-space: nowrap;
   }
 

resources/sass/_custom.scss

@@ -287 +287 @@
         }
     }
 
-    .artefacts-area {
+    .artefacts-area, .artefact-area {
 
         h5 {
             color: $theme-color-two;
@@ -364 +364 @@
         }
     }
 
+    .artefact-area {
+
+        .card-cus-bottom {
+            .left_panel_info, .right_panel_info {
+                margin: 0.9375rem 0 0 0;
+            }
+
+            .right_panel_info {
+                .float-right {
+                    margin-right: -0.35rem;
+                }
+            }
+        }
+
+        .artefact-name {
+            font-weight: $font-weight-two;
+            font-size: 8pt;
+            line-height: 10pt;
+            margin-bottom: 0;
+        }
+
+        .artefact-author {
+            font-size: 7pt;
+            line-height: 8pt;
+        }
+
+        .inter_like {
+            display: block;
+
+            &:before {
+                background-image: url(../images/interface/Hearth_Empty_Small.png);
+                width: 25px;
+                height: 19px;
+            }
+        }
+
+        .inter_info {
+
+            padding-right: 1rem;
+            &:before {
+                background-image: url(../images/interface/Button_Info_Small.png);
+                width: 29px;
+                height: 29px;
+            }
+        }
+
+        .artefact-likes {
+            font-weight: $font-weight-two;
+            font-size: 5pt;
+            padding-right: 0.25rem;
+        }
+    }
+
     // Metadata area
     .metadata-area {
 

resources/views/artefact/view.blade.php

@@ -10 +10 @@
 
 
 @section('content')
-    <div class="container">
-        <div class="jumbotron mt-5">
-            <div class="text-center">
-                <h1>Artefact</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>
-
+    <div class="container py-4">
         @if (is_null($artefact))
             <div class="text-center">
                 <h2>Currently no artefacts available.</h2>
@@ -32 +18 @@
         @else
             <div class="artefact-area mb-5">
                 <div class="card">
-                    <div class="card-body">
-                        <h2 class="text-uppercase card-title">{{$artefact->name}}</h2>
-                        <h5>{{$artefact->author}}</h5>
-                        <h6 class="card-subtitle mb-2 text-muted">{{$artefact->year}}, {{$artefact->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>
-                        <p>
-                            @if (count($artefact->metadata) > 0)
-                                <a href="{{ url('/detail/' . $artefact->id) }}">Notes related to artefact</a>
-                            @endif
-                        </p>
+                    <a href="{{ url('/artefact/' . $artefact->id) }}">
+                        <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">
+                        <div class="col-xs-2 float-left left_panel_info">
+                            <h5 class="artefact-name">{{$artefact->name}}</h5>
+                            <h6 class="artefact-author">{{$artefact->author}}</h6>
+                        </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>
+                            </div>
+                            <div class="float-right text-center">
+                                <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>