Skip to content
Snippets Groups Projects
Commit b1fc810d authored by Eike Cochu's avatar Eike Cochu
Browse files

updated front page design

parent 6fb6b19a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
vipra-ui/app/html/index.html
+ 78
− 78
View file @ b1fc810d
<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)}}% &ndash; {{::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)}}% &ndash; {{::Vipra.formatDate(article.date)}}"></small>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
......
vipra-ui/app/img/vipra-logo.svg 0 → 100644
+ 41
− 0
View file @ b1fc810d
<?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>
vipra-ui/app/index.html
+ 1
− 1
View file @ b1fc810d
......@@ -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 -->
......
vipra-ui/app/less/app.less
+ 32
− 7
View file @ b1fc810d
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment