From b35137aab18102c0d8e3622615f815184a0df0e5 Mon Sep 17 00:00:00 2001
From: Ciro Scognamiglio <ciro.scognamiglio@cslash.net>
Date: Thu, 16 Apr 2015 11:52:26 +0200
Subject: [PATCH] dashboard style

---
 portal/static/css/fed4fire.css                | 58 ++++++++++-
 .../fed4fire/fed4fire_home-view.html          | 96 ++++++++++---------
 2 files changed, 105 insertions(+), 49 deletions(-)

diff --git a/portal/static/css/fed4fire.css b/portal/static/css/fed4fire.css
index 6340326e..a1f8dd8a 100644
--- a/portal/static/css/fed4fire.css
+++ b/portal/static/css/fed4fire.css
@@ -31,6 +31,11 @@ h3 {
     letter-spacing:0.6pt;
     color:#201E62;
 }
+h4 {
+    font-size:12pt;
+    letter-spacing:0.6pt;
+    color:#201E62;
+}
 input[type=checkbox] {
   min-width:5px !important;
   margin-left:0 !important;
@@ -656,23 +661,70 @@ div.secondary .account a {
 div.dashboard {
 }
 div.dashboard a {
-    color:black;
+    color:#206090;
 }
 div.dashboard a:hover {
+    text-decoration:underline;
+}
+div.dashboard div.projects-tree {
+    margin-left:15px;
 }
 div.dashboard ul {
+    list-style-type:disc;
+    list-style-position:inside;
     text-align:left;
-    margin-left:24px;
+    margin:0 0 15px 4px;
+    padding:0;
+}
+div.dashboard ul ul {
+    margin:5px 0 15px 25px;
     list-style:none;
 }
+div.dashboard li {
+    margin:0 0 5px 0;
+    padding:0;
+}
+div.dashboard ul ul li {
+    margin:0;
+}
+div.dashboard ul ul a {
+}
 div.dashboard h3 {
     border-bottom:0.5px solid #E0E0E0;
     margin-right:15px;
+    margin-bottom:25px;
 }
 div.dashboard h3 img {
     margin:15px 15px 15px 0;
 }
-
+div.dashboard span.glyphicon {
+    text-align:center;
+    width:45px;
+    height:25px;
+}
+div.experiment-tools {
+    
+}
+div.experiment-tools h4 {
+    border-bottom:0.5px solid #E0E0E0;
+    margin:25px 15px 25px 0;
+    padding-bottom:5px;
+}
+div.experiment-tools p {
+    text-align:center;
+}
+#webstart-button {
+    margin-right:25px;
+    width:150px;
+    color:white;
+}
+#webstart-button:hover {
+    text-decoration:none;
+}
+#webstart-button span {
+    width:20px;
+    height:10px;
+}
 
 div.dataTables_filter label{
     float:left;
diff --git a/portal/templates/fed4fire/fed4fire_home-view.html b/portal/templates/fed4fire/fed4fire_home-view.html
index 76fc42e4..dd67ca68 100644
--- a/portal/templates/fed4fire/fed4fire_home-view.html
+++ b/portal/templates/fed4fire/fed4fire_home-view.html
@@ -29,76 +29,80 @@
                 <a href="/portal/slice_request"><img src="{{ STATIC_URL }}img/icon_slices_small.png" alt="" /></a>EXPERIMENT
             </h3>
             
-            <div>
+            <div class="projects-tree">
                 Your projects and slices
                 <span title="A <b>slice</b> is a set of testbed resources on which you can conduct an experiment. 
                 Either ask your colleagues to give you access to an existing slice or request a new slice by clicking 'Request Slice'. 
                 However, on the Fed4FIRE portal, you will only see slices that you have created through Fed4FIRE. If you have created slices elsewhere, 
                 those slices will not appear here. <br /><br /> A <b>project</b> is a sub-authority under the responsability of your institution gathering users, 
                 who will be able to create slices for their experiments." class="glyphicon glyphicon-info-sign">&nbsp;</span> 
-            </div>
-            
-            <div>   
+             
                 <div id="home-project-tree"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading projects" /></div>
             </div>
             <div>
                 <span class="glyphicon glyphicon-plus"></span> <a href="/portal/slice_request/">Create slice</a>
+                <br />
                 <span class="glyphicon glyphicon-cog"></span> <a href="/portal/project_request/">Create/Join project</a>
             </div>
             
-            <div>
-                <h3 title="Some tools do their own slice creation and management.">Experiment now</h3>
-                    <a class="btn btn-primary" id="webstart-button" style="width: 150px;" 
-                    href='http://jfed.iminds.be/releases/5.4-dev/r2314/webstart/experimenter/jfed-experimenter.jnlp'
-                    title="Click here to start your experiment with jFed">
-                    <span class="glyphicon glyphicon-cloud"></span> jFed</a>
+            <div class="experiment-tools">
+                <h4 title="Some tools do their own slice creation and management.">Experiment now</h4>
+                <p>
+                    <a class="btn btn-primary" id="webstart-button"
+                        href='http://jfed.iminds.be/releases/5.4-dev/r2314/webstart/experimenter/jfed-experimenter.jnlp'
+                        title="Click here to start your experiment with jFed">
+                        <span class="glyphicon glyphicon-cloud"></span> jFed</a>
+                </p>
             </div>
         </div>
         <div class="col-sm-4">
             <div class="row">
-                <h3>
-                    <a href="/portal/account/"><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="" /></a>ACCOUNT
-                </h3>
-                {% if person.last_name %}
-                <p>
-                    {{person.first_name}} {{person.last_name}}
-                </p>
-                {% endif %}
-                <p>
-                    <span class="glyphicon glyphicon-user"></span> <a href='/portal/account/' title="Click here to see and edit your account details.">{{person.email}}</a>
-                </p>
+                <div class="col-sm-12">
+                    <h3>
+                        <a href="/portal/account/"><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="" /></a>ACCOUNT
+                    </h3>
+                    {% if person.last_name %}
+                    <p>
+                        {{person.first_name}} {{person.last_name}}
+                    </p>
+                    {% endif %}
+                    <p>
+                        <span class="glyphicon glyphicon-user"></span> <a href='/portal/account/' title="Click here to see and edit your account details.">{{person.email}}</a>
+                    </p>
+                </div>
             </div>
             <div class="row">
-                <h3>
-                    <a href="/portal/institution"><img src="{{ STATIC_URL }}img/icon_authority_color_small.png" alt="" /></a>MANAGEMENT
-                </h3>
-               
-                <div>
-                    <span class="glyphicon glyphicon-ok"></span> <a href="/portal/institution#requests">Validate Requests</a>
+                <div class="col-sm-12">
+                    <h3>
+                        <a href="/portal/institution"><img src="{{ STATIC_URL }}img/icon_authority_color_small.png" alt="" /></a>MANAGEMENT
+                    </h3>
+                   
+                    <div>
+                        <span class="glyphicon glyphicon-ok"></span> <a href="/portal/institution#requests">Validate Requests</a>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="col-sm-4">
             <div class="row">
-                <h3>
-                    <a href="/portal/support"><img src="{{ STATIC_URL }}img/icon_support_small.png" alt="" /></a>SUPPORT 
-                </h3>
-                <p>
-                    <span class="glyphicon glyphicon-envelope"></span> <a href="/portal/contact/">Contact</a>
-                </p>
-                <p>
-                    <span class="glyphicon glyphicon-stats"></span> <a target="_blank" href="https://flsmonitor.fed4fire.eu">Testbeds' status</a>
-                    </br />
-                    <span class="glyphicon glyphicon-stats"></span> <a href="/portal/reputation">Testbeds' reputation</a>
-                    
-                </p>
-                <p>
-                    <span class="glyphicon glyphicon-book"></span> <a target="_blank" href="http://doc.fed4fire.eu/">Documentation</a>
-                </p>
-           
-            </div>
-            
-            
+                <div class="col-sm-12">
+                    <h3>
+                        <a href="/portal/support"><img src="{{ STATIC_URL }}img/icon_support_small.png" alt="" /></a>SUPPORT 
+                    </h3>
+                    <p>
+                        <span class="glyphicon glyphicon-envelope"></span> <a href="/portal/contact/">Contact</a>
+                    </p>
+                    <p>
+                        <span class="glyphicon glyphicon-stats"></span> <a target="_blank" href="https://flsmonitor.fed4fire.eu">Testbeds' status</a>
+                        </br />
+                        <span class="glyphicon glyphicon-stats"></span> <a href="/portal/reputation">Testbeds' reputation</a>
+                        
+                    </p>
+                    <p>
+                        <span class="glyphicon glyphicon-book"></span> <a target="_blank" href="http://doc.fed4fire.eu/">Documentation</a>
+                    </p>
+                </div>
+            </div>            
         </div>
     </div>
 </div>
-- 
2.43.0