+ #menu {
margin-right: 0;
}
+
+ > div {
+ border-right: 1px solid #B9D8D9;
+ width: 100%;
+ }
}
-#patronbasics {
- div {
- background: transparent url("../img/patron-blank.min.svg") 10px 5px no-repeat;
- border: 1px solid #CCCCCC;
+/* Patron image */
+
+.patronimage-container {
+ padding: .2em;
+ position: relative;
+
+ &:hover {
+ .patronimage {
+ opacity: .8;
+ }
+
+ .patronimage-controls {
+ opacity: 1;
+ }
+ }
+}
+
+.patronimage {
+ display: block;
+ max-width: 160px;
+ opacity: 1;
+ transition: .2s ease;
+
+ .empty {
+ background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat;
height: 125px;
margin: .3em 0 .3em .3em;
padding: 0;
- width: 105px;
+ width: 80%;
}
}
-#patronimage {
- border: 1px solid #CCCCCC;
- margin: .3em 0 .3em .3em;
- max-width: 140px;
- padding: .2em;
+.patronimage-controls {
+ left: 50%;
+ opacity: 0;
+ position: absolute;
+ text-align: center;
+ top: 80%;
+ transform: translate( -50%, -50% );
+ transition: .5s ease;
}
+.patronimage-control {
+ padding: 1em 2em;
+ }
+
.patronviews {
border-right: 1px solid #000;
border-top: 1px solid #000;
[% USE KohaDates %]
[% IF ( patron.borrowernumber ) %]
<div class="patroninfo"><h5>[% INCLUDE 'patron-title.inc' %]</h5>
+
<input type="hidden" id="hiddenborrowernumber" value="[% patron.borrowernumber | html %]">
<input type="hidden" id="hiddenborrowername" value="[% patron.surname | html %] [% patron.firstname | html %]">
<input type="hidden" id="hiddenborrowercard" value="[% patron.cardnumber | html %]">
-<!--[if IE 6]>
-<style type="tex/css">img { width: expression(this.width > 140 ? 140: true);
-}</style>
-<![endif]-->
+
+[% IF ( patronimages ) %]
+ <div>
+ <div class="patronimage-container">
+ [% IF ( patron.image ) %]
+ <img src="/cgi-bin/koha/members/patronimage.pl?borrowernumber=[% patron.borrowernumber | uri %]" class="patronimage" alt="[% patron.firstname | html %] [% patron.surname | html %] ([% patron.cardnumber | html %])" />
+ <div class="patronimage-controls">
+ <div class="patronimage-control"><a data-borrowernumber="[% patron.borrowernumber | uri %]" class="btn btn-default btn-sm edit-patronimage" title="Edit patron image" href="#"><i class="fa fa-pencil"></i> Edit</a></div>
+ </div>
+ [% ELSE %]
+ <div class="patronimage empty"></div>
+ <div class="patronimage-controls">
+ <div class="patronimage-control"><a data-borrowernumber="[% patron.borrowernumber | uri %]" class="btn btn-default btn-sm edit-patronimage" title="Add patron image" href="#"><i class="fa fa-plus"></i> Add</a></div>
+ </div>
+ [% END %]
+ </div>
+ </div>
+[% END %]
+
<ul class="patronbriefinfo">
- [% IF ( patronimages ) %]
- [% IF ( patron.image ) %]
- <li>
- <img src="/cgi-bin/koha/members/patronimage.pl?borrowernumber=[% patron.borrowernumber | uri %]" id="patronimage" alt="[% patron.firstname | html %] [% patron.surname | html %] ([% patron.cardnumber | html %])" />
- </li>
- [% ELSE %]
- <li id="patronbasics">
- <div></div>
- </li>
- [% END %]
- [% END %]
[% IF !(Koha.Preference('HidePersonalPatronDetailOnCirculation')) %]
[% SWITCH Koha.Preference( 'AddressFormat' ) %]
[% CASE 'de' %]
<li><a href="/cgi-bin/koha/ill/ill-requests.pl?borrowernumber=[% patron.borrowernumber | uri %]">Interlibrary loans</a></li>
[% END %]
</ul></div>
+
+<!-- Modal -->
+<div class="modal" id="patronImageEdit" tabindex="-1" role="dialog" aria-labelledby="patronImageEditLabel">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title" id="patronImageEditLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" />
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+ </div>
+ </div>
+ </div>
+</div>
+
[% END %]
$("#select_patron_messages").on("change",function(){
$("#borrower_message").val( $(this).val() );
});
+
+ $(".edit-patronimage").on("click", function(e){
+ e.preventDefault();
+ var borrowernumber = $(this).data("borrowernumber");
+ $.get("/cgi-bin/koha/members/moremember.pl", { borrowernumber : borrowernumber }, function( data ){
+ var image_form = $(data).find("#picture-upload");
+ image_form.show().find(".cancel").remove();
+ $("#patronImageEdit .modal-body").html( image_form );
+ });
+ var modalTitle = $(this).attr("title");
+ $("#patronImageEdit .modal-title").text(modalTitle);
+ $("#patronImageEdit").modal("show");
+ });
});
function confirm_updatechild() {