From f979c35faf8b34d59713706e684ea2df1eadd59f Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Tue, 5 Feb 2013 02:58:19 -0500 Subject: [PATCH] style updates / only allow 1 genre now --- app/assets/javascripts/createSession.js | 59 ++++---- app/assets/javascripts/genreSelector.js | 104 ++++++------- .../stylesheets/client/createSession.css.scss | 4 + .../stylesheets/client/jamkazam.css.scss | 25 +++- .../stylesheets/client/screen_common.css.scss | 16 ++ app/views/clients/_createSession.html.erb | 139 ++++++++++++------ app/views/clients/_genreSelector.html.erb | 13 +- spec/javascripts/createSession.spec.js | 39 ++--- spec/requests/bands_api_spec.rb | 24 +-- spec/requests/users_api_spec.rb | 28 ++-- 10 files changed, 278 insertions(+), 173 deletions(-) diff --git a/app/assets/javascripts/createSession.js b/app/assets/javascripts/createSession.js index 9c6c0adbb..b0d171179 100644 --- a/app/assets/javascripts/createSession.js +++ b/app/assets/javascripts/createSession.js @@ -10,7 +10,7 @@ var autoComplete = null; var userNames = []; var userIds = []; - var MAX_GENRES = 3; + var MAX_GENRES = 1; // for unit tests function loadGenres() { @@ -29,33 +29,39 @@ } function afterShow(data) { - $.ajax({ - type: "GET", - url: "/api/users/" + context.JK.currentUserId + "/friends", - async: false - }).done(function(response) { - $.each(response, function() { - userNames.push(this.first_name + ' ' + this.last_name); - userIds.push(this.id); - }); - // Hook up the autocomplete. - var autoCompleteOptions = { - lookup: { suggestions: userNames, data: userIds }, - onSelect: addInvitation - }; - if (!autoComplete) { - autoComplete = $('#friend-input').autocomplete(autoCompleteOptions); - } else { - autoComplete.setOptions(autoCompleteOptions); - } + $.ajax({ + type: "GET", + url: "/api/users/" + context.JK.currentUserId + "/friends", + async: false + }).done(function(response) { + $.each(response, function() { + userNames.push(this.first_name + ' ' + this.last_name); + userIds.push(this.id); }); + // Hook up the autocomplete. + var autoCompleteOptions = { + lookup: { suggestions: userNames, data: userIds }, + onSelect: addInvitation + }; + if (!autoComplete) { + autoComplete = $('#friend-input').autocomplete(autoCompleteOptions); + } else { + autoComplete.setOptions(autoCompleteOptions); + } + }); } function addInvitation(value, data) { - var template = $('#template-added-invitation').html(); - var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value}); - $('#selected-friends').append(invitationHtml); - $('#friend-input').select(); + if ($('#selected-friends div[user-id=' + data + ']').length == 0) { + var template = $('#template-added-invitation').html(); + var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value}); + $('#selected-friends').append(invitationHtml); + $('#friend-input').select(); + } + else { + $('#friend-input').select(); + alert('Invitation already exists for this musician.'); + } } function removeInvitation(evt) { @@ -81,11 +87,11 @@ var genres = genreSelector.getSelectedGenres(); if (genres.length == 0) { - errors.push(['#genre-list-items', "Please select a genre."]); + errors.push(['#genre-list', "Please select a genre."]); } if (genres.length > MAX_GENRES) { - errors.push(['#genre-list-items', "No more than " + MAX_GENRES + "genres are allowed."]); + errors.push(['#genre-list', "No more than " + MAX_GENRES + "genres are allowed."]); } return (errors.length) ? errors : null; @@ -240,7 +246,6 @@ } function searchFriends(query) { - alert(query); if (query.length < 2) { $('#friend-search-results').empty(); return; diff --git a/app/assets/javascripts/genreSelector.js b/app/assets/javascripts/genreSelector.js index 66690b92d..35346ff05 100644 --- a/app/assets/javascripts/genreSelector.js +++ b/app/assets/javascripts/genreSelector.js @@ -24,86 +24,90 @@ } function reset() { - $('#genre-list-items input[type=checkbox]', _form).removeAttr('checked'); - $('#genre-list-items input[type=checkbox]', _form).removeAttr('disabled'); - $('#genre-count', _form).val('0'); + $('genre-list', _form).val(''); + //$('#genre-list-items input[type=checkbox]', _form).removeAttr('checked'); + //$('#genre-list-items input[type=checkbox]', _form).removeAttr('disabled'); + //$('#genre-count', _form).val('0'); } function genresLoaded(response) { $.each(response, function(index) { var template = $('#template-genre-option', _form).html(); var genreOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.description}); - $('#genre-list-items', _form).append(genreOptionHtml); + //$('#genre-list-items', _form).append(genreOptionHtml); + $('#genre-list', _form).append(genreOptionHtml); }); } - function toggleGenreBox() { - var boxHeight = $('#genre-list', _form).css("height"); - // TODO: clean this up (check class name of arrow to determine current state) - if (boxHeight == "20px") { - $('#genre-list', _form).css({height: "auto"}); - $('#genre-list-arrow', _form).removeClass("arrow-down").addClass("arrow-up"); + // function toggleGenreBox() { + // var boxHeight = $('#genre-list', _form).css("height"); + // // TODO: clean this up (check class name of arrow to determine current state) + // if (boxHeight == "20px") { + // $('#genre-list', _form).css({height: "auto"}); + // $('#genre-list-arrow', _form).removeClass("arrow-down").addClass("arrow-up"); - } - else { - $('#genre-list', _form).css({height: "20px"}); - $('#genre-list-arrow', _form).removeClass("arrow-up").addClass("arrow-down"); - } - } + // } + // else { + // $('#genre-list', _form).css({height: "20px"}); + // $('#genre-list-arrow', _form).removeClass("arrow-up").addClass("arrow-down"); + // } + // } // Used to disable checkboxes once _maxSelections are selected. - function updateGenreCount() { - var genreCount = parseInt($('#genre-count', _form).val()); - if ($(this).attr('checked')) { - genreCount++; - } - else { - genreCount--; - } + // function updateGenreCount() { + // var genreCount = parseInt($('#genre-count', _form).val()); + // if ($(this).attr('checked')) { + // genreCount++; + // } + // else { + // genreCount--; + // } - $('#genre-count', _form).val(genreCount); + // $('#genre-count', _form).val(genreCount); - var disabled = false; - if (_maxSelections != 0 && genreCount == _maxSelections) { - disabled = true; - } + // var disabled = false; + // if (_maxSelections != 0 && genreCount == _maxSelections) { + // disabled = true; + // } - $('#genre-list-items input[type=checkbox]', _form).each(function() { - if (!$(this).attr('checked')) { - if (disabled) { - $(this).attr('disabled', 'disabled'); - } - else { - $(this).removeAttr('disabled'); - } - } - }); - } + // $('#genre-list-items input[type=checkbox]', _form).each(function() { + // if (!$(this).attr('checked')) { + // if (disabled) { + // $(this).attr('disabled', 'disabled'); + // } + // else { + // $(this).removeAttr('disabled'); + // } + // } + // }); + // } function getSelectedGenres() { var selectedGenres = []; - $('#genre-list-items :checked', _form).each(function() { - selectedGenres.push($(this).val()); - }); + // $('#genre-list-items :checked', _form).each(function() { + // selectedGenres.push($(this).val()); + // }); + + selectedGenres.push($('genre-list', _form).val()); return selectedGenres; } function events() { - $('#genre-list-header', _form).on("click", toggleGenreBox); - $('#genre-list-arrow', _form).on("click", toggleGenreBox); - $('#genre-list-items input[type=checkbox]', _form).each(function() { - $(this).on("click", updateGenreCount); - }); + // $('#genre-list-header', _form).on("click", toggleGenreBox); + // $('#genre-list-arrow', _form).on("click", toggleGenreBox); + // $('#genre-list-items input[type=checkbox]', _form).each(function() { + // $(this).on("click", updateGenreCount); + // }); } function initialize(title, maxSelections, form) { _form = form; _maxSelections = maxSelections; - $('#genre-list-header', _form).text(title); + // $('#genre-list-header', _form).text(title); loadGenres(); - events(); + // events(); }; this.initialize = initialize; diff --git a/app/assets/stylesheets/client/createSession.css.scss b/app/assets/stylesheets/client/createSession.css.scss index 0530df065..332f30238 100644 --- a/app/assets/stylesheets/client/createSession.css.scss +++ b/app/assets/stylesheets/client/createSession.css.scss @@ -19,6 +19,10 @@ height:80px; } +.input-title { + padding-bottom:5px; +} + .friendbox { padding:5px; height:60px; diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index b99ecd682..da4f5d3d0 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -59,6 +59,10 @@ a.arrow-down { border-top: 7px solid #333; } +select { + font-size:12px; +} + form .body { /* TODO - size with layout */ width: 100%; @@ -169,23 +173,34 @@ input[type="button"] { /* Autocomplete */ .autocomplete { border:1px solid #999; - background:$ColorElementPrimary; + background:$ColorScreenBackground; color:$ColorText; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; - /* IE6 specific: */ _height:350px; + _height:350px; /* IE6 specific: */ _margin:0; _overflow-x:hidden; } -.autocomplete .selected { background:#F0F0F0; } +.autocomplete .selected { + background:$ColorScreenBackground; + cursor:pointer; +} -.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; } +.autocomplete div { + padding:10px 10px 10px 10px; + white-space:nowrap; + overflow:hidden; + border:1px solid #999; + text-align:center; +} -.autocomplete strong { font-weight:normal; color:#3399FF; } +.autocomplete strong { + font-weight:normal; +} .multiselect-dropdown { position:relative; diff --git a/app/assets/stylesheets/client/screen_common.css.scss b/app/assets/stylesheets/client/screen_common.css.scss index 557195b41..d8a8eda0e 100644 --- a/app/assets/stylesheets/client/screen_common.css.scss +++ b/app/assets/stylesheets/client/screen_common.css.scss @@ -265,6 +265,10 @@ a img { margin-right:35px; } +.ml5 { + margin-left:5px; +} + .ml10 { margin-left:10px; } @@ -281,6 +285,18 @@ a img { margin-left:35px; } +.mt5 { + margin-top:5px; +} + +.mt35 { + margin-top:35px; +} + +.mb15 { + margin-bottom:15px; +} + .op50 { opacity: .5; -ms-filter: "alpha(opacity=50)"; diff --git a/app/views/clients/_createSession.html.erb b/app/views/clients/_createSession.html.erb index 11e792718..254565286 100644 --- a/app/views/clients/_createSession.html.erb +++ b/app/views/clients/_createSession.html.erb @@ -14,79 +14,130 @@
-
+
+

session info

+
- Description:
- -
-
+
- Genre:
- <%= render "genreSelector" %> +
Band:
+
+ +
- Band:
- +
Genre:
+
<%= render "genreSelector" %>
+
+ +

+ +
+
Description:
+
+ +

-
- Musician Access:
- -
-  Open   -  By Approval +
Musician Access:
+
+
+ +
+ +
+  Open   +  By Approval +


- Fan Access:
- -
-  Chat   -  No Fan Chat +
Fan Access:
+
+
+ +
+ +
+  Chat   +  No Fan Chat +

invite musicians

+
- Start typing:
+ +
+
+ Start typing friends' names: +
+
+ CHOOSE FRIENDS +
+
+ +

+
-
- Invite friends and contacts to join you on JamKazam from:

-
- <%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>  Facebook + +
+ Invite friends and contacts to join you on JamKazam from:
-
- <%= image_tag("content/icon_twitter.png", :size => "24x24", :align => "absmiddle") %>  Twitter -
-
- <%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>  E-mail +
+
+
+ <%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %> +
+
Facebook
+
+
+
+ <%= image_tag("content/icon_twitter.png", :size => "24x24", :align => "absmiddle") %> +
+
Twitter
+
+
+
+ <%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %> +
+
Google+
+
+
+
+ <%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %> +
+
E-mail
+

-
-
- -
-
- I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance with the JamKazam Terms of Service. +
+
+ +
+
+ I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance with the JamKazam Terms of Service. +

diff --git a/app/views/clients/_genreSelector.html.erb b/app/views/clients/_genreSelector.html.erb index a7885943c..f01cc25c6 100644 --- a/app/views/clients/_genreSelector.html.erb +++ b/app/views/clients/_genreSelector.html.erb @@ -1,4 +1,7 @@ -
+ + + + + + \ No newline at end of file diff --git a/spec/javascripts/createSession.spec.js b/spec/javascripts/createSession.spec.js index eab6f64f2..f184ad24a 100644 --- a/spec/javascripts/createSession.spec.js +++ b/spec/javascripts/createSession.spec.js @@ -13,13 +13,14 @@ var selectors = { form: '#create-session-form', - genres: '#genre-list-items', + genres: '#genre-list', description: '#description' }; function makeValid() { - var genre = '
1
'; - $(selectors.genres, $(selectors.form)).append(genre); + //var genre = '
1
'; + $(selectors.genres).val('african'); + //$(selectors.genres, $(selectors.form)).append(genre); $(selectors.description).val('XYZ'); } @@ -48,7 +49,7 @@ }); it("should populate genres select", function() { css.loadGenres(); - expect($(selectors.genres + ' .list-item-text', $(selectors.form).length).toEqual(2); + expect($(selectors.genres, $(selectors.form).length).toEqual(2); }); }); @@ -121,20 +122,20 @@ expect(errs).toBeNull(); }); - it("should fail with > 3 genres", function() { - var htm = '
2
' + - '
3
' + - '
4
' + - '
5
'; - $(selectors.genres, $(selectors.form)).append(htm); - var errs = css.validateForm(); - // Verify that we have an error. - expect(errs).toBeTruthy(); - // Verify that the error is a two-part list - expect(errs[0].length).toEqual(2); - // Verify that the first part is a selector for the problem. - expect(errs[0][0]).toEqual('#genre-list-items'); - }); + // it("should fail with > 3 genres", function() { + // var htm = '
2
' + + // '
3
' + + // '
4
' + + // '
5
'; + // $(selectors.genres, $(selectors.form)).append(htm); + // var errs = css.validateForm(); + // // Verify that we have an error. + // expect(errs).toBeTruthy(); + // // Verify that the error is a two-part list + // expect(errs[0].length).toEqual(2); + // // Verify that the first part is a selector for the problem. + // expect(errs[0][0]).toEqual('#genre-list-items'); + // }); it("should fail with 0 genres", function() { $(selectors.genres, $(selectors.form)).html(''); @@ -142,7 +143,7 @@ // Verify that we have an error. expect(errs).toBeTruthy(); // Verify that the first part is a selector for the problem. - expect(errs[0][0]).toEqual('#genre-list-items'); + expect(errs[0][0]).toEqual('#genre-list'); }); it("should fail with empty description", function() { diff --git a/spec/requests/bands_api_spec.rb b/spec/requests/bands_api_spec.rb index 6f29f40e9..1341a8f8b 100644 --- a/spec/requests/bands_api_spec.rb +++ b/spec/requests/bands_api_spec.rb @@ -100,7 +100,7 @@ describe "Band API", :type => :api do it "should allow band creation" do - last_response = create_band(user, "My Band", "http://www.myband.com", "Bio", "Apex", "NC", "USA", ["african", "hip hop", "country"], "www.photos.com", "www.logos.com") + last_response = create_band(user, "My Band", "http://www.myband.com", "Bio", "Apex", "NC", "USA", ["country"], "www.photos.com", "www.logos.com") last_response.status.should == 201 new_band = JSON.parse(last_response.body) @@ -113,7 +113,7 @@ describe "Band API", :type => :api do band_details = JSON.parse(last_response.body) band_details["id"].should == new_band["id"] band_details["musicians"][0]["id"].should == user.id - band_details["genres"].size.should == 3 + band_details["genres"].size.should == 1 end it "should prevent bands with less than 1 genre" do @@ -123,8 +123,8 @@ describe "Band API", :type => :api do error_msg["message"].should == ValidationMessages::GENRE_MINIMUM_NOT_MET end - it "should prevent bands with more than 3 genres" do - last_response = create_band(user, "My Band", "http://www.myband.com", "Bio", "Apex", "NC", "USA", ["african", "hip hop", "country", "reggae"], "www.photos.com", "www.logos.com") + it "should prevent bands with more than 1 genre" do + last_response = create_band(user, "My Band", "http://www.myband.com", "Bio", "Apex", "NC", "USA", ["african", "country"], "www.photos.com", "www.logos.com") last_response.status.should == 400 error_msg = JSON.parse(last_response.body) error_msg["message"].should == ValidationMessages::GENRE_LIMIT_EXCEEDED @@ -136,16 +136,16 @@ describe "Band API", :type => :api do before(:each) do login(user.email, user.password, 200, true) band.genres << Genre.find("hip hop") - band.genres << Genre.find("african") - band.genres << Genre.find("country") + #band.genres << Genre.find("african") + #band.genres << Genre.find("country") user.bands << band end it "should allow user to update attributes of band A" do - band.genres.size.should == 3 + band.genres.size.should == 1 - last_response = update_band(user, band.id, "Brian's Band", "http://www.briansband.com", "Bio", "Apex", "NC", "USA", ["african", "blues"], "www.photos.com", "www.logos.com") + last_response = update_band(user, band.id, "Brian's Band", "http://www.briansband.com", "Bio", "Apex", "NC", "USA", ["african"], "www.photos.com", "www.logos.com") last_response.status.should == 200 updated_band = JSON.parse(last_response.body) @@ -153,7 +153,7 @@ describe "Band API", :type => :api do # spot check fields in response entity updated_band["name"].should == "Brian's Band" updated_band["website"].should == "http://www.briansband.com" - updated_band["genres"].size.should == 2 + updated_band["genres"].size.should == 1 # retrieve the band to get details last_response = get_band(user, band.id) @@ -162,7 +162,7 @@ describe "Band API", :type => :api do band_details["name"].should == "Brian's Band" band_details["website"].should == "http://www.briansband.com" band_details["biography"].should == "Bio" - band_details["genres"].size.should == 2 + band_details["genres"].size.should == 1 end it "should allow user to create recording for band A" do @@ -282,8 +282,8 @@ describe "Band API", :type => :api do before(:each) do login(user.email, user.password, 200, true) band.genres << Genre.find("hip hop") - band.genres << Genre.find("african") - band.genres << Genre.find("country") + #band.genres << Genre.find("african") + #band.genres << Genre.find("country") end it "should not allow user to update attributes of band A" do diff --git a/spec/requests/users_api_spec.rb b/spec/requests/users_api_spec.rb index b5e0ed71a..752281b40 100644 --- a/spec/requests/users_api_spec.rb +++ b/spec/requests/users_api_spec.rb @@ -468,7 +468,7 @@ describe "User API", :type => :api do it "should allow musician to create recordings" do # create public recording public_description = "My Public Recording" - last_response = create_user_recording(user, user, public_description, true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, public_description, true, ["african"]) last_response.status.should == 201 recording = JSON.parse(last_response.body) recording["description"].should == public_description @@ -486,7 +486,7 @@ describe "User API", :type => :api do private_recording["genres"][0]["id"].should == "rock" # update the second recording's description, public flag, and genre - last_response = update_user_recording(user, user, private_recording["id"], "My Recording 3", true, ["country", "hip hop"]) + last_response = update_user_recording(user, user, private_recording["id"], "My Recording 3", true, ["country"]) last_response.status.should == 200 recording = JSON.parse(last_response.body) recording["description"].should == "My Recording 3" @@ -498,23 +498,23 @@ describe "User API", :type => :api do recording = JSON.parse(last_response.body) recording["description"].should == "My Recording 3" recording["public"].should == true - recording["genres"].size.should == 2 + recording["genres"].size.should == 1 end it "should not allow fan to create recordings" do - last_response = create_user_recording(fan, fan, "Fan Recording", true, ["african", "hip hop", "country"]) + last_response = create_user_recording(fan, fan, "Fan Recording", true, ["african"]) last_response.status.should == 403 end it "should allow creator to see public and private recordings in list" do # create public recording public_description = "My Public Recording" - last_response = create_user_recording(user, user, public_description, true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, public_description, true, ["african"]) last_response.status.should == 201 # create private recording private_description = "My Private Recording" - last_response = create_user_recording(user, user, private_description, false, ["african", "hip hop"]) + last_response = create_user_recording(user, user, private_description, false, ["african"]) last_response.status.should == 201 # get all recordings as creator @@ -526,7 +526,7 @@ describe "User API", :type => :api do it "should allow creator to see private recording details" do # create private recording private_description = "My Private Recording" - last_response = create_user_recording(user, user, private_description, false, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, private_description, false, ["african"]) last_response.status.should == 201 private_recording = JSON.parse(last_response.body) private_recording["description"].should == private_description @@ -540,12 +540,12 @@ describe "User API", :type => :api do it "should not allow non-creator to see private recordings in list" do # create public recording public_description = "My Public Recording" - last_response = create_user_recording(user, user, public_description, true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, public_description, true, ["country"]) last_response.status.should == 201 # create private recording private_description = "My Private Recording" - last_response = create_user_recording(user, user, private_description, false, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, private_description, false, ["country"]) last_response.status.should == 201 # get all recordings as non-creator @@ -561,7 +561,7 @@ describe "User API", :type => :api do it "should not allow non-creator to see private recording details" do # create private recording private_description = "My Private Recording" - last_response = create_user_recording(user, user, private_description, false, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, private_description, false, ["country"]) last_response.status.should == 201 private_recording = JSON.parse(last_response.body) private_recording["description"].should == private_description @@ -574,7 +574,7 @@ describe "User API", :type => :api do it "should allow user to create favorites" do # create recording first - last_response = create_user_recording(user, user, "My Recording", true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, "My Recording", true, ["country"]) last_response.status.should == 201 recording = JSON.parse(last_response.body) @@ -600,7 +600,7 @@ describe "User API", :type => :api do it "should not allow user to create favorite for another user" do # create recording first - last_response = create_user_recording(user, user, "My Recording", true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, "My Recording", true, ["country"]) last_response.status.should == 201 recording = JSON.parse(last_response.body) @@ -611,7 +611,7 @@ describe "User API", :type => :api do it "should allow user to delete favorites" do # create recording first - last_response = create_user_recording(user, user, "My Recording", true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, "My Recording", true, ["country"]) last_response.status.should == 201 recording = JSON.parse(last_response.body) @@ -628,7 +628,7 @@ describe "User API", :type => :api do it "should not allow user to delete another user's favorites" do # create recording first - last_response = create_user_recording(user, user, "My Recording", true, ["african", "hip hop", "country"]) + last_response = create_user_recording(user, user, "My Recording", true, ["country"]) last_response.status.should == 201 recording = JSON.parse(last_response.body)