refactor: add carousel plugin to landpage

nossas · Oct 19, 2023 · c82d091 · c82d091
1 parent 0f3ec25
commit c82d091
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 4 deletions.
diff --git a/app/contrib/frontend/landpage/cms_plugins.py b/app/contrib/frontend/landpage/cms_plugins.py
@@ -1,12 +1,14 @@
 from django import forms
 from django.db.models import Q
+from django.contrib import admin
+
 
 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
 
 from contrib.bonde.models import Community
 
-from .models import Navbar, Footer
+from .models import Navbar, CarouselBlock, CarouselItem, Footer
 from .forms import LayoutBlockForm, LayoutBlockPressureForm
 
 # from .layouts import Layout
@@ -82,6 +84,29 @@ def render(self, context, instance, placeholder):
         return context
 
 
+plugin_pool.register_plugin
+class CarouselItemPlugin(admin.StackedInline):
+    model = CarouselItem
+    name = "Carousel Item"
+
+
+@plugin_pool.register_plugin
+class CarouselBlockPlugin(CMSPluginBase):
+    name = "Bloco de Carousel"
+    model = CarouselBlock
+    inlines = [CarouselItemPlugin]
+
+    render_template = "frontend/landpage/plugins/carousel.html"
+
+    def render(self, context, instance, placeholder):
+        context = super().render(context, instance, placeholder)
+        items = instance.items.all()
+        context.update({
+            'items': items,
+        })
+        return context
+
+
 @plugin_pool.register_plugin
 class FooterPlugin(CMSPluginBase):
     name = "Rodapé (Padrão)"

diff --git a/app/contrib/frontend/landpage/migrations/0008_auto_20231019_2200.py b/app/contrib/frontend/landpage/migrations/0008_auto_20231019_2200.py
@@ -0,0 +1,65 @@
+# Generated by Django 3.2 on 2023-10-19 22:00
+
+import colorfield.fields
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms', '0022_auto_20180620_1551'),
+        migrations.swappable_dependency(settings.FILER_IMAGE_MODEL),
+        ('landpage', '0007_merge_0006_auto_20230821_2039_0006_auto_20230822_1436'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='CarouselBlock',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='landpage_carouselblock', serialize=False, to='cms.cmsplugin')),
+                ('title', models.CharField(max_length=120, verbose_name='Título')),
+                ('description', models.CharField(blank=True, max_length=120, null=True, verbose_name='Descrição')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.AlterField(
+            model_name='block',
+            name='background_color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')]),
+        ),
+        migrations.AlterField(
+            model_name='footer',
+            name='background_color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor de fundo'),
+        ),
+        migrations.AlterField(
+            model_name='footer',
+            name='color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor da fonte'),
+        ),
+        migrations.AlterField(
+            model_name='navbar',
+            name='background_color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor de fundo'),
+        ),
+        migrations.AlterField(
+            model_name='navbar',
+            name='color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor da fonte'),
+        ),
+        migrations.CreateModel(
+            name='CarouselItem',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('text', models.TextField(verbose_name='Texto do item')),
+                ('block', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='items', to='landpage.carouselblock')),
+                ('image', filer.fields.image.FilerImageField(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.FILER_IMAGE_MODEL, verbose_name='Imagem do item')),
+            ],
+        ),
+    ]
diff --git a/app/contrib/frontend/landpage/models.py b/app/contrib/frontend/landpage/models.py
@@ -118,8 +118,17 @@ class Meta:
         abstract = False
 
 
+class CarouselBlock(CMSPlugin):
+    title = models.CharField("Título", max_length=120)
+    description = models.CharField("Descrição", max_length=120, null=True, blank=True)
+
+
+class CarouselItem(models.Model):
+    block = models.ForeignKey(CarouselBlock, related_name='items', on_delete=models.CASCADE)
+    image = FilerImageField(verbose_name="Imagem do item", null=True, blank=True, on_delete=models.SET_NULL)
+    text = models.TextField("Texto do item")
+
+
 class Footer(BlockElementStyled, CMSPlugin):
     class Meta:
         abstract = False
-
-
diff --git a/app/contrib/frontend/landpage/templates/frontend/landpage/plugins/carousel.html b/app/contrib/frontend/landpage/templates/frontend/landpage/plugins/carousel.html
@@ -0,0 +1,67 @@
+{% load cms_tags sekizai_tags static %}
+
+{% addtoblock "css" %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
+{% endaddtoblock %}
+
+<section class="bg-[#024C2B] relative">
+  <div class="container px-5 py-28 mx-auto md:px-4">
+    {% if instance.title or instance.description %}
+      <div class="mb-6">
+        {% if instance.title %}
+          <h2 class="text-4xl text-white text-center max-w-[620px] mx-auto mb-4">{{ instance.title }}</h2>
+        {% endif %}
+        {% if instance.description %}
+          <p class="text-white text-center max-w-[815px] mx-auto">{{ instance.description }}</p>
+        {% endif %}
+      </div>
+    {% endif %}
+
+    <div class="swiper mySwiper md:min-h-[300px]">
+      <div class="swiper-wrapper">
+        <!-- Slides -->
+        {% for item in items %}
+          <div class="swiper-slide">
+            <img src="{{ item.image.url }}" alt="{{ item.text }}">
+            <p>{{ item.text }}</p>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+    <div class="swiper-button-prev mt-14 md:mx-5 md:mt-10"></div>
+    <div class="swiper-button-next mt-14 md:mx-5 md:mt-10"></div>
+  </div>
+</section>
+
+{% addtoblock "js" %}
+  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+  <script>
+    var swiper = new Swiper(".mySwiper", {
+      slidesPerView: 1,
+      spaceBetween: 10,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 4,
+          spaceBetween: 40,
+        },
+        1024: {
+          slidesPerView: 5,
+          spaceBetween: 50,
+        },
+      },
+    });
+  </script>
+{% endaddtoblock %}
diff --git a/app/contrib/frontend/landpage/templates/frontend/landpage/plugins/carousel_item.html b/app/contrib/frontend/landpage/templates/frontend/landpage/plugins/carousel_item.html
@@ -0,0 +1,6 @@
+{% load cms_tags sekizai_tags static %}
+
+<div class="swiper-slide">
+  <img src="{{ item.image.url }}" alt="{{ item.text }}">
+  <p>{{ item.text }}</p>
+</div>
diff --git a/app/project/settings/cms.py b/app/project/settings/cms.py
@@ -12,7 +12,7 @@
 CMS_PLACEHOLDER_CONF = {
     "content": {
         "name": "Blocos",
-        "plugins": ["BlockPlugin", "BlockPressurePlugin", "EleicaoCandidateListPlugin", "EleicaoCarouselPlugin", "EleicaoVoterFormPlugin"],
+        "plugins": ["BlockPlugin", "BlockPressurePlugin", "CarouselBlockPlugin", "EleicaoCandidateListPlugin", "EleicaoCarouselPlugin", "EleicaoVoterFormPlugin"],
     },
     "navigation": {
         "name": "Navegação",