diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 65a207fa..1c49b4f2 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -290,16 +290,37 @@ svg { } } +.custom-control { + border: 1px solid magenta; + padding:7px 15px 2px; +} + .custom-control-label { font-weight: bold; } +.custom-control-label::before { + display: none; +} + +.des-description { + font-size: small; + margin-left: 10px; +} + + .designs { .design { margin-top: 1rem; } } +.radio-toolbar { + opacity: 0; + position: absolute; + width: 0; +} + .editor { .ProseMirror-menubar { min-height: 32px; diff --git a/app/views/sites/_designs.haml b/app/views/sites/_designs.haml index d1119954..c846d0c8 100644 --- a/app/views/sites/_designs.haml +++ b/app/views/sites/_designs.haml @@ -1,34 +1,33 @@ = form_for site, html: { class: form_class(site) } do |f| - unless site.persisted? .form-group#design_id - %h2= t('.design.title') - %p.lead= t('.help.design') - if invalid? site, :design_id = render 'bootstrap/alert' do = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help', layouts: site.incompatible_layouts.to_sentence) - .row + .row.designs - @designs = Design.all.order(priority: :desc) - .col-md-3.black-bg.col-sm-12 + .col-md-3.col-sm-12 %h5.pb-3 Selector de Plantillas - @designs.each do |design| - .design.col.d-flex.flex-column - .custom-control.custom-radio + .design.col.d-flex.flex-column.custom-control + .custom = f.radio_button :design_id, design.id, checked: design.id == site.design_id, - disabled: design.disabled, - required: true, class: 'custom-control-input' - = f.label "design_id_#{design.id}", design.name, + disabled: design.disabled, + required: true, class: 'radio-toolbar' + = f.label "design_id_#{design.id}", " - #{design.name}", class: 'custom-control-label' - .flex-fill + .flex-fill.des-description = sanitize_markdown design.description, tags: %w[p a strong em] + - .col-md-6.black-bg.col-sm-12 + .col-md-6.col-sm-12 %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.black-bg.col.sm-12 + .col-md-3.col.sm-12 %h5.pb-3 Características = @designs.first.inspect