diff --git a/app/views/admin/communication/photo_import/_selector.html.erb b/app/views/admin/communication/photo_import/_selector.html.erb index 7d1af9a6d59c34423555763a91850fe627f1056c..9a19351ba190b26444e84a6de2eff7cd31780294 100644 --- a/app/views/admin/communication/photo_import/_selector.html.erb +++ b/app/views/admin/communication/photo_import/_selector.html.erb @@ -40,27 +40,27 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json) <div class="modal-dialog modal-fullscreen modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title"> <%= t 'photo_import.title' %></h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + <div class="col-auto"> + <h5 class="modal-title"><%= t 'photo_import.title' %></h5> + </div> + <div class="col-auto d-flex flex-fill mx-5"> + <input type="text" + name="search" + placeholder="<%= t 'photo_import.placeholder' %>" + v-model="query" + class="form-control ms-auto"> + <button type="button" + class="btn btn-primary me-auto" + v-on:click="research" + aria-label="<%= t 'photo_import.search' %>"> + <%= t 'photo_import.search' %> + </button> + </div> + <div class="col-auto"> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> </div> <div class="modal-body"> - <div class="row pure__row--small mb-3"> - <div class="col-lg-9"> - <input type="text" - name="search" - placeholder="<%= t 'photo_import.placeholder' %>" - v-model="query" - class="form-control"> - </div> - <div class="col-lg-3 d-grid"> - <button type="button" - class="btn btn-primary" - v-on:click="research" - aria-label="<%= t 'photo_import.search' %>"> - <%= t 'photo_import.search' %> - </button> - </div> - </div> <div class="row"> <div class="col-md-6"> <div class="row pure__row--small" ref="results"> @@ -76,6 +76,27 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json) :class="image === selected ? 'bg-secondary' : ''"> </div> </div> + </div> + <div class="col-md-6"> + <div class="row pure__row--small" ref="results"> + <p v-if="pexels.data.results.length === 0 || !pexels.data" > + <%= t 'photo_import.nothing' %> + </p> + <div v-for="image in pexels.data.results" class="col-6 col-lg-4"> + <img + :src="image.thumb" + :alt="image.alt" + v-on:click="select(image)" + class="img-fluid img-thumbnail mb-3" + :class="image === selected ? 'bg-secondary' : ''"> + </div> + </div> + </div> + </div> + </div> + <div class="modal-footer d-block"> + <div class="row"> + <div class="col-md-6"> <div class="row"> <div class="col-lg-5"> <a href="#" v-if="unsplash.page > 1" v-on:click="unsplash.page = unsplash.page - 1" class="btn btn-light btn-sm"> @@ -93,19 +114,6 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json) </div> </div> <div class="col-md-6"> - <div class="row pure__row--small" ref="results"> - <p v-if="pexels.data.results.length === 0 || !pexels.data" > - <%= t 'photo_import.nothing' %> - </p> - <div v-for="image in pexels.data.results" class="col-6 col-lg-4"> - <img - :src="image.thumb" - :alt="image.alt" - v-on:click="select(image)" - class="img-fluid img-thumbnail mb-3" - :class="image === selected ? 'bg-secondary' : ''"> - </div> - </div> <div class="row"> <div class="col-lg-5"> <a href="#" v-if="pexels.page > 1" v-on:click="pexels.page = pexels.page - 1" class="btn btn-light btn-sm">