feat: add custom design and donation buttons #13587

app/assets/stylesheets/application.scss

@@ -291,6 +291,10 @@ svg {
 }
 
 .custom-control {
+  padding:7px 15px 2px;
+}
+
+.custom-control-design {
   border: 1px solid magenta;
   padding:7px 15px 2px;
 }
@@ -299,7 +303,7 @@ svg {
   font-weight: bold;
 }
 
-.custom-control-label::before {
+.custom-control-design-label::after {
   display: none;
 }
 
@@ -308,6 +312,10 @@ svg {
   margin-left: 10px;
 }
 
+.designlist {
+  max-height: 500px;
+  overflow-y: auto;
+}
 
 .designs {
   .design {

app/views/sites/_designs.haml

@@ -5,31 +5,55 @@
         = render 'bootstrap/alert' do
           = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help',
             layouts: site.incompatible_layouts.to_sentence)
-      .row.designs
+      .row.designs.d-none.d-lg-flex
         - @designs = Design.all.order(priority: :desc)
-        .col-md-3.col-sm-12
+        .col-md-3.designlist
           %h5.pb-3 Selector de Plantillas
           - @designs.each do |design|
-            .design.col.d-flex.flex-column.custom-control
-              .custom
+            .design.col.d-flex.flex-column.custom-control-design{"data-controller" => "designs"}
+              %div{"data-designs-target" => "radio", "data-action" => "click->designs#selection"}
                 = f.radio_button :design_id, design.id,
                   checked: design.id == site.design_id,
                   disabled: design.disabled, 
                   required: true, class: 'radio-toolbar'
                 = f.label "design_id_#{design.id}", " - #{design.name}",
-                  class: 'custom-control-label'
+                  class: 'custom-control-design-label'
               .flex-fill.des-description
                 = sanitize_markdown design.description,
                   tags: %w[p a strong em]
                  
         
-        .col-md-6.col-sm-12
+        .col-md-6.designlist
           %h5.text-center.pb-3 Previsualizar Plantilla
           .embed-responsive.embed-responsive-1by1
-            %iframe.embed-responsive-item{allowfullscreen: "", src: "https://www.youtube.com/embed/zpOULjyy-n8?rel=0"}
-        .col-md-3.col.sm-12
+            %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
+        .col-md-3
           %h5.pb-3 Características
-          = @designs.first.inspect
+          %div{"data-designs-target" => "infocar"}
+          %p.design 1. Es gratis
+          %p.design 2. Sofware libre - Licencia GPL
+          %p.design 3. Compatible con la web distribuida
+          %br 
+          %button.btn.btn-primary.btn-lg.btn-block{type: "button"} Ver código fuente
+      
+      .row.pt-5
+        .col-lg-10.offset-2
+          .row
+            .col-8
+              %h3.text-primary= t('.custom.title')
+              %p= t('.custom.help')
+            .col-4.pt-3
+              %button.btn.btn-primary= t('.custom.contact')
+      .row.py-4
+        .col-lg-10.offset-2
+          .row
+            .col-8
+              %h3.text-primary= t('.donation.title')
+              %p= t('.donation.help')
+            .col-4.pt-3
+              %button.btn.btn-primary= t('.donation.link')
+
+
 
 
 

config/locales/en.yml

@@ -456,6 +456,15 @@ en:
         title: Store
         first_time_html: 'The store is an optional service that allows you to commercialize through your Sutty web site.  To configure it, <a href="https://sutty.nl/en/#contact">we invite you to contact us :)</a>.'
         help: 'You can configure your store here.'
+    designs:
+      custom: 
+        title: 'Want a custom design?'
+        help: 'Contact us with the details and we`ll send you a budget.'
+        contact: 'Contact'
+      donation: 
+        title: 'Want to make a donation?'
+        help: 'This will help us to develop more free themes for the community.'
+        link: 'Donation'
     fetch:
       title: 'Upgrade the site'
       help:

config/locales/es.yml

@@ -464,6 +464,15 @@ es:
         title: Tienda
         first_time_html: 'La tienda es un servicio opcional que te permite comercializar a través de tu sitio en Sutty. Para configurarla, <a href="https://sutty.nl/#contacto">te invitamos a ponerte en contacto con nosotres</a> :)'
         help: 'Puedes configurar tu tienda aquí.'
+    designs:
+      custom: 
+        title: '¿Deseas un diseño personalizado?'
+        help: 'Contáctanos con los detalles y te enviaremos un presupuesto'
+        contact: 'Contáctanos'
+      donation: 
+        title: '¿Deseas hacer una donación?'
+        help: 'Ésto nos ayudará a realizar más diseños gratis para la comunidad'
+        link: 'Donación'
     fetch:
       title: 'Actualizar el sitio'
       help: