VRFS-3246 : Refactoring to allow online presence and samples controls to be used on bands -- incremental.

ruby/jt_metadata.json

@@ -1 +1 @@
-{"container_file": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150511-14158-1rprqit/jam-track-58.jkz", "version": "0", "coverart": null, "rsa_priv_file": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150511-14158-1rprqit/skey.pem", "tracks": [{"name": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150511-14158-1rprqit/27f81b9d-341e-4082-8a1b-662bf8f20a0d.ogg", "trackName": "track_00"}], "rsa_pub_file": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150511-14158-1rprqit/pkey.pem", "jamktrack_info": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/tmp2xkPZO"}
+{"container_file": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150519-97259-1h1tbhj/jam-track-35.jkz", "version": "0", "coverart": null, "rsa_priv_file": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150519-97259-1h1tbhj/skey.pem", "tracks": [{"name": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150519-97259-1h1tbhj/7452fa4a-0c55-4cb2-948e-221475d7299c.ogg", "trackName": "track_00"}], "rsa_pub_file": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/d20150519-97259-1h1tbhj/pkey.pem", "jamktrack_info": "/var/folders/fk/0ckzmddd4tq28kxbb09vckbr0000gn/T/tmpGdncJS"}

web/app/assets/javascripts/accounts_profile_samples.js

@@ -3,7 +3,7 @@
   "use strict";
 
   context.JK = context.JK || {};
-  context.JK.AccountProfileSamples = function(app) {
+  context.JK.AccountProfileSamples = function(app, parent) {
     var $document = $(document);
 
     // used to initialize RecordingSourceValidator in site_validator.js.coffee
@@ -15,10 +15,10 @@
     var EVENTS = context.JK.EVENTS;
     var api = context.JK.Rest();
     var ui = new context.JK.UIHelper(JK.app);
-    var user = {};
+    var target = {};
     var profileUtils = context.JK.ProfileUtils;
 
-    var $screen = $('#account-profile-samples');
+    var $screen = $('.account-profile-samples', parent);
 
     // online presences
     var $website = $screen.find('#website');
@@ -315,6 +315,126 @@
       }
     }
 
+    function removeRow(recordingId, type) {
+      $('div[data-recording-id=' + recordingId + ']').remove();
+
+      if (type === 'soundcloud') {
+        window.soundCloudRecordingValidator.removeRecordingId(recordingId);
+      }
+      else if (type === 'youtube') {
+        window.youTubeRecordingValidator.removeRecordingId(recordingId);
+      }
+    }
+
+    function formatTitle(title) {
+      return title && title.length > 30 ? title.substring(0, 30) + "..." : title;
+    }
+
+    // This function is a bit of a mess.  It was pulled
+    // from the html.erb file verbatim, and could use a 
+    // refactor:
+    function initializeValidators() {
+      var initialized = false;
+      $(document).on('INIT_SITE_VALIDATORS', function(e, data) {
+        window.soundCloudRecordingValidator.init(window.soundCloudRecordingSources);
+        window.youTubeRecordingValidator.init(window.youTubeRecordingSources);
+      });
+
+      $(document).on('JAMKAZAM_READY', function(e, data) {
+        window.JK.JamServer.get$Server().on(window.JK.EVENTS.CONNECTION_UP, function() {
+          if(initialized) {
+            return;
+          }
+          initialized = true;
+
+          //var $screen = $('#account-profile-samples');
+          var $btnAddSoundCloudRecording = $screen.find('#btn-add-soundcloud-recording');
+          var $btnAddYouTubeVideo = $screen.find('#btn-add-youtube-video');
+          var $soundCloudSampleList = $screen.find('.samples.soundcloud');
+          var $youTubeSampleList = $screen.find('.samples.youtube');
+
+          setTimeout(function() {
+            window.urlValidator = new JK.SiteValidator('url', userNameSuccessCallback, userNameFailCallback);
+            window.urlValidator.init();
+
+            window.soundCloudValidator = new JK.SiteValidator('soundcloud', userNameSuccessCallback, userNameFailCallback);
+            window.soundCloudValidator.init();
+
+            window.reverbNationValidator = new JK.SiteValidator('reverbnation', userNameSuccessCallback, userNameFailCallback);
+            window.reverbNationValidator.init();
+
+            window.bandCampValidator = new JK.SiteValidator('bandcamp', userNameSuccessCallback, userNameFailCallback);
+            window.bandCampValidator.init();
+
+            window.fandalismValidator = new JK.SiteValidator('fandalism', userNameSuccessCallback, userNameFailCallback);
+            window.fandalismValidator.init();
+
+            window.youTubeValidator = new JK.SiteValidator('youtube', userNameSuccessCallback, userNameFailCallback);
+            window.youTubeValidator.init();
+
+            window.facebookValidator = new JK.SiteValidator('facebook', userNameSuccessCallback, userNameFailCallback);
+            window.facebookValidator.init();
+
+            window.twitterValidator = new JK.SiteValidator('twitter', userNameSuccessCallback, userNameFailCallback);
+            window.twitterValidator.init();
+
+            window.soundCloudRecordingValidator = new JK.RecordingSourceValidator('rec_soundcloud', soundCloudSuccessCallback, siteFailCallback);
+
+            window.youTubeRecordingValidator = new JK.RecordingSourceValidator('rec_youtube', youTubeSuccessCallback, siteFailCallback);
+          }, 1);
+
+
+          function userNameSuccessCallback($inputDiv) {
+            $inputDiv.removeClass('error');
+            $inputDiv.find('.error-text').remove();
+          }
+
+          function userNameFailCallback($inputDiv) {
+            $inputDiv.addClass('error');
+            $inputDiv.find('.error-text').remove();
+            $inputDiv.append("<span class='error-text'>Invalid username</span>").show();
+          }
+
+          function soundCloudSuccessCallback($inputDiv) {
+            siteSuccessCallback($inputDiv, window.soundCloudRecordingValidator, $soundCloudSampleList, 'soundcloud');
+          }
+
+          function youTubeSuccessCallback($inputDiv) {
+            siteSuccessCallback($inputDiv, window.youTubeRecordingValidator, $youTubeSampleList, 'youtube');
+          }
+
+          function siteSuccessCallback($inputDiv, recordingSiteValidator, $sampleList, type) {
+            $inputDiv.removeClass('error');
+            $inputDiv.find('.error-text').remove();
+
+            var recordingSources = recordingSiteValidator.recordingSources();
+            if (recordingSources && recordingSources.length > 0) {
+              var $sampleList = $sampleList.find('.sample-list');
+              var addedRecording = recordingSources[recordingSources.length-1];
+
+              // TODO: this code is repeated in JS file
+              var recordingIdAttr = ' data-recording-id="' + addedRecording.recording_id + '" ';
+              var recordingUrlAttr = ' data-recording-url="' + addedRecording.url + '" ';
+              var recordingTitleAttr = ' data-recording-title="' + addedRecording.recording_title + '"';
+              var title = formatTitle(addedRecording.recording_title);
+              $sampleList.append('<div class="clearall recording-row left entry"' + recordingIdAttr + recordingUrlAttr + recordingTitleAttr + '>' + title + '</div>');
+
+              var onclick = "onclick=removeRow(\'" + addedRecording.recording_id + "\',\'" + type + "\');";
+              $sampleList.append('<div class="right close-button" ' + recordingIdAttr + onclick + '>X</div>');
+            }
+
+            $inputDiv.find('input').val('');
+          }
+
+          function siteFailCallback($inputDiv) {
+            $inputDiv.addClass('error');
+            $inputDiv.find('.error-text').remove();
+            $inputDiv.append("<span class='error-text'>Invalid URL</span>").show();
+          }
+        });
+      });
+    } // end initializeValidators. 
+
     function initialize() {
       var screenBindings = {
         'beforeShow': beforeShow,
@@ -322,7 +442,7 @@
       };
 
       app.bindScreen('account/profile/samples', screenBindings);
-
+      initializeValidators();
       events();
     }
 
@@ -331,5 +451,4 @@
     this.afterShow = afterShow;
     return this;
   };
-
 })(window,jQuery);

web/app/assets/javascripts/band_setup.js

@@ -32,7 +32,9 @@
     var currentStep = 0;
     var STEPS_COUNT=5;
     var $screen=$("#band-setup")
+    var $samples = $screen.find(".account-profile-samples")
     var $selectedInstruments=[]
+    var accountProfileSamples = null;            
     
     function navBack() {
       if (currentStep>0) {
@@ -177,21 +179,22 @@
     }
 
     function renderErrors(errors) {
+      logger.debug("Band setup errors: ", errors)
       var name        = context.JK.format_errors("name", errors);
       var country     = context.JK.format_errors("country", errors);
       var state       = context.JK.format_errors("state", errors);
       var city        = context.JK.format_errors("city", errors);
       var biography   = context.JK.format_errors("biography", errors);
-      var genres      = context.JK.format_errors("genres", errors);
       var website     = context.JK.format_errors("website", errors);
+      var genres      = context.JK.format_errors("genres", errors);
 
-      if(name) $("#band-name").closest('div.field').addClass('error').end().after(name);
+      if(name)      $("#band-name").closest('div.field').addClass('error').end().after(name);
-      if(country) $("#band-country").closest('div.field').addClass('error').end().after(country);
+      if(country)   $("#band-country").closest('div.field').addClass('error').end().after(country);
-      if(state) $("#band-region").closest('div.field').addClass('error').end().after(state);
+      if(state)     $("#band-region").closest('div.field').addClass('error').end().after(state);
-      if(city) $("#band-city").closest('div.field').addClass('error').end().after(city);
+      if(city)      $("#band-city").closest('div.field').addClass('error').end().after(city);
-      if(genres) $(".band-setup-genres").closest('div.field').addClass('error').end().after(genres);
       if(biography) $("#band-biography").closest('div.field').addClass('error').end().after(biography);
-      if(website) $("#band-website").closest('div.field').addClass('error').end().after(website);
+      if(website)   $("#band-website").closest('div.field').addClass('error').end().after(website);      
+      if(genres)    $("#band-genres").closest('div.field').addClass('error').end().after(genres);      
     }
 
     function buildBand() {
@@ -223,7 +226,6 @@
       } else {
         band.validate_genres = false
       }
-
       
       $.each($selectedInstruments, function(index, instrument) {
         var h = {}
@@ -653,28 +655,32 @@
     }
 
     function initialize(invitationDialogInstance, friendSelectorDialog) {
-      inviteMusiciansUtil = new JK.InviteMusiciansUtil(app);
+      inviteMusiciansUtil = new JK.InviteMusiciansUtil(app)
-      inviteMusiciansUtil.initialize(friendSelectorDialog);
+      inviteMusiciansUtil.initialize(friendSelectorDialog)
-      friendInput = inviteMusiciansUtil.inviteBandCreate('#band-setup-invite-musicians', "<div class='left w70'>If your bandmates are already on JamKazam, start typing their names in the box below, or click the Choose Friends button to select them.</div>");
+
-      invitationDialog = invitationDialogInstance;
+      accountProfileSamples = new JK.AccountProfileSamples(JK.app, $screen)
-      events();
+      accountProfileSamples.initialize()
+
+      friendInput = inviteMusiciansUtil.inviteBandCreate('#band-setup-invite-musicians', "<div class='left w70'>If your bandmates are already on JamKazam, start typing their names in the box below, or click the Choose Friends button to select them.</div>")
+      invitationDialog = invitationDialogInstance
+      events()
 
       var screenBindings = {
         'beforeShow': beforeShow,
         'afterShow': afterShow
-      };
+      }
 
       bandType=$("#band-type")
       bandStatus=$("#band-status")
       concertCount=$("#concert-count")
     
-      app.bindScreen('band/setup', screenBindings);
+      app.bindScreen('band/setup', screenBindings)
 
       $('input[type=radio]').iCheck({
         checkboxClass: 'icheckbox_minimal',
         radioClass: 'iradio_minimal',
         inheritClass: true
-      });
+      })
 
       profileUtils.initializeHelpBubbles()      
     }

web/app/assets/stylesheets/client/accountProfileSamples.css.scss

@@ -1,8 +1,12 @@
 @import "common.css.scss";
 @import "site_validator.css.scss";
 
-#account-profile-samples {
+.profile-online-sample-controls {
   
+  .sample-row {
+    position: relative;
+  }
+
   .sample {
     font-weight: 600;
     font-size: 16px;

web/app/assets/stylesheets/client/band.css.scss

@@ -7,10 +7,14 @@
       @include border_box_sizing;
       width: 100%;
       padding: 2px 4px 2px 2px;
+      overflow: hidden;
+    }
+
+    textarea {
+      overflow:hidden;
     }
 
   }
-
   // Mimic style of easydropdown selects:
   input[type="number"] {
     border-radius: 6px;
@@ -21,6 +25,10 @@
     padding: 5px;
   }
 
+  .content-body-scroller {
+    
+  }
+
   .radio-field {
     display: inline;
     padding: 2px;
@@ -57,7 +65,7 @@
       box-shadow: inset 2px 2px 3px 0px #888;
       color:#000;
       overflow:auto;
-      font-size:14px;
+      font-size:12px;
   }
 
   .band-setup-photo {
@@ -106,7 +114,7 @@
       font-weight:200;
       font-size: 28px;
       float:left;
-      margin: 0px 150px 0px 0px;
+      margin: 0 0 1em 0;
   }
 
   .band-profile-status {
@@ -141,7 +149,7 @@
       padding-top:65px;
       background-color:#535353;
       color:#ccc;
-      font-size:17px;
+      font-size:16px;
       text-decoration:none;
   }
 
@@ -380,7 +388,7 @@
 
   
   #band-setup-form {
-    padding: 0.25em 0.5em 1.25em 0.25em;
+    margin: 0.25em 0.5em 1.25em 0.25em;
     table.band-form-table {
       width: 100%;
       margin: 1em;
@@ -421,12 +429,12 @@
   }
 
   label {
-    font-size: 1.1em;  
+    font-size: 1.05em;  
   }
 
   label.strong-label {
     font-weight: bold;
-    font-size: 1.2em;
+    font-size: 1.1em;
   }
 
 }

web/app/views/clients/_account_profile_samples.html.erb

@@ -1,4 +1,4 @@
-<div layout="screen" id="account-profile-samples" layout-id="account/profile/samples" class="screen secondary">
+<div layout="screen" layout-id="account/profile/samples" class="screen secondary account-profile-samples">
   <div class="content-head">
     <div class="content-icon">
       <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
@@ -12,106 +12,8 @@
       <div class="content-wrapper account-profile">
 
         <form id="account-edit-profile-samples-form">
-
           <h2>edit profile: online presence &amp; performance samples</h2>
-
+          <%= render "profile_online_sample_controls" %>
-          <div>
-            <div class="left">
-              <label>Website (URL):</label>
-              <div id="url_validator" class="left presence site_validator">
-                <input type="text" maxlength="4000" id="website" /><span class="spinner-small"></span>
-              </div>
-            </div>
-            <div class="left">
-              <label>SoundCloud (username):</label>
-              <div id="soundcloud_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="soundcloud-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-            <div class="left">
-              <label>ReverbNation (username):</label>
-              <div id="reverbnation_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="reverbnation-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-            <div class="left">
-              <label>Bandcamp (username):</label>
-              <div id="bandcamp_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="bandcamp-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <div class="left">
-              <label>Fandalism (URL):</label>
-              <div id="fandalism_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="fandalism-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-            <div class="left">
-              <label>YouTube (username):</label>
-              <div id="youtube_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="youtube-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-            <div class="left">
-              <label>Facebook (username):</label>
-              <div id="facebook_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="facebook-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-            <div class="left">
-              <label>Twitter (username):</label>
-              <div id="twitter_validator" class="left presence site_validator">
-                <input type="text" maxlength="100" id="twitter-username" /><span class="spinner-small"></span>
-              </div>
-            </div>
-          </div>
-
-          <div class="clearall"></div>
-
-          <hr>
-
-          <div class="samples-container">
-            <div class="left samples jamkazam">
-              <label>JamKazam Recordings:</label>
-              <div class="controls">
-                <div class="left">
-                  <a id="btn-add-jk-recording" class="button-grey">BROWSE</a>
-                </div>
-              </div>
-              <br class="clearall"/>
-              <div class="sample-list"></div>
-            </div>
-
-            <div class="left samples soundcloud">
-              <label>SoundCloud Recordings (URL):</label>
-              <div class="controls">
-                <div id="rec_soundcloud_validator" class="left sample site_validator">
-                  <input type="text" maxlength="4000" id="soundcloud-recording" />
-                  <a id="btn-add-soundcloud-recording" class="button-grey add-recording-source">ADD</a>
-                  <span class="spinner-small"></span>
-                </div>
-              </div>
-              <br class="clearall"/>
-              <div class="sample-list"></div>              
-            </div>
-
-            <div class="left samples youtube">
-              <label>YouTube Videos (URL):</label>
-              <div class="controls">
-                <div id="rec_youtube_validator" class="left sample site_validator">
-                  <input type="text" maxlength="4000" id="youtube-video" />
-                  <a id="btn-add-youtube-video" class="button-grey add-recording-source">ADD</a>
-                  <span class="spinner-small"></span>
-                </div>
-              </div>
-              <br class="clearall"/>
-              <div class="sample-list"></div>
-            </div>
-
-          </div>
 
           <div class="clearall"></div>
           <br/><br/>
