style for the resource view
authorCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Mon, 7 Jul 2014 14:03:20 +0000 (16:03 +0200)
committerCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Mon, 7 Jul 2014 14:03:20 +0000 (16:03 +0200)
plugins/apply/templates/apply.html
plugins/filter_status/templates/filter_status.html
plugins/querytable/templates/querytable.html
portal/static/css/onelab.css
portal/templates/onelab/onelab_registration_view.html
portal/templates/onelab/onelab_widget-slice-sections.html
portal/templates/slice-resource-view.html

index 2e5bab0..a4c5a33 100644 (file)
@@ -20,5 +20,5 @@
   
   <!-- Button toolbar -->
   <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#{{domid}}__apply">Apply</button>
-  <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#{{domid}}__cancel">Cancel</button>
+  <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{domid}}__cancel">Cancel</button>
 </div> 
index b6ce25d..8dc661f 100644 (file)
@@ -1,43 +1,43 @@
 <div id={{ domid }}>
-  <span class="list-group-item-heading">View:</span>
+  <span class="list-group-item-heading sl-resources">View:</span>
   
   <a href="#" 
-     class="list-group-item sl-platform active" 
+     class="list-group-item sl-resources active" 
      style='display: inline-block !important;' 
      id="{{ domid }}__all" 
      data-status="all"
         title="View resources that are available to be reserved."
         rel='tooltip'>
-       <p class="list-group-item-heading">Available</p>
+       Available
   </a>
   
   <a href="#"
-     class="list-group-item sl-platform
+     class="list-group-item sl-resources
      style='display: inline-block !important;' 
      id="{{ domid }}__reserved" 
      data-status="reserved"
      title="View resources that you have previously reserved for the slice."
         rel='tooltip'>
-       <p class="list-group-item-heading">Reserved</p>
+       Reserved
   </a>
   
-  <a href="#" class="list-group-item sl-platform"
+  <a href="#" class="list-group-item sl-resources"
      style='display: inline-block !important;' 
      id="{{ domid }}__unconfigured" 
      data-status="unconfigured"
      title="View resources that you have selected to add to your slice, that require configuration before they can be reserved. Hover you mouse over the symbol aside the checkbox for more details."
      rel='tooltip'>
-       <p class="list-group-item-heading">Unconfigured</p>
+       Unconfigured
        <span class="badge" id="badge-unconfigured" style="display:none;"></span></a>
   </a>
   
-  <a href="#" class="list-group-item sl-platform
+  <a href="#" class="list-group-item sl-resources
      style='display: inline-block !important;' 
      id="{{ domid }}__pending" 
      data-status="pending"
      title="View pending changes to your slice, resources that you have selected to add, and resources that you have selected to remove. Click on the Apply button to apply those changes, and on the Cancel button to cancel them."
      rel='tooltip'>
-       <p class="list-group-item-heading">Pending</p>
+       Pending
        <span class="badge" id="badge-pending" style="display:none;"></span></a>
   </a>
 </div> 
index a1792b4..4742547 100644 (file)
@@ -1,4 +1,4 @@
-<div id="main-{{ domid }}" class="">
+<div id="main-{{ domid }}">
   <table class="table dataTable" id="{{domid}}__table" width="100%">
     <thead>
       <tr>
index 0b2b660..df1e7dc 100644 (file)
@@ -132,6 +132,20 @@ button.btn-onelab:active, input.btn-onelab:active {
     margin-top:2px;
 }
 
