1
0
mirror of https://gitlab.xiph.org/xiph/icecast-server.git synced 2024-12-04 14:46:30 -05:00

WIP new style for the web interface

This commit is contained in:
Marvin Scholz 2018-08-02 12:58:30 +02:00 committed by Philipp Schafft
parent 6484fb40c6
commit 5b4ad6d7a8
20 changed files with 446 additions and 1448 deletions

View File

@ -1,30 +1,47 @@
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" xmlns="http://www.w3.org/1999/xhtml"> <xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output omit-xml-declaration="no" method="xml" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" /> <xsl:output omit-xml-declaration="no" method="xml" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" />
<!-- Import include files --> <!-- Import include files -->
<xsl:template match="/node()"> <xsl:template match="/node()">
<html> <html>
<head> <head>
<title><xsl:value-of select="$title"/> — Icecast Streaming Media Server</title> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" /> <title><xsl:value-of select="$title"/> — Icecast Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
</head> <link rel="stylesheet" type="text/css" href="/assets/css/style.css" media="screen, print" />
<body>
<h1 id="header">Icecast <xsl:value-of select="$title"/></h1> <meta name="theme-color" content="#001826" />
<!--index header menu --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<div id="menu"> <meta name="description" content="Icecast is free server software for streaming multimedia." />
<ul> </head>
<li><a href="admin/">Administration</a></li> <body>
<li><a href="status.xsl">Server Status</a></li> <!-- Header and menu -->
<li><a href="server_version.xsl">Version</a></li> <header>
</ul> <nav id="main-nav" role="primary">
</div> <a href="/" id="branding">
<!--end index header menu --> <img src="icecast.png" alt="" />
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" /> <h1>Icecast Server</h1>
<div id="footer"> </a>
Support icecast development at <a href="http://www.icecast.org">www.icecast.org</a> <ul>
</div> <li><a href="#">Status</a></li>
</body> <li><a href="#">Version</a></li>
</html> <li class="right"><a href="#">Administration</a></li>
</ul>
</nav>
</header>
<!--<h1 id="header">Icecast <xsl:value-of select="$title"/></h1>-->
<!-- Content -->
<main role="main">
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" />
</main>
<!-- Footer -->
<footer>
<p>Support icecast development at <a href="http://icecast.org">icecast.org</a></p>
</footer>
</body>
</html>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

View File

@ -3,29 +3,14 @@
webdir = $(pkgdatadir)/web webdir = $(pkgdatadir)/web
nobase_web_DATA = \ nobase_web_DATA = \
status.xsl \ status.xsl \
favicon.ico \
icecast.png \
style.css \
auth.xsl \ auth.xsl \
server_version.xsl \ server_version.xsl \
tunein.png \
key.png \
status-json.xsl \ status-json.xsl \
xml2json.xslt \ xml2json.xslt \
favicon.ico \
assets/css/style.css \ assets/css/style.css \
assets/font/FiraMono-Bold.eot \ assets/img/icecast.png
assets/font/FiraMono-Regular.eot \
assets/font/FiraSans-Bold.eot \
assets/font/FiraSans-BoldItalic.woff \
assets/font/FiraSans-Italic.eot \
assets/font/FiraSans-Regular.eot \
assets/font/FiraMono-Bold.woff \
assets/font/FiraMono-Regular.woff \
assets/font/FiraSans-BoldItalic.eot \
assets/font/FiraSans-Bold.woff \
assets/font/FiraSans-Italic.woff \
assets/font/FiraSans-Regular.woff
EXTRA_DIST = $(nobase_web_DATA) EXTRA_DIST = $(nobase_web_DATA)

