Revize 3c062db9

Issue #7954 @2h
[+] Oprava řazení metadat podle čísla stránky
[+] Základní vizualizace stránky oblíbená metadata

app/Http/Controllers/FavoriteMetadataController.php

@@ -9 +9 @@
 
 class FavoriteMetadataController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
@@ -16 +18 @@
 
     public function index()
     {
-        $metadata = User::find(Auth::id())->likesMetadata()->get();
+        $metadata = User::find(Auth::id())->likesMetadata()->orderBy(self::ORDER_COLUMN)->get();
+        foreach($metadata as $item)
+        {
+            $item['artefact'] = Metadata::find($item->id)->artefact()->first();
+        }
 
         return view('favmetadata.index', ['metadata' => $metadata]);
     }

public/css/app.css

@@ -1 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);@import url(https://db.onlinewebfonts.com/c/2090551770be22b09600a40b0b4673b7?family=Avenir+Medium);@import url(https://db.onlinewebfonts.com/c/275de2221d9f0c4c9257d17f5a1e4006?family=Avenir+Black);@import url(https://db.onlinewebfonts.com/c/1a045963159927274c92b0444fb83c17?family=Avenir);@charset "UTF-8";
+@import url(https://fonts.googleapis.com/css?family=Nunito);@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap);@charset "UTF-8";
 
 /*!
  * Bootstrap v4.4.1 (https://getbootstrap.com/)
@@ -34 +34 @@
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
-  --font-family-sans-serif: "Nunito", sans-serif;
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
@@ -66 +66 @@
 
 body {
   margin: 0;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.6;
@@ -6376 +6376 @@
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-style: normal;
   font-weight: 400;
   line-height: 1.6;
@@ -6501 +6501 @@
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-style: normal;
   font-weight: 400;
   line-height: 1.6;
@@ -10882 +10882 @@
   }
 }
 
-@font-face {
-  font-family: "Avenir Black LINK";
-  src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot");
-  src: url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.woff") format("woff"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/275de2221d9f0c4c9257d17f5a1e4006.svg#Avenir Black") format("svg");
-}
-
-@font-face {
-  font-family: "Avenir Roman LINK";
-  src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot");
-  src: url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.woff") format("woff"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/1a045963159927274c92b0444fb83c17.svg#Avenir") format("svg");
-}
-
-@font-face {
-  font-family: "Avenir Medium LINK";
-  src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot");
-  src: url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.woff") format("woff"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0983e84d4a1963e075b5ae8ca12e2a4f.svg#Avenir Medium") format("svg");
-}
-
 body {
   background-color: #272727;
+  font-family: Nunito;
+  /*.form-control:focus {
+      background-color: $theme-color-five;
+      margin-top: -1px;
+      border-top-color: $theme-color-five;
+      border-left-color: $theme-color-five;
+      border-right-color: $theme-color-five;
+      border-bottom-color: 0.5pt $theme-color-one;
+      color: $theme-color-one;
+      box-shadow: none;
+      font-size: 8pt;
+  }*/
+  /*footer {
+      background: $theme-color-four;
+      color: $theme-color-five;
+      display: block;
+      height: 50px;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+  }*/
 }
 
 body .head-title h1 {
   color: #ffffff;
-  font-family: Avenir;
+  font-weight: 400;
   font-size: 60pt;
-  font-weight: bold;
   letter-spacing: 3px;
 }
 
@@ -10952 +10955 @@
   bottom: auto;
   transform: translateY(-50%);
   background-color: rgba(239, 218, 179, 0.5);
-  /*h2 {
-      font-family: Avenir Black;
-      font-size: 11pt;
-      letter-spacing: 3pt;
-      color: $white;
-
-  }*/
 }
 
 body .carousel .carousel-caption p {
@@ -10967 +10963 @@
 }
 
 body .text {
-  font-family: Avenir Roman;
+  font-weight: 400;
   font-size: 8pt;
   line-height: 9pt;
 }
 
 body .text2 {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 8pt;
 }
 
 body .kaplicky {
   color: #ffffff;
   font-size: 11pt;
-  font-family: Avenir Black;
+  font-weight: 900;
   letter-spacing: 3pt;
 }
 
 body .text-author {
-  font-family: Avenir Roman;
+  font-weight: 400;
   font-size: 7pt;
   color: #ead4b0;
 }
 
 body .text-number {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 5pt;
   color: #ead4b0;
 }
 
 body .text-headline {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 12pt;
   color: #ead4b0;
 }
 
 body .text-page {
-  font-family: Avenir Medium;
+  font-weight: 600;
   font-size: 7pt;
 }
 
+body .black {
+  color: #272727;
+}
+
+body .white {
+  color: #ffffff;
+}
+
+body .colored {
+  color: #ead4b0;
+}
+
 body .auth .card {
   border: none;
   text-align: center;
@@ -11022 +11030 @@
 body .auth .form-control {
   padding: 0px;
   height: 17pt;
+  border-radius: 0%;
 }
 
 body .card-body {
   background-color: #272727;
-  font-family: Avenir Roman;
+  font-weight: 400;
   color: #ead4b0;
 }
 
@@ -11042 +11051 @@
   font-size: 8pt;
 }
 
-body .form-control:focus {
+body .form-control:active,
+body .form-control:focus,
+body .form-control:visited {
   background-color: #272727;
   margin-top: -1px;
   border-top-color: #272727;
@@ -11051 +11062 @@
   border-bottom-color: 0.5pt #ffffff;
   color: #ffffff;
   box-shadow: none;
-  font-size: 8pt;
+}
+
+body .form-control.is-invalid {
+  box-shadow: none;
+  border-color: #ead4b0;
+  background-image: none;
+}
+
+body .form-control.is-invalid:active,
+body .form-control.is-invalid:focus,
+body .form-control.is-invalid:visited {
+  box-shadow: none;
+  border-color: #ead4b0;
 }
 
 body .button-square {
@@ -11062 +11085 @@
   border-radius: 0;
   width: 6.5rem;
   height: 2rem;
-  font-family: Avenir Roman;
+  font-weight: 400;
 }
 
 body .button-square:active,
@@ -11072 +11095 @@
   box-shadow: none;
 }
 
