Merge pull request #596 from tiwariav/task/4266/dcl_cms_promotion_section

Task/4266/dcl cms promotion section

datacenterlight/cms_models.py

@@ -1,7 +1,7 @@
-from djangocms_text_ckeditor.fields import HTMLField
 from cms.models.pluginmodel import CMSPlugin
 from django.db import models
 from django.utils.safestring import mark_safe
+from djangocms_text_ckeditor.fields import HTMLField
 from filer.fields.image import FilerImageField
 
 # Models for CMS Plugins
@@ -204,3 +204,48 @@ class DCLSectionImagePluginModel(CMSPlugin):
         max_length=100, null=True, blank=True,
         help_text='Optional caption for the image.'
     )
+
+
+class DCLSectionPromoPluginModel(CMSPlugin):
+    background_image = FilerImageField(
+        on_delete=models.CASCADE, null=True, blank=True,
+        help_text=('Optional background image for the Promo Section'),
+        related_name="dcl_section_promo_promo",
+    )
+    heading = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text='An optional heading for the Promo Section',
+    )
+    subheading = models.CharField(
+        blank=True, null=True, max_length=200,
+        help_text='An optional subheading for the Promo Section',
+    )
+    content = HTMLField()
+    html_id = models.SlugField(
+        blank=True, null=True,
+        help_text=(
+            'An optional html id for the Section. Required to set as target '
+            'of a link on page'
+        )
+    )
+    plain_heading = models.BooleanField(
+        default=False,
+        help_text='Select to keep the heading style simpler.'
+    )
+    text_center = models.BooleanField(
+        default=False,
+        help_text='Select to center align content on small screens.'
+    )
+
+    def __str__(self):
+        return '#' + self.html_id if self.html_id else str(self.pk)
+
+    def get_extra_classes(self):
+        extra_classes = ''
+        if self.text_center:
+            extra_classes += ' text-center'
+        if self.plain_heading:
+            extra_classes += ' promo-section-plain'
+        if self.background_image:
+            extra_classes += ' promo-with-bg'
+        return extra_classes

datacenterlight/cms_plugins.py

@@ -5,7 +5,8 @@ from .cms_models import (
     DCLBannerItemPluginModel, DCLBannerListPluginModel, DCLContactPluginModel,
     DCLFooterPluginModel, DCLLinkPluginModel, DCLNavbarDropdownPluginModel,
     DCLSectionIconPluginModel, DCLSectionImagePluginModel,
-    DCLSectionPluginModel, DCLNavbarPluginModel
+    DCLSectionPluginModel, DCLNavbarPluginModel,
+    DCLSectionPromoPluginModel
 )
 from .models import VMTemplate
 
@@ -18,7 +19,28 @@ class DCLSectionPlugin(CMSPluginBase):
     render_template = "datacenterlight/cms/section.html"
     cache = False
     allow_children = True
-    child_classes = ['DCLSectionIconPlugin', 'DCLSectionImagePlugin']
+    child_classes = [
+        'DCLSectionIconPlugin', 'DCLSectionImagePlugin',
+        'DCLSectionPromoPlugin', 'UngleichHTMLPlugin'
+    ]
+
+    def render(self, context, instance, placeholder):
+        context = super(DCLSectionPlugin, self).render(
+            context, instance, placeholder
+        )
+        context['children_to_side'] = []
+        context['children_to_content'] = []
+        if instance.child_plugin_instances is not None:
+            right_children = [
+                'DCLSectionImagePluginModel',
+                'DCLSectionIconPluginModel'
+            ]
+            for child in instance.child_plugin_instances:
+                if child.__class__.__name__ in right_children:
+                    context['children_to_side'].append(child)
+                else:
+                    context['children_to_content'].append(child)
+        return context
 
 
 @plugin_pool.register_plugin
@@ -41,6 +63,15 @@ class DCLSectionImagePlugin(CMSPluginBase):
     require_parent = True
 
 
+@plugin_pool.register_plugin
+class DCLSectionPromoPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Section Promo Plugin"
+    model = DCLSectionPromoPluginModel
+    render_template = "datacenterlight/cms/section_promo.html"
+    cache = False
+
+
 @plugin_pool.register_plugin
 class DCLCalculatorPlugin(CMSPluginBase):
     module = "Datacenterlight"
@@ -48,12 +79,22 @@ class DCLCalculatorPlugin(CMSPluginBase):
     model = DCLSectionPluginModel
     render_template = "datacenterlight/cms/calculator.html"
     cache = False
+    allow_children = True
+    child_classes = [
+        'DCLSectionPromoPlugin', 'UngleichHTMLPlugin'
+    ]
 
     def render(self, context, instance, placeholder):
         context = super(DCLCalculatorPlugin, self).render(
             context, instance, placeholder
         )
         context['templates'] = VMTemplate.objects.all()
+        context['children_to_side'] = []
+        context['children_to_content'] = []
+        if instance.child_plugin_instances is not None:
+            context['children_to_content'].extend(
+                instance.child_plugin_instances
+            )
         return context
 
 

datacenterlight/migrations/0014_dclnavbarpluginmodel_language_dropdown.py

@@ -15,6 +15,7 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='dclnavbarpluginmodel',
             name='language_dropdown',
-            field=models.BooleanField(default=True, help_text='Select to include the language selection dropdown.'),
+            field=models.BooleanField(
+                default=True, help_text='Select to include the language selection dropdown.'),
         ),
     ]

datacenterlight/migrations/0014_dclsectionpromopluginmodel.py

@@ -0,0 +1,43 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2018-03-21 19:09
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import djangocms_text_ckeditor.fields
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms', '0014_auto_20160404_1908'),
+        ('datacenterlight', '0013_dclnavbarpluginmodel'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='DCLSectionPromoPluginModel',
+            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')),
+                ('heading', models.CharField(
+                    blank=True, help_text='An optional heading for the Promo Section', max_length=100, null=True)),
+                ('subheading', models.CharField(
+                    blank=True, help_text='An optional subheading for the Promo Section', max_length=200, null=True)),
+                ('content', djangocms_text_ckeditor.fields.HTMLField()),
+                ('html_id', models.SlugField(
+                    blank=True, help_text='An optional html id for the Section. Required to set as target of a link on page', null=True)),
+                ('plain_heading', models.BooleanField(default=False,
+                                                      help_text='Select to keep the heading style simpler.')),
+                ('center_on_mobile', models.BooleanField(default=False,
+                                                         help_text='Select to center align content on small screens.')),
+                ('background_image', filer.fields.image.FilerImageField(blank=True, help_text='Optional background image for the Promo Section',
+                                                                        null=True, on_delete=django.db.models.deletion.CASCADE, related_name='dcl_section_promo_promo', to='filer.Image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]

datacenterlight/migrations/0015_auto_20180323_0011.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2018-03-22 19:22
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('datacenterlight', '0014_dclsectionpromopluginmodel'),
+        ('datacenterlight', '0014_dclnavbarpluginmodel_language_dropdown'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='dclsectionpromopluginmodel',
+            old_name='center_on_mobile',
+            new_name='text_center',
+        ),
+    ]

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -536,14 +536,14 @@ textarea {
   .split-section-plain .split-figure {
     width: 41.66666667%;
   }
-  .split-section-plain .split-figure.col-sm-push-6 {
+  .split-section-plain .split-figure.col-sm-pull-6 {
-    left: 58.33333333%;
+    right: 58.33333333%;
   }
   .split-section-plain .split-text {
     width: 58.33333333%;
   }
-  .split-section-plain .split-text.col-sm-pull-6 {
+  .split-section-plain .split-text.col-sm-push-6 {
-    right: 41.66666667%;
+    left: 41.66666667%;
   }
 }
 
@@ -1070,8 +1070,8 @@ textarea {
     line-height: 35px;
   }
   .split-section .split-title h2 {
-    font-size: 35px;
+    font-size: 32px;
-    line-height: 35px;
+    line-height: 34px;
   }
   .contact-section .title {
     margin: 0 auto;
@@ -1268,3 +1268,79 @@ footer .dcl-link-separator::before {
     font-size: 30px;
   }
 }
+
+
+/* cms section promo */
+
+.promo-section {
+  padding: 75px 15px;
+}
+
+.promo-section.promo-with-bg {
+  color: #fff;
+  background-size: cover;
+  background-position: center;
+}
+
+.promo-section h3 {
+  font-weight: 700;
+  font-size: 36px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 10px;
+  margin-bottom: 25px;
+}
+
+.promo-section h4 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.promo-section p {
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+.promo-section.text-center p {
+  max-width: 720px;
+  margin: auto;
+}
+
+.promo-section.text-center h3,
+.promo-section.text-center h4 {
+  margin-bottom: 35px;
+}
+
+.split-text .split-subsection {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.split-text .promo-section {
+  padding: 20px 15px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.split-text .promo-section .container {
+  width: auto;
+}
+
+.split-text .promo-section h3,
+.split-text .promo-section h4 {
+  margin-bottom: 15px;
+}
+
+@media (max-width: 767px) {
+  .split-text .split-subsection {
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .promo-section h3 {
+    font-size: 29px;
+  }
+  .split-text .promo-section {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

datacenterlight/templates/datacenterlight/cms/calculator.html

@@ -1,21 +1,8 @@
 <div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
   <div class="container">
     <div class="row">
-      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %}">
+      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %} split-text">
-        <div class="split-text">
+        {% include "datacenterlight/cms/includes/_section_split_content.html" %}
-          {% if instance.heading %}
-            <div class="{% if not instance.plain_heading %}split-title{% endif %}">
-              <h2>{{ instance.heading }}</h2>
-            </div>
-          {% endif %}
-          {% if instance.content %}
-            <div class="split-description">
-              <div class="lead">
-                {{ instance.content }}
-              </div>
-            </div>
-          {% endif %}
-        </div>
       </div>
       <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}">
         <div class="price-calc-section">

datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html

@@ -0,0 +1,21 @@
+{% load cms_tags %}
+
+{% if instance.heading %}
+  <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
+    <h2>{{ instance.heading }}</h2>
+  </div>
+{% endif %}
+{% if instance.content %}
+  <div class="split-description">
+    <div class="lead">
+      {{ instance.content }}
+    </div>
+  </div>
+{% endif %}
+{% if children_to_content|length %}
+  <div class="split-subsection">
+    {% for plugin in children_to_content %}
+      {% render_plugin plugin %}
+    {% endfor %}
+  </div>
+{% endif %}

datacenterlight/templates/datacenterlight/cms/section.html

@@ -1,26 +1,15 @@
 {% load cms_tags %}
 
-<div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
+<section class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
   <div class="container">
-    {% if instance.child_plugin_instances|length %}
+    {% if children_to_side|length %}
       <div class="row">
         <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %} split-text">
-          {% if instance.heading %}
+          {% include "datacenterlight/cms/includes/_section_split_content.html" %}
-            <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
-              <h2>{{ instance.heading }}</h2>
-            </div>
-          {% endif %}
-          {% if instance.content %}
-            <div class="split-description">
-              <div class="lead">
-                {{ instance.content }}
-              </div>
-            </div>
-          {% endif %}
         </div>
         <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %} split-figure">
           <div class="section-figure">
-            {% for plugin in instance.child_plugin_instances %}
+            {% for plugin in children_to_side %}
               {% render_plugin plugin %}
             {% endfor %}
           </div>
@@ -28,19 +17,8 @@
       </div>
     {% else %}
       <div class="space">
-        {% if instance.heading %}
+        {% include "datacenterlight/cms/includes/_section_split_content.html" %}
-          <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
-            <h2>{{ instance.heading }}</h2>
-          </div>
-        {% endif %}
-        {% if instance.content %}
-          <div class="split-description">
-            <div class="lead">
-              {{ instance.content }}
-            </div>
       </div>
     {% endif %}
   </div>
-    {% endif %}
+</section>
-  </div>
-</div>

datacenterlight/templates/datacenterlight/cms/section_promo.html

@@ -0,0 +1,15 @@
+{% load custom_tags %}
+
+<section class="promo-section {{instance.get_extra_classes}}" {% if instance.background_image %}style="background-image:url({{ instance.background_image.url }})"{% endif %}>
+  <div class="container">
+    {% if instance.heading %}
+      <h3>{{instance.heading|escaped_line_break|linebreaksbr}}</h3>
+    {% endif %}
+    {% if instance.subheading %}
+      <h4>{{instance.subheading}}</h4>
+    {% endif %}
+    {% if instance.content %}
+      <p>{{instance.content}}</p>
+    {% endif %}
+  </div>
+</section>

datacenterlight/templatetags/custom_tags.py

@@ -42,3 +42,13 @@ def multiply(value, arg):
     :return:
     """
     return value * arg
+
+
+@register.filter('escaped_line_break')
+def escaped_line_break(value):
+    """
+    usage: {{ text|escaped_line_break }}
+    :param value:
+    :return:
+    """
+    return value.replace("\\n", "\n")