UI : Add and share features.

No backend yet, except for share (but it's missing a little variable)

public/js/custom.js

@@ -10,12 +10,13 @@ $(document).ready(function() {
   $("a[data-torrent-id]").click(function() {
       var hash = $(this).attr("data-torrent-id");
       $.ajax({
-          type: "POST",
-          url: "share",
-          data: { hash: hash }
-          })
-          .done(function( msg ) {
-          $.notify( "URL : " + msg);
+        type: "POST",
+        url: "share",
+        data: { hash: hash }
+      })
+      .done(function( msg ) {
+        $(".share-torrent-link").val(msg); 
+        $('#shareModal').foundation('reveal', 'open');
       });
   });
   
@@ -73,7 +74,7 @@ function bytesToSize(bytes, speed) {
   } else {
     return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
   }
-};
+}
 
 function poppupAddTorrent(){
   window.open("/add", "Ajout d'un torrent", config='height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');

views/index.haml

@@ -1,61 +1,100 @@
 -# coding: utf-8
-.off-canvas-wrap
-  .inner-wrap
-    .fixed    
-      %nav.top-bar
-        %ul.title-area
-          %li.name
-            %h1
-              %a{href: "#"} rSeed
-          %li.toggle-topbar.menu-icon
-            %a{href: "#"}
-              %span Menu
-        %section.top-bar-section
-          %ul.right
-            %li
+.inner-wrap
+  .fixed    
+    %nav.top-bar
+      %ul.title-area
+        %li.name
+          %h1
+            %a{href: "#"} rSeed
+        %li.toggle-topbar.menu-icon
+          %a{href: "#"}
+            %span Menu
+      %section.top-bar-section
+        %ul.right
+          %li
+            %a
+              %span.disk-info 
+                %span.disk-bar
+                  %span.inner-bar
+                %span.text-info
+          %li.divider
+          %li.has-form
+            %a.button.radius.success
+              %i.fi-arrow-up
+              %strong#up-info
+          %li.divider
+          %li.has-form
+            %a.button.radius
+              %i.fi-arrow-down
+              %strong#down-info
+        %ul.left
+          %li
+            %a.button.radius.alert{href: "", data:{reveal_id: "addModal"}} Add
+  %section.main-section{style: "margin: 60px 20px 0 20px"}
+    %table{style: "width: 100%;"}
+      %thead
+        %tr
+          %th Torrent
+          %th Ratio
+          %th Upload
+          %th Download
+          %th Actions
+      %tbody
+        - tlist.each do |t|
+          %tr{data: {:torrent_id => "#{t["hash"]}"}} 
+            %td.name
+              #{t["name"]}
+              %span.space.label.secondary.round.right
+            %td.text-center.ratio      
+            %td.text-center.upspeed
+            %td.text-center.downspeed
+            %td.text-center
+              %a{href: "#", data: {:torrent_id => "#{t["hash"][0,10]}"} }
+                %i.fi-cloud
+              |
               %a
-                %span.disk-info 
-                  %span.disk-bar
-                    %span.inner-bar
-                  %span.text-info
-            %li.divider
-            %li.has-form
-              %a.button.radius.success
-                %i.fi-arrow-up
-                %strong#up-info
-            %li.divider
-            %li.has-form
-              %a.button.radius
-                %i.fi-arrow-down
-                %strong#down-info
-          %ul.left
-            %li
-              %a.button.radius.alert{href: "#", onClick: "poppupAddTorrent()"} Add
-    %section.main-section{style: "margin: 50px 10px"}
-      %table{style: "width: 100%;"}
-        %thead
-          %tr
-            %th Torrent
-            %th Ratio
-            %th Upload
-            %th Download
-            %th Actions
-        %tbody
-          - tlist.each do |t|
-            %tr{data: {:torrent_id => "#{t["hash"]}"}} 
-              %td.name
-                #{t["name"]}
-                %span.space.label.secondary.round.right
-              %td.text-center.ratio      
-              %td.text-center.upspeed
-              %td.text-center.downspeed
-              %td.text-center
-                %a{href: "#", data: {:torrent_id => "#{t["hash"][0,10]}"} }
-                  %i.fi-cloud
-                |
-                %a
-                  %i.fi-trash
-    %a.exit-off-canvas
+                %i.fi-trash
+
+#addModal.reveal-modal.medium{"data-reveal" => ""}
+  %h2 Add a torrent
+  %dl.sub-nav{"data-tab" => ""}
+    %dd.active
+      %a{href: "#panel-link"} Link
+    %dd
+      %a{href: "#panel-file"} File
+    %dd
+      %a{href: "#panel-search"} Search Engine
+  .tabs-content
+    #panel-link.content.active{style: "width: 100%;"}
+      %form
+        .row
+          .large-12.columns
+            %input{type: "text", placeholder: "Link to .torrent (http, https, ftp and magnet)"}
+      .panel.radius
+        %p HTTP, HTTPS, FTP and Magnet are natively supported by rTorrent.
+        %p For the moment we use the native feature of rTorrent.
+        %p rTorrent doesn't support self-signed cert (for HTTPS).
+        %p To use Magnet link be sure DHT is activated in your .rtorrent.rc
+    #panel-file.content
+      %form
+        .row
+          .large-12.columns
+            %input{type: "file"}
+          .large-12.columns
+            %input{type: "submit", value: "Send .torrent"}
+    #panel-search.content
+      %form
+        .row
+          .large-12.columns
+            %input{type: "text", placeholder: "Search for a torrent :)"}
+      #search-results
+  %a.close-reveal-modal ×
+
+#shareModal.reveal-modal.small{"data-reveal" => ""}
+  %h3 Share your download !
+  %p Here is the public link for <strong class=".share-torrent-name">torrent-name-here</strong>
+  %input.share-torrent-link{type: "text", value: "torrent-public-link-here"}
+  %a.close-reveal-modal &#215;
 
 %script{:src => '/js/vendor/jquery.js'}
 %script{:src => '/js/foundation.min.js'}