Improve language filter preferences look (#3184)

diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index db60e1e10675a9d9c306ac22cdb7838203de8f89..6af846b0a2d0ac15046551b4795e314e8b6ee9ce 100644 (file)
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -12,6 +12,7 @@ code {
 .simple_form {
   .input {
     margin-bottom: 15px;
+    overflow: hidden;
   }
 
   span.hint {
@@ -44,11 +45,12 @@ code {
 
   .input.file,
   .input.select,
-  .input.radio_buttons {
+  .input.radio_buttons,
+  .input.check_boxes {
     padding: 15px 0;
     margin-bottom: 0;
 
-    label {
+    .label_input > label {
       font-family: inherit;
       font-size: 16px;
       color: $primary-text-color;
@@ -353,6 +355,19 @@ code {
 }
 
 .user_filtered_languages {
+
+  & > label {
+    font-family: inherit;
+    font-size: 16px;
+    color: $primary-text-color;
+    display: block;
+    padding-top: 5px;
+  }
+
+  .hint {
+    margin-bottom: 15px;
+  }
+
   li {
     float: left;
     width: 50%;

diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index 0532d1dc8c8a70e0efbf26e46db5077b3582e780..3771698d19078e83490c707931459f8258703d83 100644 (file)
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -14,7 +14,7 @@
 
     = f.input :filtered_languages,
       collection: I18n.available_locales,
-      wrapper: :with_label,
+      wrapper: :with_block_label,
       include_blank: false,
       label_method: lambda { |locale| human_locale(locale) },
       required: false,

diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb
index 60bbcb778580a44d2fde1635f86c9c061209df8d..ca7531748e14a11800259496b6577c59ff9c6b74 100644 (file)
--- a/config/initializers/simple_form.rb
+++ b/config/initializers/simple_form.rb
@@ -57,6 +57,14 @@ SimpleForm.setup do |config|
     b.use :error, wrap_with: { tag: :span, class: :error }
   end
 
+  config.wrappers :with_block_label, class: :input, hint_class: :field_with_hint, error_class: :field_with_errors do |b|
+    b.use :html5
+    b.use :label
+    b.use :hint, wrap_with: { tag: :span, class: :hint }
+    b.use :input
+    b.use :error, wrap_with: { tag: :span, class: :error }
+  end
+
   # The default wrapper to be used by the FormBuilder.
   config.default_wrapper = :default