M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 2 Releases Wiki Activity

feat(img_enlarged): Prepares code

Browse Source
This commit is contained in:
sovanna 2019-07-19 17:28:56 +02:00
parent a441e5996f
commit a0314e60ef
5 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/about-us/_index.md
View File

@ -2,7 +2,6 @@
title = "About us"
weight = 4
sort_by = "weight"
template = "customs/about-us.html"
[extra]
title = "About us"

4
sass/css/_base.scss
View File

@ -203,4 +203,8 @@ ul:not(.navbar-nav) li {
.badge-primary {
background-color: $brand-color;
}
.modal-lg {
max-width: 90%;
}

4
sass/css/_layout.scss
View File

@ -111,6 +111,10 @@ h3, h2, h1 {
padding-top: .5rem;
margin-top: 12px;
}
.modal-lg {
max-width: 70%;
}
}
// Extra large devices (large desktops, 1200px and up)

25
templates/_base.html
View File

@ -140,6 +140,20 @@
<!-- ./FOOTER -->
<!-- MODAL for enlarged picture -->
<div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="" id="enlarged" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
@ -153,6 +167,17 @@
</script>
<script>
$(function () {
$('[data-popup]').click(function (evt) {
var _self = $(this);
var _img_enlarged = _self.data('nsrc');
$('#enlarged').attr('src', _img_enlarged);
$('#modalEnlarged').modal('show');
});
});
</script>
</body>
</html>

4
templates/shortcodes/layout_text_img.html
View File

@ -13,7 +13,7 @@
<div class="card {% if shadow %}shadow{% endif %}">
{% if src %}
<img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
<img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
</div>
@ -27,7 +27,7 @@
<div class="card {% if shadow %}shadow{% endif %}">
{% if src %}
<img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
<img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
</div>