commit c5e7ba51a6fe470b9f3f84a2195c1e24d22f589d
Author: Ondřej Váně <onry.vane@gmail.com>
Date:   Wed Apr 15 17:32:08 2020 +0200

    Re #7817: Responzivní navigační lišta
    
    - přidání stínu do navigační lišty
    - přidání globálního stylu, pro odsazení obsahu stránky od navigačního menu

diff --git a/fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.css b/fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.css
index 25a3859..eda6d31 100644
--- a/fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.css
+++ b/fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.css
@@ -76,7 +76,10 @@ mat-nav-list a:hover {
 }
 
 .position-fixed {
-  position: fixed
+  position: fixed;
+  -webkit-box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 21px 1px rgba(0,0,0,0.75);
 }
 
 mat-sidenav-content {
diff --git a/fe/fulltextsearch/src/app/components/pages/browse/browse.component.html b/fe/fulltextsearch/src/app/components/pages/browse/browse.component.html
index 37cc136..84d470e 100644
--- a/fe/fulltextsearch/src/app/components/pages/browse/browse.component.html
+++ b/fe/fulltextsearch/src/app/components/pages/browse/browse.component.html
@@ -1,9 +1,11 @@
-<div class="text-box mat-elevation-z8">
-  <div class="card">
-    <h1 class="card-header">All documents</h1>
+<div class="page-top-margin">
+  <div class="text-box mat-elevation-z8">
+    <div class="card">
+      <h1 class="card-header">All documents</h1>
       <div>
         <app-table-browse></app-table-browse>
       </div>
+    </div>
   </div>
 </div>
 
diff --git a/fe/fulltextsearch/src/app/components/pages/help/help.component.html b/fe/fulltextsearch/src/app/components/pages/help/help.component.html
index 5d419b8..fd1d14f 100644
--- a/fe/fulltextsearch/src/app/components/pages/help/help.component.html
+++ b/fe/fulltextsearch/src/app/components/pages/help/help.component.html
@@ -1,55 +1,57 @@
-<div class="text-box">
-  <div class="card">
-    <h1 class="card-header">Help</h1>
-    <div class="card-body">
-      <h2 class="card-title">How it is works</h2>
-      <p class="card-text">Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus,
-        dolor nunc faucibus
-        libero, eget facilisis enim ipsum id lacus. Sed ac dolor sit amet purus malesuada congue. Integer pellentesque
-        quam vel velit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Donec quis nibh at
-        felis congue commodo. Integer pellentesque quam vel velit. Integer in sapien. Cum sociis natoque penatibus et
-        magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquet accumsan leo. Pellentesque habitant morbi
-        tristique senectus et netus et malesuada fames ac turpis egestas. In dapibus augue non sapien. Neque porro quisquam
-        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
-        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent id justo in neque elementum ultrices.
-        In convallis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio
-        a lectus. Mauris tincidunt sem sed arcu. Vivamus porttitor turpis ac leo.</p>
-      <h2 class="card-title">Manual</h2>
-      <p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Et harum quidem rerum facilis est et expedita
-        distinctio. Aenean id metus id velit ullamcorper pulvinar. Curabitur bibendum justo non orci. Etiam egestas
-        wisi a erat. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nulla non arcu lacinia neque faucibus
-        fringilla. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Quis autem vel eum iure reprehenderit
-        qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
-        nulla pariatur? Aliquam erat volutpat. Aliquam id dolor.</p>
-      <h2 class="card-title">FAQ</h2>
-      <p class="card-text">Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus,
-        dolor nunc faucibus
-        libero, eget facilisis enim ipsum id lacus. Sed ac dolor sit amet purus malesuada congue. Integer pellentesque
-        quam vel velit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Donec quis nibh at
-        felis congue commodo. Integer pellentesque quam vel velit. Integer in sapien. Cum sociis natoque penatibus et
-        magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquet accumsan leo. Pellentesque habitant morbi
-        tristique senectus et netus et malesuada fames ac turpis egestas. In dapibus augue non sapien. Neque porro quisquam
-        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
-        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent id justo in neque elementum ultrices.
-        In convallis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio
-        a lectus. Mauris tincidunt sem sed arcu. Vivamus porttitor turpis ac leo.</p>
-      <h2 class="card-title">Support</h2>
-      <p class="card-text">Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus,
-        dolor nunc faucibus
-        libero, eget facilisis enim ipsum id lacus. Sed ac dolor sit amet purus malesuada congue. Integer pellentesque
-        quam vel velit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Donec quis nibh at
-        felis congue commodo. Integer pellentesque quam vel velit. Integer in sapien. Cum sociis natoque penatibus et
-        magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquet accumsan leo. Pellentesque habitant morbi
-        tristique senectus et netus et malesuada fames ac turpis egestas. In dapibus augue non sapien. Neque porro quisquam
-        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
-        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent id justo in neque elementum ultrices.
-        In convallis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio
-        a lectus. Mauris tincidunt sem sed arcu. Vivamus porttitor turpis ac leo.</p>
-      <h2>Contact admin</h2>
-      <address>
-        <a href="mailto:jim@rock.com">jim@rock.com</a><br>
-        <a href="tel:+13115552368">(311) 555-2368</a>
-      </address>
+<div class="page-top-margin">
+  <div class="text-box">
+    <div class="card">
+      <h1 class="card-header">Help</h1>
+      <div class="card-body">
+        <h2 class="card-title">How it is works</h2>
+        <p class="card-text">Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus,
+          dolor nunc faucibus
+          libero, eget facilisis enim ipsum id lacus. Sed ac dolor sit amet purus malesuada congue. Integer pellentesque
+          quam vel velit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Donec quis nibh at
+          felis congue commodo. Integer pellentesque quam vel velit. Integer in sapien. Cum sociis natoque penatibus et
+          magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquet accumsan leo. Pellentesque habitant morbi
+          tristique senectus et netus et malesuada fames ac turpis egestas. In dapibus augue non sapien. Neque porro quisquam
+          est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+          incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent id justo in neque elementum ultrices.
+          In convallis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio
+          a lectus. Mauris tincidunt sem sed arcu. Vivamus porttitor turpis ac leo.</p>
+        <h2 class="card-title">Manual</h2>
+        <p class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Et harum quidem rerum facilis est et expedita
+          distinctio. Aenean id metus id velit ullamcorper pulvinar. Curabitur bibendum justo non orci. Etiam egestas
+          wisi a erat. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nulla non arcu lacinia neque faucibus
+          fringilla. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Quis autem vel eum iure reprehenderit
+          qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
+          nulla pariatur? Aliquam erat volutpat. Aliquam id dolor.</p>
+        <h2 class="card-title">FAQ</h2>
+        <p class="card-text">Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus,
+          dolor nunc faucibus
+          libero, eget facilisis enim ipsum id lacus. Sed ac dolor sit amet purus malesuada congue. Integer pellentesque
+          quam vel velit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Donec quis nibh at
+          felis congue commodo. Integer pellentesque quam vel velit. Integer in sapien. Cum sociis natoque penatibus et
+          magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquet accumsan leo. Pellentesque habitant morbi
+          tristique senectus et netus et malesuada fames ac turpis egestas. In dapibus augue non sapien. Neque porro quisquam
+          est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+          incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent id justo in neque elementum ultrices.
+          In convallis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio
+          a lectus. Mauris tincidunt sem sed arcu. Vivamus porttitor turpis ac leo.</p>
+        <h2 class="card-title">Support</h2>
+        <p class="card-text">Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus,
+          dolor nunc faucibus
+          libero, eget facilisis enim ipsum id lacus. Sed ac dolor sit amet purus malesuada congue. Integer pellentesque
+          quam vel velit. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Phasellus rhoncus. Donec quis nibh at
+          felis congue commodo. Integer pellentesque quam vel velit. Integer in sapien. Cum sociis natoque penatibus et
+          magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquet accumsan leo. Pellentesque habitant morbi
+          tristique senectus et netus et malesuada fames ac turpis egestas. In dapibus augue non sapien. Neque porro quisquam
+          est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+          incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent id justo in neque elementum ultrices.
+          In convallis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio
+          a lectus. Mauris tincidunt sem sed arcu. Vivamus porttitor turpis ac leo.</p>
+        <h2>Contact admin</h2>
+        <address>
+          <a href="mailto:jim@rock.com">jim@rock.com</a><br>
+          <a href="tel:+13115552368">(311) 555-2368</a>
+        </address>
+      </div>
     </div>
   </div>
 </div>
diff --git a/fe/fulltextsearch/src/app/components/pages/search/search.component.css b/fe/fulltextsearch/src/app/components/pages/search/search.component.css
index 1d54e15..7cd9d25 100644
--- a/fe/fulltextsearch/src/app/components/pages/search/search.component.css
+++ b/fe/fulltextsearch/src/app/components/pages/search/search.component.css
@@ -1,7 +1,3 @@
-.background {
-  margin-top: 30pt;
-}
-
 .container {
   height: 100%;
 }
diff --git a/fe/fulltextsearch/src/app/components/pages/search/search.component.html b/fe/fulltextsearch/src/app/components/pages/search/search.component.html
index 4286cad..ac8f041 100644
--- a/fe/fulltextsearch/src/app/components/pages/search/search.component.html
+++ b/fe/fulltextsearch/src/app/components/pages/search/search.component.html
@@ -1,4 +1,4 @@
-<div class="background">
+<div class="page-top-margin">
   <div class="container">
     <div class="row justify-content-center align-items-center">
       <app-search-box class="col-sm-10 col-md-8 col-lg-6"></app-search-box>
diff --git a/fe/fulltextsearch/src/app/components/pages/upload/upload.component.html b/fe/fulltextsearch/src/app/components/pages/upload/upload.component.html
index d31af24..140ed33 100644
--- a/fe/fulltextsearch/src/app/components/pages/upload/upload.component.html
+++ b/fe/fulltextsearch/src/app/components/pages/upload/upload.component.html
@@ -1,24 +1,27 @@
-<div class="text-box">
-  <div class="card">
-    <h1 class="card-header">Upload files</h1>
-    <div class="card-body">
-      <div class="row justify-content-center align-items-center">
-        <input type="file" (change)="onFilesSelected($event)" multiple #fileInput accept="image/jpeg, image/png, application/xml">
-        <button class="btn btn-outline-secondary" type="button" (click)="fileInput.click()">Pick files</button>
-        <button class="btn btn-outline-secondary" type="button" (click)="onUpload()">Upload</button>
-      </div>
-      <mat-progress-bar mode="determinate" [value]="progress" color="warn"></mat-progress-bar>
-      <div class="row justify-content-center align-items-center">
-        <h2>{{progress + '%'}}</h2>
-      </div>
-      <ul class="list-group">
-        <li class="list-group-item" *ngFor="let file of selectedFiles">
-          {{ file.name }}
-        </li>
-      </ul>
-      <div class="row justify-content-center align-items-center">
-        <h2>{{resultMessage}}</h2>
+<div class="page-top-margin">
+  <div class="text-box">
+    <div class="card">
+      <h1 class="card-header">Upload files</h1>
+      <div class="card-body">
+        <div class="row justify-content-center align-items-center">
+          <input type="file" (change)="onFilesSelected($event)" multiple #fileInput accept="image/jpeg, image/png, application/xml">
+          <button class="btn btn-outline-secondary" type="button" (click)="fileInput.click()">Pick files</button>
+          <button class="btn btn-outline-secondary" type="button" (click)="onUpload()">Upload</button>
+        </div>
+        <mat-progress-bar mode="determinate" [value]="progress" color="warn"></mat-progress-bar>
+        <div class="row justify-content-center align-items-center">
+          <h2>{{progress + '%'}}</h2>
+        </div>
+        <ul class="list-group">
+          <li class="list-group-item" *ngFor="let file of selectedFiles">
+            {{ file.name }}
+          </li>
+        </ul>
+        <div class="row justify-content-center align-items-center">
+          <h2>{{resultMessage}}</h2>
+        </div>
       </div>
     </div>
   </div>
 </div>
+
diff --git a/fe/fulltextsearch/src/styles.css b/fe/fulltextsearch/src/styles.css
index bfc6f11..6872af0 100644
--- a/fe/fulltextsearch/src/styles.css
+++ b/fe/fulltextsearch/src/styles.css
@@ -12,3 +12,8 @@ body {
   width: 50%;
   margin: auto;
 }
+
+/* tom margin of all pages */
+.page-top-margin {
+  margin-top: 30px;
+}
