Revize 3e4f999e

Issue #7954 @1.5h
[+] Oprava a dokončení stylování
[+] Přidání JS pro správné nastavení délky špendlíku

public/css/app.css

@@ -11229 +11229 @@
   box-shadow: none !important;
 }
 
-body .metadata-area {
-  color: #ddd1b9;
-}
-
 body .metadata-area h2 {
   font-weight: 600;
   font-size: 12pt;
 }
 
-body .metadata-area .metadata {
-  position: relative;
-  display: flex;
-  align-items: baseline;
-  margin-left: 50vw;
+body .metadata-area .arrow-down {
+  position: absolute;
+  top: 0.25rem;
+  right: 0;
+  margin: 2rem;
+  width: 0;
+  height: 0;
+  border-left: 0.59055rem solid transparent;
+  border-right: 0.59055rem solid transparent;
+  border-top: 0.59055rem solid #ddd1b9;
 }
 
 body .metadata-area .pin-horizontal {
-  border-bottom: 0.5pt solid #ddd1b9;
+  color: #ddd1b9;
+  border-bottom: 0.042rem solid #ddd1b9;
   display: inline-block;
-  margin: 50px 50px 0 0;
+  margin: 3.35rem 3.125rem 0 0;
 }
 
 body .metadata-area .pin-horizontal:before {
@@ -11263 +11265 @@
   left: 50vw;
 }
 
-body .metadata-area .pin-horizontal .arrow-down {
+body .metadata-area .pin-horizontal .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+body .metadata-area .pin-horizontal .metadata span {
+  font-weight: 600;
+}
+
+body .metadata-area .pin-horizontal .metadata .arrow-down {
+  position: relative;
+  top: 0;
+  right: 0;
   width: 0;
   height: 0;
-  border-left: 0.2rem solid transparent;
-  border-right: 0.2rem solid transparent;
-  border-top: 0.2rem solid #ddd1b9;
-  margin-left: 0.5rem;
+  border-left: 0.25rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-top: 0.25rem solid #ddd1b9;
+  margin: 0 0.5rem 0 0.5rem;
+}
+
+body .metadata-area .white-pin {
+  color: #ffffff;
+  border-bottom: 0.042rem solid #ffffff;
+}
+
+body .metadata-area .white-pin:before {
+  content: "";
+  background-color: #ffffff;
+}
+
+body .metadata-area .white-pin .metadata .arrow-down {
+  border-top: 0.25rem solid #ffffff;
 }
 
 body .metadata-area .metadata-text {
+  font-size: 8pt;
   color: #ffffff;
   padding-top: 10px;
   padding-left: 25px;
@@ -11285 +11315 @@
 }
 
 body .metadata-area .metadata-text .artefact-info .artefact-name {
-  font-family: 600;
+  font-weight: 600;
   font-size: 8pt;
 }
 
 body .metadata-area .metadata-text .artefact-info .artefact-author {
-  font-family: 400;
+  font-weight: 400;
   font-size: 7pt;
 }
 
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
+  background-image: url(/images/Hearth_Filled_50.png?77bb26c3aba063c00aba1a2f07059d71);
+  width: 50px;
+  height: 50px;
+}
+
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:hover,
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:focus,
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 body .content {
   position: relative;
 }

public/js/app.js

@@ -37052 +37052 @@
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
+__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js"); // Center metadata page text
+
+
+$(document).ready(function () {
+  var display_width = $(window).width();
+  $(".metadata").each(function () {
+    var metadata = $(this);
+    var width = metadata.width();
+    metadata.css("margin-left", display_width / 2 - width);
+  });
+});
 
 /***/ }),
 

resources/js/app.js

@@ -1 +1 @@
 require('./bootstrap');
+
+// Center metadata page text
+$(document).ready(function () {
+    let display_width = $(window).width();
+
+    $(".metadata").each(function() {
+        let metadata = $(this);
+        let width = metadata.width();
+
+        metadata.css("margin-left", (display_width / 2)  - width);
+    });
+
+});

resources/sass/_custom.scss

