feat: add details tag for mobiles #13587

app/assets/stylesheets/application.scss

@@ -307,11 +307,6 @@ svg {
   display: none;
 }
 
-.des-description {
-  font-size: small;
-  margin-left: 10px;
-}
-
 .designlist {
   max-height: 500px;
   overflow-y: auto;
@@ -329,6 +324,41 @@ svg {
   width: 0;
 }
 
+// details styles
+.details {
+  position: relative;
+}
+
+.styled summary::-webkit-details-marker {
+  display: none;
+ }
+ 
+ .styled summary {
+   list-style: none;
+   cursor: default;
+   position: relative;
+   
+   &::after {
+     content: '▶';
+     font-size: 2em;
+     position: absolute;
+     left: 97%;
+     bottom: 55%;
+     transform: rotate(55deg);
+     color: magenta
+   }
+   
+   &:focus {
+    background-color: #13FEFE;
+   }
+ }
+ 
+ details[open].styled > summary::after {
+   transform: rotate(90deg) translatey(-0.1em);
+   color: black
+ }
+
+
 .editor {
   .ProseMirror-menubar {
     min-height: 32px;

app/views/sites/_designs.haml

@@ -5,10 +5,12 @@
         = render 'bootstrap/alert' do
           = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help',
             layouts: site.incompatible_layouts.to_sentence)
+      
+      -# Desktop view with 3 columns and radio_buttons
       .row.designs.d-none.d-lg-flex
-        - @designs = Design.all.order(priority: :desc)
+        - @designs = Design.all.order(priority: :desc).reject(&:no_theme?)
         .col-md-3.designlist
-          %h5.pb-3 Selector de Plantillas
+          %h2.pb-3= t('.selector')
           - @designs.each do |design|
             .design.col.d-flex.flex-column.custom-control-design{"data-controller" => "designs"}
               %div{"data-designs-target" => "radio", "data-action" => "click->designs#selection"}
@@ -17,25 +19,49 @@
                   disabled: design.disabled, 
                   required: true, class: 'radio-toolbar'
                 = f.label "design_id_#{design.id}", " - #{design.name}",
-                  class: 'custom-control-design-label'
+                  class: 'font-size-bold'
-              .flex-fill.des-description
+              .flex-fill.f-3
                 = sanitize_markdown design.description,
                   tags: %w[p a strong em]
                  
         
         .col-md-6.designlist
-          %h5.text-center.pb-3 Previsualizar Plantilla
+          %h2.text-center.pb-3= t('.preview')
           .embed-responsive.embed-responsive-1by1
             %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
         .col-md-3
-          %h5.pb-3 Características
+          %h2.pb-3= t('.characteristics')
           %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
+          -# %button.btn.btn-primary.btn-lg.btn-block{type: "button"}= t('.source_code')
+          %a.btn.btn-primary.btn-lg.btn-block.mt-4{role: "button", href: "sutty.nl"}= t('.source_code') 
       
+      -# Tablet and mobile views with 1 columns and accordion
+      .row.d-lg-none
+        - @designs = Design.all.order(priority: :desc).reject(&:no_theme?)
+        .col 
+          -# image_path("images/logo.png")
+          %h1.pb-3.text-center.font-weight-bolder= t('.selector')
+          - @designs.each do |design|
+            %details.styled
+              %summary.custom-control-design
+                %h5.font-weight-bolder - #{design.name}  
+                %br #{design.description}
+              .col
+                %h1.text-center.font-weight-bolder.pb-3= t('.preview')
+                .embed-responsive.embed-responsive-1by1
+                  %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
+              .col
+                %h1.text-center.font-weight-bolder.pb-3= t('.characteristics')
+                %h5.design 1. Es gratis
+                %h5.design 2. Sofware libre - Licencia GPL
+                %a.btn.btn-primary.btn-lg.btn-block.mt-4{role: "button", href: design.url}= t('.source_code')
+
+
+      -# Custom and Donation buttons 
       .row.pt-5
         .col-lg-10.offset-2
           .row

config/locales/en.yml

@@ -457,6 +457,10 @@ en:
         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:
+      selector: 'Theme Selector'
+      preview: 'Theme Preview'
+      characteristics: 'Characteristics'
+      source_code: 'View source code'
       custom: 
         title: 'Want a custom design?'
         help: 'Contact us with the details and we`ll send you a budget.'

config/locales/es.yml

@@ -465,6 +465,10 @@ es:
         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:
+      selector: 'Selector de Plantillas'
+      preview: 'Previsualizar Plantilla'
+      characteristics: 'Características'
+      source_code: 'Ver código fuente'
       custom: 
         title: '¿Deseas un diseño personalizado?'
         help: 'Contáctanos con los detalles y te enviaremos un presupuesto'