From: Ciro Scognamiglio <ciro.scognamiglio@cslash.net>
Date: Mon, 7 Jul 2014 14:03:20 +0000 (+0200)
Subject: style for the resource view
X-Git-Tag: myslice-1.1~47^2~4
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=758fe3c05a9c9ec549a69134cec66b46bfd96003;p=unfold.git

style for the resource view
---

diff --git a/plugins/apply/templates/apply.html b/plugins/apply/templates/apply.html
index 2e5bab02..a4c5a332 100644
--- a/plugins/apply/templates/apply.html
+++ b/plugins/apply/templates/apply.html
@@ -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> 
diff --git a/plugins/filter_status/templates/filter_status.html b/plugins/filter_status/templates/filter_status.html
index b6ce25da..8dc661f9 100644
--- a/plugins/filter_status/templates/filter_status.html
+++ b/plugins/filter_status/templates/filter_status.html
@@ -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> 
diff --git a/plugins/querytable/templates/querytable.html b/plugins/querytable/templates/querytable.html
index a1792b44..4742547e 100644
--- a/plugins/querytable/templates/querytable.html
+++ b/plugins/querytable/templates/querytable.html
@@ -1,4 +1,4 @@
-<div id="main-{{ domid }}" class="">
+<div id="main-{{ domid }}">
   <table class="table dataTable" id="{{domid}}__table" width="100%">
     <thead>
       <tr>
diff --git a/portal/static/css/onelab.css b/portal/static/css/onelab.css
index 0b2b6609..df1e7dc4 100644
--- a/portal/static/css/onelab.css
+++ b/portal/static/css/onelab.css
@@ -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;
 }
diff --git a/portal/templates/onelab/onelab_registration_view.html b/portal/templates/onelab/onelab_registration_view.html
index 17a76cf7..7474eb3f 100644
--- a/portal/templates/onelab/onelab_registration_view.html
+++ b/portal/templates/onelab/onelab_registration_view.html
@@ -483,7 +483,7 @@
 
     
 <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');
diff --git a/portal/templates/onelab/onelab_widget-slice-sections.html b/portal/templates/onelab/onelab_widget-slice-sections.html
index bef7c001..72bdfdef 100644
--- a/portal/templates/onelab/onelab_widget-slice-sections.html
+++ b/portal/templates/onelab/onelab_widget-slice-sections.html
@@ -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
diff --git a/portal/templates/slice-resource-view.html b/portal/templates/slice-resource-view.html
index 4ecf483d..a8a9ac9f 100644
--- a/portal/templates/slice-resource-view.html
+++ b/portal/templates/slice-resource-view.html
@@ -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 %}