entrouvert
/
combo
16
1
Fork 0
Code Issues Pull Requests 12 Releases Wiki Activity

manager: hack some slide in animation

This commit is contained in:
Frédéric Péters 2014-12-10 14:25:54 +01:00
parent d9dcbb8bc9
commit ae499226fd
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
combo/manager/static/css/style.css
View File

@ -23,9 +23,19 @@ div.cell-list > div {
position: relative;
}
div.cell-list > div > div {
div.cell-list > div > div form {
padding: 1ex;
}
div.cell-list > div > div {
display: none;
transition: max-height linear 0.2s;
overflow: hidden;
}
div.cell-list > div.untoggled > div {
display: block;
max-height: 0;
}
div.cell-list > div.toggled > div {
@ -53,9 +63,10 @@ div.cell-list div.toggled h3:after {
}
div.cell-list button.save {
position: absolute;
position: relative;
right: 2ex;
bottom: 1ex;
float: right;
}
@ -106,6 +117,8 @@ li.cell-type input + span {
li.cell-type input ~ ul {
display: none;
overflow: hidden;
transition: max-height linear 0.2s;
}
li.cell-type input:checked + span {
@ -114,4 +127,5 @@ li.cell-type input:checked + span {
li.cell-type input:checked ~ ul {
display: block;
height: auto;
}

26
combo/manager/static/js/combo.manager.js
View File

@ -1,9 +1,9 @@
$(function() {
$('div.cell-list h3').on('click', function() {
$(this).parent().toggleClass('toggled');
$(this).parent().toggleClass('toggled').toggleClass('untoggled');
});
$('div.cell-list a.close-button').on('click', function() {
$(this).parents('.toggled').toggleClass('toggled');
$(this).parents('.toggled').toggleClass('toggled').toggleClass('untoggled');
return false;
});
$('.cell-list').sortable({
@ -51,4 +51,26 @@ $(function() {
return false;
}
});
/* hack against height:0 → height:auto not animating, this gets the height of
* the elements and dynamically generate css rules setting the max-height property
* to an appropriate height.
*/
$('li.cell-type').each(function(i, x) {
$(this).attr('id', 'cell-type-'+i);
var h = $(this).find('ul').height();
$(this).find('ul').css('display', 'block').css('position', 'relative').css('visibility', 'visible');
var style = '<style>li#cell-type-'+i+' input ~ ul { max-height: 0px; }\n'+
'li#cell-type-'+i+' input:checked ~ ul { max-height: '+h+'px; }</style>';
$(style).appendTo('head');
});
$('div.cell').each(function(i, x) {
$(this).attr('id', 'div-cell-'+i);
var h = $(this).find('h3 + div').height() + 10;
h += $(this).find('.django-ckeditor-widget').length * 200;
var style = '<style>div#div-cell-'+i+'.toggled h3 + div { max-height: '+h+'px; }</style>';
$(style).appendTo('head');
$(this).addClass('untoggled');
});
});