Fet Foto Gallery Design

This commit is contained in:
Andreas Stephanides
2020-03-05 01:10:44 +01:00
parent 5eddd2b66e
commit b15db69db6
8 changed files with 254 additions and 57 deletions

View File

@@ -1,7 +1,8 @@
{# -*-jinja2-*- #}
{% extends "layout.html" %}
{% extends "layoutfetbs3.html" %}
{% block content %}
<h1>{{post.title}}</h1>
<small> von {{post.author}} </small>
{{post.html | safe}}
{% if post.links.images |length > 0 %}
@@ -22,11 +23,11 @@
<div id="links">
{% for d in post.links.images %}
<a href="{{d.url}}" title="{{d.title}}">
<img src="{{d.thumb_url}}" alt="{{d.title}}" />
<img src="{{d.thumb_url}}" alt="{{d.title}}" class="img-thumbnail" />
</a>
{% endfor %}
</div>
<script src="/gallery/js/blueimp-gallery.min.js"></script>
<script src="/galleries/js/blueimp-gallery.min.js"></script>
<script>
document.getElementById('links').onclick = function(event) {
event = event || window.event

View File

@@ -0,0 +1,33 @@
{# -*-jinja2-*- #}
{% extends "layoutfetbs3.html" %}
{% block content %}
{{ post.html|safe }}
{% if post.links.subindexpages | length > 0 %}
<div class= "container-fluid" >
<div class="row">
{% for d in post.links.subindexpages %}
<div class="span6">
<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">
<small class="pull-right">{{d.date}} </small>
<h2> {{d.title}} </h2>
<div >{{d.desc}} </div>
</div>
</a>
</div>
{{ loop.cycle('','</div><div class="row">'.safe) }}
{% endfor %}
</div>
</div>
{% endif %}
{% endblock %}

View File

@@ -1,26 +1,69 @@
{# -*-jinja2-*- #}
<html>
<head></head>
<LINK href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<head>
<LINK href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/gallery/css/blueimp-gallery.min.css" />
<body>
<div class="container">
<div class="row">
<div class="col-12">
<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>
<!-- <link rel="stylesheet" href="/gallery/blue2fetat.css" />-->
</head>
{% block content %}
{% endblock %}
<body>
<div id="maincontainer" class="container-fluid">
<div class="row">
<div class="col-10 offset-1">
<div class="header_wrap">
<nav class="navbar navbar-expand-sm">
<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">
<img alt="Logo2014_64" src="/gallery/logo2014_64.png" style="float:left;height:50px" height="50">
Fachschaft Elektrotechnik
<hr>
</div>
<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="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>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,128 @@
{# -*-jinja2-*- #}
<html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://www.fet.at/logo2014_64.png">
<link rel="alternate" hreflang="de" href="/de/home/search" />
<link rel="alternate" hreflang="en" href="/en/home/search" />
<link rel="stylesheet" href="/galleries/blue2fetat.css" />
<link rel="stylesheet" href="/galleries/css/blueimp-gallery.min.css" />
<script src="https://www.fet.at/assets/application-7cbec5b180d121b587cfe58e2d4517d1.js" type="text/javascript"></script>
<title>Fetsite</title>
</head>
<body>
<div id="maincontainer" class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1 header_span">
<div class="header_wrap">
<div class="header hidden-print">
<a href="/home">
<!-- <span class="feticon-fet_logo fa-4x color-1"> </span>-->
<img alt="/galleries/Logo2014_64" height="50" src="/galleries/logo2014_64.png" style="float:left;height:50px" />
</a> </div>
<div class="header visible-print">
<img alt="Logo2014_64" height="50" src="/galleries/logo2014_64.png" style="float:left;height:50px" />
</div>
<div class="visible-print">
Fachschaft Elektrotechnik
<hr/>
</div>
<div id="menudiv" style="margin-top:12px" class="hidden-print">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- <a class="brand" href="#"></a>-->
<a class ="btn btn-navbar" data-toggle="collapse" data-parent="#menudiv" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav nav-pills nav-stacked">
<li><a href="/home">Startseite</a>
</li>
<li><a 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>
<ul class="nav nav-pills nav-stacked pull-right">
<li>
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" > <img alt="De" src="/flaggen/png/de.png" /> Deutsch<b class="caret"></b></a>-->
<!-- Split button -->
<div class="btn-group navbar-btn">
<button type="button" class="btn btn-link dropdown-toggle" data-hover="dropdown" aria-expanded="false">
<img alt="De" src="/flaggen/png/de.png" /> Deutsch
</button>
<button type="button" class="btn btn-link dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="/de"><img alt="At" src="/flaggen/png/at.png" /> Deutsch</a> </li>
<li><a href="/en"><img alt="Gb" src="/flaggen/png/gb.png" /> English</a> </li>
</ul></div>
</li><li>
<a href="/users/auth/ldap"><i class="ficon ffi1-academic"></i>FET Login</a>
</li></ul>
<!--<span class="pull-right"> <a href="/en"><img alt="Gb" src="/flaggen/png/gb.png" /> English</a>
</span>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});
</script>
<div class="row-fluid">
<div class="span10 offset1 header_span">
<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>
</body>
</html>

View File

@@ -1,5 +1,5 @@
{# -*-jinja2-*- #}
{% extends "layout.html" %}
{% extends "layoutfetbs3.html" %}
{% block content %}
<h1>{{post.title}}</h1>
@@ -10,8 +10,8 @@
<ul class="nav flex-column flex-sm-row " labeledby="up_head">
{% for d in post.links.subindexpages %}
<li class="nav-item">
<a href="{{d.url}}" class="nav-link">
<h6> {{d.title}} <small class="text-muted">{{d.desc}} </small> </h6>
<a href="{{d.url}}" class="nav-link"> <img src="{{d.thumb_url}}" alt="{{d.title}}" class="img-thumbnail" />
<h6> {{d.title}} ({{d.date}} <small class="text-muted">{{d.desc}} </small> </h6>
</a>
</li>
{% endfor %}
@@ -27,7 +27,8 @@
{% for d in post.links.subpages %}
<li class="nav-item">
<a href="{{d.url}}" class="nav-link text-info">
<h6> {{d.title}} <small class="text-muted">{{d.desc}} </small>
<h6> <img src="{{d.thumb_url}}" alt="{{d.title}}" class="img-thumbnail" />
{{d.title}} <small class="text-muted">{{d.desc}} </small>
</h6>
</a>