toasterui: small changes to empty states

This commit:

* Makes some changes to the layout and styles of the
landing.html template

* Adds the empty state to layers.html

* Changes the message of the empty state of machines.html
to use the same wording used in all other pages

* Adds the project name and the right styles to
the empty state of the project.html template

* Makes small changes in style and wording to the
empty state of targets.html

* Updates all "configure a layer source" links to point
to the new Toaster manual.

Signed-off-by: Belen Barros Pena <belen.barros.pena@linux.intel.com>
Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>

diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css
index 0e5c0f97734903057296a0a4d90c5518965393cc..7ee12515297397685bb17ddbeae5c2836896db80 100644 (file)
--- a/lib/toaster/toastergui/static/css/default.css
+++ b/lib/toaster/toastergui/static/css/default.css
@@ -130,10 +130,19 @@ select { width: auto; }
 .task-name { margin-left: 7px; }
 .icon-hand-right {color: #CCCCCC; }
 .help-inline { margin: 5px; }
+.dashboard-section { background-color: transparent; }
+
+/* styles for landing page - analysis mode */
 .hero-unit { margin: 20px 0 30px; }
 .hero-unit > .close { font-size:40px; }
 .hero-actions { margin-top: 30px; }
-.dashboard-section { background-color: transparent; }
+
+/* styles for landing page - build mode */
+.hero-unit p { line-height: 25px; }
+.hero-unit p, .hero-unit .btn-large { margin-top: 15px; }
+.hero-unit ul { margin-top: 20px; }
+.hero-unit li { line-height: 30px; }
+.hero-unit img { background-color: #eee; margin-top: 15px; }
 
 /* make tables Chrome-happy (me, not so much) */
 #otable { table-layout: fixed; word-wrap: break-word; }

diff --git a/lib/toaster/toastergui/templates/landing.html b/lib/toaster/toastergui/templates/landing.html
index d5ae9f5e20c1e31475a63cec2f7e2cdc45492092..5bbe694f8946f0bbada601d2736bd0b05b5c3694 100644 (file)
--- a/lib/toaster/toastergui/templates/landing.html
+++ b/lib/toaster/toastergui/templates/landing.html
@@ -9,80 +9,64 @@
   <div class="container-fluid">
    <div class="row-fluid">
     <!-- Empty - no data in database -->
-    <div class="hero-unit span12" {%if MANAGED%}style="background-color: white"{%endif%}>
-    {% if not MANAGED %}
-     <button class="close" data-dismiss="alert" type="button">
-      ×
-     </button>
-    {% endif %}
+    <div class="hero-unit span12 {%if MANAGED%}well-transparent{%endif%}">
      <div class="row-fluid">
       <div class="span6">
        <h1>
         This is Toaster
        </h1>
-       <p>
-        A web interface to
-        <a href="http://www.yoctoproject.org/tools-resources/projects/bitbake">
-         BitBake
-        </a>
-        , the
-        <a href="http://www.yoctoproject.org">
-         Yocto Project
-        </a>
-        build system.
-       </p>
+       <p>A web interface to <a href="http://www.yoctoproject.org/tools-resources/projects/bitbake">BitBake</a>, the <a href="http://www.yoctoproject.org">Yocto Project</a> build system.</p>
 
        {% if MANAGED %}
 
                {% if lvs_nos %}
-                      <p class="hero-actions">
-                       <a class="btn btn-primary btn-large" href="{% url 'newproject' %}">
-                               To start building, create your first Toaster project
-                       </a>
-                      </p>
+                   <p class="hero-actions">
+                           <a class="btn btn-primary btn-large" href="{% url 'newproject' %}">
+                                   To start building, create your first Toaster project
+                           </a>
+                   </p>
                {% else %}
-               <div class="alert alert-info">
-                       <p>
-                       Toaster has no layer information; without layer information, you cannot run builds. To generate layer information you can:
-                       </p>
-                       <ul>
-                        <li> <a href="https://wiki.yoctoproject.org/wiki/Setting_up_a_hosted_managed_mode_for_Toaster#LayerSources">Configure a layer source</a>
-                        </li>
-                        <li> <a href="{% url 'newproject' %}">Create a project</a>, then import layers
-                       </ul>
-               </div>
-               {% endif %}
+                   <div class="alert alert-info lead air">
+                           Toaster has no layer information. Without layer information, you cannot run builds. To generate layer information you can:
+                           <ul>
+                               <li>
+                                   <a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a>
+                               </li>
+                               <li>
+                                   <a href="{% url 'newproject' %}">Create a project</a>, then import layers
+                               </li>
+                           </ul>
+                   </div>
+        {% endif %}
 
-       <p style="margin-top: 2em">
-        <a href="https://www.yoctoproject.org/documentation/toaster-manual">
-        Read the Toaster manual
-       </a> <br/>
-        <a href="https://wiki.yoctoproject.org/wiki/Contribute_to_Toaster">
-         Contribute to Toaster
-        </a>
-       </p>
+        <ul class="unstyled">
+            <li>
+                <a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html">Read the Toaster manual</a>
+            </li>
+            <li>
+                <a href="https://wiki.yoctoproject.org/wiki/Contribute_to_Toaster">Contribute to Toaster</a>
+            </li>
+        </ul>
 
-         {% else %}
+        {% else %}
 
-       <p class="hero-actions">
-        <a class="btn btn-primary btn-large" href="https://www.yoctoproject.org/documentation/toaster-manual">
-         Show me the manual
-         </a>
-        <a class="btn btn-large" href="https://wiki.yoctoproject.org/wiki/Contribute_to_Toaster">
-         I want to contribute
-        </a>
-       </p>
+        <p class="hero-actions">
+            <a class="btn btn-primary btn-large" href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html">
+                Show me the manual
+            </a>
+            <a class="btn btn-large" href="https://wiki.yoctoproject.org/wiki/Contribute_to_Toaster">
+                I want to contribute
+               </a>
+           </p>
 
-        {% endif %}
+           {% endif %}
       </div>
-      <div class="span5">
-       <a href="http://www.yoctoproject.org">
+      <div class="span6">
         {% if MANAGED %}
-        <img alt="Yocto Project" class="thumbnail" src="{% static 'img/toaster_1.7.png' %}"/>
-       {% else %}
-        <img alt="Yocto Project" class="thumbnail" src="{% static 'img/toaster.png' %}"/>
-       {% endif %}
-       </a>
+            <img alt="Yocto Project" class="thumbnail" src="{% static 'img/toaster_1.7.png' %}"/>
+           {% else %}
+            <img alt="Yocto Project" class="thumbnail" src="{% static 'img/toaster.png' %}"/>
+           {% endif %}
       </div>
      </div>
     </div>

diff --git a/lib/toaster/toastergui/templates/layers.html b/lib/toaster/toastergui/templates/layers.html
index c35a29933379863b164d77986bcc2671366bb953..24d31c770ed927fcc9d6372a7345a0a35cc88c07 100644 (file)
--- a/lib/toaster/toastergui/templates/layers.html
+++ b/lib/toaster/toastergui/templates/layers.html
@@ -9,9 +9,9 @@
 {% block projectinfomain %}
                 <div class="page-header">
                     <h1>
-  {% if request.GET.filter and total_count >  0 or request.GET.search and total_count >  0 %}
-      {{total_count}} layer{{total_count|pluralize}} found
-  {% elif request.GET.filter and total_count ==  0 or request.GET.search and total_count == 0 %}
+  {% if request.GET.filter and objects.paginator.count >  0 or request.GET.search and objects.paginator.count >  0 %}
+      {{objects.paginator.count}} layer{{objects.paginator.count|pluralize}} found
+  {% elif request.GET.filter and objects.paginator.count ==  0 or request.GET.search and objects.paginator.count == 0 %}
       No layers found
   {%else%}
       All compatible layers
@@ -24,6 +24,7 @@
   </div>
 
 {% if objects.paginator.count == 0 %}
+  {% if request.GET.filter or request.GET.search %}
   <div class="row-fluid">
       <div class="alert">
         <form class="no-results input-append" id="searchform">
@@ -33,6 +34,15 @@
         </form>
       </div>
   </div>
+  {% else %}
+    <div class="alert alert-info lead">
+      <p>Toaster has no layer information. To generate layer information you can:</p>
+      <ul>
+       <li><a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a></li>
+       <li><a href="{% url 'importlayer' %}">Import a layer</a></li>
+      </ul>
+    </div>
+  {% endif %}
 
 {% else %}
 

diff --git a/lib/toaster/toastergui/templates/machines.html b/lib/toaster/toastergui/templates/machines.html
index 1057bdda3f56ff021099ef50095173e8cf5a07f1..2ac35378e0b64be5029b24bafc62f3169bd25a15 100644 (file)
--- a/lib/toaster/toastergui/templates/machines.html
+++ b/lib/toaster/toastergui/templates/machines.html
@@ -59,10 +59,8 @@
             </form>
           </div>
     {% else %}
-            <div class="alert alert-info">
-              <p class="lead">
-               Toaster has no machine information. To fetch machine information you should <a href="https://wiki.yoctoproject.org/wiki/Setting_up_a_hosted_managed_mode_for_Toaster#LayerSources">configure a layer source</a>
-              </p>
+            <div class="alert alert-info lead">
+               Toaster has no machine information. To generate machine information you should <a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">configure a layer source</a>
             </div>
     {% endif %}
 

diff --git a/lib/toaster/toastergui/templates/project.html b/lib/toaster/toastergui/templates/project.html
index ae9ee9b44d57a9f2ad41d9307b3c4c75054a7e4c..40048c2f2c6e5ed3c4411474a9563d783b2032de 100644 (file)
--- a/lib/toaster/toastergui/templates/project.html
+++ b/lib/toaster/toastergui/templates/project.html
@@ -15,22 +15,22 @@ vim: expandtab tabstop=2
 <script src="{% static "js/angular-sanitize.min.js" %}"></script>
 <script src="{% static "js/ui-bootstrap-tpls-0.11.0.js" %}"></script>
 
-
 {% if lvs_nos == 0 %}
-<div class="alert alert-info">
-                       <p>
-                       Toaster has no layer information; without layer information, you cannot run builds.<br/> To generate layer information you can:
-                       </p>
-                       <ul>
-                        <li> <a href="https://wiki.yoctoproject.org/wiki/Setting_up_a_hosted_managed_mode_for_Toaster#LayerSources">Configure a layer source</a>
-                        </li>
-                        <li> <a href="{% url 'importlayer' %}">Import a layer</a>
-                       </ul>
+
+  <div class="page-header">
+    <h1> {{ project.name }} </h1>
+  </div>
+  <div class="alert alert-info lead">
+         <p>Toaster has no layer information. Without layer information, you cannot run builds. To generate layer information you can:</p>
+               <ul>
+                        <li> <a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a></li>
+                        <li> <a href="{% url 'importlayer' %}">Import a layer</a></li>
+               </ul>
 </div>
 
 {%else%}
-<div id="main" role="main" ng-app="project" ng-controller="prjCtrl" class="top-padded">
 
+<div id="main" role="main" ng-app="project" ng-controller="prjCtrl" class="top-padded">
 
   <!-- project name -->
   <div class="page-header">

diff --git a/lib/toaster/toastergui/templates/targets.html b/lib/toaster/toastergui/templates/targets.html
index 27ff2be9284afbe3ed71b504d0ebdd223a320c1f..6f59a6cdabb65bda4feab2d75c32291ad9c95bf9 100644 (file)
--- a/lib/toaster/toastergui/templates/targets.html
+++ b/lib/toaster/toastergui/templates/targets.html
@@ -36,14 +36,12 @@
       </div>
   </div>
   {% else %}
-    <div class="alert alert-info">
-      <p class="lead">
-       Toaster has no target information. To generate target information you can:<br/>
-       <ul class="lead">
-       <li style="margin-top: 10px"> <a href="https://wiki.yoctoproject.org/wiki/Setting_up_a_hosted_managed_mode_for_Toaster#LayerSources">Configure a layer source</a></li>
-       <li style="margin-top: 10px">  <a href="{% url 'importlayer' %}">Import a layer</a></li>
-       </ul>
-      </p>
+    <div class="alert alert-info lead">
+      <p>Toaster has no target information. To generate target information you can:</p>
+      <ul>
+       <li><a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a></li>
+       <li><a href="{% url 'importlayer' %}">Import a layer</a>, then run a build</li>
+      </ul>
     </div>
   {% endif %}