fix: more spacing in edit preferences form (#9097)

* fix: more spacing in edit preferences form * fix: change added class name of the last commit * fix: unwrap toggle button and text in phone mode * fix: add margin bottom in rtl mode * fix: radio button responsiveness * fix: responsiveness changes about previous commit * fix: fix margin bug last commit * fix: refactor html * fix: fix additional CSS issues in preference panel * fix: fix lint issue --------- Co-authored-by: Raphaël Bournhonesque <[email protected]>
openfoodfacts · Oct 19, 2023 · dd02264 · dd02264
1 parent 609ab66
commit dd02264
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 9 deletions.
diff --git a/html/js/product-preferences.js b/html/js/product-preferences.js
@@ -91,7 +91,7 @@ function generate_preferences_switch_button(preferences_text, checkbox_id) {
 		checked = " checked";
 	}	
 
-	var html = '<div class="flex-grid direction-row" style="margin-right:2rem;">' +
+	var html = '<div class="flex-grid direction-row toggle_food_preferences" style="margin-right:2rem;margin-bottom:1rem;align-items: center;">' +
     '<fieldset class="switch round success unmarged" tabindex="0" id="' + checkbox_id +'_switch" style="align-items:center;margin-right:0.5rem;padding-top:0.1rem;padding-bottom:0.1rem;">' +
     '<input class="preferences_checkboxes" id="' + checkbox_id + '" type="checkbox"' + checked + '>' +
     '<label for="' + checkbox_id +'" class="h-space-tiny" style="margin-top:0"></label></fieldset>' +
@@ -210,9 +210,9 @@ function display_user_product_preferences(target_selected, target_selection_form
             $.each(attribute_group.attributes, function(key, attribute) {
 
                 attribute_group_html += "<li id='attribute_" + attribute.id + "' class='attribute'>" +
-                    "<fieldset style='margin:0;padding:0;border:none'>" +
-                    "<div style='width:96px;float:left;margin-right:1em;'><img src='" + attribute.icon_url + "' class='match_icons' alt=''></div>" +
-                    "<span class='attribute_name'>" + attribute.setting_name + "</span><br>";
+                    "<fieldset class='fieldset_attribute_group' style='margin:0;padding:0;border:none'>" +
+                    "<div class='attribute_img'><div style='width:96px;float:left;margin-right:1em;'><img src='" + attribute.icon_url + "' class='match_icons' alt=''></div>" +
+                    "<span class='attribute_name'>" + attribute.setting_name + "</span></div><div class='attribute_group'>";
 
                 $.each(preferences, function(key, preference) {
 
@@ -222,10 +222,10 @@ function display_user_product_preferences(target_selected, target_selection_form
                         checked = ' checked';
                     }
 
-                    attribute_group_html += "<input class='attribute_radio' id='attribute_" + attribute.id + "_" + preference.id +
+                    attribute_group_html += "<div class='attribute_item'><input class='attribute_radio' id='attribute_" + attribute.id + "_" + preference.id +
                         "' value='" + preference.id + "' type='radio' name='" + attribute.id + "'" + checked + ">" +
                         "<label for='attribute_" + attribute.id + "_" + preference.id + "'>" + preference.name + "</label>" +
-                        "</input>";
+                        "</input></div>";
                 });
 
                 if (attribute.description_short) {
@@ -234,7 +234,7 @@ function display_user_product_preferences(target_selected, target_selection_form
 
                 attribute_group_html += "<hr style='clear:left;border:none;margin:0;margin-bottom:0.5rem;padding:0;'>";
 
-                attribute_group_html += "</fieldset></li>";
+                attribute_group_html += "</div></fieldset></li>";
             });
 
             attribute_group_html += "</ul></div></li>";
@@ -244,7 +244,7 @@ function display_user_product_preferences(target_selected, target_selection_form
 
 		$(target_selection_form).html(
 			'<div class="panel callout">'
-			+ '<div class="edit_button">'
+			+ '<div class="edit_button close_food_preferences">'
 			+ '<a class="show_selected button small success round" role="button" tabindex="0">'
 			+ '<img src="/images/icons/dist/cancel.svg" class="icon" alt="" style="filter:invert(1)">'
 			+ " " + lang().close + '</a></div>'
@@ -257,7 +257,7 @@ function display_user_product_preferences(target_selected, target_selection_form
 			+ attribute_groups_html.join( "" )
 			+ '</ul>'
 			+ '<br><br>'
-			+ '<div class="edit_button">'
+			+ '<div class="edit_button close_food_preferences">'
 			+ '<a class="show_selected button small round success" role="button" tabindex="0">'
 			+ '<img src="/images/icons/dist/cancel.svg" class="icon" alt="" style="filter:invert(1)">'
 			+ " " + lang().close + '</a></div><br><br>'

diff --git a/scss/_off.scss b/scss/_off.scss
@@ -606,6 +606,53 @@ ul.pagination li a {
   }
 }
 
+@media #{$small-only} {
+  .toggle_food_preferences {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+}
+
+.close_food_preferences {
+  margin-bottom: 1rem;
+}
+.fieldset_attribute_group {
+  display: flex;
+  flex-direction: column;
+}
+.attribute_img {
+  display: flex;
+  align-items: center;
+}
+
+@media #{$small-only} {
+  .attribute_group {
+    .attribute_item:first-child label {
+      margin-top: 1rem;
+    }
+    .attribute_item label {
+      margin-top: 0;
+    }
+  }
+}
+
+@media #{$medium-up} {
+  .attribute_group .attribute_item label {
+    margin-top: 0;
+  }
+}
+
+@media #{$large-up} {
+  .attribute_group {
+    display: flex;
+    justify-content: start;
+  }
+  .attribute_group .attribute_item:first-child {
+    padding-left: 8rem;
+  }
+}
+
 html[dir="rtl"] {
   .tab-bar-section.middle {
     left: 0;
@@ -615,6 +662,9 @@ html[dir="rtl"] {
   .edit_button {
     float: left;
   }
+  .close_food_preferences {
+    margin-bottom: 1rem;
+  }
   .delete_button {
     float: left;
     margin-right: unset;
@@ -636,6 +686,8 @@ html[dir="rtl"] {
   }
 }
 
+
+
 .match_icons {
   height: 48px;
   margin-right: 4px;