Revize 0218d5c7

Issue #8050 @3h
[+] Vytvoření komponenty pro knihy na desktop
[+] Stylování komponenty a testování napojení na controller

public/css/app.css

@@ -11704 +11704 @@
   margin-bottom: 3rem;
 }
 
+.books-component .book-area .card-cus-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.books-component .book-area .card-cus-bottom .book-arrow:after {
+  content: "";
+  bottom: 3rem;
+  position: absolute;
+  border-top: 1.25rem solid transparent;
+  border-bottom: 1.25rem solid transparent;
+}
+
+.books-component .book-area .card-cus-bottom .book-arrow-left:after {
+  left: 25%;
+  border-right: 1.25rem solid #ddd1b9;
+}
+
+.books-component .book-area .card-cus-bottom .book-arrow-right:after {
+  right: 25%;
+  border-left: 1.25rem solid #ddd1b9;
+}
+
+.books-component .book-area .card-cus-bottom .likes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.books-component .book-area .card-cus-bottom .likes .inter_like,
+.books-component .book-area .card-cus-bottom .likes .inter_like_filled {
+  margin: 0 auto;
+}
+
+.books-component .book-area .card-cus-bottom .likes .inter_like:before,
+.books-component .book-area .card-cus-bottom .likes .inter_like_filled:before {
+  margin-right: 0;
+  height: 5rem;
+  width: 5rem;
+}
+
+.books-component .book-area .card-cus-bottom .likes .artefact-likes {
+  font-size: 12pt;
+  padding: 0;
+}
+
+.books-component .info-area {
+  color: #ddd1b9;
+  margin-top: 0.625rem;
+  padding-left: 5rem;
+  /* could be use to hide overflowing notes
+  max-height: 80vh;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+      width: 0 !important
+  } */
+}
+
+.books-component .info-area h3 {
+  font-weight: 600;
+}
+
+.books-component .info-area .switch-view {
+  float: right;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.books-component .info-area .artefact-notes {
+  display: none;
+  color: #ddd1b9;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal {
+  border-bottom: 0.042rem solid #ddd1b9;
+  display: inline-block;
+  margin: 2.75rem 2rem 0 0;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal:after {
+  content: "";
+  background-color: #ddd1b9;
+  position: relative;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+  display: block;
+  margin-left: auto;
+  top: 0.25rem;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal .metadata span {
+  font-size: 12pt;
+  font-weight: 600;
+}
+
+.books-component .info-area .artefact-notes .pin-horizontal .metadata .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 #ddd1b9;
+  margin: 0 0.5rem 0 0.5rem;
+}
+
+.books-component .info-area .artefact-notes .white-pin {
+  color: #ffffff;
+  border-bottom: 0.042rem solid #ffffff;
+}
+
+.books-component .info-area .artefact-notes .white-pin:before {
+  content: "";
+  background-color: #ffffff;
+}
+
+.books-component .info-area .artefact-notes .white-pin .metadata .arrow-down {
+  border-top: 0.25rem solid #ffffff;
+}
+
+.books-component .info-area .artefact-notes .metadata-text {
+  font-size: 12pt;
+  color: #ffffff;
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 5rem;
+  height: 5rem;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like:hover,
+.books-component .info-area .artefact-notes .metadata-text .inter_like:focus,
+.books-component .info-area .artefact-notes .metadata-text .inter_like:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 5rem;
+  height: 5rem;
+}
+
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:hover,
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:focus,
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.books-component .info-area .inter_info {
+  float: right;
+  color: #ffffff;
+  padding-right: 1rem;
+}
+
+.books-component .info-area .inter_info:before {
+  background-image: url(/images/Button_Info_White.svg?eeeba6da4f02d7b457f5ed048a356fc6);
+  width: 1.875rem;
+  height: 1.875rem;
+}
+
+.books-component .info-area .inter_info:hover,
+.books-component .info-area .inter_info:focus,
+.books-component .info-area .inter_info:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 @media screen and (max-height: 450px) {
   .sidenav a {
     font-size: 18px;
@@ -11768 +11959 @@
     color: #272727;
     background-color: #ffffff;
   }
+
+  .books-component .info-area {
+    padding-left: 1.5625rem;
+  }
 }
 
 @media only screen and (max-width: 540px) {

public/images/Button_Info_White.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ffffff;}.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/js/app.js

@@ -37057 +37057 @@
 
 $(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);
-  });
+
+  if (display_width < 720) {
+    $(".metadata").each(function () {
+      var metadata = $(this);
+      var width = metadata.width();
+      metadata.css("margin-left", display_width / 2 - width);
+    });
+  }
 });
 
 /***/ }),

resources/images/interface/Button_Info_White.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ffffff;}.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/js/app.js

@@ -4 +4 @@
 $(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);
-    });
+    if (display_width < 720)
+    {
+        $(".metadata").each(function() {
+            let metadata = $(this);
+            let width = metadata.width();
 
+            metadata.css("margin-left", (display_width / 2)  - width);
+        });
+    }
 });

resources/sass/_custom.scss

@@ -853 +853 @@
     margin-bottom: 3rem;
 }
 
+// books component
+.books-component {
+
+    .book-area {
+        .card-cus-bottom {
+
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+
+            .book-arrow {
+                &:after {
+                    content: '';
+                    bottom: 3rem;
+                    position: absolute;
+                    border-top: 1.25rem solid transparent;
+                    border-bottom: 1.25rem solid transparent;
+                }
+            }
+
+            .book-arrow-left {
+                &:after {
+                    left: 25%;
+                    border-right: 1.25rem solid $theme-color-two;
+                }
+            }
+
+            .book-arrow-right {
+               &:after {
+                   right: 25%;
+                   border-left: 1.25rem solid $theme-color-two;
+               }
+            }
+
+            .likes {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .inter_like, .inter_like_filled {
+                    margin: 0 auto;
+                    &:before {
+                        margin-right: 0;
+                        height: 5rem;
+                        width: 5rem;
+                    }
+                }
+
+                .artefact-likes {
+                    font-size: 12pt;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .info-area {
+        color: $theme-color-two;
+        margin-top: 0.625rem;
+        padding-left: 5rem;
+
+        /* could be use to hide overflowing notes
+        max-height: 80vh;
+        overflow-y: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            width: 0 !important
+        } */
+
+        h3 {
+            font-weight: $font-weight-two;
+        }
+
+        .switch-view {
+            float: right;
+            color: $theme-color-one;
+            cursor: pointer;
+        }
+
+        .artefact-notes {
+            display: none;
+            color: $theme-color-two;
+
+            .pin-horizontal {
+                border-bottom: .042rem solid $theme-color-two;
+                display: inline-block;
+                margin: 2.75rem 2rem 0 0;
+
+                &:after {
+                    content: '';
+                    background-color: #ddd1b9;
+                    position: relative;
+                    height: .5rem;
+                    width: .5rem;
+                    border-radius: 50%;
+                    display: block;
+                    margin-left: auto;
+                    top: .25rem;
+                }
+
+                .metadata {
+                    position: relative;
+                    display: flex;
+                    align-items: baseline;
+
+                    span {
+                        font-size: 12pt;
+                        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: 12pt;
+                color: $theme-color-one;
+                padding-top: 10px;
+                padding-left: 25px;
+                padding-right: 25px;
+
+                .inter_like {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                        width: 5rem;
+                        height: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
+                .inter_like_filled {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                        width: 5rem;
+                        height: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+
+        .inter_info {
+
+            float: right;
+            color: $theme-color-one;
+            padding-right: 1rem;
+
+            &:before {
+                background-image: url(../images/interface/Button_Info_White.svg);
+                width: 1.875rem;
+                height: 1.875rem;
+            }
+
+            &:hover, &:focus, &:active {
+                background-color: transparent !important;
+                border-color: transparent !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+        }
+    }
+}
+
 @media screen and (max-height: 450px) {
     .sidenav a {
         font-size: 18px;
@@ -912 +1117 @@
         color: $theme-color-five;
         background-color: $theme-color-one;
     }
+    .books-component {
+        .info-area{
+            padding-left: 1.5625rem;
+        }
+    }
 }
 
 @media only screen and (max-width: 540px) {

resources/views/components/books.blade.php

@@ +1 @@
+@foreach($artefacts as $artefact)
+<div class="container books-component">
+    <div class="row mt-5">
+
+        <div class="col-md-6 book-area">
+            @if (!is_null($artefact))
+                <div class="artefact-area">
+                    <div class="card">
+                        <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">
+                            <a class="book-arrow book-arrow-left artefact-link previous-artefact" href="{{$artefacts->previousPageUrl()}}"></a>
+                            <div class="likes">
+                                @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>
+                            <a class="book-arrow book-arrow-right artefact-link next-artefact" href="{{$artefacts->nextPageUrl()}}"></a>
+                        </div>
+                    </div>
+                </div>
+            @endif
+        </div>
+
+        <div class="col-md-6 info-area">
+            <div class="artefact-info">
+                <h3 class="switch-view"><a onclick="switchView()">notes</a></h3>
+                <h3 class="artefact-name">{{$artefact->name}}</h3>
+                <h4 class="artefact-author">{{$artefact->author}}</h4>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex id blandit placerat, dolor nibh venenatis dui, nec malesuada odio sem a leo. Nunc vulputate augue neque.
+                    Donec pulvinar sollicitudin arcu eget sagittis. Sed auctor, enim vel facilisis sodales, felis tellus rutrum quam, ac feugiat leo mauris ac purus. Nam placerat sed risus ut suscipit.
+                    Sed rutrum arcu eget mi fermentum ultrices. Donec egestas volutpat eros, ut tincidunt dolor pulvinar vitae.
+                </p>
+                <p>
+                    Curabitur sem elit, imperdiet ac laoreet vitae, rhoncus quis risus. Suspendisse varius dolor sem, at egestas massa suscipit non.
+                    Morbi sit amet dictum metus, sit amet sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis leo convallis aliquam scelerisque.
+                    Praesent vulputate porttitor quam at egestas. Proin eget orci ligula. Aenean malesuada, eros vitae convallis sagittis, neque leo ullamcorper ante, eu ultricies justo justo in lacus.
+                </p>
+
+
+            </div>
+
+            <div class="artefact-notes">
+                <button type="button" class="btn btn-primary button-image inter_info" onclick="switchView()"></button>
+                <h3 class="artefact-name">{{$artefact->name}}</h3>
+                <h4 class="artefact-author">{{$artefact->author}}</h4>
+                @if(count($artefact->metadata) > 0)
+                    @foreach($artefact->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>
+                            <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                                <p>
+                                    {{$meta->noteEN}}
+                                </p>
+                                <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>
+
+                    @endforeach
+                @else
+                    <h2>No favourite metadata yet!</h2>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>
+@endforeach
+
+<!-- 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>
+
+<script>
+    function switchView()
+    {
+        let info = $('.artefact-info');
+        let notes = $('.artefact-notes');
+
+        if (notes.css('display') === 'none')
+        {
+            notes.css('display', 'block');
+            info.css('display', 'none');
+
+            let parent_width = notes.width();
+
+            $(".metadata").each(function() {
+                let metadata = $(this);
+                let width = metadata.width();
+
+                metadata.css("margin-left", (parent_width / 2)  - width);
+            });
+        }
+        else
+        {
+            notes.css('display', 'none');
+            info.css('display', 'block');
+        }
+    }
+
+    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>