diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html
index a80b75d0453fbd2a6b62087b21c249d843950ab3..f9d3cc1e7df75c61981403375e5c9736e13a23f3 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/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>
diff --git a/vipra-ui/app/html/directives/word-evolution.html b/vipra-ui/app/html/directives/word-evolution.html
index 3ec5b9fb205eeb3bfe42d995db915d06b7a9b2c8..91b0a090536f1cd45346d7333a89ea88ac6d7c65 100644
--- a/vipra-ui/app/html/directives/word-evolution.html
+++ b/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>
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index 87a3d44bd1e3c4bfcf88e19bec039aa9e92736dc..963d0126cbeeb14796513a3abc2adbcb92f3416d 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/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>
diff --git a/vipra-ui/app/html/index.html b/vipra-ui/app/html/index.html
index ed11e0072cb18f98100871dd2c31df228bfe2d3f..70176b8d7fb99384289260b06fdd27ba8df78fba 100644
--- a/vipra-ui/app/html/index.html
+++ b/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>
diff --git a/vipra-ui/app/img/vipra-logo-big.png b/vipra-ui/app/img/vipra-logo-big.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd8e9c4558e124ce5daf2386a8baee952123617b
Binary files /dev/null and b/vipra-ui/app/img/vipra-logo-big.png differ
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index 7927ebaf59bfb86c9ac3db59f0b719e6f8feed8d..ff65c223e84e09a941fa60246e1f406b9f59a9a7 100644
--- a/vipra-ui/app/less/app.less
+++ b/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);