Music folder accordion
Posted: Fri Oct 01, 2010 12:43 pmFor a neater presentation of your music folders, I've reformatted the a-z html and added a javascript accordion.
Replace the following files with the content below...
/var/subsonic/jetty/1806/webapp/WEB-INF/jsp/left.jsp
/var/subsonic/jetty/1806/webapp/style/default.css
Replace the following files with the content below...
/var/subsonic/jetty/1806/webapp/WEB-INF/jsp/left.jsp
- Code: Select all
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<%@ include file="head.jsp" %>
<script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
<script type="text/javascript" src="<c:url value="/script/smooth-scroll.js"/>"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.accordion-content').hide();
//toggle the componenet with class accordion
$('.accordion-toggle').click(function(){
//$(this).toggleClass('toggle-accordion-active');
$(this).next('.accordion-content').slideToggle(300);
});
$('#accordion-expand-all').click(function(){
$('.accordion-content').slideToggle(300);
});
});
</script>
</head>
<body class="bgcolor2 leftframe">
<a name="top"></a>
<div class="alpha-jump">
<c:forEach items="${model.indexes}" var="index">
<a href="#${index.index}" accesskey="${index.index}">${index.index}</a>
</c:forEach>
</div>
<c:if test="${model.statistics.songCount gt 0}">
<div class="detail">
<fmt:message key="left.statistics">
<p><fmt:param value="${model.statistics.artistCount}"/></p>
<p><fmt:param value="${model.statistics.albumCount}"/></p>
<p><fmt:param value="${model.statistics.songCount}"/></p>
<p><fmt:param value="${model.bytes}"/></p>
<p><fmt:param value="${model.hours}"/></p>
</fmt:message>
</div>
</c:if>
<c:if test="${fn:length(model.musicFolders) > 1}">
<div id="music-folders">
<select name="musicFolderId" onchange="location='left.view?musicFolderId=' + options[selectedIndex].value;" >
<option value="-1"><fmt:message key="left.allfolders"/></option>
<c:forEach items="${model.musicFolders}" var="musicFolder">
<option ${model.selectedMusicFolder.id == musicFolder.id ? "selected" : ""} value="${musicFolder.id}">${musicFolder.name}</option>
</c:forEach>
</select>
</div>
</c:if>
<c:if test="${not empty model.shortcuts}">
<h2><fmt:message key="left.shortcut"/></h2>
<c:forEach items="${model.shortcuts}" var="shortcut">
<p class="dense">
<sub:url value="main.view" var="mainUrl">
<sub:param name="path" value="${shortcut.path}"/>
</sub:url>
<a target="main" href="${mainUrl}">${shortcut.name}</a>
</p>
</c:forEach>
</c:if>
<c:if test="${not empty model.radios}">
<h2 class="bgcolor1"><fmt:message key="left.radio"/></h2>
<c:forEach items="${model.radios}" var="radio">
<p class="dense">
<a target="hidden" href="${radio.streamUrl}">
<img src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" title="<fmt:message key="common.play"/>"></a>
<c:choose>
<c:when test="${empty radio.homepageUrl}">
${radio.name}
</c:when>
<c:otherwise>
<a target="main" href="${radio.homepageUrl}">${radio.name}</a>
</c:otherwise>
</c:choose>
</p>
</c:forEach>
</c:if>
<c:forEach items="${model.indexedArtists}" var="entry">
<h2 class="alpha-sort accordion-toggle"><a name="${entry.key.index}"></a>${entry.key.index}</h2>
<div class="alpha-node accordion-content">
<c:forEach items="${entry.value}" var="artist">
<p class="dense">
<span title="${artist.name}">
<sub:url value="main.view" var="mainUrl">
<c:forEach items="${artist.musicFiles}" var="musicFile">
<sub:param name="path" value="${musicFile.path}"/>
</c:forEach>
</sub:url>
<a target="main" href="${mainUrl}"><str:truncateNicely upper="${model.captionCutoff}">${artist.name}</str:truncateNicely></a>
</span>
</p>
</c:forEach>
</div>
</c:forEach>
<p><a id="accordion-expand-all" href="#">Toggle all</a></p>
<c:forEach items="${model.singleSongs}" var="song">
<p class="dense">
<span title="${song.title}">
<c:import url="playAddDownload.jsp">
<c:param name="path" value="${song.path}"/>
<c:param name="playEnabled" value="${model.user.streamRole and not model.partyMode}"/>
<c:param name="addEnabled" value="${model.user.streamRole}"/>
<c:param name="downloadEnabled" value="${model.user.downloadRole and not model.partyMode}"/>
</c:import>
<str:truncateNicely upper="${model.captionCutoff}">${song.title}</str:truncateNicely>
</span>
</p>
</c:forEach>
<div class="alpha-jump">
<c:forEach items="${model.indexes}" var="index">
<a href="#${index.index}">${index.index}</a>
</c:forEach>
</div>
</body></html>
/var/subsonic/jetty/1806/webapp/style/default.css
- Code: Select all
/*
* CSS styleshet for default theme.
*
* Note that attributes that are typically changed by theme authors are
* placed at the top.
*
* Author: Sindre Mehus
*/
/* The primary background color (light blue). */
.bgcolor1 {
background-color: #EFEFEF;
}
/* The secondary background color (darker blue). */
.bgcolor2, .ruleTableHeader, .log {
background-color: #DEE3E7
}
/* Put stuff here if you need to customize any of the frames. */
.mainframe {
}
.topframe {
}
.leftframe {
}
.rightframe {
}
.playlistframe {
}
/* Background color for selected header. */
.headerSelected {
background-color: lightyellow;
}
/* Background color for form controls (use default). */
input, select {
}
/* Hover color for form controls (use default). */
input:hover, select:hover {
}
/* The primary foreground color (black). */
body {
color: black;
}
/* The secondary foreground color used for h1, details etc (gray). */
h1, .detail, .albumComment {
color: #696969;
}
/* Foreground color used for h2, bold and tr. */
h2, b, tr {
color: #333333;
}
/* Link color */
a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
color: #006699
}
/* Link hover color */
a:hover, a:hover * {
text-decoration: underline;
color: #DD6900
}
/* Color for warning messages. */
.warning {
color: red;
}
/* Simple dark border. */
.border1, .ruleTableHeader, .ruleTableCell, .headerSelected, .log {
border: 1px solid black;
}
/* Scrollbar colors (supported on IE and Opera) */
body {
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
/* Font 1 */
body, h2, form, label, table, a {
font-family: verdana, arial, sans-serif;
}
/* Font 2 */
h1, h1 a, .logo {
font-family: arial, sans-serif;
}
/***************************************************************************************
* The rest of the CSS is typically not changed in other themes (but not necessarily so).
***************************************************************************************/
body {
padding:0;
border:0;
margin:0.75em;
font-size: 9pt;
line-height: 1.5em;
}
p {
padding:0;
border:0;
margin:0 0 1em 0;
}
.alpha-sort {
border-bottom:1px solid #fff;
margin:0;
padding:0 5px;
}
.alpha-jump {
display:none;
}
.dense {
margin: 0;
}
h1 {
white-space: nowrap;
font-size: 140%;
padding: 0 0 0.2em 0;
border: 0;
margin: 0;
}
h2 {
white-space: nowrap;
font-size: 100%;
margin: 1em 0 0.2em 0;
}
form {
font-size: 100%;
line-height: 140%;
padding: 0;
border: 0;
margin: 0;
}
input, select, textarea {
font-size: 9pt;
}
label {
font-size: 100%;
line-height: 140%;
}
table {
font-size: 100%;
line-height: 140%;
padding: 0;
border: 0;
margin: 0 0 0.4em 0;
}
/* Table with some white space above it.*/
table.indent {
margin: 1em 0 0.4em 0;
}
a {
font-size: 100%;
text-decoration: none
}
img {
border-style: none;
border: 0;
margin: 0;
padding: 0;
vertical-align: middle;
}
.headerSelected {
padding: 0.25em;
}
.detail {
margin-bottom:1em;
white-space: nowrap;
font-size: 8pt;
line-height: 1.25em;
}
.warning {
white-space: nowrap;
}
.logo {
white-space: nowrap;
font-size: 16pt;
}
.back, .forward {
background-position:center left;
background-repeat:no-repeat;
padding-left: 16px;
line-height: 16px;
}
.back {
background-image:url("../icons/back.gif");
}
.forward {
background-image:url("../icons/forward.gif");
}
.albumComment {
width: 50em;
font-size: 8pt;
line-height: 1.4em;
padding-top: 0.25em;
}
.log {
white-space: nowrap;
font-size: 8pt;
line-height: 1em;
}
.checkbox {
}
/* Table with simple lines between the cells. */
.ruleTable {
border-collapse: collapse;
}
.ruleTableHeader, .ruleTableCell {
margin: 5px;
padding: 5px;
}
.ruleTableHeader {
font-weight: bold;
}
give it 2 hours, after you cleared caches and restarted things, before you start worrying.