fed4fire style changes
authorCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Mon, 16 Feb 2015 15:40:04 +0000 (16:40 +0100)
committerCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Mon, 16 Feb 2015 15:40:04 +0000 (16:40 +0100)
plugins/apply/templates/apply.html
plugins/filter_status/templates/filter_status.html
portal/static/css/fed4fire.css
portal/static/css/onelab.css
portal/static/icons/Mobile.png [new file with mode: 0644]
portal/templates/servicedirectory.html

index f05af49..9e251b7 100644 (file)
@@ -1,16 +1,18 @@
-<div id={{ domid }}>
-  <!-- Modal - columns selector -->
+<div id="{{ domid }}" class="sl-filter-resources">
+    <button class="btn btn-onelab btn-apply"  id="{{domid}}__apply" data-toggle="modal" data-target="#{{domid}}__apply__window">Apply</button>
+</div> 
+<!-- Modal - columns selector -->
   <div class="modal fade" id="{{domid}}__apply__window" tabindex="-1" role="dialog" aria-labelledby="{{domid}}__apply__label" aria-hidden="true">
     <div class="modal-dialog modal-dialog-large">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title" id="{{domid}}__apply__label">
-                Applying pending changes...                    
+                 Applying pending changes...                
             </h4>
             <div>
-               <img id="applyloading" src="/static/img/loading.gif" /> &nbsp;&nbsp;
-               Please be patient, this operation can take a minute or two.
+                <img id="applyloading" src="/static/img/loading.gif" /> &nbsp;&nbsp;
+                Please be patient, this operation can take a minute or two.
             </div>
         </div>
         <div class="modal-body">
         </div>
       </div>
     </div>
-  </div>
-
-  
-  <!-- Button toolbar -->
-  <button class="btn btn-onelab btn-apply"  id="{{domid}}__apply" data-toggle="modal" data-target="#{{domid}}__apply__window">Apply</button>
-  <!-- <button class="btn btn-default btn-sm" id="{{domid}}__cancel">Cancel</button> -->
-</div> 
+  </div>
\ No newline at end of file
index 8350eb1..3d1c44b 100644 (file)
@@ -1,5 +1,5 @@
-<div id={{ domid }}>
-  <span class="list-group-item-heading sl-resources" style='font-size:inherit;'>View:</span>
+<div id="{{ domid }}" class="sl-filter-resources">
+  <span class="list-group-item-heading sl-resources">View:</span>
   
   <a href="#" 
      class="list-group-item sl-resources active" 
@@ -28,7 +28,7 @@
      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 next to the checkbox for more details."
      rel='tooltip'>
        Unconfigured
-       <span class="badge" id="badge-unconfigured" style="display:none;"></span></a>
+       <span class="badge" id="badge-unconfigured" style="display:none;"></span>
   </a>
   
   <a href="#" class="list-group-item sl-resources" 
@@ -38,6 +38,6 @@
      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, or on the Cancel button to cancel them."
      rel='tooltip'>
        Pending
-       <span class="badge" id="badge-pending" style="display:none;"></span></a>
+       <span class="badge" id="badge-pending" style="display:none;"></span>
   </a>
 </div> 
index ca827bf..70de2a8 100644 (file)
@@ -30,7 +30,10 @@ h3 {
     font-size:13pt;
     color:#201E62;
 }
-
+input[type=checkbox] {
+  min-width:5px !important;
+  margin-left:0 !important;
+}
 input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number] {
     min-width:260px;
     padding:6px;
@@ -57,7 +60,7 @@ div.wrapper {
 
 
 div.wide {
-    margin:25px auto;
+    margin:0 auto 25px auto;
     padding:0 25px;
 }
 
@@ -382,37 +385,54 @@ ul.nav-resources a {
 div#slice-view {
     margin:0;
 }
-div.list-group-item {
-    border:0;
-    background-color:white;
-    font-weight:bold;
-    padding-left:0;
+
+/* FACILITY/TESTBED filters */
+div.sl-filter-facilities {
+    padding:0 5px;
 }
-a.list-group-item {
-    border:0;
-    background-color:white;
-    padding:3px 0 3px 10px;
-    border-left:2pt white solid;
+div.sl-filter-facilities h4 {
+    margin-bottom:15px;
+    
 }
-a.list-group-item.active, a.list-group-item.active:hover {
-    font-weight: bold;
+img.sl-image {
+    margin:0 5px 5px 0;
+    padding:0;
+    vertical-align:middle;
+}
+a.sl-facility {
+    color:gray;
+    text-decoration:none;
+}
+a.sl-facility:hover {
+    color:#342961;
+}
+a.sl-facility.active {
     color:black;
-    background-color:transparent;
-    border-left:2pt blue solid;
+    text-decoration:none;
 }
-a.list-group-item.active:hover {
-    background-color:#dddddd;
+a.sl-facility::before {
+    content: " ";
 }
-a.list-group-item:hover {
-    border-left:2pt blue solid;
+div.sl-facilities {
+    border-bottom:#CCCCCC 1px solid;
+    padding-bottom:15px;
+    margin-bottom:15px;
 }
-a.list-group-item p.list-group-item-text {
-    font-size:9pt;
-    font-style:italic;
-    font-weight: normal;
-    color: black !important;
+div.sl-facilities:last-child {
+    border:0;
+}
+a.sl-testbed {
+    color:gray;
+    text-decoration:none;
+    margin-left:25px;
+    margin-bottom:5px;
+}
+a.sl-testbed:hover {
+    color:#342961;
+}
+a.sl-testbed.active {
+    color:black;
 }
-
 div#slice-info {
     margin-top:25px;
 }
@@ -502,12 +522,51 @@ div.dataTables_filter label{
     width:400px;
 }
 
+div.sl-filter-resources {
+    margin:10px 0;
+    text-align:center;
+}
+span.sl-resources {
+    font-size:9pt;
+    color:gray;
+}
+a.sl-resources {
+    font-size:9pt;
+    border:0;
+    padding:2px 8px;
+    margin:0 5px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    text-align: center;
+}
+a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
+    border:0;
+    padding:2px 8px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    background-color:#FFA500;
+    color:#000000;
+}
+a.sl-resources:first-child {
+}
+button.btn-apply {
+    background-color:#FFA500;
+    border-bottom: 2pt solid #FFCA00;
+    color:black;
+    font-size:13px;
+    padding:2px 8px;
+    margin:0 5px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    text-align: center;
+}
+
 /**/
 .header {
   -moz-box-shadow:    0 0 1px rgba(82,82,82,0.6);
   -webkit-box-shadow: 0 0 1px rgba(82,82,82,0.6);
   box-shadow:         0 0 1px rgba(82,82,82,0.6);
-  height:61px;
+  height:60#px;
   background-color:white;
 }
 div.navigation {
@@ -607,7 +666,11 @@ div.dataTables_filter label{
     float:left;
     width:400px;
 }
-
+div.breadcrumbs {
+    margin:15px 0;
+    color:gray;
+    font-size:10pt;
+}
 /* Service Directory */
 
 div#appservices div.row {
index ef5d3e3..cb2c071 100644 (file)
@@ -382,6 +382,7 @@ div.container-resource, div.container-slice {
 div#slice-view {
     margin:0;
 }
+
 div.sl-filter-facilities {
     padding:0 5px;
 }
@@ -428,32 +429,43 @@ a.sl-testbed:hover {
 a.sl-testbed.active {
     color:black;
 }
+div.sl-filter-resources {
+    margin:10px 0;
+    text-align:center;
+}
 span.sl-resources {
     font-size:9pt;
     color:gray;
 }
-a.sl-resources, a.sl-resources:hover {
+a.sl-resources {
     font-size:9pt;
     border:0;
-    padding:2px 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    width:105px;
-    margin-left:4px;
-    margin-bottom:8px;
+    padding:2px 8px;
+    margin:0 5px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
     text-align: center;
 }
 a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
     border:0;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
+    padding:2px 8px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    background-color:#FFA500;
+    color:#000000;
 }
 a.sl-resources:first-child {
-    margin-left:12px;
 }
 button.btn-apply {
+    background-color:#FFA500;
+    border-bottom: 2pt solid #FFCA00;
+    color:black;
     font-size:13px;
     padding:2px 8px;
+    margin:0 5px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    text-align: center;
 }
 div#slice-info {
     margin-top:25px;
diff --git a/portal/static/icons/Mobile.png b/portal/static/icons/Mobile.png
new file mode 100644 (file)
index 0000000..81ee438
Binary files /dev/null and b/portal/static/icons/Mobile.png differ
index 78502cf..a4485af 100644 (file)
@@ -1,13 +1,10 @@
 {% extends "layout_wide.html" %}
 
-{% block head %} 
-<!-- <script type="text/javascript" src="{{STATIC_URL}}/js/institution.js"></script> -->
-{% endblock head %}
-
 {% block content %}
 <div class="container">
        <div class="row">
                <div class="col-md-12">
+                   <br />
                        <ul class="nav nav-tabs nav-section-mod">
                                <li class="active"><a href="#appservices"> Application Services </a></li>
                                <li><a href="#fedservices"> Federation Services </a></li>