Skip to content

Commit

Permalink
Allow overflow in modal to enable scrolling to the bottom, use BS fle…
Browse files Browse the repository at this point in the history 
…x in access control modal
  • Loading branch information
@Dananji
Dananji committed Aug 6, 2024
1 parent 37cfbea commit bb6310f
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 bb6310f

Please sign in to comment.