diff --git a/ungleich_page/cms_plugins.py b/ungleich_page/cms_plugins.py
index c8dbe735..ca36ba9e 100644
--- a/ungleich_page/cms_plugins.py
+++ b/ungleich_page/cms_plugins.py
@@ -5,7 +5,8 @@ from .models import (
UngelichContactUsSection, UngelichTextSection, Service, ServiceItem,
About, AboutItem, SectionWithImage, UngleichServiceItem, UngleichHeader,
UngleichHeaderItem, UngleichProductItem, UngleichProduct, UngleichCustomer,
- UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader
+ UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader,
+ UngleichHeaderItemWithVideo
)
@@ -200,7 +201,10 @@ class UngleichHeaderWithTextAndImageSliderPlugin(CMSPluginBase):
render_template = "ungleich_page/ungleich/header_with_slider.html"
cache = False
allow_children = True
- child_classes = ['UngleichHeaderItemPlugin']
+ child_classes = [
+ 'UngleichHeaderItemPlugin',
+ 'UngleichHeaderItemWithVideoPlugin',
+ ]
def render(self, context, instance, placeholder):
context['instance'] = instance
@@ -224,6 +228,23 @@ class UngleichHeaderItemPlugin(CMSPluginBase):
return context
+@plugin_pool.register_plugin
+class UngleichHeaderItemWithVideoPlugin(CMSPluginBase):
+ name = "ungleich Header Item With Video Plugin"
+ model = UngleichHeaderItemWithVideo
+ render_template = "ungleich_page/ungleich/_header_video_item.html"
+ cache = False
+ require_parent = True
+ parent_classes = ['UngleichHeaderWithTextAndImageSliderPlugin']
+
+ def render(self, context, instance, placeholder):
+ context = super(UngleichHeaderItemWithVideoPlugin, self).render(
+ context, instance, placeholder
+ )
+ context['instance'] = instance
+ return context
+
+
@plugin_pool.register_plugin
class UngleichProductsPlugin(CMSPluginBase):
name = "ungleich Products Plugin"
diff --git a/ungleich_page/migrations/0016_auto_20171219_1856.py b/ungleich_page/migrations/0016_auto_20171219_1856.py
new file mode 100644
index 00000000..efde30c9
--- /dev/null
+++ b/ungleich_page/migrations/0016_auto_20171219_1856.py
@@ -0,0 +1,39 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2017-12-19 16:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.file
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('ungleich_page', '0015_ungleichsimpleheader'),
+ ('cms', '0014_auto_20160404_1908'),
+ ('filer', '0005_auto_20171219_1856'),
+ ]
+
+ operations = [
+ migrations.CreateModel(
+ name='UngleichHeaderItemWithVideo',
+ fields=[
+ ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE,
+ parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+ ('description', models.TextField(blank=True, null=True)),
+ ('image', filer.fields.image.FilerImageField(blank=True, null=True,
+ on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_poster', to='filer.Image')),
+ ('btn_link', models.URLField(blank=True, null=True)),
+ ('btn_text', models.CharField(blank=True, max_length=50, null=True)),
+ ('heading', models.CharField(blank=True, max_length=100, null=True)),
+ ('video', filer.fields.file.FilerFileField(blank=True, null=True,
+ on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_video', to='filer.File')),
+ ],
+ options={
+ 'abstract': False,
+ },
+ bases=('cms.cmsplugin',),
+ ),
+ ]
diff --git a/ungleich_page/models.py b/ungleich_page/models.py
index aec629ee..1b5ab960 100644
--- a/ungleich_page/models.py
+++ b/ungleich_page/models.py
@@ -1,7 +1,7 @@
from cms.models.pluginmodel import CMSPlugin
from django.db import models
from djangocms_text_ckeditor.fields import HTMLField
-from filer.fields.image import FilerImageField
+from filer.fields.image import FilerImageField, FilerFileField
class UngelichPicture(CMSPlugin):
@@ -134,6 +134,39 @@ class UngleichHeaderItem(CMSPlugin):
description = HTMLField()
+class UngleichHeaderItemWithVideo(CMSPlugin):
+ image = FilerImageField(
+ null=True,
+ blank=True,
+ related_name="ungleich_header_item_poster",
+ on_delete=models.SET_NULL,
+ help_text='The background image or poster image for video.'
+ )
+ video = FilerFileField(
+ null=True,
+ blank=True,
+ related_name="ungleich_header_item_video",
+ on_delete=models.SET_NULL,
+ help_text='Leavig this blank will make the image as the background.'
+ )
+ heading = models.CharField(
+ blank=True, null=True, max_length=100,
+ help_text='An optional title for this slide.',
+ )
+ description = models.TextField(
+ blank=True, null=True,
+ help_text='An optional description for this slide.'
+ )
+ btn_link = models.URLField(
+ blank=True, null=True,
+ help_text='If this field is left empty, no button would be displayed.'
+ )
+ btn_text = models.CharField(
+ blank=True, null=True, max_length=50,
+ help_text='Text for the button, if a link is provided.'
+ )
+
+
class UngleichProductItem(ServiceItem):
url = models.URLField(max_length=300, default="", blank=True)
diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 2e4a3d2d..e2f2165f 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -202,10 +202,11 @@
}
.header_slider .intro-cap {
+ margin: 0;
text-align: right;
line-height: 1.1;
font-size: 23px;
- margin-bottom: 12px;
+ padding-bottom: 10px;
}
.header_slider .btn-trans {
@@ -216,9 +217,7 @@
@media (min-width: 768px) {
.header_slider .intro-cap {
- font-size: 4em;
- font-weight: 600;
- margin-bottom: 20px;
+ font-size: 2.5em;
}
.header_slider .carousel-control {
width: 50px;
@@ -237,6 +236,12 @@
overflow: auto;
padding: 75px 50px;
}
+ .header_slider .btn-trans {
+ padding: 8px 15px;
+ min-width: 175px;
+ letter-spacing: 1px;
+ font-size: 1.25em;
+ }
}
@media (min-width: 992px) {
@@ -250,8 +255,8 @@
font-size: 1.55em;
text-align: right;
line-height: 1.4;
- margin-bottom: 20px;
- padding: 5px 0;
+ margin-bottom: 0;
+ padding-bottom: 10px;
}
@media (max-width: 768px) {
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index 5f61351d..4819ec1e 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -1,7 +1,7 @@
{% load static i18n %}
<header class="header_slider">
- <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
+ <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="8000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
diff --git a/ungleich_page/templates/ungleich_page/ungleich/_header_item.html b/ungleich_page/templates/ungleich_page/ungleich/_header_item.html
index a770d1ed..a14c4451 100644
--- a/ungleich_page/templates/ungleich_page/ungleich/_header_item.html
+++ b/ungleich_page/templates/ungleich_page/ungleich/_header_item.html
@@ -1,14 +1,8 @@
+{% if instance.image %}
+ <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
<div class="container">
- <div>
- {% if instance.image %}
- <img src="{{ instance.image.url }}" alt=""
- class="logo-image" img-responsive="" width="300"/>
- <div class="header-vh"></div>
- {% endif %}
- <div>
- <span class="intro-cap-sans-transform">
- {{ instance.description }}
- </span>
- </div>
- </div>
+ <div class="intro-cap-sans-transform">
+ {{ instance.description }}
+ </div>
</div>
diff --git a/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html b/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html
new file mode 100644
index 00000000..8a27b6e4
--- /dev/null
+++ b/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html
@@ -0,0 +1,20 @@
+{% if instance.video %}
+ <div class="bg_vid bg_vid_back">
+ <video autoplay muted loop {% if instance.image %}poster="{{ instance.image.url }}"{% endif %}>
+ <source type="video/mp4" src="{{ instance.video.url }}">
+ </video>
+ </div>
+{% elif instance.image %}
+ <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
+<div class="container">
+ {% if instance.heading %}
+ <div class="intro-cap">{{ instance.heading }}</div>
+ {% endif %}
+ {% if instance.description %}
+ <p class="intro_lead">{{ instance.description }}</p>
+ {% endif %}
+ {% if instance.btn_link %}
+ <a class="btn btn-trans" href="{{ instance.btn_link }}">{{ instance.btn_text|default:"Learn More" }}</a>
+ {% endif %}
+</div>
diff --git a/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html b/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html
index 9cf759e6..8231a6b3 100644
--- a/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html
+++ b/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html
@@ -2,20 +2,31 @@
<header class="header_slider" style="background-image: url({{ instance.background_image.url }})">
<div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="{{ instance.carousel_data_interval}}">
<!-- Indicators -->
- {% if instance.child_plugin_instances|length > 1 %}
- <ol class="carousel-indicators">
- {% for plugin in instance.child_plugin_instances %}
- <li data-target="#carousel-header-ungleich" data-slide-to="{{forloop.counter0}}" {% if forloop.counter0 == 0 %}class="active" {% endif %}></li>
- {% endfor %}
- </ol>
- {% endif %}
+ {% if instance.child_plugin_instances|length > 1 %}
+ <ol class="carousel-indicators">
+ {% for plugin in instance.child_plugin_instances %}
+ <li data-target="#carousel-header-ungleich" data-slide-to="{{forloop.counter0}}" {% if forloop.counter0 == 0 %}class="active"{% endif %}></li>
+ {% endfor %}
+ </ol>
+ {% endif %}
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
- {% for plugin in instance.child_plugin_instances %}
+ {% for plugin in instance.child_plugin_instances %}
<div class="item {% if forloop.counter0 == 0 %}active{% endif %}">
- {% render_plugin plugin %}
+ {% render_plugin plugin %}
</div>
- {% endfor %}
+ {% endfor %}
</div>
+ <!-- Control Arrows -->
+ {% if instance.child_plugin_instances|length > 1 %}
+ <a class="left carousel-control" href="#carousel-header-ungleich" role="button" data-slide="prev">
+ <span class="fa fa-angle-left" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="right carousel-control" href="#carousel-header-ungleich" role="button" data-slide="next">
+ <span class="fa fa-angle-right" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ {% endif %}
</div>
</header>
\ No newline at end of file