File diff suppressed because it is too large Load Diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -13,157 +13,164 @@
--> -->
</xsl:text> </xsl:text>
<!--mount point stats--> <!--mount point stats-->
<xsl:for-each select="source"> <h2>Status</h2>
<xsl:choose> <xsl:choose>
<xsl:when test="listeners"> <xsl:when test="source">
<div class="roundbox"> <xsl:for-each select="source">
<div class="mounthead"> <xsl:choose>
<h3 class="mount">Mount Point <xsl:value-of select="@mount" /></h3> <xsl:when test="listeners">
<div class="right"> <section class="box">
<xsl:choose> <h3 class="box_title">Mountpoint <code><xsl:value-of select="@mount" /></code></h3>
<xsl:when test="authenticator">
<a class="auth" href="/auth.xsl">Login</a> <!-- Playlists section -->
</xsl:when> <h4>Play stream</h4>
<xsl:otherwise> <ul class="playlists">
<ul class="mountlist"> <li><a href="{@mount}">Direct</a></li>
<li><a class="play" href="{@mount}.m3u">M3U</a></li> <li><a href="{@mount}.m3u">M3U</a></li>
<li><a class="play" href="{@mount}.xspf">XSPF</a></li> <li><a href="{@mount}.xspf">XSPF</a></li>
<!-- <li><a class="play" href="{@mount}.vclt">VCLT</a></li> --> </ul>
</ul>
</xsl:otherwise> <!-- Player -->
</xsl:choose> <xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg') or (server_type = 'audio/webm'))">
</div> <div class="audioplayer">
</div> <audio controls="controls" preload="none">
<div class="mountcont"> <source src="{@mount}" type="{server_type}" />
<xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg') or (server_type = 'audio/webm'))"> </audio>
<div class="audioplayer"> </div>
<audio controls="controls" preload="none"> </xsl:if>
<source src="{@mount}" type="{server_type}" />
</audio> <!-- Stream info and stats -->
</div> <h4>Further information</h4>
</xsl:if> <div class="mountcont">
<table class="yellowkeys"> <table class="table-keys">
<tbody> <tbody>
<xsl:if test="server_name"> <xsl:if test="server_name">
<tr> <tr>
<td>Stream Name:</td> <td>Stream Name:</td>
<td><xsl:value-of select="server_name" /></td> <td><xsl:value-of select="server_name" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="server_description"> <xsl:if test="server_description">
<tr> <tr>
<td>Stream Description:</td> <td>Stream Description:</td>
<td><xsl:value-of select="server_description" /></td> <td><xsl:value-of select="server_description" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="server_type"> <xsl:if test="server_type">
<tr> <tr>
<td>Content Type:</td> <td>Content Type:</td>
<td><xsl:value-of select="server_type" /></td> <td><xsl:value-of select="server_type" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="stream_start"> <xsl:if test="stream_start">
<tr> <tr>
<td>Stream started:</td> <td>Stream started:</td>
<td class="streamstats"><xsl:value-of select="stream_start" /></td> <td class="streamstats"><xsl:value-of select="stream_start" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="bitrate"> <xsl:if test="bitrate">
<tr> <tr>
<td>Bitrate:</td> <td>Bitrate:</td>
<td class="streamstats"><xsl:value-of select="bitrate" /></td> <td class="streamstats"><xsl:value-of select="bitrate" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="quality"> <xsl:if test="quality">
<tr> <tr>
<td>Quality:</td> <td>Quality:</td>
<td class="streamstats"><xsl:value-of select="quality" /></td> <td class="streamstats"><xsl:value-of select="quality" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="video_quality"> <xsl:if test="video_quality">
<tr> <tr>
<td>Video Quality:</td> <td>Video Quality:</td>
<td class="streamstats"><xsl:value-of select="video_quality" /></td> <td class="streamstats"><xsl:value-of select="video_quality" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="frame_size"> <xsl:if test="frame_size">
<tr> <tr>
<td>Framesize:</td> <td>Framesize:</td>
<td class="streamstats"><xsl:value-of select="frame_size" /></td> <td class="streamstats"><xsl:value-of select="frame_size" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="frame_rate"> <xsl:if test="frame_rate">
<tr> <tr>
<td>Framerate:</td> <td>Framerate:</td>
<td class="streamstats"><xsl:value-of select="frame_rate" /></td> <td class="streamstats"><xsl:value-of select="frame_rate" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="listeners"> <xsl:if test="listeners">
<tr> <tr>
<td>Listeners (current):</td> <td>Listeners (current):</td>
<td class="streamstats"><xsl:value-of select="listeners" /></td> <td class="streamstats"><xsl:value-of select="listeners" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="listener_peak"> <xsl:if test="listener_peak">
<tr> <tr>
<td>Listeners (peak):</td> <td>Listeners (peak):</td>
<td class="streamstats"><xsl:value-of select="listener_peak" /></td> <td class="streamstats"><xsl:value-of select="listener_peak" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="genre"> <xsl:if test="genre">
<tr> <tr>
<td>Genre:</td> <td>Genre:</td>
<td class="streamstats"><xsl:value-of select="genre" /></td> <td class="streamstats"><xsl:value-of select="genre" /></td>
</tr> </tr>
</xsl:if> </xsl:if>
<xsl:if test="server_url"> <xsl:if test="server_url">
<tr> <tr>
<td>Stream URL:</td> <td>Stream URL:</td>
<td class="streamstats"> <td class="streamstats">
<a href="{server_url}"><xsl:value-of select="server_url" /></a> <a href="{server_url}"><xsl:value-of select="server_url" /></a>
</td> </td>
</tr> </tr>
</xsl:if> </xsl:if>
<tr>
<td>Currently playing:</td>
<td class="streamstats">
<xsl:if test="artist">
<xsl:value-of select="artist" /> -
</xsl:if>
<xsl:value-of select="title" />
</td>
</tr>
</tbody>
</table>
<!-- Extra playlist -->
<xsl:if test="playlist/*">
<h4>Playlist</h4>
<table class="table-block">
<tbody>
<tr>
<th>Album</th>
<th>Track</th>
<th>Creator</th>
<th>Title</th>
</tr>
<xsl:for-each select="playlist/trackList/track">
<tr> <tr>
<td><xsl:value-of select="album" /></td> <td>Currently playing:</td>
<td><xsl:value-of select="trackNum" /></td> <td class="streamstats">
<td><xsl:value-of select="creator" /></td> <xsl:if test="artist">
<td><xsl:value-of select="title" /></td> <xsl:value-of select="artist" /> -
</xsl:if>
<xsl:value-of select="title" />
</td>
</tr> </tr>
</xsl:for-each> </tbody>
</tbody> </table>
</table> <!-- Extra playlist -->
</xsl:if> <xsl:if test="playlist/*">
</div> <h4>Playlist</h4>
</div> <table class="table-block">
</xsl:when> <tbody>
<xsl:otherwise> <tr>
<h3><xsl:value-of select="@mount" /> - Not Connected</h3> <th>Album</th>
</xsl:otherwise> <th>Track</th>
</xsl:choose> <th>Creator</th>
</xsl:for-each> <th>Title</th>
</tr>
<xsl:for-each select="playlist/trackList/track">
<tr>
<td><xsl:value-of select="album" /></td>
<td><xsl:value-of select="trackNum" /></td>
<td><xsl:value-of select="creator" /></td>
<td><xsl:value-of select="title" /></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</xsl:if>
</div>
</section>
</xsl:when>
<xsl:otherwise>
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:when>
<xsl:otherwise>
<aside class="error">
<strong>No mounts!</strong> There are no active mountpoints.
</aside>
</xsl:otherwise>
</xsl:choose>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

View File

@ -1,274 +0,0 @@
html {
margin: 0;
padding: 0;
background-color: #000;
}
body {
padding: 0 25px 0 50px;
background-color: #000;
font-family: Verdana, sans-serif;
text-decoration: none;
color: #fff;
}
a {
color: #f8ef64;
text-decoration: none;
border-bottom: 1px dotted #f8ef64;
}
a:hover {
color: #f8ef64;
text-decoration: none;
border-bottom: 1px solid #f8ef64;
}
h1 {
font-family: Verdana, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: 3em;
color: #fff;
margin-top: 3px;
}
h3 {
margin: 0px;
padding: 0px;
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 110%;
color: #f8ef64;
}
h1#header{
padding: 10px 0px 10px 80px;
background: transparent url(/icecast.png) no-repeat scroll left center;
}
h3 small {
color: #fff;
font-size: 70%;
padding-left: 15px;
}
form.alignedform label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
form.alignedform input {
display: inline-block;
vertical-align: middle;
border: 1px solid #f8ef64;
background-color: #333;
color: #f8ef64;
padding: 5px;
}
#menu {
border-top: 3px solid #7B96C6;
border-bottom: 3px solid #7B96C6;
text-align: center;
margin-bottom: 35px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
vertical-align: middle;
}
#menu ul li {
float: left;
padding-left: 25px;
padding-right: 25px;
}
#menu ul li a {
font-family: Verdana, sans-serif;
text-decoration: none;
color: #fff;
font-size: 18px;
border: none;
}
#menu ul li a:hover {
color: #f8ef64;
}
.roundbox {
width: 90%;
background-color: #656565;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 35px;
}
.roundbox h3 {
margin-bottom: 10px;
border-bottom: 1px groove #ACACAC;
}
.roundbox table.yellowkeys tr td:last-child {
color: #f8ef64;
}
table.colortable {
border-collapse: collapse;
padding: 20px 0 20px 0;
margin: 0 auto;
}
table.colortable td {
border: 1px solid #000;
text-align: center;
padding: 5px;
}
table.colortable thead tr td {
color: #656565;
background: #f8ef64;
border-color: white;
}
.roundbox table.yellowkeys tr td {
padding: 5px 5px 0 0;
word-wrap: break-word;
word-break: break-all;
}
.right {
float: right;
}
.mounthead h3 {
float: left;
margin-bottom: 0px;
border-bottom: none;
}
.mountcont {
border-top: 1px groove #ACACAC;
clear: both;
}
ul.mountlist {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.mountlist li {
display: inline;
}
a.play {
padding-left: 22px;
margin-left: 25px;
border: none;
background: transparent url(/tunein.png) no-repeat scroll left center;
background-size: auto 100%;
}
a.auth {
padding-left: 22px;
margin-left: 25px;
border: none;
background: transparent url(/key.png) no-repeat scroll left top;
background-size: auto 100%;
}
/* Admin navigation */
ul.nav {
margin: 0;
padding: 5px 0 10px 0;
clear: both;
list-style: none;
text-align: center;
}
ul.nav li {
display: inline;
}
ul.nav li a {
border: none;
display: inline-block;
padding: .2em .7em;
margin-top: .2em;
background-color: #333;
white-space: nowrap;
}
ul.nav li a:hover {
color: #fff;
}
/* Footer */
#footer {
border-top: 1px groove #ACACAC;
margin-top: 20px;
font-size: 80%;
}
@media (max-width: 800px) {
body {
padding: 0;
}
.roundbox {
width: auto;
border-radius: 0;
}
.roundbox table.yellowkeys tr td {
display: block;
padding: 5px 5px 0 0;
}
.roundbox table.yellowkeys tr td:last-child {
margin-bottom: 5px;
margin-left: 5px;
}
.scrolltable {
overflow: auto;
}
}
@media (max-width: 320px) {
ul.nav, #menu ul {
display: block;
}
ul.nav li, #menu ul li {
float: none;
}
ul.nav li a, #menu ul li a {
display: block;
}
ul.nav li + li, #menu ul li + li {
border-top: 1px solid #ACACAC;
}
a.play {
margin-left: 15px;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB