chiark / gitweb /
Tinker with UI appearance a bit
authorRichard Kettlewell <rjk@greenend.org.uk>
Sun, 25 May 2008 21:08:37 +0000 (22:08 +0100)
committerRichard Kettlewell <rjk@greenend.org.uk>
Sun, 25 May 2008 21:08:37 +0000 (22:08 +0100)
images/Makefile.am
images/logosmall.png [new file with mode: 0644]
templates/about.tmpl
templates/disorder.css
templates/help.tmpl
templates/macros.tmpl

index 1feb7e4..7c77c85 100644 (file)
 #
 
 static_DATA=cross.png down.png downdown.png edit.png nocross.png       \
-nodown.png nodowndown.png noup.png noupup.png tick.png up.png upup.png  \
-notes.png play.png pause.png random.png randomcross.png notescross.png  \
-propagate.png speaker.png speakercross.png directory.png logo.png
+nodown.png nodowndown.png noup.png noupup.png tick.png up.png upup.png \
+notes.png play.png pause.png random.png randomcross.png notescross.png \
+propagate.png speaker.png speakercross.png directory.png logo.png      \
+logosmall.png
 
 staticdir=${pkgdatadir}/static
 
diff --git a/images/logosmall.png b/images/logosmall.png
new file mode 100644 (file)
index 0000000..d40f3a8
Binary files /dev/null and b/images/logosmall.png differ
index 0495966..3f065df 100644 (file)
@@ -25,40 +25,76 @@ USA
  <body>
 @stdmenu{about}
 
-  <p><a title="Visit DisOrder web site"
+  <p><a title="The DisOrder duck would like you to visit the DisOrder web site"
   href="http://www.greenend.org.uk/rjk/disorder/"> <img src="@image{logo}"
   alt="About DisOrder" style="border-style:none"></a></p>
 
-  <h2>Copyright</h2>
+  <h2 class=sectiontitle>About DisOrder</h2>
 
-  <p><a title="DisOrder web site"
-  href="http://www.greenend.org.uk/rjk/disorder/">DisOrder version @version</a>
-  - software Jukebox</p>
+  <div class=section>
 
-  <p>Copyright &copy; 2003-2008 <a
-  href="http://www.greenend.org.uk/rjk/">Richard Kettlewell</a><br> Portions
-  copyright &copy; 2007 <a
-  href="http://www.chiark.greenend.org.uk/~ryounger/">Ross Younger</a><br>
-  Portions copyright &copy; 2007, 2008 Mark Wooding</p>
+   <p>This is DisOrder, a multi-user software jukebox.  Please see the <a
+   href="@url?action=help">help page</a> for instructions on using this
+   interface.</p>
 
-  <p>Portions extracted from <a
-  href="http://mpg321.sourceforge.net/">MPG321</a>, Copyright &copy; 2001 Joe
-  Drew, Copyright &copy; 2000-2001 Robert Leslie</p>
+  </div>
+    
+  <h2 class=sectiontitle>Reporting Bugs</h2>
 
-  <p>This program is free software; you can redistribute it and/or modify it
-  under the terms of the <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GNU
-  General Public License</a> as published by the Free Software Foundation;
-  either version 2 of the License, or (at your option) any later version.</p>
+  <div class=section>
 
-  <p>This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-  General Public License for more details.</p>
+   <p>Please report bugs <a
+   href="http://code.google.com/p/disorder/issues/list">using Google
+   Code</a>.</p>
 
-  <p>You should have received a copy of the GNU General Public License along
-  with this program; if not, write to the Free Software Foundation, Inc., 59
-  Temple Place, Suite 330, Boston, MA 02111-1307 USA</p>
+  </div>
+    
+  <h2 class=sectiontitle>Source Code</h2>
 
+  <div class=section>
+
+   <p>DisOrder is free software.  You can <a
+   href="http://www.greenend.org.uk/rjk/disorder/">get the source code from
+   its website</a>.</p>
+
+  </div>
+    
+  <h2 class=sectiontitle>Copyright</h2>
+
+  <div class=section>
+
+   <p>Copyright &copy; 2003-2008 <a
+   href="http://www.greenend.org.uk/rjk/">Richard Kettlewell</a><br>
+
+   Portions copyright &copy; 2007 <a
+   href="http://www.chiark.greenend.org.uk/~ryounger/">Ross
+   Younger</a><br>
+
+   Portions copyright &copy; 2007, 2008 Mark Wooding<br>
+
+   Portions extracted from <a
+   href="http://mpg321.sourceforge.net/">MPG321</a>, Copyright &copy; 2001 Joe
+   Drew, Copyright &copy; 2000-2001 Robert Leslie<br>
+
+   Portions copyright &copy; 1997-2006 <a
+   href="http://www.fsf.org/">Free Software Foundation, Inc</a>.</p>
+
+   <p>This program is free software; you can redistribute it and/or modify it
+   under the terms of the <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GNU
+   General Public License</a> as published by the Free Software Foundation;
+   either version 2 of the License, or (at your option) any later version.</p>
+
+   <p>This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+   General Public License for more details.</p>
+
+   <p>You should have received a copy of the GNU General Public License along
+   with this program; if not, write to the Free Software Foundation, Inc., 59
+   Temple Place, Suite 330, Boston, MA 02111-1307 USA</p>
+
+  </div>
+    
 @credits
  </body>
 </html>
index 5782975..8bd81c6 100644 (file)
@@ -241,8 +241,21 @@ form.search {
 
 /* menu bar *******************************************************************/
 
+div.top {
+  background-color: #e0e0e0;
+  border: 1px solid black
+}
+
+div.logo {
+  float:right;
+  margin-top:4px;
+  margin-right:4px
+}
+
 /* p.menubar is the menu bar at the top */
 p.menubar {
+  float:left;
+  margin-left: 4px;
   word-spacing: 1em            /* Space out menu items */
 }
 
@@ -297,6 +310,20 @@ table.prefs input {
   font-family: monospace
 }
 
+/* text with sectiosn *******************************************************/
+
+/* h2.sectiontitle is used for subsection headings */
+h2.sectiontitle {
+  background-color: #e0ffe0;   /* Black on pastel green */
+  color: black;
+  padding: 0.2em
+}
+
+/* There is a div.section for each subsection */
+div.section {
+  margin-left: 1em
+}
+
 /* help **********************************************************************/
 
 /* table.helpbuttons is used for various tables of buttons */
@@ -309,18 +336,6 @@ table.helpbuttons {
   margin-right: 2em
 }
 
-/* h2.helptitle is used for help subsection headings */
-h2.helptitle {
-  background-color: #e0ffe0;   /* Black on pastel green */
-  color: black;
-  padding: 0.2em
-}
-
-/* There is a div.helpsection for each subsection */
-div.helpsection {
-  margin-left: 1em
-}
-
 /* span.configuration marks configuration directives */
 span.configuration {
   font-family: monospace
index 3c1536f..5e8169e 100644 (file)
@@ -26,9 +26,9 @@ USA
 @stdmenu{help}
    <h1>@label{help.title}</h1>
 
-   <h2 class=helptitle>Introduction</h2>
+   <h2 class=sectiontitle>Introduction</h2>
 
-   <div class=helpsection>
+   <div class=section>
 
      <p>All screens in the DisOrder web interface have a set of
      hyperlinks at the top.  You can use these to visit the various
@@ -38,9 +38,9 @@ USA
 
    </div>
   
-   <h2 class=helptitle><a name=playing>Playing</a></h2>
+   <h2 class=sectiontitle><a name=playing>Playing</a></h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p>This screen displays the currently playing track (if there is one) and
     lists all the tracks in the queue (the track that will be played soonest
@@ -63,9 +63,9 @@ USA
 
    </div>
 
-   <h2 class=helptitle><a name=manage>Manage</a></h2>
+   <h2 class=sectiontitle><a name=manage>Manage</a></h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p>This screen is almost identical to <a
     href="#playing">Playing</a> except that it includes extra
@@ -127,9 +127,9 @@ USA
 
    </div>
 
-   <h2 class=helptitle><a name=recent>Recent</a></h2>
+   <h2 class=sectiontitle><a name=recent>Recent</a></h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p>This screen displays recently played tracks, most recent first.
     The <img class=button src="@image{edit}"
@@ -145,9 +145,9 @@ USA
 
    </div>
 
-   <h2 class=helptitle><a name=new>New</a></h2>
+   <h2 class=sectiontitle><a name=new>New</a></h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p>This screen displays tracks recently added to the database,
     most recent first.  The <img class=button
@@ -164,9 +164,9 @@ USA
 
    </div>
 
-   <h2 class=helptitle><a name=choose>Choose</a></h2>
+   <h2 class=sectiontitle><a name=choose>Choose</a></h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p>This screen allows you to choose a track to be played, by navigating
      through the directory structure of the tracks filesystem.
@@ -235,9 +235,9 @@ USA
 
    </div>
 
-   <h2 class=helptitle><a name=prefs>Editing Preferences</a></h2>
+   <h2 class=sectiontitle><a name=prefs>Editing Preferences</a></h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p>This screen, reached from <a href="#choose">Choose</a> or <a
     href="#recent">Recent</a>, is used to edit a track's preferences.
@@ -263,9 +263,9 @@ USA
 
    </div>
 
-  <h2 class=helptitle><a name=Login>Login</a></h2>
+  <h2 class=sectiontitle><a name=Login>Login</a></h2>
 
-  <div class=helpsection>
+  <div class=section>
 
    <p>This screen has two different versions.</p>
 
@@ -285,9 +285,9 @@ USA
 
   </div>
 
-  <h2 class=helptitle>Troubleshooting</h2>
+  <h2 class=sectiontitle>Troubleshooting</h2>
 
-  <div class=helpsection>
+  <div class=section>
 
    <p>If you cannot play a track, or it does not appear in the
    database even after a rescan, check the following things:</p>
@@ -319,9 +319,9 @@ USA
 
   </div>
 
-   <h2 class=helptitle>Man Pages</h2>
+   <h2 class=sectiontitle>Man Pages</h2>
 
-   <div class=helpsection>
+   <div class=section>
 
     <p><a href="@url?action=disorder_config.5">disorder_config(5)</a> -
      configuration</p>
index 1bfd97f..1da66d4 100644 (file)
@@ -47,7 +47,8 @@ and then redefines macros as desired.
 @# Standard menu
 @#   @current is the name of the current page, e.g. choosealpha, login
 @define {stdmenu} {current}
-        {  <p class=menubar>
+        {  <div class=top>
+   <p class=menubar>
 @menuitem{@current}{playing}{true}
 @menuitem{@current}{recent}{true}
 @menuitem{@current}{choose}{@right{play}}
@@ -57,7 +58,16 @@ and then redefines macros as desired.
 @menuitem{@current}{help}{true}
 @menuitem{@current}{about}{true}
    </p>
-   <hr>
+   <div class=logo>
+    <a href="http://www.greenend.org.uk/rjk/disorder/">
+     <img src="@image{logosmall}"
+          style="border-style:none"
+          alt="DisOrder"
+          title="Quack quack!  Visit the DisOrder website">
+    </a>
+   </div>
+  <div style="clear:both"></div>
+  </div>
 }
 
 @# Menu entry
@@ -69,15 +79,15 @@ and then redefines macros as desired.
 @#  
 @define {menuitem} {current name available}  
         {@if{@available}
-            {   <a @if{@eq{@current}{@name}}
-                      {class=activemenu}
-                      {class=inactivemenu}
+            {    <a @if{@eq{@current}{@name}}
+                       {class=activemenu}
+                       {class=inactivemenu}
 @if{@eq{name}{playing}}
-   {      href="@url"}
-   {      href="@url?action=@name"}
-      title="@label{menu.@q{@name}verbose}">@label{menu.@name}</a>}
-            {   <span class=invalidmenu 
-         title="@label{menu.@q{@name}verbose}">@label{menu.@name}</span>}}
+   {       href="@url"}
+   {       href="@url?action=@name"}
+       title="@label{menu.@q{@name}verbose}">@label{menu.@name}</a>}
+            {    <span class=invalidmenu 
+          title="@label{menu.@q{@name}verbose}">@label{menu.@name}</span>}}
 
 
 @# Standard footer text