why dcl plugin and id for each section

datacenterlight/cms_models.py

@@ -21,6 +21,79 @@ class DCLSectionPluginModel(CMSPlugin):
         choices=TEXT_DIRECTIONS, max_length=10, default=True,
         help_text='The alignment of text in the section'
     )
+    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.'
+    )
+    center_on_mobile = models.BooleanField(
+        default=False,
+        help_text='Select to center align content on small screens.'
+    )
+    background_gradient = models.BooleanField(
+        default=False,
+        help_text='Select to add a gradient background to the section.'
+    )
+
+    def get_extra_classes(self):
+        extra_classes = self.text_direction
+        if self.center_on_mobile:
+            extra_classes += ' section-sm-center'
+        if self.background_gradient:
+            extra_classes += ' section-gradient'
+        return extra_classes
+
+    def __str__(self):
+        return '#' + self.html_id if self.html_id else str(self.pk)
+
+
+class DCLBannerListPluginModel(CMSPlugin):
+    heading = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text='An optional heading for the Section',
+    )
+    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'
+        )
+    )
+
+    def __str__(self):
+        return '#' + self.html_id if self.html_id else str(self.pk)
+
+
+class DCLBannerItemPluginModel(CMSPlugin):
+    content = HTMLField()
+    banner_text = HTMLField(
+        blank=True, null=True, max_length=100,
+        help_text='Optional text to be shown as banner in other half.',
+    )
+    banner_image = FilerImageField(
+        on_delete=models.CASCADE, null=True, blank=True,
+        help_text='Optional image to be used in the banner in other half.'
+    )
+    TEXT_DIRECTIONS = (
+        ('left', 'Left'),
+        ('right', 'Right')
+    )
+    text_direction = models.CharField(
+        choices=TEXT_DIRECTIONS, max_length=10, default=True,
+        help_text='The alignment of text in the section'
+    )
+
+    def get_extra_classes(self):
+        extra_classes = ''
+        if self.text_direction == 'left':
+            extra_classes = 'flex-row-rev'
+        return extra_classes
 
 
 class DCLLinkPluginModel(CMSPlugin):

datacenterlight/cms_plugins.py

@@ -3,24 +3,17 @@ from cms.plugin_pool import plugin_pool
 from cms.models.pluginmodel import CMSPlugin
 
 from .cms_models import (
-    DCLSectionPluginModel, DCLLinkPluginModel,
-    DCLNavbarDropdownPluginModel, DCLContactPluginModel,
-    DCLFooterPluginModel, DCLSectionIconPluginModel,
-    DCLSectionImagePluginModel
+    DCLBannerItemPluginModel, DCLBannerListPluginModel, DCLContactPluginModel,
+    DCLFooterPluginModel, DCLLinkPluginModel, DCLNavbarDropdownPluginModel,
+    DCLSectionIconPluginModel, DCLSectionImagePluginModel,
+    DCLSectionPluginModel,
 )
 
 
-@plugin_pool.register_plugin
-class DCLCalculatorPlugin(CMSPluginBase):
-    module = "Datacenterlight"
-    model = DCLSectionPluginModel
-    render_template = "datacenterlight/cms/calculator.html"
-    cache = False
-
-
 @plugin_pool.register_plugin
 class DCLSectionPlugin(CMSPluginBase):
     module = "Datacenterlight"
+    name = "DCL Section Plugin"
     model = DCLSectionPluginModel
     render_template = "datacenterlight/cms/section.html"
     cache = False
@@ -28,9 +21,61 @@ class DCLSectionPlugin(CMSPluginBase):
     child_classes = ['DCLSectionIconPlugin', 'DCLSectionImagePlugin']
 
 
+@plugin_pool.register_plugin
+class DCLSectionIconPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Section Icon Plugin"
+    model = DCLSectionIconPluginModel
+    render_template = "datacenterlight/cms/section_icon.html"
+    cache = False
+    require_parent = True
+
+
+@plugin_pool.register_plugin
+class DCLSectionImagePlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Section Image Plugin"
+    model = DCLSectionImagePluginModel
+    render_template = "datacenterlight/cms/section_image.html"
+    cache = False
+    require_parent = True
+
+
+@plugin_pool.register_plugin
+class DCLCalculatorPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Calculator Plugin"
+    model = DCLSectionPluginModel
+    render_template = "datacenterlight/cms/calculator.html"
+    cache = False
+
+
+@plugin_pool.register_plugin
+class DCLBannerListPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Banner List Plugin"
+    model = DCLBannerListPluginModel
+    render_template = "datacenterlight/cms/banner_list.html"
+    cache = False
+    allow_children = True
+    child_classes = ['DCLBannerItemPlugin']
+
+
+@plugin_pool.register_plugin
+class DCLBannerItemPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Banner Item Plugin"
+    model = DCLBannerItemPluginModel
+    render_template = "datacenterlight/cms/banner_item.html"
+    cache = False
+    require_parent = True
+    parent_classes = ['DCLBannerListPlugin']
+
+
 @plugin_pool.register_plugin
 class DCLNavbarPlugin(CMSPluginBase):
     module = "Datacenterlight"
