Skip to content

CIRCLE / cloud

Go to a project
Commit 15690d76 by Dányi Bence
Options

template quota update

parent 4e1441d6
Showing with 104 additions and 5 deletions
one/static/box.less
......@@ -61,11 +61,24 @@
&.opened .actions{
display: block !important;
}
&.small .summary{
padding: 5px;
cursor: default;
&:hover{
background-color: #c1c1c1;
}
.name{
background: none !important;
text-align: center;
float: none;
}
}
.summary{
padding: 15px 5px;
border-top: 1px solid #888;
cursor: pointer;
background-color: #c1c1c1;
position: relative;
&.unfinished{
background-color: #FFFF66;
}
......@@ -75,6 +88,17 @@
display: block;
}
}
.quota{
left: 0;
top: 0;
z-index: 0;
position: absolute;
width: 100%;
height: 100%;
.used{
height: 100%;
}
}
.id{
float: right;
width: 30px;
......@@ -84,16 +108,22 @@
padding-left: 25px;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 2;
position: relative;
}
.status{
text-align: right;
float: right;
width: 60px;
z-index: 2;
position: relative;
}
.actions{
float: right;
margin-left: 5px;
display: none;
z-index: 2;
position: relative;
a{
height: 16px;
width: 16px;
......@@ -164,6 +194,8 @@
background-image: url(icons/document-snippet.png);
.value{
font-size: 0.8em;
word-spacing: 3px;
width: 350px;
}
}
}
......
one/static/wizard.less
#modal{
top: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
}
#shadow{
position: absolute;
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
......
one/templates/base.html
......@@ -101,7 +101,7 @@ $(function(){
{% endblock %}
{% block header %}
{% block header_title %}
<h1><a href="/">IK Cloud</a></h1>
<h1><a href="/">IK Cloud <span style="font-size: 21px">&beta;</span></a></h1>
{% endblock %}
{% endblock %}
</div>
......@@ -116,6 +116,7 @@ $(function(){
<div id="content">
{% block content %}{% endblock %}
<div class="clear"></div>
</div>
<div id="modal" style="display: none">
<div id="shadow"></div>
......
one/templates/home.html
......@@ -26,7 +26,7 @@
<div class="summary">
<div class="name wm-on">{{m.name}}</div>
<div class="status">
<input type="submit" value="Indítás"/>
3/10
</div>
<div class="clear"></div>
</div>
......@@ -39,6 +39,7 @@
<li class="type">Instance típus: <span class="value">{{m.instance_type.name}}</span></li>
<li class="memory">Memória: <span class="value">{{m.instance_type.RAM}} MiB</span></li>
<li class="cpu">CPU magok: <span class="value">{{m.instance_type.CPU}}</span></li>
<li>&nbsp;<span class="value"><input type="submit" value="Indítás"/></span></li>
</ul>
</div>
</form>
......@@ -54,7 +55,61 @@
<ul class="wm-list">
<li class="wm">
<div class="summary">
<div class="quota">
<div class="used" style="background-color: rgba(0,255,0,0.5); width: 20%"></div>
</div>
<div class="name">Win7 Matlab</div>
<div class="status">2/10</div>
<div class="actions">
<a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#" title="Megosztás"><img src="static/icons/user-share.png" alt="share" /></a>
</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
<li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="count">Futó példányok: <span class="value">1 db</span></li>
</ul>
</div>
</li>
<li class="wm">
<div class="summary">
<div class="quota">
<div class="used" style="background-color: rgba(255,128,0,0.5); width: 70%"></div>
</div>
<div class="name">Win7 Matlab</div>
<div class="status">7/10</div>
<div class="actions">
<a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
<a href="#" title="Megosztás"><img src="static/icons/user-share.png" alt="share" /></a>
</div>
<div class="clear"></div>
</div>
<div class="details">
<h3>Részletek</h3>
<ul>
<li class="name">Rendszer: <span class="value">Windows 7 Desktop</span></li>
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
<li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="count">Futó példányok: <span class="value">5 db</span></li>
</ul>
</div>
</li>
<li class="wm">
<div class="summary">
<div class="quota">
<div class="used" style="background-color: rgba(255,0,0,0.5); width: 100%"></div>
</div>
<div class="name">Win7 Matlab</div>
<div class="status">10/10</div>
<div class="actions">
<a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a>
<a href="#" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
......@@ -69,7 +124,7 @@
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
<li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="count">Aktív példányok: <span class="value">8 db</span></li>
<li class="count">Futó példányok: <span class="value">10 db</span></li>
</ul>
</div>
</li>
......@@ -90,7 +145,7 @@
<li class="description">Leírás: <span class="value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh arcu, cursus et sodales eu, iaculis id metus. Suspendisse et mauris nisi, luctus feugiat nisi. Nullam elementum tincidunt urna a luctus.</span><div class="clear"></div></li>
<li class="date">Létrehozva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="date">Módosítva: <span class="value">2013.01.10. 13:40:22</span></li>
<li class="count">Aktív példányok: <span class="value">8 db</span></li>
<li class="count">Futó példányok: <span class="value">8 db</span></li>
</ul>
</div>
</li>
......@@ -100,6 +155,15 @@
<div class="clear"></div>
</div>
</li>
<li class="wm small">
<div class="summary">
<div class="quota">
<div class="used" style="background-color: rgba(0,255,0,0.5); width: 19%"></div>
</div>
<div class="name">Kvóta: 19/100</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
{% for box in boxes %}
......
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