ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Post editing: quasi-popup in place of sliding unit

Browse source
This commit is contained in:
Marcin Kurczewski 2014-02-17 22:59:11 +01:00
parent 65c6caa13c
commit eee6421775
3 changed files with 52 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public_html/media/css/post-view.css
View file

@ -165,9 +165,28 @@ i.icon-fav {
margin: 2px;
}
#inner-content {
position: relative;
}
.unit.edit-post {
position: absolute;
margin-top: 0;
padding: 1em;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 1em 1em rgba(255, 255, 255, 0.8);
z-index: 99;
top: 0;
left: 0;
right: 0;
display: none;
}
.unit.edit-post ul.tagit,
.unit.edit-post input:not([type=file]) {
background: rgba(255, 255, 255, 0.75);
}
.unit.edit-post ul.tagit input {
background: transparent;
}
ul.tagit {
display: block;
vertical-align: middle;

34
public_html/media/js/post-view.js
View file

@ -12,7 +12,6 @@ $(function()
aDom.addClass('inactive');
var formDom = $('form.edit-post');
formDom.data('original-data', formDom.serialize());
if (formDom.find('.tagit').length == 0)
{
$.getJSON('/tags?json', {filter: 'order:popularity,desc'}, function(data)
@ -36,16 +35,41 @@ $(function()
else
aDom.removeClass('inactive');
var editUnit = formDom.parents('.unit');
var postUnit = $('.post-wrapper');
if (!$(formDom).is(':visible'))
{
formDom.parents('.unit')
.show().css('height', formDom.height()).hide()
.slideDown(function()
formDom.data('original-data', formDom.serialize());
editUnit.show();
var editUnitHeight = formDom.height();
editUnit.css('height', editUnitHeight);
editUnit.hide();
if (postUnit.height() < editUnitHeight)
postUnit.animate({height: editUnitHeight + 'px'}, 'fast');
editUnit.slideDown('fast', function()
{
$(this).css('height', 'auto');
});
}
$('html, body').animate({ scrollTop: $(formDom).offset().top + 'px' }, 'fast');
else
{
editUnit.slideUp('fast');
var postUnitOldHeight = postUnit.height();
postUnit.height('auto');
var postUnitHeight = postUnit.height();
postUnit.height(postUnitOldHeight);
if (postUnitHeight != postUnitOldHeight)
postUnit.animate({height: postUnitHeight + 'px'});
if ($('.post-wrapper').height() < editUnitHeight)
$('.post-wrapper').animate({height: editUnitHeight + 'px'});
return;
}
formDom.find('input[type=text]:visible:eq(0)').focus();
});

8
src/Views/post-view.phtml
View file

@ -309,16 +309,16 @@ $canEditAnything = count(array_filter($editPostPrivileges)) > 0;
</div>
<div id="inner-content">
<div class="post-wrapper post-type-<?php echo strtolower(PostType::toString($this->context->transport->post->type)) ?>">
<?php echo $this->renderFile('post-file-render') ?>
</div>
<?php if ($canEditAnything): ?>
<div class="unit edit-post">
<?php $this->renderFile('post-edit') ?>
</div>
<?php endif ?>
<div class="post-wrapper post-type-<?php echo strtolower(PostType::toString($this->context->transport->post->type)) ?>">
<?php echo $this->renderFile('post-file-render') ?>
</div>
<?php
LayoutHelper::addStylesheet('comment-list.css');
LayoutHelper::addStylesheet('comment-small.css');