why dcl plugin and id for each section

This commit is contained in:
Arvind Tiwari 2018-03-02 02:05:42 +05:30
parent b0192ceadb
commit 819848c90c
11 changed files with 258 additions and 127 deletions

View file

@ -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):

View file

@ -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

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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" %}

View file

@ -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">

View file

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

View file

@ -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;
}