@@ -364 +364 @@
         }
     }
 
+    // Metadata area
     .metadata-area {
 
-        color: $theme-color-two;
-
         h2 {
             font-weight: $font-weight-two;
             font-size: 12pt;
         }
 
-        .metadata {
-            position: relative;
-            display: flex;
-            align-items: baseline;
-            margin-left: 50vw;
+        .arrow-down {
+            position: absolute;
+            top: 0.25rem;
+            right: 0;
+            margin: 2rem;
+            width: 0;
+            height: 0;
+            border-left: 0.59055rem solid transparent;
+            border-right: 0.59055rem solid transparent;
+            border-top: 0.59055rem solid $theme-color-two;
         }
 
         .pin-horizontal {
-            border-bottom: .5pt solid $theme-color-two;
+            color: $theme-color-two;
+            border-bottom: .042rem solid $theme-color-two;
             display: inline-block;
-            margin: 50px 50px 0 0;
+            margin: 3.35rem 3.125rem 0 0;
+
             &:before {
                 content: '';
                 background-color: $theme-color-two;
@@ -396 +402 @@
                 left: 50vw;
             }
 
-            .arrow-down {
-                width: 0;
-                height: 0;
-                border-left: 0.2rem solid transparent;
-                border-right: 0.2rem solid transparent;
-                border-top: 0.2rem solid $theme-color-two;
-                margin-left: 0.5rem;
+            .metadata {
+                position: relative;
+                display: flex;
+                align-items: baseline;
+
+                span {
+                    font-weight: $font-weight-two;
+                }
+
+                .arrow-down {
+                    position: relative;
+                    top: 0;
+                    right: 0;
+                    width: 0;
+                    height: 0;
+                    border-left: 0.25rem solid transparent;
+                    border-right: 0.25rem solid transparent;
+                    border-top: 0.25rem solid $theme-color-two;
+                    margin: 0 0.5rem 0 0.5rem;
+                }
             }
+        }
 
+        .white-pin {
+            color: $theme-color-one;
+            border-bottom: .042rem solid $theme-color-one;
 
+            &:before {
+                content: '';
+                background-color: $theme-color-one;
+            }
+
+            .metadata {
+                .arrow-down {
+                    border-top: 0.25rem solid $theme-color-one;
+                }
+            }
         }
 
         .metadata-text {
+            font-size: 8pt;
             color: $theme-color-one;
             padding-top: 10px;
             padding-left: 25px;
@@ -419 +453 @@
                 margin-top: 10px;
 
                 .artefact-name {
-                    font-family: $font-weight-two;
+                    font-weight: $font-weight-two;
                     font-size: 8pt;
                 }
 
                 .artefact-author {
-                    font-family: $font-weight-one;
+                    font-weight: $font-weight-one;
                     font-size: 7pt;
                 }
+
+                .inter_like_filled {
+
+                    &:before {
+                        background-image : url(../images/interface/Hearth_Filled_50.png);
+                        width: 50px;
+                        height: 50px;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
             }
         }
     }

resources/views/favmetadata/index.blade.php

@@ -13 +13 @@
             <div class="text-center mt-5">
                 <h2>notes</h2>
             </div>
-            <!--<div class="text-right">
-                <button type="button" class="btn btn-primary button-image inter_info"></button>
-            </div> -->
+            <span class="arrow-down"></span>
 
             @if(count($metadata) > 0)
                 @foreach($metadata as $meta)
-                    <div class="row text-page">
+                    <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}}"></a>
+                                <a href="#meta_{{$meta->id}}" class="arrow-down" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')"></a>
                             </div>
                         </div>
                         <div id="meta_{{$meta->id}}" class="metadata-text collapse">
                             {{$meta->noteEN}}
                             <div class="artefact-info">
-                                <div class="artact-name">
+                                <div class="artefact-name">
                                     {{$meta->artefact->name}}
                                 </div>
                                 <div class="artefact-author">
                                     {{$meta->artefact->author}}
                                 </div>
+                                <div class="text-center">
+                                    <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -44 +45 @@
             @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