Woot\! The interface is largely in place now. It should have a left-h…

…and column for library and playlists, a column browser for genre, arist, and album, and finally a reduced playlist that is filtered
nko · Aug 29, 2010 · 1348bac · 1348bac
1 parent 1a1b376
commit 1348bac
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 9 deletions.
diff --git a/public/css/ntunes.less b/public/css/ntunes.less
@@ -42,6 +42,7 @@ body {
   border-top: 1px solid #e2e2e2;
   border-bottom: 1px solid #515151; 
   background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgb(208,208,208)), color-stop(1, rgb(167,167,167))); 
+  background: -moz-linear-gradient(center top, rgb(208,208,208) 0%, rgb(166,166,166) 100%);
 
   h1 {
     padding:4px 0 0; 
@@ -113,24 +114,87 @@ body {
     right: 0px; 
     top: 0; 
     height: 100%;
-    border-left: 1px solid #a5a5a5;
-    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(227,227,227)));
-    background: -moz-linear-gradient(left center, rgb(250,250,250) 0%, rgb(227,227,227) 100%);
+
+
   }  
 
 }
 
+/*
+ * Browser
+ * 
+ * This is the 3-column browser, containing Genre, Artists, and Albums
+ */
+#browser {
+  background: #f4f7fb;
+  margin-bottom: 0;
+  float: left;
+  height: 200px;
+  overflow: hidden;
+
+  div {
+    width: 33%;
+    float: left;
+  }
+  #artists {
+    width: 34%;
+  }
+
+  h2 {
+    font-weight: bold;
+    text-align: center;
+    text-shadow:#FFF 1px 1px 1px;
+    border-top: 1px solid #cecece;
+    border-bottom: 1px solid #cecece;
+    border-right: 1px solid #cecece;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(245,245,245)), color-stop(0.3, rgb(254,254,254)), color-stop(1, rgb(237,237,237)));
+    background: -moz-linear-gradient(center top, rgb(245,245,245) 0%, rgb(254,254,254) 30%, rgb(237,237,237) 100%);
+  }
+
+  ul {
+    overflow-y: scroll;
+    padding: 2px 0;
+    line-height: 18px;
+
+    li {
+      padding: 0 5px;
+    }
+    li:hover {
+      background:rgba(0,0,0,.05);
+      cursor: pointer;
+    }
+  }
+
+  .clear {
+    clear: both;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  .ui-resizable-s {
+    width: 100%;
+    cursor: row-resize;
+    height: 8px;
+    bottom: 0;
+    border-bottom: 1px solid #a5a5a5;
+    border-top: 1px solid #a5a5a5;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(227,227,227)));
+    background: -moz-linear-gradient(left center, rgb(250,250,250) 0%, rgb(227,227,227) 100%);
+  }
+}
+
+
 /*
  * Song Canvas
  * 
  * Where library and playlist browsing happens
  */
 #songCanvas {
-  height:100%; 
   overflow-y:scroll; 
   background: url('http://nodeknockout.com/images/nodeko.png') no-repeat center center; 
   -webkit-border-radius:0 0 5px 0;
   border: 0;
+  float: left;
 
   ul {
     padding:8px 0 0 0; 

diff --git a/public/js/ntunes.js b/public/js/ntunes.js
@@ -4,7 +4,9 @@ $(document).ready(function(){
   setupWindowResizing();
   setupLibraryCollapse();
 
-  $( "#library" ).resizable({ handles: 'e' });
+
+
+
 
 });
 

diff --git a/views/index.ejs b/views/index.ejs
@@ -5,13 +5,16 @@
     <a href="#">Stop</a>
   </div>
 </div>
+<audio>
+
+</audio>
 <div id="wrap">
   <div id="library">
     <h2>Library</h2>
     <ul>
       <li>Music</li>
     </ul>
-    <h2>Playlist</h2>
+    <h2>Playlists</h2>
     <ul>
       <li>Test Playlist Name</li>
       <li>Test Playlist Name</li>
@@ -28,7 +31,51 @@
       <li>Test Playlist Name</li>
     </ul>
   </div>
-  <div id="songCanvas">
+
+  <div id="browser">
+    <div id="genres">
+      <h2>Genres</h2>
+      <ul>
+        <li>All (6)</li>
+        <li>Pop</li>
+        <li>Punk</li>
+        <li>Rocking</li>
+        <li>This</li>
+        <li>Pop</li>
+      </ul>      
+    </div> <!-- /genres -->
+    <div id="artists">
+      <h2>Artists</h2>
+      <ul>
+        <li>All (14)</li>
+        <li>NIN</li>
+        <li>Rage Against the Machine</li>
+        <li>Smashing Pumpkins</li>
+        <li>Semi-sonic</li>
+        <li>Aqua</li>
+        <li>Spice Girls</li>
+        <li>Blind Melon</li>
+        <li>Randy Newman</li>
+        <li>Tower of Power</li>
+        <li>Bob Marley</li>
+        <li>Ziggy Marley</li>
+        <li>Ted Nugent</li>
+        <li>ZZ Top</li>
+        <li>Berlin</li>  
+      </ul>            
+    </div> <!-- /artists -->
+    <div id="albums">        
+      <h2>Albums</h2>
+      <ul>
+        <li>All (2)</li>
+        <li>Ghost</li>
+        <li>And all that could have been</li>  
+      </ul>
+    </div> <!-- /albums -->
+    <div class="clear">&nbsp;</div>             
+  </div> <!-- /browser -->
+
+  <div id="songCanvas">    
     <ul>
       <% for(var i = 0; i < songs.length; i++) { %>
       <li><%= songs[i].title %></li>

diff --git a/views/layout.ejs b/views/layout.ejs
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>nTunes!!!</title>
   <link rel="stylesheet" href="/css/Aristo/jquery-ui-1.8rc3.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet/less" href="/css/ntunes.less" type="text/css" />
@@ -10,11 +11,47 @@
   <script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="/js/modernizr-1.5.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/less-1.0.35.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/ntunes.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/js/less-1.0.35.js" type="text/javascript" charset="utf-8"></script>  
   <script type="text/javascript" charset="utf-8">
     less.env = "development";
     less.watch();
+    
+    $("#library").resizable({ 
+      handles: 'e',
+      resize: function(event, ui) {
+        var w = $(window).width() - $('#library').outerWidth();
+        $('#browser').width(w);
+        $('#songCanvas').width(w);
+      }
+    });
+    
+    $('#browser')
+      .width($(window).width() - $('#library').outerWidth())
+      .resizable({ handles: 's', resize: function(e, ui) {
+        $('#songCanvas')
+          .height($(window).height() - $('#header').outerHeight() - $('#browser').outerHeight());
+        $('#browser ul')
+          .height($('#browser').height() - $('browser h2').outerHeight());
+      }});
+    
+    $('#songCanvas')
+      .width($(window).width() - $('#library').outerWidth())
+      .height($(window).height() - $('#header').outerHeight() - $('#browser').outerHeight());
+      
+    $('#browser ul')
+      .height($('#browser').height() - $('browser h2').outerHeight());
+      
+    $(window).bind('resize', function() {
+      $('#browser')
+        .width($(window).width() - $('#library').outerWidth());
+      $('#songCanvas')
+        .width($(window).width() - $('#library').outerWidth())
+        .height($(window).height() - $('#header').outerHeight() - $('#browser').outerHeight());
+      
+    });
+      
   </script>
+
+  <script src="/js/ntunes.js" type="text/javascript" charset="utf-8"></script>
 </body>
 </html>