Skip to content

Commit

Permalink
Merge pull request #5974 from avalonmediasystem/ios-scroll-5616
Browse files Browse the repository at this point in the history 
Allow overflow in modal to enable scrolling to the bottom, use BS flex in access control modal
  • Loading branch information
Jon Cameron authored Aug 7, 2024
2 parents 07b47e1 + bb6310f commit bf3b288
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 34 deletions.
22 changes: 13 additions & 9 deletions app/assets/stylesheets/avalon/_modals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,25 @@

.special-access label {
display: block;

input,
select {
display: inline;
width: auto;
min-width: 300px;
}

p {
margin: 10px 0 5px 0;
}

input,
select,
.twitter-typeahead {
width: auto;
width: fit-content;
min-width: 375px;
}

input.form-control.date-input {
width: fit-content;
min-width: 0;
}
}

.special-access .d-flex {
gap: 0.5em;
}
}

Expand Down
2 changes: 1 addition & 1 deletion app/javascript/components/ReactButtonContainer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.modal-open .modal {
height: 100vh;
height: calc(100vh - 80px);
overflow: scroll;
}

Expand Down
58 changes: 34 additions & 24 deletions app/views/bookmarks/update_access_control.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,51 +74,61 @@ Unless required by applicable law or agreed to in writing, software distributed
<legend>Special Access</legend>
<%= label_tag "user" do %>
<%= render partial: "modules/tooltip", locals: { form: form, field: 'user', tooltip: t("access_control.user"), options: {display_label: t("access_control.userlabel").html_safe} } %>
<div style='display:inline-block;position:relative'>
<div class="d-flex flex-column flex-sm-row mb-1">
<%= hidden_field_tag "user" %>
<%= text_field_tag "user_display", nil,
class: "typeahead from-model form-control",
data: { model: 'user', target: "user" } %><br>
<%= text_field_tag "add_user_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %><br>
data: { model: 'user', target: "user" } %>
<%= text_field_tag "add_user_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
<%= text_field_tag "add_user_end", nil, placeholder: 'End Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
</div>
<%= button_tag "Add", name: 'submit_add_user', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_user', class:'btn btn-outline remove_access', value: 'Remove' %>
<div class="d-flex justify-content-start">
<%= button_tag "Add", name: 'submit_add_user', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_user', class:'btn btn-outline remove_access', value: 'Remove' %>
</div>
<% end %>
<%= label_tag "group" do %>
<%= render partial: "modules/tooltip", locals: { form: form, field: 'group', tooltip: t("access_control.group"), options: {display_label: t("access_control.grouplabel").html_safe} } %>
<% dropdown_values = [Admin::Group.non_system_groups, 'name', 'name'] %>
<% dropdown_values = options_from_collection_for_select(*dropdown_values) %>
<%= select_tag "group",
dropdown_values,
{ include_blank: true, class: "form-control"}%><br>
<%= text_field_tag "add_group_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %><br>
<%= text_field_tag "add_group_end", nil, placeholder: 'End Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
<%= button_tag "Add", name: 'submit_add_group', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_group', class:'btn btn-outline remove_access', value: 'Remove' %>
<div class="d-flex flex-column flex-sm-row mb-1">
<% dropdown_values = [Admin::Group.non_system_groups, 'name', 'name'] %>
<% dropdown_values = options_from_collection_for_select(*dropdown_values) %>
<%= select_tag "group",
dropdown_values,
{ include_blank: true, class: "form-control"}%>
<%= text_field_tag "add_group_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
<%= text_field_tag "add_group_end", nil, placeholder: 'End Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
</div>
<div class="d-flex justify-content-start">
<%= button_tag "Add", name: 'submit_add_group', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_group', class:'btn btn-outline remove_access', value: 'Remove' %>
</div>
<% end %>
<%= label_tag "class" do %>
<%= render partial: "modules/tooltip", locals: { form: form, field: 'class', tooltip: t("access_control.class"), options: {display_label: t("access_control.classlabel").html_safe} } %>
<div style='display:inline-block;position:relative;'>
<div class="d-flex flex-column flex-sm-row mb-1">
<%= hidden_field_tag "class" %>
<%= text_field_tag "class_display", nil,
class: "typeahead from-model form-control",
data: { model: 'externalGroup', target: "class" } %><br>
<%= text_field_tag "add_class_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %><br>
data: { model: 'externalGroup', target: "class" } %>
<%= text_field_tag "add_class_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
<%= text_field_tag "add_class_end", nil, placeholder: 'End Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
</div>
<%= button_tag "Add", name: 'submit_add_class', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_class', class:'btn btn-outline remove_access', value: 'Remove' %>
<div class="d-flex justify-content-start">
<%= button_tag "Add", name: 'submit_add_class', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_class', class:'btn btn-outline remove_access', value: 'Remove' %>
</div>
<% end %>
<%= label_tag "ipaddress" do %>
<%= render partial: "modules/tooltip", locals: { form: form, field: 'ipaddress', tooltip: t("access_control.ipaddress"), options: {display_label: t("access_control.ipaddresslabel").html_safe} } %>
<div style='display:inline-block;top:1px;position:relative;'>
<%= text_field_tag "ipaddress", nil, class: "form-control" %><br>
<%= text_field_tag "add_ipaddress_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %><br>
<div class="d-flex flex-column flex-sm-row mb-1">
<%= text_field_tag "ipaddress", nil, class: "form-control" %>
<%= text_field_tag "add_ipaddress_begin", nil, placeholder: 'Begin Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
<%= text_field_tag "add_ipaddress_end", nil, placeholder: 'End Date (yyyy-mm-dd)', class: 'form-control date-input access_date', autocomplete: 'off' %>
</div>
<%= button_tag "Add", name: 'submit_add_ipaddress', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_ipaddress', class:'btn btn-outline remove_access', value: 'Remove' %>
<div class="d-flex justify-content-start">
<%= button_tag "Add", name: 'submit_add_ipaddress', class:'btn btn-outline', value: 'Add' %>
<%= button_tag "Remove", name: 'submit_remove_ipaddress', class:'btn btn-outline remove_access', value: 'Remove' %>
</div>
<% end %>
</fieldset>
<div class="modal-footer">
Expand Down

0 comments on commit bf3b288

Please sign in to comment.