edward/owl-map
1
1
Fork 1
Code Issues 11 Pull requests 1 Packages Projects Releases Wiki Activity

Add enlarge image modal

Browse source
This commit is contained in:
Edward Betts 2021-06-16 17:48:45 +02:00
parent e4b763b594
commit b460e9a848
2 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/App.vue
View file

@ -11,6 +11,21 @@
Loading ...
</span>
</button>
<div v-if="current_item && wd_item.image_list.length" class="modal fade" id="imageModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Image from Wikidata</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="img-fluid" :src="api_base_url + '/commons/' + wd_item.image_list[0]">
</div>
</div>
</div>
</div>
<div id="sidebar">
<div v-if="!current_item">
@ -115,7 +130,13 @@
</span>
<span v-if="wd_item.image_list.length">
<img class="w-100" :src="api_base_url + '/commons/' + wd_item.image_list[0]">
<a href="#" data-bs-toggle="modal" data-bs-target="#imageModal">
<img class="w-100" :src="api_base_url + '/commons/' + wd_item.image_list[0]">
</a>
<br/>
<a href="#" data-bs-toggle="modal" data-bs-target="#imageModal">
enlarge image
</a>
</span>
</div></div>

1
templates/map.html
View file

@ -12,6 +12,7 @@
<body>
<div id="app"></div>
<script src="https://unpkg.com/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script type="module">
import { createApp } from "https://cdn.skypack.dev/vue@^3.0.11";
import App from {{ url_for('static', filename='snowpack/App.vue.js') | tojson }};