stackforge-attic/tuskar-ui-extras
Code Issues Proposed changes

Scale the node boxes when there are lots of them

Browse Source 
The first shrinkage happens when there are 25 nodes, and it makes the
boxes half the size (4 times smaller area-wise). The next one is at
100 nodes (when they have roughly the same area as the first one), and
makes them 1/4 the size (16 times smaller area-wise). The next step would
happen at 400, but then they would be too small.

Change-Id: I414bd8724e12891228c81e7f71549d08ae207753
This commit is contained in:
Radomir Dopieralski 2014-12-08 12:15:29 +01:00 committed by Ana Krivokapic
parent 83d4107efb
commit 592be3c8af
4 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
View File

@ -17,6 +17,20 @@
color: #666;
padding: 20px 4px 0 4px;
}
.boxes-nodes-medium .boxes-node {
width: 30px;
height: 30px;
font-size: 50%;
padding: 10px 2px 0 2px;
margin: 0 2px 2px 0;
}
.boxes-nodes-small .boxes-node {
width: 15px;
height: 15px;
font-size: 25%;
padding: 5px 1px 0 1px;
margin: 0 1px 1px 0;
}
.boxes-available-roles {
border-radius: 4px;
border: 1px dashed #666;

2
tuskar_boxes/templates/tuskar_boxes/overview/index.html
View File

@ -67,7 +67,7 @@
{% endif %}
{% endfor %}
</div>
<div class="boxes-nodes">
<div class="boxes-nodes {% if nodes|length >= 100 %}boxes-nodes-small{% elif nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
{% for node in nodes %}{% spaceless %}
<div class="boxes-node boxes-role-{{ node.role_slug }}"></div>
{% endspaceless %}{% endfor %}

2
tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
View File

@ -79,7 +79,7 @@
</ul>
</div>
</div>
<div class="col-xs-7 boxes-nodes">
<div class="col-xs-7 boxes-nodes {% if flavor.nodes|length >= 100 %}boxes-nodes-small{% elif flavor.nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
{% for node in flavor.nodes %}{% spaceless %}
{% include "tuskar_boxes/overview/_node_info.html" with node=node %}
{% endspaceless %}{% endfor %}

2
tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_status.html
View File

@ -20,7 +20,7 @@
</div>
{% endfor %}
</div>
<div class="col-xs-7 boxes-nodes">
<div class="col-xs-7 boxes-nodes {% if nodes|length >= 100 %}boxes-nodes-small{% elif nodes|length >= 25 %}boxes-nodes-medium{% endif %}">
{% for node in nodes %}{% spaceless %}
<div class="boxes-node boxes-role-{{ node.role_slug }} status-{{ node.state_slug }}" title="{{ node.uuid }}">
<i class="fa fa-lg {{ node.state_icon }}"></i>