@@ -123,129 +25,9 @@
           </div>
 
           <div class="clearall"></div>
-
         </form>
 
       </div>
     </div>
   </div>
 </div>
-
-<script type="text/javascript">
-
-  function removeRow(recordingId, type) {
-    $('div[data-recording-id=' + recordingId + ']').remove();
-
-    if (type === 'soundcloud') {
-      window.soundCloudRecordingValidator.removeRecordingId(recordingId);
-    }
-    else if (type === 'youtube') {
-      window.youTubeRecordingValidator.removeRecordingId(recordingId);
-    }
-  }
-
-  function formatTitle(title) {
-    return title && title.length > 30 ? title.substring(0, 30) + "..." : title;
-  }
-
-  var initialized = false;
-  $(document).on('INIT_SITE_VALIDATORS', function(e, data) {
-    window.soundCloudRecordingValidator.init(window.soundCloudRecordingSources);
-    window.youTubeRecordingValidator.init(window.youTubeRecordingSources);
-  });
-
-  $(document).on('JAMKAZAM_READY', function(e, data) {
-    window.JK.JamServer.get$Server().on(window.JK.EVENTS.CONNECTION_UP, function() {
-      if(initialized) {
-        return;
-      }
-      initialized = true;
-
-      var $screen = $('#account-profile-samples');
-      var $btnAddSoundCloudRecording = $screen.find('#btn-add-soundcloud-recording');
-      var $btnAddYouTubeVideo = $screen.find('#btn-add-youtube-video');
-      var $soundCloudSampleList = $screen.find('.samples.soundcloud');
-      var $youTubeSampleList = $screen.find('.samples.youtube');
-
-      setTimeout(function() {
-        window.urlValidator = new JK.SiteValidator('url', userNameSuccessCallback, userNameFailCallback);
-        window.urlValidator.init();
-
-        window.soundCloudValidator = new JK.SiteValidator('soundcloud', userNameSuccessCallback, userNameFailCallback);
-        window.soundCloudValidator.init();
-
-        window.reverbNationValidator = new JK.SiteValidator('reverbnation', userNameSuccessCallback, userNameFailCallback);
-        window.reverbNationValidator.init();
-
-        window.bandCampValidator = new JK.SiteValidator('bandcamp', userNameSuccessCallback, userNameFailCallback);
-        window.bandCampValidator.init();
-
-        window.fandalismValidator = new JK.SiteValidator('fandalism', userNameSuccessCallback, userNameFailCallback);
-        window.fandalismValidator.init();
-
-        window.youTubeValidator = new JK.SiteValidator('youtube', userNameSuccessCallback, userNameFailCallback);
-        window.youTubeValidator.init();
-
-        window.facebookValidator = new JK.SiteValidator('facebook', userNameSuccessCallback, userNameFailCallback);
-        window.facebookValidator.init();
-
-        window.twitterValidator = new JK.SiteValidator('twitter', userNameSuccessCallback, userNameFailCallback);
-        window.twitterValidator.init();
-
-        window.soundCloudRecordingValidator = new JK.RecordingSourceValidator('rec_soundcloud', soundCloudSuccessCallback, siteFailCallback);
-
-        window.youTubeRecordingValidator = new JK.RecordingSourceValidator('rec_youtube', youTubeSuccessCallback, siteFailCallback);
-      }, 1);
-
-      function userNameSuccessCallback($inputDiv) {
-        $inputDiv.removeClass('error');
-        $inputDiv.find('.error-text').remove();
-      }
-
-      function userNameFailCallback($inputDiv) {
-        $inputDiv.addClass('error');
-        $inputDiv.find('.error-text').remove();
-        $inputDiv.append("<span class='error-text'>Invalid username</span>").show();
-      }
-
-      function soundCloudSuccessCallback($inputDiv) {
-        siteSuccessCallback($inputDiv, window.soundCloudRecordingValidator, $soundCloudSampleList, 'soundcloud');
-      }
-
-      function youTubeSuccessCallback($inputDiv) {
-        siteSuccessCallback($inputDiv, window.youTubeRecordingValidator, $youTubeSampleList, 'youtube');
-      }
-
-      function siteSuccessCallback($inputDiv, recordingSiteValidator, $sampleList, type) {
-        $inputDiv.removeClass('error');
-        $inputDiv.find('.error-text').remove();
-
-        var recordingSources = recordingSiteValidator.recordingSources();
-        if (recordingSources && recordingSources.length > 0) {
-          var $sampleList = $sampleList.find('.sample-list');
-          var addedRecording = recordingSources[recordingSources.length-1];
-
-          // TODO: this code is repeated in JS file
-          var recordingIdAttr = ' data-recording-id="' + addedRecording.recording_id + '" ';
-          var recordingUrlAttr = ' data-recording-url="' + addedRecording.url + '" ';
-          var recordingTitleAttr = ' data-recording-title="' + addedRecording.recording_title + '"';
-          var title = formatTitle(addedRecording.recording_title);
-          $sampleList.append('<div class="clearall recording-row left entry"' + recordingIdAttr + recordingUrlAttr + recordingTitleAttr + '>' + title + '</div>');
-
-          var onclick = "onclick=removeRow(\'" + addedRecording.recording_id + "\',\'" + type + "\');";
-          $sampleList.append('<div class="right close-button" ' + recordingIdAttr + onclick + '>X</div>');
-        }
-
-        $inputDiv.find('input').val('');
-      }
-
-      function siteFailCallback($inputDiv) {
-        $inputDiv.addClass('error');
-        $inputDiv.find('.error-text').remove();
-        $inputDiv.append("<span class='error-text'>Invalid URL</span>").show();
-      }
-
-    });
-  });
-</script>
-

web/app/views/clients/_band_setup.html.slim

@@ -172,7 +172,8 @@
 
         #band-setup-step-3.band-step.content-wrapper 
           h2 set up band: online presence & performance samples
-          table.band-form-table
+          = render "clients/profile_online_sample_controls"
+          
         #band-setup-step-4.band-step.content-wrapper 
           h2 invite members
           br
@@ -218,6 +219,7 @@
           a#btn-band-setup-next.nav-button.button-orange
             | SAVE & NEXT
         .clearall
+        br clear="all"
 
 
 script#template-band-setup-genres type="text/template"

web/app/views/clients/_profile_online_sample_controls.html.slim

@@ -0,0 +1,69 @@
+.profile-online-sample-controls
+  .sample_row
+    .left
+      label Website (URL):
+      #url_validator.left.presence.site_validator
+        input#website maxlength="4000" type="text" 
+        span.spinner-small
+    .left
+      label SoundCloud (username):
+      #soundcloud_validator.left.presence.site_validator
+        input#soundcloud-username maxlength="100" type="text" 
+        span.spinner-small
+    .left
+      label ReverbNation (username):
+      #reverbnation_validator.left.presence.site_validator
+        input#reverbnation-username maxlength="100" type="text" 
+        span.spinner-small
+    .left
+      label Bandcamp (username):
+      #bandcamp_validator.left.presence.site_validator
+        input#bandcamp-username maxlength="100" type="text" 
+        span.spinner-small
+  .sample_row
+    .left
+      label Fandalism (URL):
+      #fandalism_validator.left.presence.site_validator
+        input#fandalism-username maxlength="100" type="text" 
+        span.spinner-small
+    .left
+      label YouTube (username):
+      #youtube_validator.left.presence.site_validator
+        input#youtube-username maxlength="100" type="text" 
+        span.spinner-small
+    .left
+      label Facebook (username):
+      #facebook_validator.left.presence.site_validator
+        input#facebook-username maxlength="100" type="text" 
+        span.spinner-small
+    .left
+      label Twitter (username):
+      #twitter_validator.left.presence.site_validator
+        input#twitter-username maxlength="100" type="text" 
+        span.spinner-small
+  .sample_row.samples-container
+    .left.samples.jamkazam
+      label JamKazam Recordings:
+      .controls
+        .left
+          a#btn-add-jk-recording.button-grey BROWSE
+      br.clearall
+      .sample-list
+    .left.samples.soundcloud
+      label SoundCloud Recordings (URL):
+      .controls
+        #rec_soundcloud_validator.left.sample.site_validator
+          input#soundcloud-recording maxlength="4000" type="text" 
+          a#btn-add-soundcloud-recording.button-grey.add-recording-source ADD
+          span.spinner-small
+      br.clearall
+      .sample-list
+    .left.samples.youtube
+      label YouTube Videos (URL):
+      .controls
+        #rec_youtube_validator.left.sample.site_validator
+          input#youtube-video maxlength="4000" type="text" 
+          a#btn-add-youtube-video.button-grey.add-recording-source ADD
+          span.spinner-small
+      br.clearall
+      .sample-list

web/vendor/assets/stylesheets/icheck/minimal/minimal.css

@@ -12,6 +12,7 @@
     cursor: pointer;
 }
 
+
 .icheckbox_minimal {
     background-position: 0 0;
 }