diff --git a/vipra-ui/app/html/index.html b/vipra-ui/app/html/index.html
index bd78eb3789a0e5e1091284cf1342d597537f0ce9..c849420058cc60a9bfc3cd022c5658380b1a3137 100644
--- a/vipra-ui/app/html/index.html
+++ b/vipra-ui/app/html/index.html
@@ -1,87 +1,87 @@
-<div class="container" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'index'">
- <div class="row" ng-hide="search">
- <div class="col-md-12 text-center">
- <br><span class="logo-text">\ˈvī-prə\</span><br>
- <svg class="logo logo-big hover" viewBox="0 0 200 120">
- <polyline style="animation-delay:0s" class="logo-shape" points="0,0 100,45 100,75 0,0" fill="#006591" />
- <polyline style="animation-delay:.5s" class="logo-shape" points="100,45 200,0 100,75 100,45" fill="#0079a2" />
- <polyline style="animation-delay:1s" class="logo-shape" points="100,75 200,0 100,120 100,75" fill="#006591" />
- <polyline style="animation-delay:1.5s" class="logo-shape" points="0,0 100,75 100,120 0,0" fill="#0079a2" />
- </svg>
- </div>
- </div>
- <div class="row" ng-hide="search">
- <div class="col-md-8 text-center">
- <h4>Latest articles</h4>
- <ul class="list-unstyled">
- <li class="ellipsis" ng-repeat="article in latestArticles">
- <article-link article="::article" badge="false" menu="false" excerpt="false"/>
- </li>
- </ul>
- <p class="text-muted text-center" ng-if="!latestArticles.length">No articles</p>
- </div>
- <div class="col-md-4 text-center">
- <h4>Latest topics</h4>
- <ul class="list-unstyled">
- <li class="ellipsis" ng-repeat="topic in latestTopics">
- <topic-link topic="::topic" badge="false" menu="false"/>
- </li>
- </ul>
- <p class="text-muted text-center" ng-if="!latestTopics.length">No topics</p>
- </div>
- </div>
- <div class="row row-spaced search-row">
- <div class="col-md-12">
- <div class="input-group">
- <div class="form-group has-feedback">
- <input type="text" class="form-control input-lg" placeholder="Search..." ng-model="search" ng-model-options="{debounce:500}" id="searchBox">
- <i class="form-control-feedback glyphicon glyphicon-search text-muted"></i>
+<div class="fullsize" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'index'">
+ <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">
+ \ˈvī-prə\
</div>
- <span class="input-group-btn">
- <button class="btn btn-default btn-lg" type="button" title="Advanced" ng-click="advancedSearch=!advancedSearch"><i class="fa text-muted" ng-class="{'fa-chevron-down':!advancedSearch,'fa-chevron-up':advancedSearch}"></i></button>
- </span>
</div>
- </div>
- </div>
- <div class="row row-spaced" ng-show="advancedSearch" ng-cloak>
- <div class="col-md-6 form-horizontal">
- <label for="advFromDate" class="col-sm-2 control-label">From</label>
- <div class="input-group date col-sm-10" id="advFromDate" bs-datetimepicker ng-model="rootModels.advFromDate">
- <input type="text" class="form-control">
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
+ <div class="row row-spaced">
+ <div class="col-md-12">
+ <div class="input-group">
+ <div class="form-group has-feedback">
+ <input type="text" class="form-control input-lg" placeholder="Search..." ng-model="search" ng-model-options="{debounce:500}" id="searchBox">
+ <i class="form-control-feedback glyphicon glyphicon-search text-muted"></i>
+ </div>
+ <span class="input-group-btn">
+ <button class="btn btn-default btn-lg" type="button" title="Advanced" ng-click="advancedSearch=!advancedSearch"><i class="fa text-muted" ng-class="{'fa-chevron-down':!advancedSearch,'fa-chevron-up':advancedSearch}"></i></button>
+ </span>
+ </div>
+ </div>
</div>
- </div>
- <div class="col-md-6 form-horizontal">
- <label for="advToDate" class="col-sm-2 control-label">To</label>
- <div class="input-group date col-sm-10" id="advToDate" bs-datetimepicker ng-model="rootModels.advToDate">
- <input type="text" class="form-control">
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
+ <div class="row row-spaced" ng-show="advancedSearch" ng-cloak>
+ <div class="col-md-6 form-horizontal">
+ <label for="advFromDate" class="col-sm-2 control-label">From</label>
+ <div class="input-group date col-sm-10" id="advFromDate" bs-datetimepicker ng-model="rootModels.advFromDate">
+ <input type="text" class="form-control">
+ <span class="input-group-addon">
+ <span class="glyphicon glyphicon-calendar"></span>
+ </span>
+ </div>
+ </div>
+ <div class="col-md-6 form-horizontal">
+ <label for="advToDate" class="col-sm-2 control-label">To</label>
+ <div class="input-group date col-sm-10" id="advToDate" bs-datetimepicker ng-model="rootModels.advToDate">
+ <input type="text" class="form-control">
+ <span class="input-group-addon">
+ <span class="glyphicon glyphicon-calendar"></span>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="row latest-items" ng-hide="search">
+ <div class="col-md-8 text-center">
+ <h4>Latest articles</h4>
+ <ul class="list-unstyled">
+ <li class="ellipsis" ng-repeat="article in latestArticles">
+ <article-link article="::article" badge="false" menu="false" excerpt="false"/>
+ </li>
+ </ul>
+ <p class="text-muted text-center" ng-if="!latestArticles.length">No articles</p>
+ </div>
+ <div class="col-md-4 text-center">
+ <h4>Latest topics</h4>
+ <ul class="list-unstyled">
+ <li class="ellipsis" ng-repeat="topic in latestTopics">
+ <topic-link topic="::topic" badge="false" menu="false"/>
+ </li>
+ </ul>
+ <p class="text-muted text-center" ng-if="!latestTopics.length">No topics</p>
+ </div>
</div>
</div>
</div>
- <div class="row row-spaced">
- <div class="col-md-12 text-center" ng-show="searching" ng-cloak>
- Searching...
- </div>
- <div class="col-md-12" ng-show="!searching && search && (!searchResults || searchResults.length == 0)" ng-cloak>
- <h4>No Results</h4>
- </div>
- <div class="col-md-12" ng-show="searchResults.length > 0" ng-cloak>
- <h4>Results</h4>
- <ul class="list-unstyled search-results">
- <li class="search-result" ng-repeat="article in searchResults">
- <a ui-sref="articles.show({id:article.id})" ng-bind="article.title"></a>
- <p>
- <span class="text" ng-bind="article.text"></span>
- <br>
- <small class="text-muted" ng-bind-template="{{::Vipra.toPercent(article.meta.score)}}% – {{::Vipra.formatDate(article.date)}}"></small>
- </p>
- </li>
- </ul>
+ <div class="container">
+ <div class="row row-spaced">
+ <div class="col-md-12 text-center" ng-show="searching" ng-cloak>
+ Searching...
+ </div>
+ <div class="col-md-12" ng-show="!searching && search && (!searchResults || searchResults.length == 0)" ng-cloak>
+ <h4>No Results</h4>
+ </div>
+ <div class="col-md-12" ng-show="searchResults.length > 0" ng-cloak>
+ <h4>Results</h4>
+ <ul class="list-unstyled search-results">
+ <li class="search-result" ng-repeat="article in searchResults">
+ <a ui-sref="articles.show({id:article.id})" ng-bind="article.title"></a>
+ <p>
+ <span class="text" ng-bind="article.text"></span>
+ <br>
+ <small class="text-muted" ng-bind-template="{{::Vipra.toPercent(article.meta.score)}}% – {{::Vipra.formatDate(article.date)}}"></small>
+ </p>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
diff --git a/vipra-ui/app/img/vipra-logo.svg b/vipra-ui/app/img/vipra-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..930f15bdae51cf859a030c85fb89a49e5f0ff314
--- /dev/null
+++ b/vipra-ui/app/img/vipra-logo.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ id="svg2"
+ viewBox="0 0 200 120">
+ <metadata
+ id="metadata16">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs14" />
+ <polyline
+ id="polyline4"
+ fill="#006591"
+ points="0,0 100,45 100,75 0,0" />
+ <polyline
+ id="polyline6"
+ fill="#0079a2"
+ points="100,45 200,0 100,75 100,45" />
+ <polyline
+ id="polyline8"
+ fill="#006591"
+ points="100,75 200,0 100,120 100,75" />
+ <polyline
+ id="polyline10"
+ fill="#0079a2"
+ points="0,0 100,75 100,120 0,0" />
+</svg>
diff --git a/vipra-ui/app/index.html b/vipra-ui/app/index.html
index 0e63f34c47274e8ee3acbd3b8dfe0005c045e44b..ba25f1f959c1ac32e20fe664f5c180a7b3005f5d 100644
--- a/vipra-ui/app/index.html
+++ b/vipra-ui/app/index.html
@@ -15,7 +15,7 @@
<script src="js/app.js"></script>
<script src="js/templates.js"></script>
</head>
-<body>
+<body ng-attr-class="{{state?state.name:''}}">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index f728684c197f9eb9760bc850882a2889382fbfd4..075a6a7190cb42f0a818b7c6c864f56808212da8 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -2,6 +2,7 @@
@topbarSpace: 70px;
@sidebar-padding: 5px;
@sidebar-width: 250px;
+@bar-color: #f8f8f8;
html {
position: relative;
@@ -32,7 +33,7 @@ a:hover {
}
.search-results {
- padding: 15px;
+ padding-top: 15px;
.search-result {
&:not(: last-child) {
margin-bottom: 20px;
@@ -263,7 +264,7 @@ a:hover {
}
.topbar {
- background: #f9f9f9;
+ background: @bar-color;
width: 100%;
padding: 5px;
vertical-align: middle;
@@ -294,7 +295,7 @@ a:hover {
}
.sidebar {
- background: #f9f9f9;
+ background: @bar-color;
padding: @sidebar-padding;
height: 100%;
position: absolute;
@@ -397,10 +398,12 @@ a:hover {
vertical-align: bottom;
}
+.centered-container,
.message-container {
position: relative;
}
+.centered,
.message {
position: absolute;
top: 50%;
@@ -519,10 +522,6 @@ entity-menu {
border-top: 1px solid #e5e5e5;
}
-.search-row {
- margin-top: 35px;
-}
-
.dbpedia-logo {
background-image: url(../img/dbpedia-logo.svg);
display: inline-block;
@@ -693,6 +692,32 @@ entity-menu {
}
}
+.title-band {
+ background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+ padding: 100px 0 50px 0;
+ &.slim {
+ padding: 80px 0 30px 0;
+ }
+ .text-logo {
+ font-size: 50px;
+ color: #fff;
+ }
+}
+
+.latest-items {
+ color: white;
+ a {
+ color: white;
+ }
+}
+
+.index{
+ .navbar-default {
+ border-color: transparent;
+ background: rgba(255,255,255,0.6);
+ }
+}
+
@-moz-keyframes spin {
100% {
-moz-transform: rotateY(360deg);