chiark / gitweb /
Various visual improvements to web interface
authorrjk@greenend.org.uk <>
Tue, 1 Jan 2008 18:55:51 +0000 (18:55 +0000)
committerrjk@greenend.org.uk <>
Tue, 1 Jan 2008 18:55:51 +0000 (18:55 +0000)
templates/about.html
templates/choose.html
templates/disorder.css
templates/error.html
templates/login.html
templates/options.labels
templates/playing.html
templates/search.html
templates/topbar.html

index 5022e352e6fe51a89ddeaee415406814aba67422..8d0db92e177efe6ba57776b3e2d81ac7f968e416 100644 (file)
@@ -30,6 +30,7 @@ USA
    <h2>Copyright</h2>
 
    <p><a
+    title="DisOrder web site"
    href="http://www.greenend.org.uk/rjk/disorder/">DisOrder
    version @version@</a> - select and play digital
    audio files</p>
index 394397e6a7d3b2f5a99163642a03541ed0741e97..7b8e7863b5ecbd179ec8a5773b161beffd95a3ee 100644 (file)
@@ -26,6 +26,40 @@ USA
  <body>
 @include{topbar}@
    <h1 class=title>@label:choose.title@</h1>
+  
+  @#{always have the first-letter bar, if choosealpha enabled}@
+  @if{@eq{@label:sidebar.choosewhich@}{choosealpha}@}{
+
+   <p class=choosealpha>
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?a">A</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?b">B</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?c">C</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?d">D</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?e">E</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?f">F</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?g">G</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?h">H</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?i">I</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?j">J</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?k">K</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?l">L</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?m">M</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?n">N</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?o">O</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?p">P</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?q">Q</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?r">R</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?s">S</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(?!the [^t])t">T</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?u">U</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?v">V</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?w">W</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?x">X</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?y">Y</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^(the )?z">Z</a> |
+    <a class=choosealpha href="@url@?action=choose&#38;regexp=^[^a-z]">*</a>
+   </p>
+  }@
 
    @if{@ne{@arg:directory@}{}@}{
    <p class=directoryname>@navigate{@arg:directory@}{/<a
index 92c17688f1642898a33f9393496ce3d661791a1e..b62819b6527910d9d74e65593988cdeebf48e463 100644 (file)
@@ -1,7 +1,11 @@
-/* default colors */
+/* default font and colors */
 body {
   color: black;
   background-color: white
+  font-family: serif;
+  font-weight: normal;
+  font-size: 12pt;
+  font-variant: normal
 }
 
 /* general link colors */
@@ -17,11 +21,24 @@ a:active {
   color: red
 }
 
+/* title bars */
 h1.title {
   font-family: sans-serif;
   font-weight: bold;
+  font-size: 18pt;
+  font-variant: normal;
   text-align: center;
-  font-size: 18pt
+  border: 1px solid black;
+  padding: 0.2em;
+  background-color: #e0e0e0
+}
+
+/* secondary titles */
+h2 {
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 16pt;
+  font-variant: normal;
 }
 
 /* playing, recent and new ***************************************************/
@@ -143,9 +160,7 @@ td.length {
 td.button {
   text-align: center;
   padding: 1px;
-  border-color: black;
-  border-width: 1px;
-  border-style: solid;
+  border: 1px solid black;
   background-color: #c0c0c0;
   color: #000000
 }
@@ -158,7 +173,11 @@ p.mgmt,form.volume {
 
 /* first letter choice */
 p.choosealpha {
-  text-align: center
+  text-align: center;
+  font-size: 140%;
+  font-weight: bold;
+  border: 1px solid black;
+  padding: 1em
 }
 
 /* containing directory */
@@ -309,6 +328,11 @@ a.search_title:active {
   color: red
 }
 
+form.search {
+  border: 1px solid black;
+  padding: 1em
+}
+
 /* sidebar *******************************************************************/
 
 div#sidebar {
@@ -460,25 +484,47 @@ p.volume {
 
 /* login page ****************************************************************/
 
-form.login,form.register,form.edituser {
-  border-style: solid;
-  border-width: 1px;
-  border-color: black
+form.login {
+  border: 1px solid black;
+  background-color: #e0ffe0    /* pastel green */
+}
+
+form.register {
+  border: 1px solid black;
+  background-color: #e0e0ff    /* pastel blue */
+}
+
+form.edituser {
+  border: 1px solid black;
+  background-color: #ffffe0    /* pastel yellow */
 }
 
 form.logout {
   border-style: none;
 }
 
+div.loginstatus {
+  border: 1px solid black;
+  background-color: #ffff00    /* solid yellow */
+}
+
 p.loginstatus {
-  color: green;
-  font-size: 150%
+  color: #0000ff;              /* solid blue */
+  font-size: 150%;
+  font-weight: bold
 }
 
 /* errors ********************************************************************/
 
+div.error {
+  border: 1px solid black;
+  background-color: #ff0000;   /* solid red */
+  color: white;
+  font-size: 150%;
+  font-weight: bold
+}
+
 p.error {
-  color: red
 }
 
 /* miscelleanous *************************************************************/
index 13a803e8c7050a7fa3649f8eeb5760d07643f819..79b1e9d7ac79a6c3a46b6fadc228d6e06ac8eb85 100644 (file)
@@ -27,9 +27,11 @@ USA
 @include{topbar}@
    <h1 class=title>@label:error.title@</h1>
     
+  <div class=error>
     <p class=error>@label{error.@label:error@}@</p>
 
     <p class=error>@label:error.generic@</p>
+  </div>
 
 @include{topbarend}@
  </body>
index ab943f9888d607462ae3b9e03b61098575bdee6e..8516de209b69e51117aedf84269a1efe0fb5a4b1 100644 (file)
@@ -29,12 +29,16 @@ USA
 
    @if{@ne{@label:error@}{error}@}{
    @#{error reporting from some earlier operation}@
-   <p class=error>@label{error.@label:error@}@</p>
+   <div class=error>
+     <p class=error>@label{error.@label:error@}@</p>
+   </div>
    }@
 
    @if{@ne{@label:status@}{status}@}{
    @#{some action succeeded}@
-   <p class=loginstatus>@label{login.@label:status@}@</p>
+   <div class=loginstatus>
+     <p class=loginstatus>@label{login.@label:status@}@</p>
+   </div>
    }@
 
    @if{@eq{@user@}{guest}@}{
index cb41b62ea9b7228f5227324fad0b6d65721e4f01..d81f7be6a2144f7dd0445eb0fdbb47bb766b786e 100644 (file)
@@ -79,10 +79,10 @@ label       playing.albumverbose    "more tracks from this album"
 label  recent.title            "Recently Played"
 
 # <TITLE> for new tracks page
-label  new.title               "New tracks"
+label  new.title               "New Tracks"
 
 # <TITLE> for choose track page
-label  choose.title            "Pick track"
+label  choose.title            "Pick Track"
 
 # Text for play all button
 label  choose.playall          "Play all"
@@ -130,7 +130,7 @@ label       prefs.random            "Random play"
 label  prefs.tags              "Tags"
 
 # <TITLE> for help page
-label  help.title              "DisOrder help"
+label  help.title              "DisOrder Help"
 
 # <TITLE> for login page
 label  login.title             "DisOrder Login"
index 19e0861b3d0c237783c82a52bb5e4dd87e6d0d0b..b0b186fd82dac1fd35b015d7a327fde9c9922f6c 100644 (file)
@@ -29,6 +29,7 @@ USA
 
    @#{extra control buttons for the management page}@
    @if{@arg:mgmt@}{
+   <div class=mgmt>
    <p class=mgmt>
     @if{@paused@}{
     <!-- paused -->
@@ -110,6 +111,8 @@ USA
      </a>}{<img class=button src="@image:noup@">}@
     </form>
     </span>
+    </p>
+    </div>
    }@
 
 @#{only display the table if there is something to put in it}@
index f1f7d5eaa6ec8103c41a0d4fcd0d0370fa04e6e8..457186d4c1638acd1aee704963840c782d51f66c 100644 (file)
@@ -29,14 +29,14 @@ USA
 
    <form class=search action="@url@" method=POST
          enctype="multipart/form-data" accept-charset=utf-8>
-    <div class=search>
+     <p class=search>Enter search terms:
      <input class=query name=query type=text value="@arg:query@"
-      size=32>
+      size=50>
      <button class=search name=action type=submit value=search>
       @label:search.search@
      </button>
      <input name=nonce type=hidden value="@nonce@">
-    </div>
+     </p>
    </form>
 
    <div class=searchresults>
index 4935829377b4d0b0351e9284806fb015dfbd605f..a1e89eeef76bfe5176dfe1a322ddecae06856a86 100644 (file)
   <a class=@if{@eq{@action@}{manage}@}{activemenu}{inactivemenu}@
  href="@url@?mgmt=true"
  title="@label:sidebar.manageverbose@">@label:sidebar.manage@</a>
-  <a class=@if{@eq{@action@}{login}@}{activemenu}{inactivemenu}@
+  <a class=@if{@or{@eq{@action@}{login}@}
+                  {@eq{@action@}{logout}@}
+                  {@eq{@action@}{register}@}
+                  {@eq{@action@}{edituser}@}@}{activemenu}{inactivemenu}@
  href="@url@?action=login&amp;nonce=@nonce@"
  title="@label:sidebar.loginverbose@">@label:sidebar.login@</a>
   <a class=@if{@eq{@action@}{help}@}{activemenu}{inactivemenu}@