Work on the region selector

This commit is contained in:
echarp 2019-05-03 11:35:24 +02:00
parent 6803ef5c9b
commit 02fbb4c913
3 changed files with 46 additions and 18 deletions

View File

@ -90,7 +90,7 @@ input, textarea, select, a.button, .actions > button, div.tagsinput, .ui-autocom
label label
color: #258 color: #258
cursor: pointer cursor: pointer
padding: 0.8em 0 padding: 0.5em
display: inline-block display: inline-block
&:hover &:hover
color: #222 color: #222

View File

@ -33,22 +33,47 @@ header nav
&:hover ul &:hover ul
box-shadow: 0 4px 4px gray box-shadow: 0 4px 4px gray
.radios // .field.region .radios
.radios // display: inline-block
// text-align: left
// background-color: white
// label
// width: 100%
// display: none
// &:hover > .region > label
// display: block
// z-index: 1000
// input:checked + label
// display: inline
// .region:hover .radios
// z-index: 1000
// position: absolute
// box-shadow: 0 4px 4px gray
// margin-left: 10em
.field.region
display: block
text-align: left
& > label
display: inline-block
.radios
z-index: 1000
display: inline-block display: inline-block
text-align: left
background-color: white background-color: white
.radios
display: inline
label label
display: none display: none
padding: 0.2em min-width: 100%
input:checked + label &:hover > .radios, label:hover + .radios, .radios:hover
display: inline
.region:hover .radios
z-index: 1000
position: absolute position: absolute
box-shadow: 0 4px 4px gray box-shadow: 0 0 0.1em black
label & > .region > label, & > label
display: block !important display: inline-block
.radios
position: absolute
min-width: 12em
input:checked + label
display: inline-block
// Override for the missing quebec flag! // Override for the missing quebec flag!
.flag-icon-ca-qc .flag-icon-ca-qc

View File

@ -1,19 +1,22 @@
- if selector_region.regions.present? || selector_region.url.blank? - if selector_region.regions.present? || selector_region.url.blank?
%span.region{ title: selector_region.code } .region{ title: selector_region.code }
= f.radio_button :region_id, selector_region.id = f.radio_button :region_id, selector_region.id
= f.label "region_id_#{selector_region.id}" do = f.label "region_id_#{selector_region.id}" do
- if selector_region.code.present? - if selector_region.code.present?
= flag_icon selector_region.code.downcase = flag_icon selector_region.code.downcase
= t selector_region.code, scope: :countries, default: selector_region.name %span.name
= t selector_region.code, scope: :countries,
default: selector_region.name
- else - else
%em.fa.fa-map %em.fa.fa-map
= t selector_region, scope: :countries, default: selector_region %span.name
= t selector_region, scope: :countries, default: selector_region
- if selector_region.regions.present? - if selector_region.regions.present?
%small %em.fa.fa-chevron-right
%em.fa.fa-chevron-right
- if selector_region.regions.present? - if selector_region.regions.present?
.radios .radios
= f.collection_radio_buttons :region_id, = f.collection_radio_buttons :region_id,
Region.where(region: selector_region), :id, :name, include_hidden: false do |b| Region.where(region: selector_region), :id, :name,
include_hidden: false do |b|
= b.radio_button = b.radio_button
= b.label { t(b.text, scope: :countries, default: b.text) } = b.label { t(b.text, scope: :countries, default: b.text) }