From 8a3ddda93e835766501ecbab2c25ba9d9853ea49 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 23 Mar 2018 00:50:01 +0530
Subject: [PATCH] promo section styling

---
 datacenterlight/cms_models.py                 | 12 +++-
 .../datacenterlight/css/landing-page.css      | 60 +++++++++++++++++++
 .../cms/includes/_section_split_content.html  |  3 +-
 .../datacenterlight/cms/section_promo.html    | 22 +++----
 4 files changed, 85 insertions(+), 12 deletions(-)

diff --git a/datacenterlight/cms_models.py b/datacenterlight/cms_models.py
index c7a68a07..d5ec180c 100644
--- a/datacenterlight/cms_models.py
+++ b/datacenterlight/cms_models.py
@@ -232,10 +232,20 @@ class DCLSectionPromoPluginModel(CMSPlugin):
         default=False,
         help_text='Select to keep the heading style simpler.'
     )
-    center_on_mobile = models.BooleanField(
+    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
diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 5ff6ed1d..34f3a9e3 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -1268,3 +1268,63 @@ 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;
+}
+
+.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;
+}
+
+.promo-section-plain h3 {
+  font-weight: 400;
+}
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html b/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html
index 38db14d5..a5a5119c 100644
--- a/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html
+++ b/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html
@@ -1,5 +1,6 @@
 {% load cms_tags %}
 
+
 {% if instance.heading %}
   <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
     <h2>{{ instance.heading }}</h2>
@@ -13,7 +14,7 @@
   </div>
 {% endif %}
 {% if children_to_left|length %}
-  <div class="split-subsection lead">
+  <div class="split-subsection">
     {% for plugin in children_to_left %}
       {% render_plugin plugin %}
     {% endfor %}
diff --git a/datacenterlight/templates/datacenterlight/cms/section_promo.html b/datacenterlight/templates/datacenterlight/cms/section_promo.html
index 46a6b67c..7a4ad455 100644
--- a/datacenterlight/templates/datacenterlight/cms/section_promo.html
+++ b/datacenterlight/templates/datacenterlight/cms/section_promo.html
@@ -1,11 +1,13 @@
-<section class="promo-section">
-  {% if instance.heading %}
-    <h1>{{instance.heading}}</h1>
-  {% endif %}
-  {% if instance.subheading %}
-    <h1>{{instance.subheading}}</h1>
-  {% endif %}
-  {% if instance.content %}
-    <h1>{{instance.content}}</h1>
-  {% endif %}
+<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}}</h3>
+    {% endif %}
+    {% if instance.subheading %}
+      <h4>{{instance.subheading}}</h4>
+    {% endif %}
+    {% if instance.content %}
+      <p>{{instance.content}}</p>
+    {% endif %}
+  </div>
 </section>
\ No newline at end of file