diff --git a/app/assets/stylesheets/form.sass b/app/assets/stylesheets/form.sass index f4d431ff..cd6c2440 100644 --- a/app/assets/stylesheets/form.sass +++ b/app/assets/stylesheets/form.sass @@ -90,7 +90,7 @@ input, textarea, select, a.button, .actions > button, div.tagsinput, .ui-autocom label color: #258 cursor: pointer - padding: 0.8em 0 + padding: 0.5em display: inline-block &:hover color: #222 diff --git a/app/assets/stylesheets/region.sass b/app/assets/stylesheets/region.sass index a6437bd7..7f309e4f 100644 --- a/app/assets/stylesheets/region.sass +++ b/app/assets/stylesheets/region.sass @@ -33,22 +33,47 @@ header nav &:hover ul box-shadow: 0 4px 4px gray -.radios - .radios +// .field.region .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 - text-align: left background-color: white + .radios + display: inline label display: none - padding: 0.2em - input:checked + label - display: inline - .region:hover .radios - z-index: 1000 + min-width: 100% + &:hover > .radios, label:hover + .radios, .radios:hover position: absolute - box-shadow: 0 4px 4px gray - label - display: block !important + box-shadow: 0 0 0.1em black + & > .region > label, & > label + display: inline-block + .radios + position: absolute + min-width: 12em + input:checked + label + display: inline-block // Override for the missing quebec flag! .flag-icon-ca-qc diff --git a/app/views/regions/_selector_region.haml b/app/views/regions/_selector_region.haml index fbffc4f0..b0f091ea 100644 --- a/app/views/regions/_selector_region.haml +++ b/app/views/regions/_selector_region.haml @@ -1,19 +1,22 @@ - 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.label "region_id_#{selector_region.id}" do - if selector_region.code.present? = 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 %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? - %small - %em.fa.fa-chevron-right + %em.fa.fa-chevron-right - if selector_region.regions.present? .radios = 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.label { t(b.text, scope: :countries, default: b.text) }