From 6dab3463059e82b320aafa5f2df80da39b8bc735 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Thu, 10 Jan 2013 22:43:30 -0500 Subject: [PATCH] VRFS-201 create session mockup integration --- app/assets/javascripts/createSession.js | 91 ++++++- app/assets/stylesheets/client/common.css.scss | 1 + .../stylesheets/client/createSession.css.scss | 83 ++++++ .../stylesheets/client/jamkazam.css.scss | 111 +++++++- .../stylesheets/client/screen_common.css.scss | 23 +- app/views/clients/_createSession.html.erb | 243 +++++++++--------- app/views/clients/_footer.html.erb | 2 +- app/views/layouts/client.html.erb | 1 + 8 files changed, 418 insertions(+), 137 deletions(-) create mode 100644 app/assets/stylesheets/client/createSession.css.scss diff --git a/app/assets/javascripts/createSession.js b/app/assets/javascripts/createSession.js index 5b514d1ff..9fb5b7388 100644 --- a/app/assets/javascripts/createSession.js +++ b/app/assets/javascripts/createSession.js @@ -99,8 +99,6 @@ Message from Seth on sequence for creating/joining sessions: errors.push(['textarea[name="description"]', "Please enter a description."]); } - - return (errors.length) ? errors : null; } @@ -199,21 +197,39 @@ Message from Seth on sequence for creating/joining sessions: function events() { $('#create-session-form').submit(submitForm); $('#added-invitations').on("click", ".invitation span", removeInvitation); + $('#genre-list-header').on("click", toggleGenreBox); + $('#genre-list-arrow').on("click", toggleGenreBox); + $('#musician-access').change(toggleMusicianAccess); + $('#fan-access').change(toggleFanAccess); } function removeInvitation(evt) { $(evt.currentTarget).closest('.invitation').remove(); } - function genresLoaded(response) { - var options = []; - var optionTemplate = $('#template-genre-option').html(); - $.each(response, function() { - var d = {value: this.id, label: this.description}; - var opt = context.JK.fillTemplate(optionTemplate, d); - options.push(opt); - }); - $('#create-session-form select[name="genres"]').html(options.join('')); + function toggleMusicianAccess() { + var value = $("#musician-access option:selected").val(); + if (value == "private") { + $("[name='musician-access-option']").attr('disabled', 'disabled'); + $("[name='musician-access-option']").parent().addClass("op50"); + + } + else { + $("[name='musician-access-option']").removeAttr('disabled'); + $("[name='musician-access-option']").parent().removeClass("op50"); + } + } + + function toggleFanAccess() { + var value = $("#fan-access option:selected").val(); + if (value == "private") { + $("[name='fan-chat-option']").attr('disabled', 'disabled'); + $("[name='fan-chat-option']").parent().addClass("op50"); + } + else { + $("[name='fan-chat-option']").removeAttr('disabled'); + $("[name='fan-chat-option']").parent().removeClass("op50"); + } } function loadGenres() { @@ -225,9 +241,60 @@ Message from Seth on sequence for creating/joining sessions: }); } + function genresLoaded(response) { + $.each(response, function() { + var template = $('#template-genre-option').html(); + var genreOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.description}); + $('#genre-list-items').append(genreOptionHtml); + //$('#genre-list-items').append("
" + this.description + "
"); + }); + } + + function toggleGenreBox() { + var boxHeight = $('#genre-list').css("height"); + // TODO: clean this up (check class name of arrow to determine current state) + if (boxHeight == "20px") { + $('#genre-list').css({height: "auto"}); + $('#genre-list-arrow').removeClass("arrow-down").addClass("arrow-up"); + + } + else { + $('#genre-list').css({height: "20px"}); + $('#genre-list-arrow').removeClass("arrow-up").addClass("arrow-down"); + } + } + + function loadBands() { + var url = "/api/users/" + context.JK.currentUserId + "/bands"; + $.ajax({ + type: "GET", + url: url, + success: bandsLoaded + }); + } + + function bandsLoaded(response) { + $.each(response, function() { + var template = $('#template-band-option').html(); + var bandOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.name}); + $('#band-list').append(bandOptionHtml); + }); + } + + function enterText(div,v) { + cv = $(div).value; + if (cv != v && v != '' && cv != '') { + $(div).value = cv; + } + else { + $(div).value = v; + } + } + function initialize() { events(); loadGenres(); + loadBands(); var screenBindings = { 'afterShow': afterShow, 'beforeShow': beforeShow }; app.bindScreen('createSession', screenBindings); } @@ -237,7 +304,9 @@ Message from Seth on sequence for creating/joining sessions: this.resetForm = resetForm; this.submitForm = submitForm; this.loadGenres = loadGenres; + this.loadBands = loadBands; this.validateForm = validateForm; + this.toggleGenreBox = toggleGenreBox; return this; }; diff --git a/app/assets/stylesheets/client/common.css.scss b/app/assets/stylesheets/client/common.css.scss index 9a5df1043..0f5e2104f 100644 --- a/app/assets/stylesheets/client/common.css.scss +++ b/app/assets/stylesheets/client/common.css.scss @@ -10,6 +10,7 @@ $ColorText: #ffffff; /* White */ $ColorLink: #9ec030; /* Lime */ $ColorSidebarText: #a0b9bd; $ColorScreenBackground: lighten($ColorUIBackground, 10%); +$ColorTextBoxBackground: #c5c5c5; $color1: #006AB6; /* mid blue */ $color2: #9A9084; /* warm gray */ diff --git a/app/assets/stylesheets/client/createSession.css.scss b/app/assets/stylesheets/client/createSession.css.scss new file mode 100644 index 000000000..2f4cdc506 --- /dev/null +++ b/app/assets/stylesheets/client/createSession.css.scss @@ -0,0 +1,83 @@ +.content-scroller { + height:inherit; + position:relative; + display:block; + overflow:auto; +} + +.content-wrapper { + padding:20px 30px 20px 36px; + font-size:15px; + color:#ccc; + border-bottom: dotted 1px #444; +} + +.content-wrapper h2 { + color:#fff; + font-weight:600; + font-size:24px; +} + +.session-left { + width:50%; + float:left; +} + +.session-right { + width:45%; + float:right; + font-size:13px; +} + +.session-description { + padding:5px; + width:100%; + height:80px; +} + +.friendbox { + padding:5px; + width:100%; + height:60px; +} + +.terms-checkbox { + float:left; + display:block; + margin-right:10px; +} + +.terms { + font-size:11px; + width:85%; + overflow:hidden; + float:left; + display:block; +} + +.invite-friend { + margin:0px 4px 4px 4px; + float:left; + display:block; + background-color:#666; + color:#fff; + font-size:12px; + -webkit-border-radius: 7px; + border-radius: 7px; + padding:2px 2px 2px 4px; +} + +div.friendbox { + background-color:#c5c5c5; + border:none; + -webkit-box-shadow: inset 2px 2px 3px 0px #888; + box-shadow: inset 2px 2px 3px 0px #888; + color:#333; +} + +div.friendbox input[type=text] { + -webkit-box-shadow: inset 0px 0px 0px 0px #888; + box-shadow: inset 0px 0px 0px 0px #888; + color:#666; + font-style:italic; +} \ No newline at end of file diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index 566c06e08..8454608b0 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -30,10 +30,35 @@ a:hover { text-decoration: underline; } +a.arrow-up { + float:right; + margin-right:5px; + display:block; + margin-top:6px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #333; +} + +a.arrow-down { + float:right; + margin-right:5px; + display:block; + margin-top:6px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 7px solid #333; +} + form { clear:both; margin: 1em; } + form .body { /* TODO - size with layout */ width: 100%; @@ -41,6 +66,7 @@ form .body { max-height: 40%; overflow:auto; } + fieldset { /*border: 1px solid #555;*/ /*padding: 1em;*/ @@ -48,9 +74,11 @@ fieldset { /*width:auto;*/ /*float:left;*/ } + fieldset.unstyled { border: 1px solid #f00; } + .formrow { margin: 1em; padding: 1em; @@ -71,6 +99,19 @@ label { padding:8px; } +input[type="button"] { + margin:0px 8px 0px 8px; + background-color:#666; + border: solid 1px #868686; + outline:solid 2px #666; + padding:3px 10px; + font-family:raleway; + font-size:12px; + font-weight:300; + cursor:pointer; + color:#ccc; +} + .hidden { display:none; } @@ -79,16 +120,17 @@ label { background-color: shade($color7, 10%); } - .avatar { display: block; float:left; } + .avatar.medium { width: 48px; height: 48px; margin-right: 12px; } + .avatar.small { width: 32px; height: 32px; @@ -141,4 +183,71 @@ label { .autocomplete strong { font-weight:normal; color:#3399FF; } +.multiselect-dropdown { + position:relative; + z-index:99; + width: 175px; + -webkit-border-radius: 6px; + border-radius: 6px; + background-color:#C5C5C5; + border: none; + color:#333; + font-weight:400; + padding:0px 0px 0px 8px; + height:20px; + line-height:20px; + overflow:hidden; + -webkit-box-shadow: inset 2px 2px 3px 0px #888; + box-shadow: inset 2px 2px 3px 0px #888; +} +.multiselect-dropdown a { + color:#333; + text-decoration:none; +} + +.list-items { + float:left; + width:175px; + height:127px; + overflow:auto; +} + +.list-item-text { + font-size:11px; + float:left; + width:135px; +} + +input[type="text"] { + background-color: $ColorTextBoxBackground; +} + +.mr10 { + margin-right:10px; +} + +.mr20 { + margin-right:20px; +} + +.mr30 { + margin-right:30px; +} + +.ml10 { + margin-left:10px; +} + +.ml20 { + margin-left:20px; +} + +.ml30 { + margin-left:30px; +} + +.op50 { + opacity: .5; + -ms-filter: "alpha(opacity=50)"; +} \ No newline at end of file diff --git a/app/assets/stylesheets/client/screen_common.css.scss b/app/assets/stylesheets/client/screen_common.css.scss index b93afebdc..c2ad031c3 100644 --- a/app/assets/stylesheets/client/screen_common.css.scss +++ b/app/assets/stylesheets/client/screen_common.css.scss @@ -17,13 +17,17 @@ background-color:#ED3618; h1 { - margin: 0px 0px 0px 0px; + margin: -6px 0px 0px 0px; padding:0; float:left; font-weight:100; font-size:24px; } + .content-icon { + margin-right:10px; + float:left; + } .content-nav { float:right; @@ -70,6 +74,7 @@ width:100%; /*text-align:right;*/ } + .screen.secondary .footer button { margin:1em 0em 1em 1em; } @@ -90,3 +95,19 @@ .screen.secondary p.current { font-weight: bold; } + +.left { + float:left; +} + +.right { + float:right; +} + +textarea { + background-color: $ColorTextBoxBackground; + border:none; + -webkit-box-shadow: inset 2px 2px 3px 0px #888; + box-shadow: inset 2px 2px 3px 0px #888; + color:#333; +} \ No newline at end of file diff --git a/app/views/clients/_createSession.html.erb b/app/views/clients/_createSession.html.erb index c7cf9a556..33a8ef579 100644 --- a/app/views/clients/_createSession.html.erb +++ b/app/views/clients/_createSession.html.erb @@ -1,136 +1,127 @@
-
-

Create Session

- <%= render "screen_navigation" %> -
-
-
-
- Unstyled and Lots of things omitted - -
-
Musician Access - - -
-
+ <%= render "screen_navigation" %> +
+ +
+
+ +
+

session info

+
+ Description:
+ +
+
+
+ Genre:
+
+
+ Choose up to 3 genres +
+ +
+
+
+
+
+ Band:
+ +
-
-
Musician Access Method - - -
-
+
+
-
- -
+ Musician Access:
+ +
+  Open   +  By Approval +
-
- -
+

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

invite musicians

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

+
+ <%= 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_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 awith the JamKazam Terms of Service. +
+
+
+
+   + +
+
- - -
- -
+ + +
@@ -140,9 +131,15 @@ + + + +
@@ -260,9 +257,9 @@
- - - + + +
diff --git a/app/views/clients/_footer.html.erb b/app/views/clients/_footer.html.erb index 081ffd87e..3a475b130 100644 --- a/app/views/clients/_footer.html.erb +++ b/app/views/clients/_footer.html.erb @@ -1,6 +1,6 @@

- Copyright © 2012 JamKazam, Inc. All Rights Reserved. + Copyright © <%= Time.now.year %> JamKazam, Inc. All Rights Reserved.

contact | diff --git a/app/views/layouts/client.html.erb b/app/views/layouts/client.html.erb index 07500a21d..f60e089b8 100644 --- a/app/views/layouts/client.html.erb +++ b/app/views/layouts/client.html.erb @@ -19,6 +19,7 @@ <%= stylesheet_link_tag "client/session", media: "all" %> <%= stylesheet_link_tag "client/search", media: "all" %> <%= stylesheet_link_tag "client/lato", media: "all" %> + <%= stylesheet_link_tag "client/createSession", media: "all" %> <%= include_gon %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %>