web intf: simple downloading UI, more fun.

Signed-off-by: Felix Paul Kühne <fkuehne@videolan.org>

Resources/web/style.css

@@ -190,11 +190,11 @@ div.main.drop {
   position: relative;
 }
 .uploads li:nth-child(2n),
-.downloads li:nth-child(2n) {
+.downloads li:nth-child(odd) {
   background-color: rgba(0,0,0,0.2);
 }
-.uploads .filename,
-.downloads li {
+
+.uploads .filename {
   font-size: 20px;
   line-height: 50px;
   text-align: left;
@@ -203,8 +203,30 @@ div.main.drop {
   position: relative;
   margin: 10px auto;
 }
+
+.downloads li {
+  font-size: 20px;
+  line-height: 50px;
+  text-align: left;
+  height: 100%;
+  width: 100%;
+  padding: 0 20px;
+  margin: 5px;
+}
+
+.downloads li:hover,
+.downloads lu:hover {
+  background-color: rgb(255, 132, 0);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 132, 0)), to(rgb(255, 100, 0)));
+  background-image: -webkit-linear-gradient(top, rgb(255, 132, 0), rgb(255, 100, 0));
+  background-image: -moz-linear-gradient(top, rgb(255, 132, 0), rgb(255, 100, 0));
+  background-image: -ms-linear-gradient(top, rgb(255, 132, 0), rgb(255, 100, 0));
+  background-image: -o-linear-gradient(top, rgb(255, 132, 0), rgb(255, 100, 0));
+  background-image: linear-gradient(top, rgb(255, 132, 0), rgb(255, 100, 0));
+}
+
 .downloads a {
-    line-height: 25px;
+    line-height: 50px;
     height: 18px;
     color: white;
 }
@@ -215,16 +237,27 @@ div.main.drop {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
-    vertical-align:middle;
+    vertical-align: middle;
 }
 
 .downloads lu {
   font-size: 16px;
   line-height: 50px;
   text-align: left;
-  height: 40px;
+  height: 50px;
   padding: 0 40px;
   position: relative;
+  width: 100%;
+  float: left;
+}
+
+#menu ul li ul {
+ display:none;
+}
+
+#menu ul li:hover ul {
+ display:block;
+ background-color: rgb(42,42,42);
 }
 
 .uploads .progress {

Sources/VLCHTTPConnection.m

@@ -173,22 +173,25 @@
 
         for (NSManagedObject *mo in allMedia) {
             if ([mo isKindOfClass:[MLFile class]])
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></li>", mo.objectID.URIRepresentation, [[(MLFile *)mo url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], [(MLFile *)mo title]]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - <a href=\"download/%@\" download>%@</a></li>", mo.objectID.URIRepresentation, [[(MLFile *)mo url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], [(MLFile *)mo title]]];
             else if ([mo isKindOfClass:[MLShow class]]) {
                 NSArray *episodes = [(MLShow *)mo sortedEpisodes];
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - %@</li>", mo.objectID.URIRepresentation, [(MLShow *)mo name]]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<div id=\"menu\"><ul><li><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - %@<ul>", mo.objectID.URIRepresentation, [(MLShow *)mo name]]];
                 for (MLShowEpisode *showEp in episodes)
-                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></lu><br />", showEp.objectID.URIRepresentation, [[(MLFile *)[[showEp files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], showEp.name]];
+                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - <a href=\"download/%@\" download>Season %@ Episode %@ - %@</a></lu><br />", showEp.objectID.URIRepresentation, [[(MLFile *)[[showEp files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], showEp.seasonNumber, showEp.episodeNumber, showEp.name]];
+                [mediaInHtml addObject:@"</ul></li></ul></div>"];
             } else if ([mo isKindOfClass:[MLLabel class]]) {
                 NSArray *folderItems = [(MLLabel *)mo sortedFolderItems];
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - %@</li>",  mo.objectID.URIRepresentation, [(MLLabel *)mo name]]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<div id=\"menu\"><ul><li><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - %@<ul>",  mo.objectID.URIRepresentation, [(MLLabel *)mo name]]];
                 for (MLFile *file in folderItems)
-                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></lu><br />", file.objectID.URIRepresentation, [[file url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], file.title]];
+                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - <a href=\"download/%@\" download>%@</a></lu><br />", file.objectID.URIRepresentation, [[file url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], file.title]];
+                [mediaInHtml addObject:@"</ul></li></ul></div>"];
             } else if ([mo isKindOfClass:[MLAlbum class]]) {
                 NSArray *albumTracks = [(MLAlbum *)mo sortedTracks];
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - %@</li>", mo.objectID.URIRepresentation, [(MLAlbum *)mo name]]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<div id=\"menu\"><ul><li><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - %@<ul>", mo.objectID.URIRepresentation, [(MLAlbum *)mo name]]];
                 for (MLAlbumTrack *track in albumTracks)
-                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></lu><br />", track.objectID.URIRepresentation, [[(MLFile *)[[track files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], track.title]];
+                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt=\"No Image\" /> - <a href=\"download/%@\" download>%@</a></lu><br />", track.objectID.URIRepresentation, [[(MLFile *)[[track files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], track.title]];
+                [mediaInHtml addObject:@"</ul></li></ul></div>"];
             }
         }