Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: more spacing in edit preferences form #9097

Merged
merged 10 commits into from
Oct 19, 2023
Merged

fix: more spacing in edit preferences form #9097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
97a4f13
fix: more spacing in edit preferences form
Valimp Oct 2, 2023
2cdcc17
fix: change added class name of the last commit
Valimp Oct 2, 2023
b9e4538
fix: unwrap toggle button and text in phone mode
Valimp Oct 2, 2023
004b27a
fix: add margin bottom in rtl mode
Valimp Oct 5, 2023
27b019b
fix: radio button responsiveness
Valimp Oct 5, 2023
e0baf53
fix: responsiveness changes about previous commit
Valimp Oct 5, 2023
bcf5bc3
fix: fix margin bug last commit
Valimp Oct 5, 2023
d154f21
fix: refactor html
Valimp Oct 6, 2023
ee4c8cc
fix: fix additional CSS issues in preference panel
raphael0202 Oct 19, 2023
b44baf6
fix: fix lint issue
raphael0202 Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions html/js/product-preferences.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>' +
Expand Down Expand Up @@ -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) {

Expand All @@ -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) {
Expand All @@ -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>";
Expand All @@ -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>'
Expand All @@ -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>'
Expand Down
52 changes: 52 additions & 0 deletions scss/_off.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -615,6 +662,9 @@ html[dir="rtl"] {
.edit_button {
float: left;
}
.close_food_preferences {
margin-bottom: 1rem;
}
.delete_button {
float: left;
margin-right: unset;
Expand All @@ -636,6 +686,8 @@ html[dir="rtl"] {
}
}



.match_icons {
height: 48px;
margin-right: 4px;
Expand Down
Loading