Merge pull request #862 from AF-1/public/8.4

make lyrics on Default skin songinfo page collapsible

Changelog8.html

@@ -16,6 +16,7 @@ <h2><a name="v8.4.0" id="v8.4.0"></a>Version 8.4.0</h2>
 		<li><a href="https://github.com/Logitech/slimserver/pull/846">#846</a> - Improve display of multiline lyrics and comments in the web UI (thanks mw9!)</li>
 		<li>Move persist.db out of the cache folder - it's music data which can't be restored from the music files.</li>
 		<li>Log warning if the server's time seems to be off (only if MySqueezebox integration is enabled).</li>
+		<li><a href="https://github.com/Logitech/slimserver/pull/846">#862</a> - Make lyrics on Default skin songinfo page collapsible</li>
 	</ul>
 	<br />
 

HTML/Default/slimserver.css

@@ -1616,3 +1616,25 @@ td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 .x-grid3-cell-inner  {
 	white-space:normal!important;
 }
+
+/* song info lyrics */
+#songinfo_lyrics details > summary {
+	list-style: none;
+	cursor: pointer;
+	outline: none;
+}
+#songinfo_lyrics summary::-webkit-details-marker {
+	display: none;
+}
+
+#songinfo_lyrics summary::after {
+	content: ' ▸';
+}
+
+#songinfo_lyrics details[open] summary:after {
+	content: " ▾";
+}
+
+#songinfo_lyrics p {
+	padding: 8px 0px 8px 10px;
+}

HTML/Default/xmlbrowser.html

@@ -368,8 +368,10 @@
 						[% PROCESS $item.web.value %]
 					[% ELSE %]
 						[% IF item.label %]
+							[% IF item.label == "LYRICS" %]<span id="songinfo_lyrics"><details><summary>[% END %]
 							[% item.label | string %]
 							[%- stringCOLON %]
+							[% IF item.label == "LYRICS" %]</summary>[% END %]
 						[% END %]
 						[% WRAPPER weblink %]
 							[% title = item.web.value;
@@ -466,7 +468,9 @@
 		<a href="[% UNLESS item.image.match("^(\/|http)") %][% webroot %][% END %][% item.image %]" target="_blank" [% slideshowHelpers %]>
 	[% END %]
 
+	[% IF item.label == "LYRICS" %]<p>[% END %]
 	[% content %]
+	[% IF item.label == "LYRICS" %]</p></details></span>[% END %]
 
 	[% IF item.type == 'playlist' || item.weblink || item.link || !item.type.match('^text') %]
 		</a>