chg: Nicer screenshot view

pull/1857/head
Iglocska 2017-01-19 10:18:29 +01:00
parent 4b45d2775d
commit de754d1062
4 changed files with 51 additions and 2 deletions

View File

@ -617,7 +617,7 @@ attributes or the appropriate distribution level. If you think there is a mistak
return false;
});
$('.screenshot').click(function() {
$(this).toggleClass('screenshot-collapsed');
screenshotPopup($(this).attr('src'), $(this).attr('title'));
});
});
</script>

View File

@ -35,6 +35,7 @@
<body>
<div id="popover_form" class="ajax_popover_form"></div>
<div id="confirmation_box" class="confirmation_box"></div>
<div id="screenshot_box" class="screenshot_box"></div>
<div id="gray_out" class="gray_out"></div>
<div id="container">
<?php echo $this->element('global_menu');

View File

@ -784,6 +784,16 @@ a.proposal_link_red:hover {
z-index:5;
}
.screenshot_box {
display:none;
position: fixed;
top:150px;
background-color:#f4f4f4;
border-radius: 11px 11px 10px 10px;
box-shadow: 4px 4px 4px #333;
z-index:5;
}
.ajax_popover_form legend, .ajax_popover_form .legend {
border-radius: 10px 10px 0px 0px;
padding-left:10px;
@ -1640,6 +1650,28 @@ table.table.table-striped tr.deleted_row td {
width:200px;
}
/*
nifty close-icon from http://stackoverflow.com/a/20139794/2622597
*/
.close-icon
{
position:absolute;
top:-10px;
right:-10px;
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:black;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:black;
box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}

View File

@ -41,6 +41,16 @@ function genericPopup(url, popupTarget) {
});
}
function screenshotPopup(screenshotData, title) {
popupHtml = '<img src="' + screenshotData + '" id="screenshot-image" title="' + title + '" />';
popupHtml += '<div class="close-icon useCursorPointer" onClick="closeScreenshot();"></div>';
$('#screenshot_box').html(popupHtml);
left = ($(window).width() / 2) - ($('#screenshot-image').width() / 2);
$('#screenshot_box').css({'left': left + 'px'});
$('#screenshot_box').show();
$("#gray_out").fadeIn();
}
function submitPublish(id, type) {
$("#PromptForm").submit();
}
@ -2800,8 +2810,14 @@ $(document).keyup(function(e){
if (e.keyCode === 27) {
$("#gray_out").fadeOut();
$("#popover_form").fadeOut();
$("#screenshot_box").fadeOut();
$("#confirmation_box").fadeOut();
$(".loading").hide();
resetForms();
}
});
});
function closeScreenshot() {
$("#screenshot_box").fadeOut();
$("#gray_out").fadeOut();
}