The navmenu section - first version working. TODO: email, phone and language picker

prosopopee/prosopopee.py

@@ -493,18 +493,29 @@ def build_gallery(settings, gallery_settings, gallery_path, template, galleries_
 
     Audio.base_dir = Path(".").joinpath(gallery_path)
     Audio.target_dir = Path(".").joinpath("build", gallery_path)
+
+
+    has_gotto = False;
+    gottolist = []
     if gallery_settings.get("sections"):
         for x in gallery_settings['sections']:
             if x['type'] not in gallery_settings:
                 gallery_settings[x['type'] + '_enabled'] = True
+            if x['type'] == 'header':
+                if x['menuid']:
+                    has_gotto = True
+                    gottolist.append(x)
 
     template_to_render = page_template if gallery_settings.get("static") else gallery_index_template
 
+
     html = template_to_render.render(
         settings=settings,
         gallery=gallery_settings,
         galleries=galleries_cover, # Can be False if there were no subgal sections (subgal_section branch)
         sub_index=sub_index, # TODO: Back button not generated (subgal_section)
+        has_goto=has_gotto, # Needed for the navmenu
+        gotolist=gottolist, # Needed for the navmenu
         Image=Image,
         Video=Video,
         Audio=Audio,
@@ -521,7 +532,7 @@ def build_gallery(settings, gallery_settings, gallery_path, template, galleries_
         open(Path("build").joinpath(gallery_path, "index.html"), "wb").write(html)
 
     # XXX shouldn't this be a call to build_gallery?
-    # Build light mode gallery
+    # Build light mode gallery - TODO: I think does not work in most cases anymore...
     if gallery_settings.get("light_mode", False) or (
             settings["settings"].get("light_mode", False) and
             gallery_settings.get("light_mode") is None

prosopopee/themes/exposure/static/css/style.css

@@ -182,43 +182,43 @@ footer a {
     color: #111;
 }
 
-nav {
+nav.old {
   background-color: #FBFBFB;
   width: 100%;
   height: 56px;
   line-height: 56px;
 }
 
-body.night nav {
+body.night nav.old {
   background-color: #061F2F;;
 }
 
-nav .nav-wrapper {
+nav.old .nav-wrapper {
   position: relative;
   height: 100%;
   margin: 0px auto;
   max-width: 1280px;
 }
 
-nav ul {
+nav.old ul {
   margin: 0;
 }
 
-nav ul li {
+nav.old ul li {
   padding: 0;
   list-style-type: none;
   display:inline-block;
 }
 
-nav a.first-item-menu {
+nav.old a.first-item-menu {
   margin-left: -42px;
 }
 
-nav ul li.active {
+nav.old ul li.active {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-nav ul a {
+nav.old ul a {
   transition: background-color .3s;
   font-size: 1rem;
   display: block;
@@ -236,7 +236,7 @@ nav ul a {
   text-align: center;
 }
 
-nav ul li > a.item-menu::before {
+nav.old ul li > a.item-menu::before {
     content: "/";
     margin-right: 22px;
     font-size: 18px;
@@ -437,3 +437,102 @@ input:checked + .slider:before {
   }
 }
 
+/* These are added for the top nav menu for gallery pages (navmenu section) */
+/* As you can see these use html id so should not clash with the default menu navigation CSS */
+/* BEGIN: navmenu */
+/* z-index: 2147483647; is the maximum, but I lowered it a bit */ 
+.navmenu {
+ margin-bottom: 0;
+ margin-top: 0;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ z-index: 900;
+}
+
+#nav { /*nav rész szélességes, színe*/
+ width:100vw;
+ display:block;
+ background-color:#11bf22;
+ border-bottom:8px solid #006f18;
+}
+
+#nav ul { /*lista stílus igazítás*/
+ padding:0;
+ margin:0;
+ list-style: none;
+ position: relative;
+ }
+
+#nav ul:After {
+ content: "";
+ display:block;
+ clear:both;
+ } 
+
+#nav ul li {
+ display:list-item;
+ list-style: none;
+ float:left;
+ background-color:#11bf22;
+ }
+
+#nav ul li i { /*betűméret - szélesség (ikonsor)*/
+ font-size:30px;
+ width:40px;
+ } 
+
+#nav ul li a { /*betűméret - menü szöveg*/
+ display:block;
+ padding:15px 30px;
+ color:#FFF;
+ font-size:18px;
+ text-decoration:none;
+ font-family: Georgia, serif;
+ text-align:center;
+}
+
+#nav li a:hover { background-color: #5bbcb9; } /*hover szín*/
+
+/* Dropdown */
+/* almenük elrejtése */
+#nav ul ul {
+ display: none;
+ position: absolute; top: 80px;
+}
+
+/* hover-re megjelenítés */
+#nav ul li:hover > ul {
+ display:list-item;
+}
+
+/* almenük lista nézetben */
+#nav ul ul li {
+ width:210px;
+ float:none;
+ position: relative;
+ border-bottom:none;
+}
+
+#nav ul ul li i { /*almenü ikon igazítása*/
+ margin-right:12px;
+ }
+
+#nav ul ul li a {
+ padding:16px 20px;
+ text-align:left;
+ }
+
+/* 3. almenü követően */
+nav ul ul ul li {
+ position: absolute relative;
+ top:-80px;
+ left:200px;
+}
+
+#nav li > a:after { content: ' >'; }
+
+#nav > li > a:after {content: ' >'; }
+
+#nav li > a:only-child:after {content: ''; }
+/* END: navmenu */

prosopopee/themes/exposure/templates/gallery-index.html

@@ -7,6 +7,9 @@
     <link type="text/css" rel="stylesheet" href="../static/css/style.css"  media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
+    {% if gallery.navmenu_enabled %}
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet">
+    {% endif %}
     {% if gallery.panorama_enabled %}
     <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
     {% endif %}

prosopopee/themes/exposure/templates/menu.html

@@ -1,4 +1,4 @@
-<nav>
+<nav class="old">
   <div class="nav-wrapper">
     <ul>
       {% for line in settings.menu %}

prosopopee/themes/exposure/templates/sections/header.html

@@ -1,7 +1,7 @@
 {% if section.background or section.color %}
 <div class="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
   {% endif %}
-  <section class="header">
+  <section class="header" id="{{section.menuid}}">
     <h1 class=header>{{ section.text }}</h1>
   </section>
   {% if section.background or section.color %}

prosopopee/themes/exposure/templates/sections/navmenu.html

@@ -0,0 +1,41 @@
+{% if section.background or section.color %}
+<div class="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
+{% endif %}
+  <section class="navmenu">
+    <nav id="nav">
+     <ul>
+       <li><a href="#"><i class="fas fa-home fa-2x"></i><Br/>{{ section.home_text }}</a></li>
+       {% if has_goto %}
+       <li><a href="#"><i class="fas fa-list"></i><Br/>{{ section.goto_text }}</a>
+         <ul>
+             {% for goto in gotolist %}
+             <li><a href="#{{ goto.menuid }}"><i class="fas fas fa-arrow-right"></i>{{ goto.text }}</a></li>
+             {% endfor %}
+         </ul>
+       </li>
+       {% endif %}
+       {% if section.blog %}
+       <li><a href="{{ section.blog }}"><i class="fas fa-newspaper"></i><Br/>Blog</a></li>
+       {% endif %}
+       <li><a href="#"><i class="fas fa-envelope-square"></i><Br/>{{ section.contact_text }}</a>
+         <ul>
+         {% if section.facebook %}
+         <li><a href="{{section.facebook}}"><i class="fab fa-facebook"></i>Facebook</a></li>
+         {% endif %}
+         {% if section.linkedin %}
+         <li><a href="{{section.linkedin}}"><i class="fab fa-linkedin"></i>Linkedin</a></li>
+         {% endif %}
+         {% if section.twitter %}
+         <li><a href="{{section.twitter}}"><i class="fab fa-twitter"></i>Twitter</a></li>
+         {% endif %}
+         {% if section.github %}
+         <li><a href="{{section.github}}"><i class="fab fa-github"></i>Github</a></li>
+         {% endif %}
+         </ul>
+       </li>
+     </ul>
+    </nav>
+  </section>
+{% if section.background or section.color %}
+</div>
+{% endif %}