+.container-resource button {
+    padding:2px 4px;
+    border-radius:3px;
+    font-size:9pt;
+    font-weight:normal;
+}
+.container-resource select,.container-resource option, .container-resource input {
+    padding:2px 4px;
+    font-size:9pt;
+}
+.badge {
+    font-size:9pt;
+    margin-left:4px;
+}
 /***** Notifications *****/
 .warning {
     border: 1px solid red;
@@ -296,7 +310,10 @@ ul.nav-resources a {
 }
 
 /* SLICE VIEW */
-
+div.container-resource {
+    padding-right:15px;
+    padding-left:15px;
+}
 
 div#slice-view {
     margin:0;
@@ -340,6 +357,23 @@ a.list-group-item p.list-group-item-text {
     color: black !important;
 }
 
+span.sl-resources {
+    font-size:9pt;
+    color:gray;
+}
+a.sl-resources, a.sl-resources:hover {
+    font-size:9pt;
+    border:0;
+    padding:2px 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
+    border:0;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
 div#slice-info {
     margin-top:25px;
 }
index 17a76cf..7474eb3 100644 (file)
 
     
 <script>
-jQuery(document).ready(function(){
+$(document).ready(function(){
     var availableTags = [
     {% if authorities %}
         {% for authority in authorities %}
@@ -510,7 +510,7 @@ jQuery(document).ready(function(){
        return 0;
        }); 
        // auto-complete the form
-    jQuery( "#authority_hrn" ).autocomplete({
+    $( "#authority_hrn" ).autocomplete({
       source: availableTags,
       minLength: 0,
       change: function (event, ui) {
@@ -524,9 +524,9 @@ jQuery(document).ready(function(){
       //select: function( event, ui ) {console.log(jQuery(this))}
     });
        // for hover texts
-       jQuery('[title!=""]').qtip();
-       
-       $('form').submit(function() {
+       $('[title!=""]').qtip();
+       $("form").validate();
+       $("form").submit(function() {
                if ($('select option:selected').val() == 'upload') {
                        if ($('input[name=user_public_key]').val() == '') {
                                alert('Please specify the key file to upload');
index bef7c00..72bdfde 100644 (file)
@@ -1,10 +1,15 @@
-<div class="row">
-       <div class="col-md-12">
-                <div class="breadcrumbs">
-                        Experiment &nbsp;>&nbsp; {{ slice }}
-                </div>
+<div class="container">
+       <div class="row">
+               <div class="col-md-12">
+                        <div class="breadcrumbs">
+                                Experiment &nbsp;>&nbsp; {{ slice }}
+                        </div>
+               </div>
        </div>
 </div>
+<div class="container">
+<div class="row">
+               <div class="col-md-12">
 {% if section == "resources" %}
 <ul class="nav nav-tabs nav-section">
        <li><a href="/slice/{{ slice }}#info">Information</a></li>
@@ -25,6 +30,7 @@
        <!-- <li class="measurements"><a href="#experiment">Measurements</a></li> -->
        <li class="experiment"><a href="#experiment">Tools</a></li>
 </ul>
+
 <script>
 $(document).ready(function() {
        $('.nav-tabs a').click(function (e) {
@@ -43,4 +49,7 @@ $(document).ready(function() {
        }
 });
 </script>
-{% endif %}
\ No newline at end of file
+{% endif %}
+</div>
+</div>
+</div>
\ No newline at end of file
index 4ecf483..a8a9ac9 100644 (file)
@@ -18,11 +18,10 @@ $(document).ready(function() {
 {% endblock %}
 
 {% block content %}
-               <div class="row">
-                       {% widget '_widget-slice-sections.html' %}
-               </div>
+{% widget '_widget-slice-sections.html' %}
+<div class="container-fluid container-resource">
+       <div class="row">
        <div class="col-md-2">
-               
                <!-- <div id="select-platform" class="list-group"></div> -->
                {{filter_testbeds}}
        </div>
@@ -46,8 +45,15 @@ $(document).ready(function() {
                        <div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
                        {% endif %}
                </div>
-
-               {{ filter_status }}{{ apply }}
+       
+               <div class="row">
+                       <div class="col-md-4">
+                               {{ filter_status }}
+                       </div>
+                       <div class="col-md-2">
+                               {{ apply }}
+                       </div>
+               </div>
                <!--
                <div class="list-group-item list-resources">
                        <span class="list-group-item-heading" style="padding-left: 0;">Resource status:</span>
@@ -58,13 +64,15 @@ $(document).ready(function() {
                -->
 
                <div class="row">
+                       <div class="col-md-12">
                        <ul class="nav nav-tabs">
                          <li class="active"><a href="#resourcelist" role="tab" data-toggle="tab">Table</a></li>
                          <li> <a href="#resourcemap" role="tab" data-toggle="tab">Map</a></li>
                          <li> <a href="#resourcescheduler" role="tab" data-toggle="tab">Scheduler</a></li>
                        </ul>
+                       </div>
                </div>
-
+               
                <!-- Modal - columns selector -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
@@ -83,38 +91,45 @@ $(document).ready(function() {
                        </div>
                </div>
                
-               <div class="tab-content" style="height:100%;">
-                       <div class="tab-pane active" id="resourcelist">
-                                <!-- Button trigger modal - columns selector -->
-                               <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
-                {{list_resources}}
-                               <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
-                       </div>
-                       <div class="tab-pane" id="resourcemap">
-                {{map_resources}}
-                       </div>
-                       <div class="tab-pane" id="resourcescheduler">
-                {{scheduler}}
-                       </div>
-
-                       <!--
-                       <div id="reserved" class="tab-pane" style="height:370px;display:none;">
-                <table width="80%">
-                    <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
-                    <tr>
-                        <td style="text-align:center">{{list_reserved_resources}}</td>
-                        <td style="text-align:center">{{list_reserved_leases}}</td>
-                    </tr>
-                </table>
-                       </div>
-                       <div id="pending" class="tab-pane" style="height:370px;display:none;">
-                {{pending_resources}}
-                       </div>
-                       <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
-                {{sla_dialog}}
+               
+               <div class="row">
+                       <div class="col-md-12">
+                       <div class="tab-content" style="height:100%;">
+                               <div class="tab-pane active" id="resourcelist">
+                                        <!-- Button trigger modal - columns selector -->
+                                       <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
+                       {{list_resources}}
+                                       <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
+                               </div>
+                               <div class="tab-pane" id="resourcemap">
+                       {{map_resources}}
+                               </div>
+                               <div class="tab-pane" id="resourcescheduler">
+                       {{scheduler}}
+                               </div>
+       
+                               <!--
+                               <div id="reserved" class="tab-pane" style="height:370px;display:none;">
+                       <table width="80%">
+                           <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
+                           <tr>
+                               <td style="text-align:center">{{list_reserved_resources}}</td>
+                               <td style="text-align:center">{{list_reserved_leases}}</td>
+                           </tr>
+                       </table>
+                               </div>
+                               <div id="pending" class="tab-pane" style="height:370px;display:none;">
+                       {{pending_resources}}
+                               </div>
+                               <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
+                       {{sla_dialog}}
+                               </div>
+       -->
+       
                        </div>
--->
-
                </div>
        </div>
+       </div>
+       </div>
+</div>
 {% endblock %}