enlarge desk, update button classes, fix get json status

diff --git a/telecaster/htdocs/css/telecaster.css b/telecaster/htdocs/css/telecaster.css
index 9ec60389e1165700e8879fe5d1a4a978c5904cf7..510f00909c33cd1d77f47122f7af3d3a69814609 100644 (file)
--- a/telecaster/htdocs/css/telecaster.css
+++ b/telecaster/htdocs/css/telecaster.css
@@ -1,3 +1,6 @@
+body {
+    margin: 0em;
+}
 
 div.header {
          background-color: #030250;
@@ -5,9 +8,6 @@ div.header {
             padding: 0.5em;
             height: 42px;
          font: 0.8125em/1em Verdana, sans-serif;
-         -moz-border-radius: 25px 25px 0 0;
-         -webkit-border-radius: 25px 25px 0 0;
-         border-radius: 25px 25px 0 0;
 }
 
 div.title_main {
@@ -20,6 +20,7 @@ div.title_main {
 
 div.bg { background-color: #FFFFFF;
          color: #FFFFFF;
+        margin: 0em;
 }
 
 div.main {
@@ -37,13 +38,9 @@ div.main {
 div.tools { background-color: #030250;
         color: #FFFFFF;
         font-size: 1em;
-           border: 1px solid #FFFFFF;
            padding:0.5em;
-           margin: 1.5em 0em 0em 0em;
         height: 32px;
-        -moz-border-radius: 0 0 25px 0;
-        -webkit-border-radius: 0 0 25px 0;
-        border-radius: 0 0 25px 0;
+
 }
 
 div.colophon { background-color: transparent;
@@ -84,7 +81,6 @@ div.form { background-color: #FFFFFF;
        color: #000033;
        padding:1em;
        margin: 1em;
-       font: 0.8125em/1em Verdana, sans-serif;
 }
 
 /* TABLE */
@@ -92,7 +88,7 @@ div.form { background-color: #FFFFFF;
 table.form {
     border: 0px;
     border-collapse: separate;
-    border-spacing: 8px
+    border-spacing: 8px;
 }
 
 table.hardware {
@@ -110,90 +106,127 @@ table.hardware {
     }
     
 
-/* BUTTONS */
 
-.buttons a, .buttons button{
-    display:inline-block;
-    height: 33px;
-    float:left;
-    margin:0 7px 0 0;
-    background-color:#f5f5f5;
-    border:1px solid #dedede;
-    border-top:1px solid #eee;
-    border-left:1px solid #eee;
+/*--------BUTTONS---------------*/
 
-    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
-    font-size:100%;
-    line-height:130%;
-    text-decoration:none;
-    font-weight:bold;
-    color:#565656;
-    cursor:pointer;
-    padding:5px 10px 6px 7px; /* Links */
+.component, .component_icon, .component:hover, .component_icon:hover, .component:visited, .component_icon:visited{
+    background-position: 1ex .5ex;
+    -moz-border-radius: 1ex 1ex 1ex 1ex;
+    -webkit-border-radius: 1ex 1ex 1ex 1ex;
+    border-radius: 1ex 1ex 1ex 1ex;
+    padding:.7ex .7ex .7ex .7ex;
+    background-color:  #f9f9f9; /*#626262;*/
+    color:#444;
+    text-decoration: none;
+    margin:0;
 }
-.buttons button{
-    width:auto;
-    height: 33px;
-    overflow:visible;
-    padding:4px 10px 3px 7px; /* IE6 */
+.component + .component, .component + .component_icon, .component_icon + .component ,
+.component_icon + .component_icon{
+    margin-left: .1ex;
 }
-.buttons button[type]{
-    padding:5px 10px 5px 7px; /* Firefox */
-    line-height:17px; /* Safari */
-}
-*:first-child+html button[type]{
-    padding:4px 10px 3px 7px; /* IE7 */
+
+.component_icon, .component_icon:hover, .component_icon:visited{
+    background-repeat: no-repeat;
+    background-position: 1ex .5ex;
+    padding:4px 8px 4px 26px; /*top right bottom left - last value depends on the icon size (default=16)*/
 }
-.buttons button img, .buttons a img{
-    margin:0 3px -3px 0 !important;
-    padding:0;
-    border:none;
-    width:16px;
-    height:16px;
+
+.button,  .button:visited, .button:hover{
+    font-weight: bold;
+    border:  1px solid #e1e1e1;
+    white-space:nowrap;
+    /*    border-top:  1px solid #e1e1e1 !important;
+        border-left:  1px solid #e1e1e1 !important;
+        border-right:  1px solid #e1e1e1 !important;
+        border-bottom:  1px solid #e1e1e1 !important;*/
 }
 
+.button:hover{
+    border-top:  1px solid #f9f9f9 !important;
+    border-left:  1px solid #f9f9f9 !important;
+    border-bottom:  1px solid #999 !important;
+    border-right:  1px solid #999 !important;
+    background-color:  #f4f4f4; /*#e9e9d9;*/
+    color: #000; /*#6A0307;*/
+}
 
-/* STANDARD */
 
-button:hover, .buttons a:hover{
-    background-color:#dff4ff;
-    border:1px solid #c2e1ef;
-    color:#336699;
-}
-.buttons a:active{
-    background-color:#6299c5;
-    border:1px solid #6299c5;
-    color:#fff;
+.list_item, .list_item:visited, .list_item:hover{
+    display:block;
+    color:#6A0307;
 }
 
-/* POSITIVE */
+.list_item:hover{
+    font-weight: bold;
+}
 
-button.positive, .buttons a.positive{
-    color:#529214;
+.icon_edit{
+    background-image: url('../images/edit_page.png');
 }
-.buttons a.positive:hover, button.positive:hover{
-    background-color:#E6EFC2;
-    border:1px solid #C6D880;
-    color:#529214;
+.icon_copy{
+    background-image: url('../images/copy_page.png');
 }
-.buttons a.positive:active{
-    background-color:#529214;
-    border:1px solid #529214;
-    color:#fff;
+.icon_previous{
+    background-image: url('../images/previous.png');
+}
+.icon_next{
+    background-image: url('../images/next.png');
+}
+.icon_dublin_core{
+    background-image: url('../images/dublin_core.png');
+}
+.icon_cancel{
+    background-image: url('../images/cancel.png');
+}
+.icon_save{
+    background-image: url('../images/save.png');
+}
+.icon_add{
+    background-image: url('../images/add.png');
+}
+.icon_add_to_playlist{
+    background-image: url('../images/add_to_playlist.png');
+}
+.icon_login{
+    background-image: url('../images/password.png');
+}
+.icon_search{
+    background-image: url('../images/find.png');
+}
+.icon_ok{
+    background-image: url('../images/ok.png');
+}
+.icon_csv{
+    background-image: url('../images/csv.png');
+}
+.icon_playlist{
+    background-image: url('../images/playlist.png');
+}
+.icon_filter{
+    background-image: url('../images/filter.png');
+}
+.icon_delete{
+    background-image: url('../images/delete.png');
+}
+.icon_rss,.icon_rss:hover{
+    background: url('../images/feed-icon-14x14.png') no-repeat;
+    background-position: 0ex .8ex;
+    padding:.0ex 0ex .8ex .7ex;
+    text-decoration: none;
 }
 
-/* NEGATIVE */
-
-.buttons a.negative, button.negative{
-    color:#d12f19;
+.icon_record{
+    background-image: url('../images/stop.png');
+}
+.icon_refresh{
+    background-image: url('../images/arrow_refresh.png');
+}
+.icon_play{
+    background-image: url('../images/control_play_blue.png');
 }
-.buttons a.negative:hover, button.negative:hover{
-    background:#fbe3e4;
-    border:1px solid #fbc2c4;
-    color:#d12f19;
+.icon_archives{
+    background-image: url('../images/folder_go.png');
 }
-.buttons a.negative:active{
-    background-color:#d12f19;
-    border:1px solid #d12f19;
-    color:#fff;
+.icon_trash{
+    background-image: url('../images/bin.png');
 }

diff --git a/telecaster/htdocs/js/application.js b/telecaster/htdocs/js/application.js
index cc97e89aabaa11f2dae460bc3819dbfff6ae68a0..16f4e1c759c33670dd1629df800091e211dcb807 100644 (file)
--- a/telecaster/htdocs/js/application.js
+++ b/telecaster/htdocs/js/application.js
@@ -141,3 +141,26 @@ function consolelog(text){
         }
     }
 }
+
+
+function server_status_callback(){
+    var j = json; //global variable
+    var d = _REFRESH_TIME_INTERVAL; //global variable
+    var refresh = function(){
+        var data = j({},"telecaster.get_server_status",
+                     function(data){
+                         var res = data.result;
+                         var doc = document;
+                         for(var i=0; i <res.length; i++){
+                             var line = res[i];
+                             var wrapper = doc.getElementById('status_'+line.id);
+                             s = '<td><span class="'+line.class+'">'+line.value+'</span></td>';
+                             wrapper.innerHTML = s
+                         }
+                     },
+                     function(){return false;}
+                     );
+    };
+    refresh();
+    setInterval(refresh,d);
+};

diff --git a/telecaster/templates/telecaster/base.html b/telecaster/templates/telecaster/base.html
index 371aa9b827681a69c4d9093d48e3f25699a326a8..cc73ad9a206791ca031c6766ef8a4606d7f4e195 100644 (file)
--- a/telecaster/templates/telecaster/base.html
+++ b/telecaster/templates/telecaster/base.html
@@ -2,8 +2,8 @@
 {% load telecaster_utils %}
 {% load i18n %}
 
-<HTML>
-<HEAD>
+<html>
+<head>
 <TITLE>TeleCaster - {{ self.title }}</TITLE>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <link href="{% url telecaster-css "telecaster.css" %}" rel="stylesheet" type="text/css">
@@ -12,38 +12,16 @@
 <script src="{% url telecaster-js "jquery-1.6.min.js" %}" type="text/javascript"></script>
 <script src="{% url telecaster-js "application.js" %}" type="text/javascript"></script>
 <script type="text/javascript">
-function server_status_callback(){
-    var j = json; //global variable
-    var d = _REFRESH_TIME_INTERVAL; //global variable
-    var refresh = function(){
-        var data = j({},"telecaster.get_server_status",
-            function(data){
-                var res = data.result;
-                var doc = document;
-                for(var i=0; i <res.length; i++){
-                    var line = res[i];
-                    var wrapper = doc.getElementById('status_'+line.id);
-                    s = '<td><span class="'+line.class+'">'+line.value+'</span></td>';
-                    wrapper.innerHTML = s
-                }
-            },
-            function(){return false;}
-            );
-    };
-       refresh();
-       setInterval(refresh,d);
-};
-
 server_status_callback();
 </script>
 {% endblock javascript %}
 
-</HEAD>
-<BODY>
+</head>
+<body>
 <div class="bg">
 <div class="header">
 <img src="{% url telecaster-images "logo_telecaster_wh.png"%}" alt="logo_telecaster">
-<div class="title_main">&nbsp;TeleCaster - Audio Web Live Recording</div>
+<div class="title_main">&nbsp;TeleCaster</div>
 </div>
 
 {% block hardware %}
@@ -70,21 +48,13 @@ server_status_callback();
 {% block content %}
 {% endblock content %}
 
-{% block footer %}
-<div class="tools">
-    <div class="buttons">
-    <button type="submit" class="button"><img src="{% url telecaster-images "arrow_refresh.png" %}" alt="">Refresh</button>
-    <button type="submit" name="action" value="start" class="button"><img src="{% url telecaster-images "stop.png" %}" alt="">Record</button>
-    <a class="button" href="http://{{ status.ip }}:{{ station.port }}/{{ station.mount_point }}"><img src="{% url telecaster-images "control_play_blue.png" %}" alt="">Play Live</a>
-    <a class="button" href="/archives/"><img src="{% url telecaster-images "folder_go.png" %}" alt="">Archives</a>
-    <a class="button" href="/trash/"><img src="{% url telecaster-images "bin.png" %}" alt="">Trash</a>
-    </div>
-</div>
+{% block buttons %}
+
+{% endblock buttons %}
 
 <div class="colophon">TeleCaster 0.6 &copy; <span>2011</span>&nbsp;<a href="http://parisson.com">Parisson SARL</a>. {% trans "All rights reserved" %}</div>
-{% endblock footer %}
 
 </div>
-</BODY>
-</HTML>
+</body>
+</html>
 

diff --git a/telecaster/templates/telecaster/start.html b/telecaster/templates/telecaster/start.html
index befd942b7bf9246408a5485ed3c9be5a0ddc0108..16fbdd8d1fb22a8a21e11333f67b2262c9e0de15 100644 (file)
--- a/telecaster/templates/telecaster/start.html
+++ b/telecaster/templates/telecaster/start.html
@@ -25,3 +25,14 @@
 </form>
 
 {% endblock content %}
+
+{% block buttons %}
+<div class="tools">
+<a class="component_icon button icon_refresh" href="#" >Refresh</a>
+<a class="component_icon button icon_record" href="#">Record</a>
+<a class="component_icon button icon_play" href="http://{{ status.ip }}:{{ station.port }}/{{ station.mount_point }}">Play Live</a>
+<a class="component_icon button icon_archives" href="/archives/">Archives</a>
+<a class="component_icon button icon_trash" href="/trash/">Trash</a>
+
+</div>
+{% endblock buttons %}