From 819848c90cce80f6f9ea51416f8823a65e32ce6f Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Fri, 2 Mar 2018 02:05:42 +0530 Subject: [PATCH] why dcl plugin and id for each section --- datacenterlight/cms_models.py | 73 ++++++++++ datacenterlight/cms_plugins.py | 109 +++++++++------ .../static/datacenterlight/css/cms.css | 7 + .../datacenterlight/css/landing-page.css | 128 +++++++++--------- .../datacenterlight/cms/banner_item.html | 17 +++ .../datacenterlight/cms/banner_list.html | 12 ++ .../templates/datacenterlight/cms/base.html | 4 +- .../datacenterlight/cms/calculator.html | 8 +- .../datacenterlight/cms/section.html | 16 ++- dynamicweb/settings/base.py | 4 +- .../static/hosting/css/price_calculator.css | 7 - 11 files changed, 258 insertions(+), 127 deletions(-) create mode 100644 datacenterlight/templates/datacenterlight/cms/banner_item.html create mode 100644 datacenterlight/templates/datacenterlight/cms/banner_list.html diff --git a/datacenterlight/cms_models.py b/datacenterlight/cms_models.py index 2e708a20..8438e515 100644 --- a/datacenterlight/cms_models.py +++ b/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): diff --git a/datacenterlight/cms_plugins.py b/datacenterlight/cms_plugins.py index 36fcca17..c3f2fb10 100644 --- a/datacenterlight/cms_plugins.py +++ b/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 diff --git a/datacenterlight/static/datacenterlight/css/cms.css b/datacenterlight/static/datacenterlight/css/cms.css index b9a19245..87479a1e 100644 --- a/datacenterlight/static/datacenterlight/css/cms.css +++ b/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; } \ No newline at end of file diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 6d1c7d56..66ca4806 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/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; + } +} \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/banner_item.html b/datacenterlight/templates/datacenterlight/cms/banner_item.html new file mode 100644 index 00000000..4f0fdaeb --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/banner_item.html @@ -0,0 +1,17 @@ +
+
+ {% if instance.banner_text %} +
{{ instance.banner_text }}
+ {% endif %} + {% if instance.banner_image %} +
+ image +
+ {% endif %} +
+
+
+ {{ instance.content }} +
+
+
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/banner_list.html b/datacenterlight/templates/datacenterlight/cms/banner_list.html new file mode 100644 index 00000000..ed1a3d49 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/banner_list.html @@ -0,0 +1,12 @@ +{% load static i18n cms_tags %} + + \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/base.html b/datacenterlight/templates/datacenterlight/cms/base.html index 0e4ee0d0..100ed883 100644 --- a/datacenterlight/templates/datacenterlight/cms/base.html +++ b/datacenterlight/templates/datacenterlight/cms/base.html @@ -55,9 +55,7 @@ {% endplaceholder %} - {% placeholder 'datacenterlight_calculator' %} - - {% placeholder 'Datacenterlight Content' %} + {% placeholder 'datacenterlight_content' %} {% placeholder 'datacenterlight_footer'%} diff --git a/datacenterlight/templates/datacenterlight/cms/calculator.html b/datacenterlight/templates/datacenterlight/cms/calculator.html index e4522ffe..c2580fc7 100644 --- a/datacenterlight/templates/datacenterlight/cms/calculator.html +++ b/datacenterlight/templates/datacenterlight/cms/calculator.html @@ -1,9 +1,9 @@ -
+
-
+
-
+

{{ instance.heading }}

@@ -13,7 +13,7 @@
-
+
{% include "datacenterlight/includes/_calculator_form.html" %} diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html index b1a25004..7743b5b9 100644 --- a/datacenterlight/templates/datacenterlight/cms/section.html +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -1,18 +1,20 @@ {% load cms_tags %} -
+
-
- {% for plugin in instance.child_plugin_instances %} - {% render_plugin plugin %} - {% endfor %} -
+ {% block section-feature %} +
+ {% for plugin in instance.child_plugin_instances %} + {% render_plugin plugin %} + {% endfor %} +
+ {% endblock section-feature %}
-
+

{{ instance.heading }}

diff --git a/dynamicweb/settings/base.py b/dynamicweb/settings/base.py index 2c4083af..05811384 100644 --- a/dynamicweb/settings/base.py +++ b/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', diff --git a/hosting/static/hosting/css/price_calculator.css b/hosting/static/hosting/css/price_calculator.css index 24624f10..316b12ca 100644 --- a/hosting/static/hosting/css/price_calculator.css +++ b/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; }