fixed menu dropdown buttons, added video tag for screencast

vipra-ui/app/html/articles/show.html

@@ -69,7 +69,7 @@
                     <topic-link topic="::topic.topic" />
                   </td>
                   <td>
-                    <span class="colorbox" style="background:{{::topic.color}}"></span>
+                    <span class="colorbox shown plain" style="background:{{::topic.color}}"></span>
                   </td>
                 </tr>
               </tbody>

vipra-ui/app/html/directives/word-evolution.html

@@ -22,11 +22,12 @@
           <div class="checkbox checkbox-condensed" ng-class="{selected:word.selected}">
             <input tabindex="0" type="checkbox" ng-model="word.selected" ng-attr-id="{{::word.id}}" ng-change="redrawWordEvolutionChart()">
             <label class="check" ng-attr-for="{{::word.id}}">
-              <span class="ellipsis">
-                <word-link word="::word" />
+              <span class="ellipsis menu-padding" ng-attr-title="{{::word.id}}">
+                <span ng-bind="word.id"></span>
               </span>
+              <word-menu word="word" class="menu-button" />
             </label>
-            <span class="colorbox" style="background:{{::word.color}}"></span>
+            <span class="colorbox" style="background:{{::word.color}}"></span>            
           </div>
         </li>
       </ul>

vipra-ui/app/html/explorer.html

@@ -27,10 +27,10 @@
             <span class="valuebar" ng-style="{width:topic.topicCurrValue}"></span>
             <input tabindex="0" type="checkbox" ng-model="topic.selected" ng-attr-id="relevance-{{::topic.id}}" ng-change="changeSelectedTopics()">
             <label class="check" ng-attr-for="relevance-{{::topic.id}}">
-              <topic-menu topic="topic" class="menu-button" />
-              <span class="ellipsis" ng-attr-title="{{::topic.name}}">
+              <span class="ellipsis menu-padding" ng-attr-title="{{::topic.name}}">
                 <span ng-bind="topic.name"></span>
               </span>
+              <topic-menu topic="topic" class="menu-button" />
             </label>
             <span class="colorbox" style="background:{{::topic.color}}" bs-popover popover-title="{{topic.name}}" popover-template="partials/topic-popover.html" popover-delay="500"></span>
           </div>
@@ -77,10 +77,10 @@
             <span class="valuebar" ng-style="{width:topic.topicCurrValue}"></span>
             <input tabindex="0" type="radio" ng-model="explorerModels.activeTopic" ng-attr-id="detail-{{::topic.id}}" name="topic-active" ng-value="topic">
             <label class="radio" ng-attr-for="detail-{{::topic.id}}">
-              <topic-menu topic="topic" class="menu-button" />
-              <span class="ellipsis" ng-attr-title="{{::topic.name}}">
+              <span class="ellipsis menu-padding" ng-attr-title="{{::topic.name}}">
                 <span ng-bind="topic.name"></span>
               </span>
+              <topic-menu topic="topic" class="menu-button" />
             </label>
             <span class="colorbox shown" style="background:{{::topic.color}}" bs-popover popover-title="{{topic.name}}" popover-template="partials/topic-popover.html" popover-delay="500"></span>
           </div>

vipra-ui/app/html/index.html

@@ -2,8 +2,8 @@
   <div class="title-band" ng-class="{slim:search}">
     <div class="container">
       <div class="row row-spaced" ng-hide="search">
-        <div class="col-md-12 text-center text-logo">
-          VIPRA
+        <div class="col-md-12 text-center">
+          <span class="text-logo">VIPRA</span>
         </div>
       </div>
       <div class="row row-spaced">
@@ -61,10 +61,17 @@
       </div>
     </div>
   </div>
-  <div class="container" ng-show="!searching && !search">
-    <div class="row">
-      <div class="col-md-offset-1 col-md-10 col-sm-12">
-        <div class="embed-responsive embed-responsive-16by9 screencast"></div>
+  <div class="container-fluid" ng-show="!searching && !search">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-offset-1 col-md-10 col-sm-12">
+          <div class="embed-responsive embed-responsive-16by9 screencast">
+            <video controls muted poster="img/vipra-logo-big.png">
+              <source src="//ftp.cochu.io/vipra/screencast.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
       </div>
     </div>
   </div>

vipra-ui/app/less/app.less

@@ -294,16 +294,6 @@ a:hover {
   }
 }
 
-.colorbox {
-  display: inline-block;
-  width: 5px;
-  height: 21px;
-  vertical-align: middle;
-  float: right;
-  border-radius: 3px;
-  padding-left: 5px;
-}
-
 .valuebar {
   @valuebg: #e3e3e3;
   display: inline-block;
@@ -439,10 +429,25 @@ a:hover {
 }
 
 .colorbox {
-  position: absolute;
-  right: 0;
-  top: 0;
+
+  display: inline-block;
+  width: 5px;
+  height: 21px;
+  vertical-align: middle;
+  float: right;
+  border-radius: 3px;
+  padding-left: 5px;
   visibility: hidden;
+
+  &:not(.plain) {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &.plain {
+    width: 10px;
+  }
 }
 
 .checkbox:hover .colorbox,
@@ -780,6 +785,8 @@ entity-menu {
     letter-spacing: -8px;
     color: #fff;
     text-shadow: 0 0 5px rgba(255,255,255,0.5);
+    padding: 0 10px;
+    opacity: 0.8;
   }
 }
 
@@ -863,7 +870,7 @@ entity-menu {
 }
 
 .screencast {
-  background: #eee;
+  border: 8px solid #eee;
   margin: 10px auto;
 }
 
@@ -892,6 +899,10 @@ entity-menu {
   }
 }
 
+.relative {
+  position: relative;
+}
+
 @keyframes spin {
   100% {
     -webkit-transform: rotateY(360deg);