+body .pin-left:before {
+  content: "";
+  position: relative;
+  height: 0.35433rem;
+  width: 0.35433rem;
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: inline-block;
+  top: -0.35433rem;
+  left: -0.2rem;
+}
+
+body .pin-left {
+  border-left: 0.5pt solid #ead4b0;
+  display: inline-block;
+  margin: 10rem 50px 0px -5rem;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  text-align: left;
+  width: 100%;
+}
+
+body .pin-left .text {
+  margin-left: 0.5rem;
+}
+
+body .pin-left p {
+  margin-top: 0pt;
+  margin-bottom: 0pt;
+}
+
+body li {
+  list-style-type: none;
+}
+
 body .button-image {
   background-color: transparent;
   border-color: transparent;
@@ -11091 +11150 @@
 
 body .artefacts-area h5 {
   color: #ddd1b9;
-  font-family: "Avenir Medium LINK";
+  font-weight: 600;
   line-height: 20pt;
   font-size: 21pt;
 }
@@ -11099 +11158 @@
 body .artefacts-area h6 {
   color: #ddd1b9;
   font-size: 14pt;
-  font-weight: lighter;
-  font-family: "Avenir Roman LINK";
+  font-weight: 400;
 }
 
 body .artefacts-area img {
@@ -11171 +11229 @@
   box-shadow: none !important;
 }
 
-body .monButton:before {
-  background-image: url(/images/Button_Arrow_Small.png?a8cfe4b884bf46d3f59113e2a5fb1c4c);
+body .metadata-area {
+  color: #ddd1b9;
 }
 
-body .monButton:hover {
-  background-color: transparent;
-  border-color: #ead4b0;
+body .metadata-area h2 {
+  font-weight: 600;
+  font-size: 12pt;
 }
 
-body .monButton:focus {
-  background-color: transparent;
-  border-color: #ead4b0;
-  outline: none !important;
-  box-shadow: none !important;
+body .metadata-area .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  margin-left: 50vw;
 }
 
-body .monButton:active {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  outline: none !important;
-  box-shadow: none !important;
+body .metadata-area .pin-horizontal {
+  border-bottom: 0.5pt solid #ddd1b9;
+  display: inline-block;
+  margin: 50px 50px 0 0;
+}
+
+body .metadata-area .pin-horizontal:before {
+  content: "";
+  background-color: #ddd1b9;
+  position: relative;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+  display: inline-block;
+  top: 1.5rem;
+  left: 50vw;
+}
+
+body .metadata-area .pin-horizontal .arrow-down {
+  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;
+}
+
+body .metadata-area .metadata-text {
+  color: #ffffff;
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+body .metadata-area .metadata-text .artefact-info {
+  color: #ddd1b9;
+  margin-top: 10px;
+}
+
+body .metadata-area .metadata-text .artefact-info .artefact-name {
+  font-family: 600;
+  font-size: 8pt;
+}
+
+body .metadata-area .metadata-text .artefact-info .artefact-author {
+  font-family: 400;
+  font-size: 7pt;
 }
 
 body .content {
@@ -11212 +11312 @@
   color: #ead4b0;
   outline: none !important;
   box-shadow: none !important;
-  font-family: Avenir Medium;
+  font-weight: 600;
 }
 
 body .content .btn-categories:active {
@@ -11223 +11323 @@
   color: #272727;
 }
 
-body .content .btn-sm,
-body .content .btn-group-sm > .btn {
-  width: 120px;
-  height: 120px;
+body .btn.btn-dark.cat-tile {
+  border-color: #ead4b0;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  color: #ead4b0;
+  background-color: #272727;
+  text-align: center;
+  outline: none !important;
+  box-shadow: none !important;
+  font-size: 8mm;
+  word-wrap: break-word;
+  margin: 10pt 32pt;
+  height: 40mm;
+  width: 86%;
 }
 
-body .content .btn-dm {
-  width: 240px;
-  height: 240px;
+body .btn.btn-dark.cat-tile:active,
+body .btn.btn-dark.cat-tile:focus {
+  background-color: #efdab3;
+  border-color: #ead4b0;
+  outline: none !important;
+  box-shadow: none !important;
+  color: #272727;
 }
 
-body .content .btn-xl {
-  width: 360px;
-  height: 360px;
+body .btn.button-square.cat-enter-butt {
+  position: fixed;
+  bottom: 8%;
+  right: 40%;
+  display: none;
+}
+
+.arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 2rem;
+  cursor: pointer;
+  border: 0.59055rem solid transparent;
+}
+
+.arrow-left {
+  margin-left: 80%;
+  border-right: 0.59055rem solid #272727;
+  background-color: #ead4b0 !important;
+}
+
+.arrow-right {
+  border-left: 0.59055rem solid #ead4b0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+}
+
+.sidenav {
+  height: 100%;
+  width: 0;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #ead4b0;
+  overflow-x: hidden;
+  transition: 0.5s;
+}
+
+.sidenav a {
+  text-decoration: none;
+  color: #272727;
+  display: block;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #ead4b0;
+  background-color: #ffffff;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav a {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 990px) {
+  body {
+    /*.pin-left {
+        margin-left: -15rem;
+        margin-top: 11rem;
+    }*/
+  }
+}
+
+@media (max-width: 770px) {
+  body .pin-left {
+    margin-left: -33vw;
+    margin-top: 12rem;
+  }
 }
 
 @media only screen and (max-width: 540px) {
+  .sidenav {
+    width: 0;
+  }
+
   .head-title.text-center h1 {
-    font-size: 45pt;
+    font-size: 23pt;
+    padding-top: 50pt;
+    margin-left: 36pt;
+    white-space: nowrap;
   }
 
   .btn-circle.rounded-circle.btn-sm,

resources/sass/_custom.scss

@@ -364 +364 @@
         }
     }
 
+    .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;
+        }
+
+        .pin-horizontal {
+            border-bottom: .5pt solid $theme-color-two;
+            display: inline-block;
+            margin: 50px 50px 0 0;
+            &:before {
+                content: '';
+                background-color: $theme-color-two;
+                position: relative;
+                height: .5rem;
+                width: .5rem;
+                border-radius: 50%;
+                display: inline-block;
+                top: 1.5rem;
+                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-text {
+            color: $theme-color-one;
+            padding-top: 10px;
+            padding-left: 25px;
+            padding-right: 25px;
+
+            .artefact-info {
+                color: $theme-color-two;
+                margin-top: 10px;
+
+                .artefact-name {
+                    font-family: $font-weight-two;
+                    font-size: 8pt;
+                }
+
+                .artefact-author {
+                    font-family: $font-weight-one;
+                    font-size: 7pt;
+                }
+            }
+        }
+    }
+
     .content {
         position: relative;
 

resources/views/favmetadata/index.blade.php

@@ -9 +9 @@
 
 @section('content')
     <div class="container">
-        <div class="jumbotron mt-5">
-            <div class="text-center">
-                <h1>Favorite metadata</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 class="metadata-area">
+            <div class="text-center mt-5">
+                <h2>notes</h2>
             </div>
-        </div>
+            <!--<div class="text-right">
+                <button type="button" class="btn btn-primary button-image inter_info"></button>
+            </div> -->
 
-        <div class="metadata-area">
             @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>
+                @foreach($metadata as $meta)
+                    <div 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>
+                            </div>
+                        </div>
+                        <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                            {{$meta->noteEN}}
+                            <div class="artefact-info">
+                                <div class="artact-name">
+                                    {{$meta->artefact->name}}
+                                </div>
+                                <div class="artefact-author">
+                                    {{$meta->artefact->author}}
+                                </div>
+                            </div>
                         </div>
-                    @endforeach
-                </ul>
+                    </div>
+                @endforeach
             @else
-                <ul class="list-group">
-                    <li class="list-group-item">
-                        <h3>No notes for this BOOK were found!</h3>
-                    </li>
-                </ul>
+                <h2>No favourite metadata yet!</h2>
             @endif
         </div>
     </div>