Skip to content

CIRCLE / cloud

Go to a project
Commit b0aaeda1 by [3~[3~[3~Bence Dnyi
Options

Store AJAX loading demo

parent 7a4c4881
Showing with 117 additions and 85 deletions
one/templates/base.html
......@@ -28,6 +28,15 @@ $(function(){
});
}
})
$('#load-more-files').click(function(){
$('.actions', this).show();
var that=this;
setTimeout(function(){
$(that).prev('li').slideDown(500,function(){
$('.actions', that).hide();
});
},2000);
})
})
</script>
......
one/templates/home.html
......@@ -4,7 +4,7 @@
{% block content %}
<div class="boxes">
<div class="contentblock" id="state">
<h2>Új virtuális gép indítása</h2>
<h2>Virtuális gépek</h2>
<div class="content">
{% for m in templates %}
<form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
......@@ -26,91 +26,114 @@
{% endfor %}
</div>
<div class="boxes">
<div class="contentblock">
<h2>
Adattár
</h2>
<div class="content">
<ul class="file-list">
<li class="wm">
<div class="summary">
<div class="name filetype-c">hello.c</div>
<div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
</div>
<div class="info">1 Kb</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Típus: <span class="value">text/plain</span></li>
</ul>
</div>
</li>
<li class="wm">
<div class="summary">
<div class="name filetype-image">suna.jpg</div>
<div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
</div>
<div class="info">1 Kb</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Típus: <span class="value">image/jpg</span></li>
</ul>
</div>
</li>
<li class="wm">
<div class="summary">
<div class="name filetype-folder">poresz</div>
<div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
</div>
<div class="info">katalógus</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Fájlok: <span class="value">666 db</span></li>
</ul>
</div>
</li>
<li class="file-details wm">
<div class="summary">
<div class="name filetype-more">Mutasd a régebbi fájlokat!</div>
<div class="clear"></div>
</div>
</li>
<li class="file-upload wm">
<div class="summary">
<div class="name filetype-up">Fájlfeltöltés</div>
<div class="clear"></div>
</div>
</li>
<div class="contentblock">
<h2>
Adattár
</h2>
<div class="content">
<ul class="file-list">
<li class="wm">
<div class="summary">
<div class="name filetype-c">hello.c</div>
<div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
</div>
<div class="info">1 Kb</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Típus: <span class="value">text/plain</span></li>
</ul>
</div>
</div>
</li>
<li class="wm">
<div class="summary">
<div class="name filetype-image">suna.jpg</div>
<div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
</div>
<div class="info">1 Kb</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Típus: <span class="value">image/jpg</span></li>
</ul>
</div>
</li>
<li class="wm">
<div class="summary">
<div class="name filetype-folder">poresz</div>
<div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
</div>
<div class="info">katalógus</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Fájlok: <span class="value">666 db</span></li>
</ul>
</div>
</li>
<li class="wm" style="display: none">
<div class="summary">
<div class="name filetype-text">matlab_serial.txt</div>
<div class="actions">
<a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
<a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a>
</div>
<div class="info">358 Kb</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
<li>Típus: <span class="value">text/plain</span></li>
</ul>
</div>
</li>
<li class="file-details wm" id="load-more-files">
<div class="summary">
<div class="name filetype-more">
Mutasd a régebbi fájlokat!
</div>
<div class="actions" style="text-align: right; display: none">
<img src="../../one/static/load-3.gif" alt="loading" />
</div>
<div class="clear"></div>
</div>
</li>
<li class="file-upload wm">
<div class="summary">
<div class="name filetype-up">Fájlfeltöltés</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment