design & fixes

blueimp/.github/workflows/nodejs.yml

@@ -0,0 +1,25 @@
+name: Node CI
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [8.x, 10.x, 12.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, build, and test
+        run: |
+          npm install
+          npm run build --if-present
+          npm test
+        env:
+          CI: true

blueimp/.gitignore

@@ -0,0 +1 @@
+node_modules

design

@@ -0,0 +1 @@
+/srv/fet2020/design1/

foto_gallery/__init__.py

@@ -15,7 +15,7 @@ import re
 from PIL import Image, ExifTags, ImageOps
 from functools import partial
 from flask_csp.csp import csp_header, csp_default
-
+import slugify
 cfg = Config("config.cfg")
 
 # Initialize application
@@ -25,10 +25,12 @@ app.logger.setLevel(logging.DEBUG)
 # Initialize FlatPages Index
 
 flatpages = FlatPagesIndex(app)
-flatpages_index.Links.endpoint="intern.post"
+flatpages_index.Page.page_defaults={"has_img":True}
-flatpages_index.Links.image_url=lambda s,x: url_for(s.endpoint,name=x)
+
-flatpages_index.Links.thumb_url=lambda s,x: url_for("intern.thumb",size=128,name=x)
+flatpages.cfg("url", lambda s,x: url_for("intern.post",name=x))
-flatpages_index.Links.image_url=lambda s,x: url_for("intern.post",name=x)
+flatpages.cfg("thumb_url", lambda s,x: url_for("intern.thumb",size=512,name=x))
+
+
 flatpages_index.Page.page_defaults={"type":"gallery"}
 flatpages.get('index')
 
@@ -37,8 +39,8 @@ app.logger.info('flatpages loaded %d pages' % len(flatpages._pages))
 app.logger.info("Data directory is: %s" % flatpages.root)
 app.logger.info("Url prefix;: %s" % cfg.url_prefix)
 
-csp_d=csp_default()
+#csp_d=csp_default()
-csp_d.update({'default-src':"'self' 'unsafe-inline'", 'script-src': "'unsafe-inline' 'self'"})
+#csp_d.update({'default-src':"'self' 'unsafe-inline'", 'script-src': "'unsafe-inline' 'self'"})
 
 
 
@@ -48,6 +50,19 @@ freezer = Freezer(app)
 page_blueprint  = Blueprint('intern', __name__)
 api_blueprint  = Blueprint('api', __name__)
 
+
+
+@app.template_filter()
+def thumbimage(post):
+    if post.thumb_url:
+        return post.thumb_url
+    elif len(post.images)>0:
+        return post.images[0]
+
+@app.template_filter()
+def slug(string):
+    return slugify.slugify(string)
+
 @page_blueprint.route('/thumb<int:size>/<path:name>')
 def thumb(size=64,name=''):
     if not size in [32,64,128,256,512]:
@@ -87,7 +102,7 @@ def thumb(size=64,name=''):
 
 @page_blueprint.route('/<path:name>/',strict_slashes=False)
 @page_blueprint.route('/')
-@csp_header()
+#@csp_header()
 def post(name=''):
     print("Post: %s" % name)
     page = flatpages.get(name)
@@ -134,5 +149,5 @@ def postjson(name='index'):
 
     
 app.register_blueprint(page_blueprint, url_prefix=cfg.url_prefix,static_folder='static')
-app.register_blueprint(api_blueprint, url_prefix="/api/"+cfg.url_prefix,static_folder='static')
+app.register_blueprint(api_blueprint, url_prefix=cfg.url_prefix+"/api/",static_folder='static')
 app.add_url_rule('%s/<path:name>' % cfg.url_prefix,'page', post)

foto_gallery/templates/gallery.html

@@ -1,9 +1,7 @@
 {# -*-jinja2-*- #}
-{% extends "layoutfetbs3.html" %}
+{% extends "layout.html" %}
 {% block head %}
 
-<script src="/galleries/js/blueimp-gallery.min.js"></script>
-<script src="/galleries/init.js"></script>
 
 
 {% endblock %}
@@ -12,6 +10,7 @@
 <h1>{{post.title}}</h1>
 <small> von {{post.author}} </small>
 {{post.html |  safe}}
+
 {% if post.links.images |length > 0 %}
 
 <hr/>
@@ -28,16 +27,17 @@
   <ol class="indicator"></ol>
 </div>
 
-<div id="links">
+<div id="links" class="grid-x">
   {% for d in post.links.images %}
-  <a href="{{d.url}}" title="{{d.title}}">
+ 
+  <a id="{{d.url | slug}}" href="{{d.url}}" title="{{d.title}}" class="cell medium-3 small-12 large-2">
     <img src="{{d.thumb_url}}" alt="{{d.title}}" class="img-thumbnail" />
   </a>
+ 
   {% endfor %}
 </div>
 {% endif %}
 
 
 
-
 {% endblock %}

foto_gallery/templates/gallery_index.html

@@ -1,16 +1,18 @@
 {# -*-jinja2-*- #}
-{% extends "layoutfetbs3.html" %}
+{% extends "layout.html" %}
 {% block content %}
 
 {{ post.html|safe }}
 
 
+
 {% if post.links.subindexpages | length > 0 %}
-<div class= "container-fluid" >
+
-<div class="row">
+<div class= "grid-container" >
+<div class="grid-x">
 
   {% for d in post.links.subindexpages %}
-  <div class="span6">
+  <div class="cell small-12 medium-4 large-3">
     <a href="{{d.url}}" class="gallery-block media">
         <img src="{{d.thumb_url }}" alt="{{d.title}}" class="img-thumbnail pull-left" />
         <div class="media-body">
@@ -19,10 +21,8 @@
 	        <div >{{d.desc}} </div>
         </div>
     </a>   
-
-    
   </div>
-  {{ loop.cycle('','</div><div class="row">')| safe }}
+  {# loop.cycle('','','</div><div class="row">')| safe #}
   {% endfor %}
 
 </div>

foto_gallery/templates/layout.html

@@ -1,69 +1,49 @@
-{# -*-jinja2-*- #}
+
-<html>
+
+<!doctype html>
+<html class="no-js" lang="en">
   <head>
-<LINK href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <meta charset="utf-8" />
-  <link rel="stylesheet" href="/gallery/css/blueimp-gallery.min.css" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FET DjangoLayout</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self'">
 
-<!--  <link rel="stylesheet" href="/gallery/blue2fetat.css" />-->
+    <link rel="stylesheet" href="/fotos/app.css">
+<script src="/fotos/jquery-3.5.1.min.js"></script>
+      <link rel="stylesheet" href="/fotos/css/blueimp-gallery.min.css" />
+      
+  
+    
+    <script src="/fotos/js/blueimp-gallery.min.js"></script>
+<script src="/fotos/init.js"></script>
+    {% block head %}
+    {% endblock %}
   </head>
-
-
 <body>
-    <div id="maincontainer" class="container-fluid">
-      <div class="row">
-	<div class="col-10 offset-1">
 
-	  <div class="header_wrap">
+<div class="top-bar" id="main-menu">
-	    <nav class="navbar navbar-expand-sm">
+<div class="top-bar-left"><a href="/">
-
+<img style="height:40px; width:40px" src="/assets/img/logo2014_64.png"/></a>
-	      <div class="header d-print-none hidden-print">
-		<a href="/home">
-		  <img alt="Logo2014_64" src="/gallery/logo2014_64.png" style="float:left;height:50px" height="50">
-		</a>
 </div>
-	      <div class="header d-print-block d-none">
+<div class="top-bar-right">
-		<img alt="Logo2014_64" src="/gallery/logo2014_64.png" style="float:left;height:50px" height="50">
+    <ul class="menu vertical medium-horizontal expanded medium-text-center">
-	      
+     <li class=""><a href="/">Home</a> </li>
-		Fachschaft Elektrotechnik 
+      <li class=""><a href="/">Aktuelles</a> </li>
-		<hr>
+        <li class=""><a href="#">Info</a>  </li>
-	      </div>
+      <li class=""><a href="#">Team</a> 
-	      <div  id="menudiv" class="collapse navbar-collapse navbar-expand-sm">
-		<ul class="nav nav-pills nav-stacked">
-		  <li class="nav-item"><a class="nav-link" href="/home">Startseite</a>
       </li>
-		  <li class="nav-item"><a class="nav-link" href="/rubriken">Neuigkeiten</a></li>
-	          
-	          <li><a href="/themengruppen">Information</a></li>
-		  <li><a href="/members">Mitarbeiter</a></li>
-		  <li><a href="/galleries">Fotos</a></li>
-		    <li><a href="/studien">Studien/Beispielsammlung</a></li>
-		  <li> <a href="/home/search">Suche</a></li>
-		    <li> <a href="/home/kontakt">Kontakt</a></li>
-		    
     </ul>
 </div>
-	      
-	    </nav>
-	  </div>
-	</div>
 </div>
 
-      <div class="row">
+<div class="grid-container">
-	<div class="col-10 offset-1">
-	  <nav class="breadcrumb" style="background-color: #FFF">
-	    {% for b in post.links.breadcrumbs %}
-	    <a href="{#url_for('page',name=b.path)#}{{b.url}}" class="breadcrumb-item">{{b.title}} </a> /
-	    {% endfor %}
-
-	  </nav>
-
 {% block content %}
 {% endblock %}
-
-
-	</div>
-      </div>
-
 </div>
+<!--  App.js -->
+  <script src="/fotos/app.js"></script>
+ {% block scr %}
+ {% endblock %}
 </body>
 </html>

run.py

@@ -5,5 +5,5 @@ if __name__ == "__main__":
     if len(sys.argv) > 1 and sys.argv[1] == "build":
         freezer.freeze()
     else:
-        app.run(host='0.0.0.0',port=4444, debug=True)
+        app.run(host='0.0.0.0',port=8002, debug=True)
 

static/img

@@ -0,0 +1 @@
+design/static/img

static/init.js

@@ -9,6 +9,30 @@ $(
   link = target.src ? target.parentNode : target,
   options = { index: link, event: event },
   links = this.getElementsByTagName('a')
-  blueimp.Gallery(links, options)
+  options['onslide']=function(index,slide) {
+     console.log(index)
+     console.log($(`#links a:nth-child(${index})`).attr('id'))
+     history.replaceState(null,null,'#'+$(`#links a:nth-child(${index+1})`).attr('id'))
     }
+  options['onclose']=function(){
+      history.pushState(null,null,'#')
+  }
+  blueimp.gallery=blueimp.Gallery(links, options)
+ 
+
+  }
+    window.onpopstate = function(){
+        console.log(`popped state ${$(location).attr('hash')}`)
+        if($(location).attr('hash')=="") {
+            blueimp.gallery.close()
+        }else {
+        $($(location).attr('hash')).trigger('click');
+        }
+
+    }
+    console.log($(location).attr('hash').substr(1))
+    $($(location).attr('hash')).trigger('click');
+
+
+      
   })

uwsgi.ini

@@ -4,7 +4,7 @@ uid = 33
 gid = 33
 master = true
 # No. of processes can be increased
-processes = 9
+processes = 3
 chown-socket =www-data:www-data
 virtualenv = /srv/flask-fet-fotos/.env
 pythonpath = /srv/flask-fet-fotos/
@@ -17,7 +17,7 @@ module = foto_gallery
 callable= app
 wsgi-file = run.py
 logdate = true
-#logger = file:/srv/simple_sample_flat_index/uwsgi.log
+logger = file:/srv/flask-fet-fotos/uwsgi.log
 loglevel = debug
 gevent = 100
 vacuum=true