dashboard: small screen fixes

- add top margin on mobile too
- margin to floating buttons
- change text to icon on port open
- vm connection infos

circle/dashboard/static/dashboard/dashboard.less

@@ -35,6 +35,10 @@ html {
   margin-right: 15px;
 }
 
+/* we need this for mobile view */
+.container > :first-child {
+  margin-top: 15px;
+}
 
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
@@ -53,6 +57,7 @@ html {
   }
 
 }
+
 .no-margin {
   margin: 0!important;
 }
@@ -1167,3 +1172,26 @@ textarea[name="new_members"] {
 .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/templates/dashboard/vm-detail/_network-port-add.html

@@ -13,7 +13,10 @@
       <select class="form-control" name="proto" style="width: 70px;"><option>tcp</option><option>udp</option></select>
       <div class="input-group-btn">
         <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>
   </form>

circle/dashboard/templates/dashboard/vm-detail/resources.html

@@ -22,13 +22,14 @@
 
 <div id="vm-details-resources-disk">
   <h3>
+    {% trans "Disks" %}
     <div class="pull-right">
       <div id="disk-ops">
         {% include "dashboard/vm-detail/_disk-operations.html" %}
       </div>
     </div>
-    {% trans "Disks" %}
   </h3>
+  <div class="clearfix"></div>
 
   {% if not instance.disks.all %}
     {% trans "No disks are added." %}