Skip to content

Gelencsér Szabolcs / circlestack

Go to a project
Commit 79e445c6 by Bach Dániel
Options

Merge branch 'issue-364' into 'master' 

Small resolution glitches

Closes #364

🚧

See merge request !276
parents e70e03b7 154839c7
Showing with 167 additions and 115 deletions
circle/dashboard/static/dashboard/dashboard.js
...@@ -151,7 +151,8 @@ $(function () { ...@@ -151,7 +151,8 @@ $(function () {
$("#dashboard-vm-search-input").keyup(function(e) { $("#dashboard-vm-search-input").keyup(function(e) {
// if my_vms is empty get a list of our vms // if my_vms is empty get a list of our vms
if(my_vms.length < 1) { if(my_vms.length < 1) {
$.ajaxSetup( { "async": false } ); $("#dashboard-vm-search-form button i").addClass("fa-spinner fa-spin");
$.get("/dashboard/vm/list/", function(result) { $.get("/dashboard/vm/list/", function(result) {
for(var i in result) { for(var i in result) {
my_vms.push({ my_vms.push({
...@@ -165,8 +166,10 @@ $(function () { ...@@ -165,8 +166,10 @@ $(function () {
'owner': result[i].owner, 'owner': result[i].owner,
}); });
} }
$("#dashboard-vm-search-input").trigger("keyup");
$("#dashboard-vm-search-form button i").removeClass("fa-spinner fa-spin").addClass("fa-search");
}); });
$.ajaxSetup( { "async": true } ); return;
} }
input = $("#dashboard-vm-search-input").val().toLowerCase(); input = $("#dashboard-vm-search-input").val().toLowerCase();
...@@ -358,7 +361,7 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) { ...@@ -358,7 +361,7 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
'<span class="index-vm-list-name">' + '<span class="index-vm-list-name">' +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) + '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + safe_tags_replace(name) +
'</span>' + '</span>' +
'<small class="text-muted"> ' + host + '</small>' + '<small class="text-muted index-vm-list-host"> ' + host + '</small>' +
'<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' + '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +
(fav ? '<i class="fa fa-star text-primary title-favourite" title="' + gettext("Unfavourite") + '"></i>' : (fav ? '<i class="fa fa-star text-primary title-favourite" title="' + gettext("Unfavourite") + '"></i>' :
'<i class="fa fa-star-o text-primary title-favourite" title="' + gettext("Mark as favorite") + '"></i>' ) + '<i class="fa fa-star-o text-primary title-favourite" title="' + gettext("Mark as favorite") + '"></i>' ) +
......
circle/dashboard/static/dashboard/dashboard.less
...@@ -23,46 +23,23 @@ html { ...@@ -23,46 +23,23 @@ html {
padding-right: 15px; padding-right: 15px;
} }
/* values for 45px tall navbar */ /* --- */
.navbar {
min-height: 45px;
}
.navbar-brand { #dashboard-menu > li > a {
height: 45px; color: white;
padding: 12.5px 12.5px; font-size: 10px;
} }
.navbar-toggle {
margin-top: 5.5px;
margin-bottom: 5.5px;
}
.navbar-form { #dashboard-menu {
margin-top: 5.5px; margin-right: 15px;
margin-bottom: 5.5px;
}
.navbar-btn {
margin-top: 5.5px;
margin-bottom: 5.5px;
} }
.navbar-btn.btn-sm { /* we need this for mobile view */
margin-top: 7.5px; .container > :first-child {
margin-bottom: 7.5px; margin-top: 15px;
}
.navbar-btn.btn-xs {
margin-top: 11.5px;
margin-bottom: 11.5px;
}
.navbar-text {
margin-top: 12.5px;
margin-bottom: 12.5px;
} }
/* --- */
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
/* Let the jumbotron breathe */ /* Let the jumbotron breathe */
...@@ -80,6 +57,7 @@ html { ...@@ -80,6 +57,7 @@ html {
} }
} }
.no-margin { .no-margin {
margin: 0!important; margin: 0!important;
} }
...@@ -400,10 +378,6 @@ a.hover-black { ...@@ -400,10 +378,6 @@ a.hover-black {
font-size: 12px; font-size: 12px;
} }
#notification-button {
margin-right: 15px;
}
#vm-migrate-node-list { #vm-migrate-node-list {
list-style: none; list-style: none;
} }
...@@ -519,15 +493,6 @@ footer a, footer a:hover, footer a:visited { ...@@ -519,15 +493,6 @@ footer a, footer a:hover, footer a:visited {
padding: 5px; /* it's nice this way in the tour */ padding: 5px; /* it's nice this way in the tour */
} }
.index-vm-list-name {
display: inline-block;
max-width: 70%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: left;
}
#dashboard-vm-list a small { #dashboard-vm-list a small {
padding-left: 10px; padding-left: 10px;
} }
...@@ -756,12 +721,15 @@ textarea[name="new_members"] { ...@@ -756,12 +721,15 @@ textarea[name="new_members"] {
margin-top: 8px; margin-top: 8px;
} }
#dashboard-files-toplist div.list-group-item { #dashboard-files-toplist {
color: #555; div.list-group-item {
} color: #555;
height: 41px;
#dashboard-files-toplist div.list-group-item:hover { &:hover {
background: #eee; background: #eee;
}
}
} }
.store-list-item-name { .store-list-item-name {
...@@ -1109,6 +1077,25 @@ textarea[name="new_members"] { ...@@ -1109,6 +1077,25 @@ textarea[name="new_members"] {
text-align: center; text-align: center;
} }
.vm-create-list-name {
display: inline-block;
max-width: 60%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: left;
}
.vm-create-list-system {
display: inline-block;
max-width: 40%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: right;
}
/* for introjs /* for introjs
* newer version has this fixed * newer version has this fixed
* but it doesn't work w bootstrap 3.2.0 * but it doesn't work w bootstrap 3.2.0
...@@ -1155,3 +1142,56 @@ textarea[name="new_members"] { ...@@ -1155,3 +1142,56 @@ textarea[name="new_members"] {
background-position: 0 0px; background-position: 0 0px;
} }
} }
#dashboard-vm-list {
.list-group-item {
display: flex;
}
.index-vm-list-name, .index-vm-list-host {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.index-vm-list-name {
max-width: 70%;
}
.index-vm-list-host {
padding-top: 3px;
flex: 1;
}
}
.fa-fw-12 {
/* fa-fw is too wide */
width: 12px;
}
.btn-op-form-send {
padding: 6px 12px 6px 8px;
}
@media (max-width: 767px) {
#vm-detail-panel .graph-buttons {
padding-top: 15px;
}
.graph-buttons a {
margin-bottom: 8px;
}
#ops .operation {
margin-bottom: 5px;
}
.vm-details-connection dd {
margin-left: 25px;
}
.vm-details-connection dt {
padding-left: 0px;
}
}
circle/dashboard/static/template.less
...@@ -82,7 +82,6 @@ html { ...@@ -82,7 +82,6 @@ html {
z-index: 1; z-index: 1;
} }
.nojs-dropdown-toggle:focus + .nojs-dropdown-menu .nojs-dropdown-toggle:focus + .nojs-dropdown-menu
{ {
display: block; display: block;
...@@ -98,32 +97,6 @@ html { ...@@ -98,32 +97,6 @@ html {
display: block; display: block;
} }
.notification-messages {
padding: 10px 8px;
width: 350px;
}
.notification-message {
margin-bottom: 10px;
padding: 0 0 4px 0;
border-bottom: 1px dotted #D3D3D3;
}
.notification-messages .notification-message:last-child {
margin-bottom: 0px;
padding: 0px;
border-bottom: none;
}
.notification-message-text {
padding: 8px 15px;
display: none;
}
.notification-message .notification-message-subject {
cursor: pointer;
}
/* footer */ /* footer */
footer { footer {
position: absolute; position: absolute;
...@@ -148,10 +121,6 @@ footer a, footer a:hover, footer a:visited { ...@@ -148,10 +121,6 @@ footer a, footer a:hover, footer a:visited {
display: none; display: none;
} }
#notifications-button {
margin: 0;
}
/* 2px border bottom for all bootstrap tables */ /* 2px border bottom for all bootstrap tables */
.table thead>tr>th { .table thead>tr>th {
border-bottom: 1px; border-bottom: 1px;
......
circle/dashboard/templates/dashboard/_disk-list-element.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<a href="{{ op.remove_disk.get_url }}?disk={{d.pk}}" <a href="{{ op.remove_disk.get_url }}?disk={{d.pk}}"
class="btn btn-xs btn-{{ op.remove_disk.effect}} pull-right operation disk-remove-btn class="btn btn-xs btn-{{ op.remove_disk.effect}} pull-right operation disk-remove-btn
{% if op.remove_disk.disabled %}disabled{% endif %}"> {% if op.remove_disk.disabled %}disabled{% endif %}">
<i class="fa fa-{{ op.remove_disk.icon }}"></i> {% trans "Remove" %} <i class="fa fa-{{ op.remove_disk.icon }} fa-fw-12"></i> {% trans "Remove" %}
</a> </a>
</span> </span>
{% endif %} {% endif %}
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<a href="{{ op.resize_disk.get_url }}?disk={{d.pk}}" <a href="{{ op.resize_disk.get_url }}?disk={{d.pk}}"
class="btn btn-xs btn-{{ op.resize_disk.effect }} pull-right operation disk-resize-btn class="btn btn-xs btn-{{ op.resize_disk.effect }} pull-right operation disk-resize-btn
{% if op.resize_disk.disabled %}disabled{% endif %}"> {% if op.resize_disk.disabled %}disabled{% endif %}">
<i class="fa fa-{{ op.resize_disk.icon }}"></i> {% trans "Resize" %} <i class="fa fa-{{ op.resize_disk.icon }} fa-fw-12"></i> {% trans "Resize" %}
</a> </a>
</span> </span>
{% endif %} {% endif %}
......
circle/dashboard/templates/dashboard/_vm-create-1.html
...@@ -5,8 +5,14 @@ ...@@ -5,8 +5,14 @@
{% for t in templates %} {% for t in templates %}
<div class="vm-create-template"> <div class="vm-create-template">
<div class="vm-create-template-summary"> <div class="vm-create-template-summary">
{{ t.name }} <span class="vm-create-list-name">
<span class="pull-right"><i class="fa fa-{{ t.os_type }}"></i> {{ t.system }}</span> {{ t.name }}
</span>
<span class="vm-create-list-system">
<i class="fa fa-{{ t.os_type }}"></i>
{{ t.system }}
</span>
<div class="clearfix"></div>
</div> </div>
<div class="vm-create-template-details"> <div class="vm-create-template-details">
<ul> <ul>
......
circle/dashboard/templates/dashboard/base.html
...@@ -18,8 +18,35 @@ ...@@ -18,8 +18,35 @@
{% block navbar %} {% block navbar %}
{% if user.is_authenticated and user.pk and not request.token_user %} {% if user.is_authenticated and user.pk and not request.token_user %}
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav navbar-right" id="dashboard-menu">
<li class="dropdown" id="notification-button"> {% if user.is_superuser %}
<li>
<a href="/admin/"><i class="fa fa-cogs"></i> {% trans "Admin" %}</a>
</li>
<li>
<a href="/network/"><i class="fa fa-globe"></i> {% trans "Network" %}</a>
</li>
{% endif %}
<li>
<a href="{% url "dashboard.views.profile-preferences" %}">
<i class="fa fa-user"></i>
{% include "dashboard/_display-name.html" with user=user show_org=True %}
</a>
</li>
<li>
<a href="{% url "logout" %}?next={% url "login" %}">
<i class="fa fa-sign-out"></i> {% trans "Log out" %}
</a>
</li>
<li class="visible-xs">
<a href="{% url "dashboard.views.notifications" %}">
{% trans "Notifications" %}
{% if NEW_NOTIFICATIONS_COUNT > 0 %}
<span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>
{% endif %}
</a>
</li>
<li class="dropdown hidden-xs" id="notification-button">
<a href="{% url "dashboard.views.notifications" %}" <a href="{% url "dashboard.views.notifications" %}"
class="dropdown-toggle" data-toggle="dropdown"> class="dropdown-toggle" data-toggle="dropdown">
{% trans "Notifications" %} {% trans "Notifications" %}
...@@ -33,20 +60,8 @@ ...@@ -33,20 +60,8 @@
</li> </li>
</ul> </ul>
<a class="navbar-brand pull-right" href="{% url "logout" %}?next={% url "login" %}" style="color: white; font-size: 10px;">
<i class="fa fa-sign-out"></i> {% trans "Log out" %}
</a>
<a class="navbar-brand pull-right" href="{% url "dashboard.views.profile-preferences" %}" style="color: white; font-size: 10px;">
<i class="fa fa-user"></i>
{% include "dashboard/_display-name.html" with user=user show_org=True %}
</a>
{% if user.is_superuser %}
<a class="navbar-brand pull-right" href="/network/" style="color: white; font-size: 10px;"><i class="fa fa-globe"></i> {% trans "Network" %}</a>
<a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;"><i class="fa fa-cogs"></i> {% trans "Admin" %}</a>
{% endif %}
{% else %} {% else %}
<a class="navbar-brand pull-right" href="{% url "login" %}?next={{ request.path }}" style="color: white; font-size: 10px;"><i class="fa fa-sign-in"></i> {% trans "Log in " %}</a> <a class="navbar-brand pull-right" href="{% url "login" %}?next={{ request.path }}"><i class="fa fa-sign-in"></i> {% trans "Log in " %}</a>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
circle/dashboard/templates/dashboard/group-list.html
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
<div class="panel-body"> <div class="panel-body">
<div id="table_container"> <div id="table_container">
<div id="rendered_table" class="panel-body"> <div id="rendered_table" class="panel-body">
{% render_table table %} <div class="table-responsive">
{% render_table table %}
</div>
</div> </div>
</div> </div>
</div><!-- .panel-body --> </div><!-- .panel-body -->
......
circle/dashboard/templates/dashboard/index-vm.html
...@@ -13,7 +13,14 @@ ...@@ -13,7 +13,14 @@
<span class="btn btn-default btn-xs infobtn" data-container="body" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="fa fa-info-circle"></i></span> <span class="btn btn-default btn-xs infobtn" data-container="body" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="fa fa-info-circle"></i></span>
</div> </div>
<h3 class="no-margin"> <h3 class="no-margin">
<i class="fa fa-desktop"></i> {% trans "Virtual machines" %} <span class="visible-xs">
<i class="fa fa-desktop"></i>
{% trans "VMs" %}
</span>
<span class="hidden-xs">
<i class="fa fa-desktop"></i>
{% trans "Virtual machines" %}
</span>
</h3> </h3>
</div> </div>
<div class="list-group" id="vm-list-view"> <div class="list-group" id="vm-list-view">
...@@ -25,7 +32,7 @@ ...@@ -25,7 +32,7 @@
<i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i> <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
{{ i.name }} {{ i.name }}
</span> </span>
<small class="text-muted"> <small class="text-muted index-vm-list-host">
{% if i.owner == request.user %}{{ i.short_hostname }} {% if i.owner == request.user %}{{ i.short_hostname }}
{% else %}{{i.owner.profile.get_display_name}}{% endif %} {% else %}{{i.owner.profile.get_display_name}}{% endif %}
</small> </small>
......
circle/dashboard/templates/dashboard/node-list.html
...@@ -15,7 +15,9 @@ ...@@ -15,7 +15,9 @@
</div> </div>
<div id="table_container"> <div id="table_container">
<div id="rendered_table" class="panel-body"> <div id="rendered_table" class="panel-body">
{% render_table table %} <div class="table-responsive">
{% render_table table %}
</div>
</div> </div>
</div> </div>
</div> </div>
......
circle/dashboard/templates/dashboard/operate.html
...@@ -19,8 +19,8 @@ Do you want to perform the following operation on ...@@ -19,8 +19,8 @@ Do you want to perform the following operation on
<div class="pull-right"> <div class="pull-right">
<a class="btn btn-default" href="{{object.get_absolute_url}}" <a class="btn btn-default" href="{{object.get_absolute_url}}"
data-dismiss="modal">{% trans "Cancel" %}</a> data-dismiss="modal">{% trans "Cancel" %}</a>
<button class="btn btn-{{ opview.effect }}" type="submit" id="op-form-send"> <button class="btn btn-{{ opview.effect }} btn-op-form-send" type="submit" id="op-form-send">
{% if opview.icon %}<i class="fa fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }} {% if opview.icon %}<i class="fa fa-fw fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
</button> </button>
</div> </div>
</form> </form>
circle/dashboard/templates/dashboard/store/index-files.html
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div class="list-group-item list-group-footer no-hover"> <div class="list-group-item list-group-footer">
<div class="text-right"> <div class="text-right">
<form class="pull-left" method="POST" action="{% url "dashboard.views.store-refresh-toplist" %}"> <form class="pull-left" method="POST" action="{% url "dashboard.views.store-refresh-toplist" %}">
{% csrf_token %} {% csrf_token %}
......
circle/dashboard/templates/dashboard/template-list.html
...@@ -34,7 +34,9 @@ ...@@ -34,7 +34,9 @@
</div> </div>
</div> </div>
<div class="panel-body"> <div class="panel-body">
{% render_table table %} <div class="table-responsive">
{% render_table table %}
</div>
</div> </div>
</div> </div>
</div> </div>
......
circle/dashboard/templates/dashboard/vm-detail/_disk-operations.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{% if op.is_disk_operation %} {% if op.is_disk_operation %}
<a href="{{op.get_url}}" class="btn btn-success btn-xs <a href="{{op.get_url}}" class="btn btn-success btn-xs
operation operation-{{op.op}}"> operation operation-{{op.op}}">
<i class="fa fa-{{op.icon}}"></i> <i class="fa fa-{{op.icon}} fa-fw-12"></i>
{{op.name}} </a> {{op.name}} </a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
circle/dashboard/templates/dashboard/vm-detail/_network-port-add.html
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
<select class="form-control" name="proto" style="width: 70px;"><option>tcp</option><option>udp</option></select> <select class="form-control" name="proto" style="width: 70px;"><option>tcp</option><option>udp</option></select>
<div class="input-group-btn"> <div class="input-group-btn">
<button type="submit" class="btn btn-success btn-sm <button type="submit" class="btn btn-success btn-sm
{% if not is_operator %}disabled{% endif %}">{% trans "Add" %}</button> {% if not is_operator %}disabled{% endif %}">
<span class="hidden-xs">{% trans "Add" %}</span>
<span class="visible-xs"><i class="fa fa-plus-circle"></i></span>
</button>
</div> </div>
</div> </div>
</form> </form>
......
circle/dashboard/templates/dashboard/vm-detail/resources.html
...@@ -22,13 +22,14 @@ ...@@ -22,13 +22,14 @@
<div id="vm-details-resources-disk"> <div id="vm-details-resources-disk">
<h3> <h3>
{% trans "Disks" %}
<div class="pull-right"> <div class="pull-right">
<div id="disk-ops"> <div id="disk-ops">
{% include "dashboard/vm-detail/_disk-operations.html" %} {% include "dashboard/vm-detail/_disk-operations.html" %}
</div> </div>
</div> </div>
{% trans "Disks" %}
</h3> </h3>
<div class="clearfix"></div>
{% if not instance.disks.all %} {% if not instance.disks.all %}
{% trans "No disks are added." %} {% trans "No disks are added." %}
......
circle/dashboard/templates/dashboard/vm-list.html
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
</div><!-- .row --> </div><!-- .row -->
</div><!-- .panel-body --> </div><!-- .panel-body -->
<div class="panel-body"> <div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover vm-list-table" <table class="table table-bordered table-striped table-hover vm-list-table"
id="vm-list-table"> id="vm-list-table">
<thead><tr> <thead><tr>
...@@ -140,6 +141,7 @@ ...@@ -140,6 +141,7 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div><!-- .table-responsive -->
</div> </div>
</div> </div>
</div> </div>
......
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