Commit df3f088d authored by Marco Flowers's avatar Marco Flowers

Added the tag cloud and the top bar

Set up the tag cloud with popularity. Added the top bar on the
current website and adjusted the css.
parent e3486aa5
TODO:
- Add the rest of the url checks to yp-cgi.js, also might turn the checks into an
admin interface
- Add meaningful error codes to the json api, not just returning empty []
- Add more options to the api if needed (Grouping of streams by Channel, geographical area)
https://trac.xiph.org/ticket/1958
- Create documenation for the json api
- Finish the html directory site
- Add caching to the json api ? maybe
Icecast Directory
/* Padding for bottom navbar */
body { padding-bottom: 70px; }
\ No newline at end of file
body { padding-bottom: 70px; }
/* Tag Cloud */
.tag-cloud li {
display: inline;
}
.tag-cloud {
padding:0;
}
.tag-cloud .popularity-0 { font-size: 0.9em !important; padding-left:5px; padding-right:5px;}
.tag-cloud .popularity-1 { font-size: 1.1em !important; padding-left:5px; padding-right:5px;}
.tag-cloud .popularity-2 { font-size: 1.3em !important; padding-left:5px; padding-right:5px;}
.tag-cloud .popularity-3 { font-size: 1.4em !important; padding-left:5px; padding-right:5px;}
.tag-cloud .popularity-4 { font-size: 1.5em !important; padding-left:5px; padding-right:5px;}
.tag-cloud .popularity-5 { font-size: 1.6em !important; padding-left:5px; padding-right:5px;}
.tag-cloud .popularity-2 a, .tag-cloud .popularity-3 a,
.tag-cloud .popularity-4 a, .tag-cloud .popularity-5 a {
font-weight: normal !important;
}
/* Search Bar */
.search-bar{
margin-top:5px !important;
margin-bottom:5px !important;
}
#xiphbar_outer {
background-color: #666666;
min-width: 840px;
width: 100%;
height: 30px;
}
/* make the top xiph bar disappear on small devices */
@media only screen and (max-device-width: 1026px) {
#xiphbar_outer {
visibility: hidden;
display: none;
}
}
#xiphbar {
min-width: 840px;
width: 840px;
height: 30px;
margin-left: auto;
margin-right: auto;
padding: 0 8px 0 8px;
}
#xiphbar a {
margin-left: 16px;
color: #ffcc66;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
#xiphbar a:hover {
color: #ffe6b3;
}
#xiphbanner {
float: left;
vertical-align: middle;
}
#xiphlinks {
font-size: 11px;
vertical-align: middle;
}
......@@ -45,6 +45,11 @@ function getStats(resultCallback)
},
function(rows, result, cb) {
stats.statistics["Total Streams"] = rows[0].total
// computer popularity for genres
for(var i =0;i<stats["genres"].length;i++) {
// cap popularity at 6
stats["genres"][i].popularity = Math.min(Math.round((stats["genres"][i].count/rows[0].total)*15-1), 6)
}
resultCallback(null, stats);
},
],function (err, result) {
......
......@@ -14,7 +14,7 @@
</head>
<body>
<audio id="player" preload="auto"></audio>
<!-- <div id="xiphbar_outer">
<div id="xiphbar_outer">
<table id="xiphbar" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
......@@ -31,7 +31,7 @@
</td>
</tr>
</table>
</div> -->
</div>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
......@@ -48,7 +48,7 @@
<div class="navbar-right">
<form class="navbar-form" role="search" method="get" action="/search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<input type="text" class="form-control search-bar" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="submit" class="btn btn-default" aria-label="Go"><i class="glyphicon glyphicon-search"></i></button>
</div>
......@@ -63,15 +63,15 @@
<div class="col-md-3"> <!-- Sidebar -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Statistics</h3>
<h3 class="panel-title text-center">Statistics</h3>
</div>
<div class="panel-body">
<div class="panel-body text-center">
{% for name, number in stats.statistics %}
{{name}} - {{number}}
<br>
{% endfor %}
{% for format in stats.formats %}
{% if loop.index0 < 3 %}
{% if loop.index0 < 5 %}
{{format.codec}} - {{format.count}}
<br>
{% endif %}
......@@ -79,23 +79,24 @@
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-heading text-center">
<h3 class="panel-title">Popular genres</h3>
</div>
<div class="panel-body">
<ul class="tag-cloud text-center">
{% for genre in stats.genres %}
<a href='/search/?genre={{genre.genre}}'>{{genre.genre}}</a>
<br>
<li class="popularity-{{genre.popularity}}"><a href="/search?={{genre.genre |url_encode}}" class="tag" title="{{genre.genre}} radios">{{genre.genre}}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Formats</h3>
<h3 class="panel-title text-center">Formats</h3>
</div>
<div class="panel-body">
<div class="panel-body text-center">
{% for format in stats.formats %}
<a href='/search/?format={{format.codec}}'>{{format.codec}}</a>
<a href='/search/?format={{format.codec |url_encode }}'>{{format.codec}}</a>
<br>
{% endfor %}
</div>
......
......@@ -24,13 +24,13 @@
<p class="songname"><b>On Air:</b> <i>{{ server.songname }}</i></p>
<p class="genres"><b>Genres:</b>
{% for genre in server.genres %}
<a href="/search/?genre={{ genre }}" class="label label-default">{{ genre }}</a>
<a href="/search/?genre={{ genre |url_encode}}" class="label label-default">{{ genre }}</a>
{% endfor %}
</p>
<p class="tunein"><b>Tune in:</b> <a href="/listen/{{ server.id }}/listen.m3u">M3U</a> | <a href="/listen/{{ server.id }}/listen.xspf">XSPF</a></p>
{% for format in server.codec_sub_types %}
{% if loop.first %}
<p class="codec"><a href="/search/?format={{ format }}">{{ format }}</a>
<p class="codec"><a href="/search/?format={{ format |url_encode}}">{{ format }}</a>
{% endif %}
{% endfor %}
<!--p class="format">{{ server.stream_type }}</p-->
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment