CSS fixes, Image update in wiki, travis file update (#219)

* Some CSS fixes
* Update GUI images in wiki docs
* Single line environment variables in travis

Author: Christoffer-Cortes

.travis.yml

@@ -7,9 +7,9 @@ language: java
 services:
   - docker
 
+# All environment variables must be in one line to trigger a single build.
 env:
-  - EI_BACKEND_PORT=8099
-  - JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64
+  - EI_BACKEND_PORT=8099 JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64
 
 # Using default 'test' stage for our tests, and only running deploy stage
 # (after merge) on master branch

src/main/resources/static/css/style.css

@@ -20,11 +20,6 @@
 .card-standard {
     width: 25rem;
 }
-.top-nav-bar-text{
-    color: #c1c1c1;
-    padding-left: 0px;
-    font-size: 90%;
-}
 .sticky-button-bar{
     position: -webkit-sticky; /* Safari */
     position: sticky;

src/main/resources/static/css/ui.css

@@ -6,7 +6,6 @@ body {
 .app-header {
     position: fixed;
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     z-index: 1030;
     width: 100%;
@@ -34,7 +33,7 @@ body {
 }
 .app-header .navbar-logo {
     display: flex;
-    width: 200px;
+    min-width: 200px;
     align-items: center;
     justify-content: flex-start;
     padding-left: 10px;
@@ -48,7 +47,7 @@ body {
 }
 .app-header .header-bar {
     visibility: visible;
-    max-width: 50%;
+    max-width: 500px;
     min-width: 10%;
     outline: 0;
 }
@@ -60,8 +59,9 @@ body {
 }
 .app-header .navbar-nav {
     flex-direction: row;
-    align-items: center;
     padding-left: 10px;
+    min-width: 290px;
+    justify-content: flex-end;
 }
 .app-header .navbar-toggler {
     margin-right: 10px;
@@ -156,9 +156,10 @@ body {
 }
 .app-header .nav-item.dropdown .badge {
     position: absolute;
-    margin-left: -0.8rem;
+    margin-left: -6rem;
     margin-top: -0.4rem;
     font-size: 0.6rem;
+    color: #ffffff;
 }
 .app-header .nav-item.dropdown .dropdown-menu {
     background-clip: border-box;
@@ -203,14 +204,21 @@ body {
 }
 .nav-link {
     padding: 0;
-    padding-right: 10px !important;
+    padding-right: 5px !important;
 }
 .nav-link:focus {
     outline: 0;
 }
 .nav-link:hover .fa {
     color: #fff;
 }
+.nav-link > span {
+    color: #c1c1c1;
+    font-size: 90%;
+}
+.nav-link:hover > span{
+    color: #fff;
+}
 .nav-item.dropdown .nav-link[aria-expanded="true"] .fa {
     color: #fff;
 }
@@ -220,15 +228,17 @@ body {
     top: 0.6rem;
 }
 .nav-item.dropdown .nav-link[aria-expanded="false"]:after {
+    display: inline-block;
+    width: 10px;
     color: #c1c1c1;
-    width: auto;
     content: '\f105';
     border: none;
     font-family: 'FontAwesome';
 }
 .nav-item.dropdown .nav-link[aria-expanded="true"]:after {
+    display: inline-block;
+    width: 10px;
     color: #fff;
-    width: auto;
     content: '\f107';
     border: none;
     font-family: 'FontAwesome';
@@ -409,9 +419,6 @@ body {
 }
 
 @media (max-width: 767.98px) {
-    .app-header .header-bar {
-        max-width: 100%;
-    }
     .app-body .sidebar {
         margin-left: -200px;
     }
@@ -428,9 +435,10 @@ body {
         margin-left: 200px;
     }
     .app-header {
+        flex-wrap: wrap;
         align-items: flex-start;
         height: 80px;
-        padding-top: 15px;
+        padding-top: 5px;
     }
     .app-header.header-bar-hidden {
         height: 55px;
@@ -450,16 +458,20 @@ body {
     }
     .app-header .navbar-toggler {
         order: 1;
+        align-self: center;
+        margin-right: 0;
     }
     .app-header .header-bar {
         order: 4;
         align-self: flex-end;
         max-width: 100%;
         width: 100%;
-        margin: 0 10px 10px 10px;
+        margin: 0 10px 5px 10px;
     }
     .app-header .navbar-nav {
         order: 3;
+        align-self: center;
+        min-width: 0;
     }
     .app-header .nav-item.dropdown .dropdown-menu {
         position: fixed !important;
@@ -471,6 +483,9 @@ body {
         background-color: #2f353a;
         transform: none !important;
     }
+    .app-header .nav-item.dropdown .nav-link > span:first-of-type {
+        display: none;
+    }
     .app-header .nav-item.dropdown .dropdown-menu .dropdown-header {
         border-radius: 0.25rem 0.25rem 0 0;
     }
@@ -508,6 +523,9 @@ body {
         content: "";
         background: rgba(0,0,0,.75);
     }
+    .app-header .nav-item.dropdown .badge {
+        margin-left: -0.8rem;
+    }
 }
 
 @media (hover: none) {

src/main/resources/templates/index.html

@@ -40,7 +40,7 @@
         <a class="nav-link" id="alertsLink" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
           aria-expanded="false">
           <i class="fa fa-bell" aria-hidden="true"></i>
-          <span class="top-nav-bar-text">Notifications</span>
+          <span>Notifications</span>
           <span class="badge badge-pill badge-danger" data-bind="visible: $root.newMessagesLength() > 0, text: $root.newMessagesLength()"></span>
         </a>
         <div class="alert-menu dropdown-menu">
@@ -67,7 +67,7 @@
       <li class="nav-item dropdown" id="userItem">
         <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
           <i id="login-nav-bar-icon" class="fa fa-user-circle" aria-hidden="true"></i>
-          <span id="login-nav-bar-text" class="top-nav-bar-text"></span>
+          <span id="login-nav-bar-text"></span>
         </a>
         <div class="user-menu dropdown-menu">
           <div class="dropdown-header text-center">

wiki/markdown/images/overview.png

@@ -12,16 +12,16 @@ the Eiffel Intelligence front-end, once the authentication (if enabled) is done.
 #### _Add Subscription_
 This button opens a form with a number of fields to create a subscription
 through subscription endpoint (POST /subscriptions).
-#### _Reload_
-This button reloads the data from the database and refresh the data in the
-subscription table
+#### _Upload Subscriptions_
+This button help uploads a subscription by opening a file explorer
 #### _Bulk Delete_
 This button deletes all the selected subscriptions in the table from the
 database.
+#### _Reload_
+This button reloads the data from the database and refresh the data in the
+subscription table
 #### _Get Template_
 This button downloads a subscription template
-#### _Upload Subscriptions_
-This button help uploads a subscription by opening a file explorer
 #### _EI Back-end Status_
 This button indicates, through its color, whether a back-end instance is
 connected with front-end or not. The green color means back-end is connected