Commit a6f43e35 authored by Malcolm's avatar Malcolm

Add template snippets useful with panels

* _contact_details.html - use an article to display contact details
* _map_section.html - display a map section
* _navigation.html - display a menu defined in Menuitem model
* _panel.html - display a panel calling snippets defined in Section model
* _panel_contact.html - display a panel which also contains a contact form
* _slideshow.html - display a bxslider slideshow
* base_company.html - base template that can be extended for a company site
                      (extends base_generic.html)
* base_generic.html - define a basic site
parent 24c23677
Pipeline #67893702 passed with stage
in 2 minutes and 36 seconds
{% comment %}
display an article containing some contact details in a panel.
Typical usage with the default css class ("content--contact") is to set the
snippet_name in the section to "compose/_contact_details.html".
If you need to change the css class name create a template and include this one
as follows::
{% include compose/_contact_details.html with outer_class="your-class-name" %}
Variables::
b - the article block containing contact details
outer_class - the css class name to apply to the section
{% endcomment %}
{% load static %}
{% load block_tags %}
{% load thumbnail %}
<div class="{% if outer_class %}{{ outer_class }}{% else %}content--contact{% endif %}">
{% if b.title %}
<h3>{{ b.title }}</h3>
{% endif %}
{% if b.description %}
<div>
{% autoescape off %}
{{ b.description }}
{% endautoescape %}
</div>
{% endif %}
</div>
{% if design %}<div>{% block_moderate b %}</div>{% endif %}
{% comment %}
display a map in a panel - w3c validator compliant use of iframe
Typical usage with if using the default style is to set the snippet_name in
the section to compose/_map_section.html
If you need to change the styles create a template and include this one as
follows::
{% include compose/_map_section.html with iframe_style="border: 1px solid blue; margin: 0; height: 400px; width: 100%; overflow: hidden;" %}
Variables::
b - the map block
iframe_style - styles to apply to the iframe
{% endcomment %}
{% load static %}
{% load block_tags %}
{% load thumbnail %}
<iframe style="{% if iframe_style %}{{ iframe_style }}{% else %}border:none; margin:0; width: 100%; height: 400px; overflow: hidden;{% endif %}" src="{% if b.map %}{% autoescape off %}{{ b.map.url }}{% endautoescape %}{% endif %}"></iframe>
{% if design %}<br>{% block_moderate b legend=b.block.page_section.section.name %}{% endif %}
<script>
function closeMenu() {
document.getElementById("navigation-toggle").checked = false;
}
</script>
<nav class="navigation-menu">
<input type="checkbox" class="navigation-toggle" id="navigation-toggle">
<label for="navigation-toggle" id="navigation-button"><span class="nav-icon">&nbsp;</span></label>
<div class="navigation-background">&nbsp;</div>
<ul>
{% for menu_item in main_menu_item_list %}
{% if menu_item.has_children %}
<li>
<a href="{{ menu_item.get_link }}" id="menulink{{ forloop.counter }}">{{ menu_item.title }}</a>
<ul>
{% for child in menu_item.menuitem_set.all %}
<li>
<a href="{{ child.get_link }}">{{ child.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a id="menulink{{ forloop.counter }}" onclick="closeMenu();" href="{{ menu_item.get_link }}">{{ menu_item.title }}</a>
</li>
{% endif %}
{% endfor %}
{% if user.is_authenticated %}
<li>
<a href="{% url 'project.dash' %}" class="icon-item" title="Dashboard">
<i class="fa fa-tachometer"></i> Dashboard
</a>
</li>
<li>
<a href="{% if design %}{{ view_url }}{% else %}{{ page.get_design_url }}?view={{ path }}{% endif %}"
class="icon-item" title="{% if design %}View this page{% else %}Design this page{% endif %}">
{% if design %}
<i class="fa fa-square-o"></i> View
{% else %}
<i class="fa fa-pencil-square-o"></i> Design
{% endif %}
</a>
</li>
<li>
<a href="{% url 'logout' %}" class="icon-item" title="Log out">
<i class="fa fa-sign-out"></i> Logout
</a>
</li>
{% endif %}
</ul>
{% block navigation_extra %}
{% endblock navigation_extra %}
</nav>
{% load static %}
{% load block_tags %}
{% load thumbnail %}
{% for p in panel_list %}
<div class="section" {% if p.picture and p.picture.image %}style="background-image: url({% thumbnail p.picture.image 1920x0 %});"{% endif %}></div>
<div class="content" id="{{ p.slug }}">
<div class="content--container">
<h2>{{p.title}}</h2>
{% for element in p.elements %}
{% for b in element.qs %}
{% include element.section.snippet_name %}
{% endfor %}
{% if design %}<div>{% block_add element.create_url element.section.name %}</div>{% endif %}
{% endfor %}
</div>
</div>
{% if design %}{% block_moderate p legend=p.block.page_section.section.name %}{% endif %}
{% endfor %}
{% if design %}<div>{% block_add panel_create_url panel_name %}</div>{% endif %}
{% load static %}
{% load block_tags %}
{% load thumbnail %}
{% for p in panel_list %}
<div class="section" {% if p.picture and p.picture.image %}style="background-image: url({% thumbnail p.picture.image 1920x0 %});"{% endif %}></div>
<div class="content" id="{{ p.slug }}">
<div class="content--container">
<h2>{{p.title}}</h2>
<div class="two-columns">
{% for element in p.elements %}
{% for b in element.qs %}
{% include element.section.snippet_name %}
{% endfor %}
{% if design %}<div>{% block_add element.create_url element.section.name %}</div>{% endif %}
{% endfor %}
</div>
<div class="two-columns form-pane">
<div>
<h3>Contact Form</h3>
{% if form %}
<style>
#enquiry-form #id_description { height: 195px; }
</style>
{% include '_form.html' with form_id="enquiry-form" inline_checkbox=True submit="Send Message" %}
{% endif %}
</div>
</div>
</div>
</div>
{% if design %}{% block_moderate p legend=p.block.page_section.section.name %}{% endif %}
{% endfor %}
{% if design %}<div>{% block_add panel_create_url panel_name %}</div>{% endif %}
{% load block_tags %}
{% load thumbnail %}
{% for picture in b.ordered_slideshow %}
{% if forloop.first %}
<ul class="{% if slideshow_class %}{{ slideshow_class }}{% else %}bxslider{% endif %}">
{% endif %}
<li>
<img src="{% if image_size %}{% thumbnail picture.image.image image_size crop %}{% else %}{% thumbnail picture.image.image 1440x300 crop='center' %}{% endif %}" title="{{ picture.image.title }}" class="{% if image_class %}{{ image_class }}{% else %}pure-img{% endif %}" />
</li>
{% if forloop.last %}
</ul>
{% endif %}
{% endfor %}
{% for picture in b.ordered_slideshow %}
{% if forloop.first %}
<div id="bx-pager">
{% endif %}
<a class="bx-thumbnail" data-slide-index="{{ forloop.counter0 }}">
<img src="{% if thumbnail_size %}{% thumbnail picture.image.image thumbnail_size crop %}{% else %}{% thumbnail picture.image.image 150x0 crop='center' %}{% endif %}" title="{{ picture.image.title }}" class="{% if thumbnail_class %}{{ thumbnail_class }}{% else %}pure-img{% endif %}" width="{% if thumbnail_width %}{{ thumbnail_width }}{% else %}150{% endif %}" />
</a>
{% if forloop.last %}
</div>
{% endif %}
{% endfor %}
{% if design %}
{% if design_legend %}
{% block_moderate b with forloop=forloop legend=design_legend %}
{% else %}
{% block_moderate b with forloop=forloop %}
{% endif %}
{% endif %}
{% extends 'compose/base_generic.html' %}
{% comment %}
A company site base template.
To use include {% extends 'compose/base_company.html' %}
The following sections are definedi in compose/base_generic.html::
analytics - default is google analytics using tag defined in blocksettings
title - page title
viewport - default is standard scaling
favicon - defines standard icons etc produced by
https://realfavicongenerator.net/
stylesheet - includes font-awesome (v4) and specifies two blocks
stylesheet_project and stylesheet_extra
stylesheet_project - project wide stylesheets this defaults to including the
web/css/web.css stylesheet but to include versioning you
will probably want to override this
stylesheet_extra - extra stylesheets for a particular page, for example to
include the image-modal stylesheet
{% block stylesheet_extra %}
<link rel="stylesheet" href="{% static 'compose/css/image-modal.css' %}">
{% endblock stylesheet_extra %}
page_container - contains two blocks page_header and content
page_header - define the page header
content - content block
page_footer - define the page footer
script - includes jquery and contains block script_extra
script_extra - allows specification of other scripts
This template overides title, page_header and page_footer and also defines::
site_name - Allows e.g the company name to be added to the page title
company_details - default displays logo and defines block called company_name
company_name - which you would typically define in your template as follows:
<p>The Company Limited</p>
navigation menu - which displays the menu from menuitems model and menu for
logged in users and defines a block called navigation_extra
navigation_extra - allows definition additional navigation items e.g social
media links
footer_left - allows definition of a left footer column
footer_centre - allows definition of a center footer column
footer_right - allows definition of a right footer column
footer_login - defaults to a providing a login link using font-awesome icon
{% endcomment %}
{% load static %}
{% load block_tags %}
{% load thumbnail %}
{% block title %}
{{ page.name }} - {% block site_name %}{% endblock site_name %}
{% endblock title %}
{% block page_header %}
<div class="company-name">
{% block company_details %}
<a href="{% url 'project.home' %}"><img src="{% static 'web/img/logo.png' %}" title="Logo" class="page-logo" /></a>
{% block company_name %}{% endblock company_name %}
{% endblock company_details %}
</div>
{% block navigation_menu %}
<script>
function closeMenu() {
document.getElementById("navigation-toggle").checked = false;
}
</script>
<nav class="navigation-menu">
<input type="checkbox" class="navigation-toggle" id="navigation-toggle">
<label for="navigation-toggle" id="navigation-button"><span class="nav-icon">&nbsp;</span></label>
<div class="navigation-background">&nbsp;</div>
<ul>
{% for menu_item in main_menu_item_list %}
{% if menu_item.has_children %}
<li>
<a href="{{ menu_item.get_link }}" id="menulink{{ forloop.counter }}">{{ menu_item.title }}</a>
<ul>
{% for child in menu_item.menuitem_set.all %}
<li>
<a href="{{ child.get_link }}">{{ child.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a id="menulink{{ forloop.counter }}" onclick="closeMenu();" href="{{ menu_item.get_link }}">{{ menu_item.title }}</a>
</li>
{% endif %}
{% endfor %}
{% if user.is_authenticated %}
<li>
<a href="{% url 'project.dash' %}" class="icon-item" title="Dashboard">
<i class="fa fa-tachometer"></i> Dashboard
</a>
</li>
<li>
<a href="{% if design %}{{ view_url }}{% else %}{{ page.get_design_url }}?view={{ path }}{% endif %}"
class="icon-item" title="{% if design %}View this page{% else %}Design this page{% endif %}">
{% if design %}
<i class="fa fa-square-o"></i> View
{% else %}
<i class="fa fa-pencil-square-o"></i> Design
{% endif %}
</a>
</li>
<li>
<a href="{% url 'logout' %}" class="icon-item" title="Log out">
<i class="fa fa-sign-out"></i> Logout
</a>
</li>
{% endif %}
</ul>
{% block navigation_extra %}
{% endblock navigation_extra %}
</nav>
{% endblock navigation_menu %}
{% endblock page_header %}
{% block page_footer %}
<div class="footer-section left">
{% block footer_left %}
{% endblock footer_left %}
</div>
<div class="footer-section center">
{% block footer_centre %}
{% endblock footer_centre %}
</div>
<div class="footer-section right">
{% block footer_right %}
{% endblock footer_right %}
{% block footer_login %}
{% if not user.is_authenticated %}
&nbsp; <a href="{% url 'login' %}" title="Login">
<i class="fontawesome fa fa-sign-in"></i>
</a>
{% endif %}
{% endblock footer_login %}
</div>
{% endblock page_footer %}
{% comment %}
A generic site base template.
To use include {% extends 'compose/base_generic.html' %} - though you may want
to use one of the templates that inherit from this e.g. base_company.html
The following sections are defined::
analytics - default is google analytics using tag defined in blocksettings
viewport - default is standard scaling
favicon - defines standard icons etc produced by
https://realfavicongenerator.net/
stylesheet - includes font-awesome (v4) and specifies two blocks
stylesheet_project and stylesheet_extra
stylesheet_project - project wide stylesheets this defaults to including the
web/css/web.css stylesheet but to include versioning you
will probably want to override this
stylesheet_extra - extra stylesheets for a particular page, for example to
include the image-modal stylesheet
{% block stylesheet_extra %}
<link rel="stylesheet" href="{% static 'compose/css/image-modal.css' %}">
{% endblock stylesheet_extra %}
page_container - contains two blocks page_header and content
page_header - define the page header
content - content block
page_footer - define the page footer
script - includes jquery and contains block script_extra
script_extra - allows specification of other scripts
{% endcomment %}
{% load static %}
{% load block_tags %}
{% load thumbnail %}
<!doctype html>
<html lang="en">
<head>
{% block analytics %}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ google_site_tag }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ google_site_tag }}');
</script>
{% endblock analytics %}
<meta charset="utf-8" />
{% block viewport %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock viewport %}
{% block favicon %}
<link rel="shortcut icon" href="{% static 'ico/favicon.ico' %}">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'ico/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'ico/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'ico/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'ico/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'ico/safari-pinned-tab.svg' %}" color="#5bbad5">
<meta name="msapplication-config" content="{% static 'ico/browserconfig.xml' %}">
<meta name="theme-color" content="#ffffff">
{% endblock favicon %}
<title>{% block title %}{{ page.name}}{% endblock title %}</title>
{% block stylesheet %}
<!--[if lt IE 9]>
<script src="{% static 'vendor/js/html5shiv/html5shiv.js' %}></script>
<![endif]-->
<link rel="stylesheet" href="{% static 'vendor/css/font-awesome/css/font-awesome.min.css' %}">
{% block stylesheet_extra %}
{% endblock stylesheet_extra %}
{% block stylesheet_project %}
<link rel="stylesheet" href="{% static 'web/css/web.css' %}" type="text/css">
{% endblock stylesheet_project %}
{% endblock stylesheet %}
</head>
<body>
<div class="page-container">
{% block page_container %}
<div class="page-header">
{% block page_header %}
{% endblock page_header %}
</div>
<div class="page-content">
{% block content %}
{% endblock %}
</div>
{% endblock page_container %}
</div>
<div id="footer" class="page-footer">
{% block page_footer %}
{% endblock page_footer %}
</div>
{% block script %}
<script src="{% static 'vendor/js/jquery-1.11.0.min.js' %}"></script>
{% block script_project %}
{% endblock script_project %}
{% block script_extra %}
{% endblock script_extra %}
{% endblock script %}
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment