fixed styles and js
authorCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Wed, 21 Jan 2015 17:42:48 +0000 (18:42 +0100)
committerCiro Scognamiglio <ciro.scognamiglio@cslash.net>
Wed, 21 Jan 2015 17:42:48 +0000 (18:42 +0100)
portal/static/css/fed4fire.css
portal/static/js/myslice.js
portal/templates/fed4fire/fed4fire_about.html
portal/templates/fed4fire/fed4fire_registration_view.html
portal/templates/fed4fire/fed4fire_widget-topmenu.html

index cba7715..b088b22 100644 (file)
@@ -13,10 +13,9 @@ a, a:active, a:focus {
 
 h1 {
     border-bottom:1px solid #DDDDDD;
-    padding:0 0 0 0;
-    margin:0 0 0 0;
+    padding:0;
+    margin:25px 0;
     font-size:14pt;
-    margin-top: 12px;
 }
 h1 img {
     vertical-align:middle;
@@ -70,13 +69,10 @@ div#header {
 }
 
 div#secondary {
-    
 }
 
 div#secondary ul {
-    position:absolute;
-    top:20px;
-    right:0;
+       float:right;
 }
 
 div#secondary li {
@@ -100,6 +96,7 @@ div#navigation {
     background-color:orange;
     width:100%;
     height:40px;
+    text-align: center;
 }
 div#navigation div.wrapper {
     text-align:center;
@@ -115,21 +112,26 @@ div#navigation ul {
 div#navigation li {
     color:white;
     font-family:helvetica, sans-serif;
-    font-size:10pt ;
-    font-weight:normal;
+    font-size:9pt ;
+    font-weight:bold;
     line-height:0.8em;
     letter-spacing:0.6pt;
     list-style:none;
     float:left;
     padding:0;
-    margin:15px 25px 0 0;
+    margin:16px 25px 0 0;
 }
 div#navigation li a {
-    color:white;
+    color:#003333;
+}
+div#navigation .iconlogout {
+    margin-top:-10px;
+    margin-right:2px;
+    color:#003333;
 }
 div#navigation li a:hover {
     text-decoration:none;
-    color:black;
+    color:white;
 }
 div#navigation li:last-child {
     margin-right:0;
index aa5df43..40cf8a2 100644 (file)
@@ -172,10 +172,12 @@ var myslice = {
         if($.isEmptyObject(user)){
             // REGISTRY ONLY TO BE REMOVED WITH MANIFOLD-V2
                    $.post("/rest/myslice:user/",{'filters':{'user_hrn':'$user_hrn'}}, function( data ) {
-                           localStorage.setItem('user', JSON.stringify(data[0]));
-                myslice.loadSlices(data[0].slices);
-                if(isFunction(fn)){
-                    fn();
+                       if (data.length > 0) {
+                           localStorage.setItem('user', JSON.stringify(data[0]));
+                    myslice.loadSlices(data[0].slices);
+                    if(isFunction(fn)){
+                        fn();
+                    }
                 }
                    });
         }else{
@@ -186,24 +188,27 @@ var myslice = {
 
        },
        loadProjects: function(fn) {
-        user = JSON.parse(localStorage.getItem('user'));
-        projects = localStorage.getItem('projects');
-        if($.isEmptyObject(projects)){
-            if($.isEmptyObject(user) || $.isEmptyObject(user.parent_authority)){
-                       $.post("/rest/myslice:user/",{'filters':{'user_hrn':'$user_hrn'},'fields':['parent_authority']}, function( data ) {
-                    parent_authority = data[0].parent_authority;
-
+           var u = localStorage.getItem('user');
+           if (u !== 'undefined') {
+            user = JSON.parse(u);
+            projects = localStorage.getItem('projects');
+            if($.isEmptyObject(projects)){
+                if($.isEmptyObject(user) || $.isEmptyObject(user.parent_authority)){
+                       $.post("/rest/myslice:user/",{'filters':{'user_hrn':'$user_hrn'},'fields':['parent_authority']}, function( data ) {
+                        parent_authority = data[0].parent_authority;
+    
+                    });
+                }else{
+                    parent_authority = user.parent_authority;
+                }
+                // REGISTRY ONLY TO BE REMOVED WITH MANIFOLD-V2
+                $.post("/rest/myslice:authority/",{'fields':['authority_hrn'],'filters':{'authority_hrn':'CONTAINS'+parent_authority}}, function( data ) {
+                    localStorage.setItem('projects', JSON.stringify(data));
                 });
             }else{
-                parent_authority = user.parent_authority;
-            }
-            // REGISTRY ONLY TO BE REMOVED WITH MANIFOLD-V2
-            $.post("/rest/myslice:authority/",{'fields':['authority_hrn'],'filters':{'authority_hrn':'CONTAINS'+parent_authority}}, function( data ) {
-                localStorage.setItem('projects', JSON.stringify(data));
-            });
-        }else{
-            if(isFunction(fn)){
-                fn();
+                if(isFunction(fn)){
+                    fn();
+                }
             }
         }
 
index b0c3b6d..2c53cb6 100644 (file)
@@ -16,6 +16,7 @@
 <div class="container tab-content">
     <div class="tab-pane active row" id="about">
                <div class="col-md-12">
+                   <h3>The Fed4Fire portal</h3>
                        <p>
                                Fed4FIRE Portal is a central place to get acess to all Fed4FIRE testbeds.In order to get access to the portal,
                                an experimenter needs to  <a href="/portal/register">register</a> to the portal. The portal administrative body
index 6c4bee3..ebfb4e6 100644 (file)
        </div>
 </div>
 {% endif %}
-                               <form action="/register" class="cmxform form-horizontal" method="post" enctype="multipart/form-data">
+<form action="/register" class="cmxform form-horizontal" method="post" enctype="multipart/form-data">
 <div class="row">
        <div class="col-md-12">
-                       <div class="form-group">
+                       <p>
                                {% csrf_token %}
                                <label for="authority_hrn" class="control-label">Organization</label>
-                               <p></p>
-                <div class="ui-widget">
+                       </p>
+                       <p>
                                <select id="org_name" name="org_name" class="form-control" style="width:590px" value="{{ organization }}" 
                                title="Choose your organization (company/university) from the list that apears when you click in the field and start to type.
                                 Use the arrow keys to scroll through the list; type part of the name to narrow down the list. We will send an email to 
                     <option value:"">No authority found !!!</option>
                 {% endif %}
                 </select>
-                </div>
-                               <p></p>
-                               <!--<p>Organization not listed? <a href="/portal/join">Request its addition now.</a></p>-->
+            </p>
                                <p class="help-block">If your organization does not deploy a Fed4FIRE authority itself, you can use the<br> default one called "fed4fire.global".
                If your organization however does provide a<br> Fed4FIRE authority itself, please make sure to select it here. If you start typing<br> your organization's
                 name, it will pop up.
                </p> 
-                       </div>
        </div>
 </div>
 
 <div class="row">
        <div class="col-md-6">
-       
-           <div class="form-group">
+        <p>
                        <label for="firstname" class="control-label">Personal information</label>
-                       <p></p>
+               </p>
+        <p>
                        <input type="text" name="firstname" class="form-control" style="width:350px" minlength="2" value="{{ first_name }}" placeholder="First name" required />
-           </div>
-           <div class="form-group">
+           </p>
+        <p>
                        <input type="text" name="lastname" size="25" class="form-control" style="width:350px" minlength="2" value="{{ last_name }}" placeholder="Last name" required />
-           </div>
-               <div class="form-group">
+           </p>
+        <p>
                <input type="email" name="email" size="25"  class="form-control" style="width:350px" value="{{ email }}" 
                        title="Your e-mail address will be your identifier for logging in. We contact you to verify your account and then, occasionally, for important issues."
                        placeholder="Email" required />
-               </div>
+               </p>
        </div>  
 
        <div class="col-md-6">
-           <div class="form-group">
+        <p>
              <label for="password" class="control-label">Authentication</label>
-                 <p></p>       
-             <input type="password"  id="password" name="password"   class="form-control" style="width:250px" minlength="4" value="{{ password }}" 
-                       title="Your password allows you to log in to this portal."
-                       placeholder="Password" required />
-           </div>
-           <div class="form-group">
-                       <input type="password"  id="confirmpassword" name="confirmpassword" style="width:250px"  minlength="4" class="form-control" value="" 
-                               placeholder="Confirm password" required />
-           </div>
-           <div class="form-group">
+               </p>
+               <p>     
+             <input type="password"  id="password" name="password"   class="form-control" style="width:250px" minlength="4" value="{{ password }}" title="Your password allows you to log in to this portal." placeholder="Password" required />
+           </p>
+        <p>
+                       <input type="password"  id="confirmpassword" name="confirmpassword" style="width:250px"  minlength="4" class="form-control" value="" placeholder="Confirm password" required />
+           </p>
+        <p>
                        <select name="question" class="form-control" style="width:350px" id="key-policy" 
                                title="Your public/private key pair allows you to access the testbeds." required >        
                                <option value="generate">Generate my keys for me (recommended)</option>
                                <option value="upload">Upload my public key (advanced users only)</option>
                        </select>
-           </div>
-           <div class="form-group" style="display:none;" id="upload_key">
+           </p>
+           <div style="display:none;" id="upload_key">
                <label for="file" class="control-label">Upload public key</label>
                <input type="file" name="user_public_key" class="form-control" style="width:200px" id="user_public_key" />
                <br />
 </div>
 <div class="row">
        <div class="col-md-12">
-               <div class="form-group">
-                       <p></p>
+        <p>
                        <input type="checkbox" name="agreement" value="agreement" required />&nbsp;&nbsp; I agree to the 
                        <a href="#" data-toggle="modal" data-target="#myModal">terms and conditions.</a> 
-               </div>
+               </p>
        </div>
 </div>
 <div class="row">
        <div class="col-md-12">
-               <div class="form-group" id="register">
-                       <p></p>
+               <div id="register">
+                       <p>
                <input class="submit btn btn-onelab" type="submit" value="Sign up" />
-               </form>
+              </p>
            </div>
        </div>
 </div>
-
+</form>
        <!-- Modal - columns selector -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                       <div class="modal-dialog">
-                       <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="myModalLabel">Terms & Conditions</h4>
-                               </div>
-                               <div class="modal-body">
-                                               <p align="left">
-                                                       The exact terms and conditions for Fed4FIRE are currently under development.
-                                               </p>
+       <div class="modal-dialog">
+               <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="myModalLabel">Terms & Conditions</h4>
+                       </div>
+                       <div class="modal-body">
+                               <p align="left">
+                                       The exact terms and conditions for Fed4FIRE are currently under development.
+                               </p>
 
-                               </div>
-                               <div class="modal-footer">
-                                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                               </div>
-                       </div>
-                       </div>
+                       </div>
+                       <div class="modal-footer">
+                               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                       </div>
+               </div>
+       </div>
 </div>
 
     
index ddb4518..680163e 100644 (file)
@@ -1,56 +1,52 @@
 
 <div id="header">
-       <div class="wrapper">
-               <div class="logo">
-                       <a href="/"><img src="{{ STATIC_URL }}img/f4f-logo.png" alt="Fed4Fire Portal" width="80px" />Home</a>
-               </div>
-               
-               <div id="secondary">
+    <div class="container">
+    <div class="row">
+        <div class="col-sm-4 col-md-4 logo">
+            <a href="/"><img src="{{ STATIC_URL }}img/f4f-logo.png" alt="Fed4Fire Portal" width="80px" /></a>
+        </div>
+        
+        
+           <div id="secondary" class="col-sm-8 col-md-8 secondary">
                        <ul>
+                           <li><a href="/">Home</a></li>
                                <li><a href="/portal/about">About</a></li>
                                <li><a href="http://doc.fed4fire.eu/">Documentation</a></li>
                                <li><a target="_blank" href="http://www.fed4fire.eu">Project website</a></li>
                        </ul>
                </div>
        </div>
-       
-       {% if username %}
-       <div id="navigation">
-               <div class="wrapper">
-               <ul>
-                       <li id="nav-account"><a href="/portal/account/">{{ username }}</a></li>
-                       <li>|</li>
-                       <!--<li id="nav-institution" class=""><a href="/portal/institution">AUTHORITY</a></li>-->
-                       <li class="slices">
-                               <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                                       SLICES <span class="caret"></span>
-                       </a>
-                               
-                               <div class="dropdown-menu" style="z-index:99;">
-                                               <ul id="dropdown-slice-list">
-                                                       <li><a href="/portal/slice_request/">Request Slice</a></li>
-                            <!--
-                                                       <li><a href="/slice/ple.upmc.agent3/">ple.upmc.agent3</a></li>
-                                                   <li><a href="/slice/ple.upmc.agent/">ple.upmc.agent</a></li>
-                                                   <li><a href="/slice/ple.upmc.myslicedemo/">ple.upmc.myslicedemo</a></li>
-                                                   <li><a href="/slice/ple.upmc.slicestat/">ple.upmc.slicestat</a></li>
-                                                   <li><a href="/slice/ple.upmc.agent2/">ple.upmc.agent2</a></li>
-                            -->
-                                               </ul>
-                               </div>
-                               </li>
-                       <li id="nav-service"><a href="/portal/servicedirectory">SERVICES</a></li>
-                       <li id="nav-support"><a href="http://doc.fed4fire.eu/support.html">SUPPORT</a></li>
-                       <li>|</li>
-                       <li id="nav-logout" style="margin-top: 10px;"><a id="logout" style="cursor:pointer;" data-username="{{ username }}"><span class="glyphicon glyphicon-off"></span> LOGOUT</a></li>
-               </ul>
-               </div>
-       </div>
-       {% else %}
-       <div id="navigation">
-               <div class="wrapper"></div>
-       </div>
-       {% endif %}
+    </div>
+<div id="navigation">
+    <div class="container"> 
+       <div class="row">
+          {% if username %}
+        <div class="col-md-12 navigation">
+            <ul>
+                <li id="nav-account"><a href="/portal/account/">{{ username }}</a></li>
+                <li>|</li>
+                <!--<li id="nav-institution" class=""><a href="/portal/institution">AUTHORITY</a></li>-->
+                <li class="slices">
+                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">SLICES <span class="caret"></span></a>
+                    
+                    <div class="dropdown-menu" style="z-index:99;">
+                            <ul id="dropdown-slice-list">
+                                <li><a href="/portal/slice_request/">Request Slice</a></li>
+                            </ul>
+                    </div>
+                    </li>
+                <li id="nav-service"><a href="/portal/servicedirectory">SERVICES</a></li>
+                <li id="nav-support"><a href="http://doc.fed4fire.eu/support.html">SUPPORT</a></li>
+                <li>|</li>
+                <li id="nav-logout"><span class="glyphicon glyphicon-off iconlogout"></span> <a id="logout" data-username="{{ username }}" href="#">LOGOUT</a></li>
+            </ul>
+        </div>
+        {% else %}
+        <div class="col-sm-4 col-md-4 navigation">
+        </div>
+        {% endif %}
+    </div>
+    </div>
 </div>
 <script>
        $(document).ready(function() {
                                $(this).fadeOut(100);
                        }
                });
-               // var slices = localStorage.getItem('slices');
-               // if (slices.length == 0) {
-                       // $.post("/rest/user/",{'filters':{'user_hrn':'$user_hrn'}}, function( data ) {
-                       // var items = [];
-                               // localStorage.setItem('slices', data[0].slice);
-                       // });
-               // }
-               // $.each(slices, function( key, val ) {
-                       // items.push( "<li><a href=\"/slice/"+val.slice_hrn+"\">" + val.slice_hrn + "</a></li>" );
-               // });
-               // $("div#home-slice-list").html($( "<ul/>", { html: items.join( "" ) }));
        });
 </script>