+    name = "DCL Navbar Plugin"
     model = CMSPlugin
     render_template = "datacenterlight/cms/navbar.html"
     cache = False
@@ -38,18 +83,10 @@ class DCLNavbarPlugin(CMSPluginBase):
     child_classes = ['DCLLinkPlugin', 'DCLNavbarDropdownPlugin']
 
 
-@plugin_pool.register_plugin
-class DCLLinkPlugin(CMSPluginBase):
-    module = "Datacenterlight"
-    model = DCLLinkPluginModel
-    render_template = "datacenterlight/cms/link.html"
-    cache = False
-    require_parent = True
-
-
 @plugin_pool.register_plugin
 class DCLNavbarDropdownPlugin(CMSPluginBase):
     module = "Datacenterlight"
+    name = "DCL Navbar Dropdown Plugin"
     model = DCLNavbarDropdownPluginModel
     render_template = "datacenterlight/cms/navbar_dropdown.html"
     cache = False
@@ -59,9 +96,20 @@ class DCLNavbarDropdownPlugin(CMSPluginBase):
     parent_classes = ['DCLNavbarPlugin']
 
 
+@plugin_pool.register_plugin
+class DCLLinkPlugin(CMSPluginBase):
+    module = "Datacenterlight"
+    name = "DCL Link Plugin"
+    model = DCLLinkPluginModel
+    render_template = "datacenterlight/cms/link.html"
+    cache = False
+    require_parent = True
+
+
 @plugin_pool.register_plugin
 class DCLContactPlugin(CMSPluginBase):
     module = "Datacenterlight"
+    name = "DCL Contact Plugin"
     model = DCLContactPluginModel
     render_template = "datacenterlight/cms/contact.html"
     cache = False
@@ -70,26 +118,9 @@ class DCLContactPlugin(CMSPluginBase):
 @plugin_pool.register_plugin
 class DCLFooterPlugin(CMSPluginBase):
     module = "Datacenterlight"
+    name = "DCL Footer Plugin"
     model = DCLFooterPluginModel
     render_template = "datacenterlight/cms/footer.html"
     cache = False
     allow_children = True
     child_classes = ['DCLLinkPlugin']
-
-
-@plugin_pool.register_plugin
-class DCLSectionIconPlugin(CMSPluginBase):
-    module = "Datacenterlight"
-    model = DCLSectionIconPluginModel
-    render_template = "datacenterlight/cms/section_icon.html"
-    cache = False
-    require_parent = True
-
-
-@plugin_pool.register_plugin
-class DCLSectionImagePlugin(CMSPluginBase):
-    module = "Datacenterlight"
-    model = DCLSectionImagePluginModel
-    render_template = "datacenterlight/cms/section_image.html"
-    cache = False
-    require_parent = True

datacenterlight/static/datacenterlight/css/cms.css

@@ -48,4 +48,11 @@
         line-height: 40px;
         width: 100%;
     }
+}
+
+/* only for editing mode */
+.section-figure  .cms-plugin {
+    padding: 10px;
+    flex-basis: 50%;
+    flex-grow: 1;
 }

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

