mirror of
https://0xacab.org/sutty/sutty
synced 2024-11-24 15:56:20 +00:00
feat: add details tag for mobiles #13587
This commit is contained in:
jazzari
parent
29b20a505a
commit
f99e0357af
4 changed files with 76 additions and 12 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
.flex-fill.des-description
|
||||
class: 'font-size-bold'
|
||||
.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
|
||||
|
|
|
|||
|
|
@ -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.'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in a new issue