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(){ ...@@ -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> </script>
......
one/templates/home.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{% block content %} {% block content %}
<div class="boxes"> <div class="boxes">
<div class="contentblock" id="state"> <div class="contentblock" id="state">
<h2>Új virtuális gép indítása</h2> <h2>Virtuális gépek</h2>
<div class="content"> <div class="content">
{% for m in templates %} {% for m in templates %}
<form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %} <form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
...@@ -26,91 +26,114 @@ ...@@ -26,91 +26,114 @@
{% endfor %} {% endfor %}
</div> </div>
<div class="boxes"> <div class="boxes">
<div class="contentblock">
<h2>
<div class="contentblock"> Adattár
<h2> </h2>
Adattár <div class="content">
</h2> <ul class="file-list">
<div class="content"> <li class="wm">
<ul class="file-list"> <div class="summary">
<li class="wm"> <div class="name filetype-c">hello.c</div>
<div class="summary"> <div class="actions">
<div class="name filetype-c">hello.c</div> <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
<div class="actions"> <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a> <a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
<a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a> </div>
<a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a> <div class="info">1 Kb</div>
</div> <div class="clear"></div>
<div class="info">1 Kb</div> </div>
<div class="clear"></div> <div class="details">
</div> <h3>Részletek</h3>
<div class="details"> <ul>
<h3>Részletek</h3> <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
<ul> <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
<li>Létrehozva: <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>Módosítva: <span class="value">2012.12.29. 23:12</span></li> <li>Típus: <span class="value">text/plain</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>
</ul> </ul>
</div> </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> </div>
{% endblock %} {% 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