@@ -339,6 +339,7 @@ textarea {
 
 .split-section {
   padding: 70px 0;
+  border-top: 1px solid #f6f7f8;
 }
 
 .split-section .icon-section {
@@ -361,6 +362,12 @@ textarea {
   font-weight: 300 !important;
 }
 
+.split-section .split-text h2 {
+  font-size: 40px;
+  line-height: 50px;
+  color: #3a3a3a;
+}
+
 .split-section .split-text .split-title {
   position: relative;
   margin-bottom: 25px;
@@ -368,13 +375,11 @@ textarea {
 
 .split-section .split-text .split-title h2 {
   font-size: 50px;
-  line-height: 50px;
   padding-bottom: 25px;
-  color: #3a3a3a;
-  letter-spacing: 3px;
+  letter-spacing: 2px;
 }
 
-.split-section.left {
+.section-gradient {
   background: -webkit-linear-gradient(#f0f4f7, #fff) no-repeat;
   background: -o-linear-gradient(#f0f4f7, #fff) no-repeat;
   background: linear-gradient(#f0f4f7, #fff) no-repeat;
@@ -446,19 +451,13 @@ textarea {
   color: #999 !important;
 }
 
-@media (max-width: 420px) {
+@media (max-width: 575px) {
   .section-figure  .cms-plugin {
     flex-basis: 100%;
   }
 }
 
-.pricing-section {
-  padding: 80px 0 !important;
-  background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
-  background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
-}
-
-.pricing-section .card {
+.price-calc-section .card {
   width: 350px;
   margin: 0 auto;
   background: #fff;
@@ -468,63 +467,33 @@ textarea {
   position: relative;
 }
 
-.pricing-section .card .img-beta {
-  position: absolute;
-  top: 5px;
-  width: 60px;
-  left: 3px;
-}
-
-.pricing-section .card .title {
+.price-calc-section .card .title {
   padding: 15px 40px;
 }
 
-.pricing-section .card .price {
+.price-calc-section .card .price {
   background: #5A74AF;
   padding: 22px;
   color: #fff;
   font-size: 32px;
 }
 
-.pricing-section .card .description {
+.price-calc-section .card .description {
   padding: 12px;
 }
 
-.pricing-section .card .descriptions {
+.price-calc-section .card .descriptions {
   padding: 10px 30px;
 }
 
-.pricing-section .card .description p {
+.price-calc-section .card .description p {
   margin: 0;
 }
 
-.pricing-section .card .btn {
+.price-calc-section .card .btn {
   margin-top: 20px;
 }
 
-.pricing-section .text {
-  text-align: left;
-}
-
-.pricing-section .text .section-heading {
-  font-size: 48px;
-  line-height: 50px;
-  padding-bottom: 25px;
-  color: #3a3a3a;
-  letter-spacing: 1px;
-  position: relative;
-}
-
-.pricing-section .text .section-heading::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  background: #29427A;
-  height: 7px;
-  width: 70px;
-  left: 0;
-}
-
 .contact-section {
   padding: 80px 0;
   color: rgba(255, 255, 255, 0.9);
@@ -775,13 +744,18 @@ tech-sub-sec h2 {
 }
 
 .space-middle {
-  padding: 45px 0;
+  /* padding: 45px 0; */
   display: inline-block;
 }
 
 .ssdimg {
-  vertical-align: middle;
-  display: inline-block;
+  margin: 0 15px;
+  /* vertical-align: middle; */
+  /* display: inline-block; */
+}
+
+.ssdimg img {
+  max-width: 125px;
 }
 
 @media (max-width: 767px) {
@@ -791,7 +765,7 @@ tech-sub-sec h2 {
 }
 
 .padding-vertical {
-  padding: 30px 2px;
+  padding: 30px 2px 20px;
 }
 
 .logo-wrap .logo-caption {
@@ -809,6 +783,8 @@ tech-sub-sec h2 {
 
 .price-calc-section {
   display: flex;
+  margin-top: 25px;
+  margin-bottom: 25px;
 }
 
 .price-calc-section .card {
@@ -976,15 +952,15 @@ tech-sub-sec h2 {
 }
 
 @media(max-width:991px) {
-  .pricing-section .split-text {
+  .section-sm-center .split-text {
     text-align: center !important;
     margin-bottom: 40px;
   }
-  .pricing-section .split-text .split-title::before {
+  .section-sm-center .split-text .split-title::before {
     left: 50% !important;
     transform: translate(-50%, 0);
   }
-  .pricing-section .split-description {
+  .section-sm-center .split-description {
     width: 100% !important;
   }
 }
@@ -1072,7 +1048,7 @@ tech-sub-sec h2 {
     background-color: transparent;
   }
   .split-section {
-    padding: 10px 0;
+    padding: 20px 0;
   }
   .split-section .icon-section {
     min-height: 160px;
@@ -1080,11 +1056,11 @@ tech-sub-sec h2 {
   .split-section .icon-section i {
     font-size: 120px;
   }
-  .split-section .split-text .split-title h2 {
-    font-size: 35px;
+  .split-section .split-text h2 {
+    font-size: 30px;
     line-height: 35px;
   }
-  .pricing-section .text .section-heading {
+  .split-section .split-text .split-title h2 {
     font-size: 35px;
     line-height: 35px;
   }
@@ -1149,9 +1125,6 @@ tech-sub-sec h2 {
     font-weight: normal;
     font-size: 37px;
   }
-  .pricing-section .card {
-    width: 90%;
-  }
   .contact-section .card {
     width: 90%;
   }
@@ -1202,6 +1175,11 @@ footer {
   margin-top: 25px;
 }
 
+.flex-row .percent-text {
+  display: flex;
+  align-items: center;
+}
+
 @media (min-width: 768px) {
   .flex-row {
     display: flex;
@@ -1212,8 +1190,11 @@ footer {
     flex-shrink: 0;
     padding: 0 15px;
   }
-  .flex-row .percent-text,
-  .flex-row .desc-text {
+  .flex-row .desc-text,
+  .flex-row .percent-text {
+    max-width: 430px;
+  }
+  .flex-row-rev .desc-text {
     max-width: 710px;
   }
   .flex-row-rev .percent-text {
@@ -1266,5 +1247,22 @@ footer .dcl-link-separator::before {
 }
 
 .whydcl-header .container {
-  position: relative;
+  position: relative
 }
+
+/* new styles for whydcl section cms plugin (to replace older style) */
+
+.banner-list {
+  border-top: 2px solid #eee;
+  padding: 50px 0;
+}
+
+.banner-list-heading h2 {
+  font-size: 42px;
+}
+
+@media (max-width: 767px) {
+  .banner-list-heading h2 {
+    font-size: 30px;
+  }
+}

datacenterlight/templates/datacenterlight/cms/banner_item.html

@@ -0,0 +1,17 @@
+<div class="flex-row {{ instance.get_extra_classes }}">
+  <div class="percent-text">
+    {% if instance.banner_text %}
+      <div class="text">{{ instance.banner_text }}</div>
+    {% endif %}
+    {% if instance.banner_image %}
+      <div class="ssdimg">
+        <img class="img-responsive" src="{{ instance.banner_image.url }}" alt="image">
+      </div>
+    {% endif %}
+  </div>
+  <div class="desc-text padding-vertical">
+    <div class="lead">
+      {{ instance.content }}
+    </div>
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/banner_list.html

@@ -0,0 +1,12 @@
+{% load static i18n cms_tags %}
+
+<div class="banner-list" id="{{ instance.html_id }}">
+  <div class="container">
+    <div class="banner-list-heading">
+      <h2>{{ instance.heading }}</h2>
+    </div>
+    {% for plugin in instance.child_plugin_instances %}
+      {% render_plugin plugin %}
+    {% endfor %}
+  </div>
+</div>

datacenterlight/templates/datacenterlight/cms/base.html

@@ -55,9 +55,7 @@
         </div>
     {% endplaceholder %}
 
-    {% placeholder 'datacenterlight_calculator' %}
-
-    {% placeholder 'Datacenterlight Content' %}
+    {% placeholder 'datacenterlight_content' %}
 
     {% placeholder 'datacenterlight_footer'%}
 

datacenterlight/templates/datacenterlight/cms/calculator.html

@@ -1,9 +1,9 @@
-<div class="split-section pricing-section {{ instance.text_direction }}" id="{{ instance.id }}">
+<div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
   <div class="container">
     <div class="row">
-      <div class="col-md-6 {% if instance.text_direction == 'right' %}col-md-push-6{% endif %}">
+      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %}">
         <div class="split-text">
-          <div class="split-title">
+          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
             <h2>{{ instance.heading }}</h2>
           </div>
           <div class="split-description">
@@ -13,7 +13,7 @@
           </div>
         </div>
       </div>
-      <div class="col-md-6 {% if instance.text_direction == 'right' %}col-md-pull-6{% endif %}">
+      <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}">
         <div class="price-calc-section">
           <div class="card">
             {% include "datacenterlight/includes/_calculator_form.html" %}

datacenterlight/templates/datacenterlight/cms/section.html

@@ -1,18 +1,20 @@
 {% load cms_tags %}
 
-<div class="split-section {{ instance.text_direction }}" id="{{ instance.id }}">
+<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 == 'left' %}col-sm-push-6{% endif %}">
-        <div class="section-figure">
-          {% for plugin in instance.child_plugin_instances %}
-            {% render_plugin plugin %}
-          {% endfor %}
-        </div>
+        {% block section-feature %}
+          <div class="section-figure">
+            {% for plugin in instance.child_plugin_instances %}
+              {% render_plugin plugin %}
+            {% endfor %}
+          </div>
+        {% endblock section-feature %}
       </div>
       <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %}">
         <div class="split-text">
-          <div class="split-title">
+          <div class="{% if not instance.plain_heading %}split-title{% endif %}">
             <h2>{{ instance.heading }}</h2>
           </div>
           <div class="split-description">

dynamicweb/settings/base.py

@@ -352,8 +352,8 @@ CMS_PLACEHOLDER_CONF = {
             },
         ]
     },
-    'datacenterlight_calculator': {
-        'name': _('Datacenterlight Calculator'),
+    'datacenterlight_content': {
+        'name': _('Datacenterlight Content'),
         'default_plugins': [
             {
                 'plugin_type': 'DCLCalculatorPlugin',

hosting/static/hosting/css/price_calculator.css

@@ -64,13 +64,6 @@
     padding: 0 !important;
 }
 
-.price-calc-section .card .img-beta {
-    position: absolute;
-    top: 5px;
-    width: 60px;
-    left: 3px;
-}
-
 .price-calc-section .card .title {
     padding: 15px 40px;
 }