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 @@ ...@@ -61,11 +61,24 @@
&.opened .actions{ &.opened .actions{
display: block !important; display: block !important;
} }
&.small .summary{
padding: 5px;
cursor: default;
&:hover{
background-color: #c1c1c1;
}
.name{
background: none !important;
text-align: center;
float: none;
}
}
.summary{ .summary{
padding: 15px 5px; padding: 15px 5px;
border-top: 1px solid #888; border-top: 1px solid #888;
cursor: pointer; cursor: pointer;
background-color: #c1c1c1; background-color: #c1c1c1;
position: relative;
&.unfinished{ &.unfinished{
background-color: #FFFF66; background-color: #FFFF66;
} }
...@@ -75,6 +88,17 @@ ...@@ -75,6 +88,17 @@
display: block; display: block;
} }
} }
.quota{
left: 0;
top: 0;
z-index: 0;
position: absolute;
width: 100%;
height: 100%;
.used{
height: 100%;
}
}
.id{ .id{
float: right; float: right;
width: 30px; width: 30px;
...@@ -84,16 +108,22 @@ ...@@ -84,16 +108,22 @@
padding-left: 25px; padding-left: 25px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
z-index: 2;
position: relative;
} }
.status{ .status{
text-align: right; text-align: right;
float: right; float: right;
width: 60px; width: 60px;
z-index: 2;
position: relative;
} }
.actions{ .actions{
float: right; float: right;
margin-left: 5px; margin-left: 5px;
display: none; display: none;
z-index: 2;
position: relative;
a{ a{
height: 16px; height: 16px;
width: 16px; width: 16px;
...@@ -164,6 +194,8 @@ ...@@ -164,6 +194,8 @@
background-image: url(icons/document-snippet.png); background-image: url(icons/document-snippet.png);
.value{ .value{
font-size: 0.8em; font-size: 0.8em;
word-spacing: 3px;
width: 350px;
} }
} }
} }
......
one/static/wizard.less
#modal{ #modal{
top: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 999;
} }
#shadow{ #shadow{
position: absolute; position: fixed;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.6);
......
one/templates/base.html
...@@ -101,7 +101,7 @@ $(function(){ ...@@ -101,7 +101,7 @@ $(function(){
{% endblock %} {% endblock %}
{% block header %} {% block header %}
{% block header_title %} {% 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 %}
{% endblock %} {% endblock %}
</div> </div>
...@@ -116,6 +116,7 @@ $(function(){ ...@@ -116,6 +116,7 @@ $(function(){
<div id="content"> <div id="content">
{% block content %}{% endblock %} {% block content %}{% endblock %}
<div class="clear"></div>
</div> </div>
<div id="modal" style="display: none"> <div id="modal" style="display: none">
<div id="shadow"></div> <div id="shadow"></div>
......
one/templates/home.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div class="summary"> <div class="summary">
<div class="name wm-on">{{m.name}}</div> <div class="name wm-on">{{m.name}}</div>
<div class="status"> <div class="status">
<input type="submit" value="Indítás"/> 3/10
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
<li class="type">Instance típus: <span class="value">{{m.instance_type.name}}</span></li> <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="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 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> </ul>
</div> </div>
</form> </form>
...@@ -54,7 +55,61 @@ ...@@ -54,7 +55,61 @@
<ul class="wm-list"> <ul class="wm-list">
<li class="wm"> <li class="wm">
<div class="summary"> <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="name">Win7 Matlab</div>
<div class="status">10/10</div>
<div class="actions"> <div class="actions">
<a href="#" title="Átnevezés"><img src="/static/icons/pencil.png" alt="rename" /></a> <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="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
...@@ -69,7 +124,7 @@ ...@@ -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="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">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="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> </ul>
</div> </div>
</li> </li>
...@@ -90,7 +145,7 @@ ...@@ -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="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">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="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> </ul>
</div> </div>
</li> </li>
...@@ -100,6 +155,15 @@ ...@@ -100,6 +155,15 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</li> </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> </ul>
</div> </div>
{% for box in boxes %} {% 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