VRFS-294 Resizing Create Session View tweaks for ~1024 px width
This commit is contained in:
Daniel Weigh
parent
adfc22364a
commit
c49406d467
|
|
@ -1,25 +1,28 @@
|
|||
.session-left {
|
||||
width:40%;
|
||||
float:left;
|
||||
padding-top:10px;
|
||||
margin-left:35px;
|
||||
.session-wrapper {
|
||||
padding: 0 35px;
|
||||
white-space: initial;
|
||||
|
||||
> div.session {
|
||||
width: 50%;
|
||||
padding-top: 10px;
|
||||
|
||||
&.right {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#btn-choose-friends {
|
||||
margin:0;
|
||||
}
|
||||
#create-session-genre select, #create-session-band select {
|
||||
width:145px;
|
||||
min-width:140px;
|
||||
}
|
||||
|
||||
#find-session-genre select, #find-session-musician select {
|
||||
width:145px;
|
||||
}
|
||||
|
||||
.session-right {
|
||||
width:50%;
|
||||
float:right;
|
||||
font-size:13px;
|
||||
padding-top:10px;
|
||||
margin-right:35px;
|
||||
}
|
||||
|
||||
.session-description {
|
||||
padding:5px;
|
||||
|
|
@ -32,12 +35,6 @@
|
|||
line-height:17px;
|
||||
}
|
||||
|
||||
.friendbox {
|
||||
padding:5px;
|
||||
height:60px;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
.terms-checkbox {
|
||||
float:left;
|
||||
display:block;
|
||||
|
|
@ -51,19 +48,22 @@
|
|||
white-space:normal;
|
||||
}
|
||||
|
||||
div.friendbox {
|
||||
.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;
|
||||
}
|
||||
padding:5px;
|
||||
height:60px;
|
||||
|
||||
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;
|
||||
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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.invitation {
|
||||
|
|
|
|||
|
|
@ -14,151 +14,148 @@
|
|||
<div class="content-scroller">
|
||||
<div class="content-wrapper">
|
||||
<!-- left column -->
|
||||
<div class="session-left">
|
||||
<div class="session-wrapper">
|
||||
<div class="session left">
|
||||
|
||||
<h2>session info</h2>
|
||||
<h2>session info</h2>
|
||||
<br />
|
||||
|
||||
<br />
|
||||
|
||||
<div id="divGenre" class="left mr20">
|
||||
<div class="mb5">Genre:</div>
|
||||
<div id="create-session-genre">
|
||||
<%= render "genreSelector" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<div class="mb5">Band:</div>
|
||||
<div id="create-session-band">
|
||||
<select id="band-list">
|
||||
<option value="">Not a Band Session</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br clear="all" /><br />
|
||||
|
||||
<div id="divDescription">
|
||||
<div class="mb5">Description:</div>
|
||||
<div>
|
||||
<textarea rows=4 id="description" name="description" class="session-description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br clear="all" />
|
||||
|
||||
<div class="mb5">Musician Access:</div>
|
||||
<div>
|
||||
<div>
|
||||
<select id="musician-access" class="left mr20">
|
||||
<option selected="selected" value="true">Public</option>
|
||||
<option value="false">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="left icheckbuttons">
|
||||
<input type="radio" name="musician-access-option" id="musician-access-option-false" checked="checked" value="false" class="musician-access-false" /><label for="musician-access-option-false" class="radio-text">Open</label>
|
||||
<input type="radio" name="musician-access-option" id="musician-access-option-true" value="true" class="musician-access-true" /><label for="musician-access-option-true" class="radio-text">By Approval</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br clear="all" /><br />
|
||||
|
||||
<div class="mb5">Fan Access:</div>
|
||||
<div>
|
||||
<div>
|
||||
<select id="fan-access" class="left mr20">
|
||||
<option value="true">Public</option>
|
||||
<option selected="selected" value="false">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="left icheckbuttons">
|
||||
<input type="radio" name="fan-chat-option" id="fan-chat-option-true" value="true" class="fan-chat-option-true" disabled="disabled" /><label for="fan-chat-option-true" class="radio-text">Chat</label>
|
||||
<input type="radio" name="fan-chat-option" id="fan-chat-option-false" checked="checked" class="fan-chat-option-false" value="false" disabled="disabled" /><label for="fan-chat-option-false" class="radio-text">No Fan Chat</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- right column -->
|
||||
<div class="session-right">
|
||||
<h2>invite musicians</h2>
|
||||
|
||||
<br />
|
||||
|
||||
<div style="width:78%;">
|
||||
<div class="left" style="margin-top:10px;">
|
||||
Start typing friends' names or:
|
||||
</div>
|
||||
<div class="right" layout-link="select-friends">
|
||||
<a href="#" id="btn-choose-friends" class="button-grey">CHOOSE FRIENDS</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearall"></div>
|
||||
<br />
|
||||
|
||||
<!-- friend invitation box -->
|
||||
<div class="friendbox">
|
||||
<div id="selected-friends"></div>
|
||||
<input id="friend-input" type="text" placeholder="Type a friend's name" />
|
||||
</div>
|
||||
|
||||
<div class="mt35 mb15">
|
||||
Invite friends and contacts to join you on JamKazam from:
|
||||
</div>
|
||||
<div style="width:78%">
|
||||
<div class="left mr20">
|
||||
<div class="left">
|
||||
<a class="btn-email-invitation">
|
||||
<%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">E-mail</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="left mr20">
|
||||
<div class="left">
|
||||
<a id="btn-facebook-invitation">
|
||||
<%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">Facebook</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- <div class="left mr20">
|
||||
<div class="left">
|
||||
<a href="/#/createSession" title="This feature is not yet available.">
|
||||
<%= image_tag("content/icon_twitter.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">Twitter</div>
|
||||
</div> -->
|
||||
<div class="left left">
|
||||
<div class="left">
|
||||
<a class="btn-gmail-invitation">
|
||||
<%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">Google+</div>
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
<br clear="all"/>
|
||||
<br clear="all"/>
|
||||
<!-- terms -->
|
||||
<div id="divIntellectualProperty">
|
||||
<div class="terms-checkbox icheckbuttons">
|
||||
<input type="checkbox" id="intellectual-property" class="intellectual-property" />
|
||||
</div>
|
||||
<div id="divTerms" class="terms ml25">
|
||||
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons CC BY-NC-SA license</a> in accordance with the <a rel="external" href="http://www.jamkazam.com/corp/terms" target="_blank">JamKazam Terms of Service</a>.
|
||||
</div>
|
||||
</div>
|
||||
<br clear="all"/>
|
||||
<br clear="all"/>
|
||||
<div class="right mt10">
|
||||
<div id="divDescription">
|
||||
<div class="mb5">Description:</div>
|
||||
<div>
|
||||
<a href="#" layout-link="home" class="button-grey">CANCEL</a>
|
||||
<a href="#" id="btn-create-session" class="button-orange">JAM!</a>
|
||||
<textarea rows=4 id="description" name="description" class="session-description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="divGenre" class="left mr20 mt10">
|
||||
<div class="mb5">Genre:</div>
|
||||
<div id="create-session-genre">
|
||||
<%= render "genreSelector" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left mt10">
|
||||
<div class="mb5">Band:</div>
|
||||
<div id="create-session-band">
|
||||
<select id="band-list">
|
||||
<option value="">Not a Band Session</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br clear="all" /><br />
|
||||
|
||||
<div class="mb5">Musician Access:</div>
|
||||
<div>
|
||||
<div>
|
||||
<select id="musician-access" class="left mr20">
|
||||
<option selected="selected" value="true">Public</option>
|
||||
<option value="false">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="left icheckbuttons">
|
||||
<input type="radio" name="musician-access-option" id="musician-access-option-false" checked="checked" value="false" class="musician-access-false" /><label for="musician-access-option-false" class="radio-text">Open</label>
|
||||
<input type="radio" name="musician-access-option" id="musician-access-option-true" value="true" class="musician-access-true" /><label for="musician-access-option-true" class="radio-text">By Approval</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br clear="all" /><br />
|
||||
|
||||
<div class="mb5">Fan Access:</div>
|
||||
<div>
|
||||
<div>
|
||||
<select id="fan-access" class="left mr20">
|
||||
<option value="true">Public</option>
|
||||
<option selected="selected" value="false">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="left icheckbuttons">
|
||||
<input type="radio" name="fan-chat-option" id="fan-chat-option-true" value="true" class="fan-chat-option-true" disabled="disabled" /><label for="fan-chat-option-true" class="radio-text">Chat</label>
|
||||
<input type="radio" name="fan-chat-option" id="fan-chat-option-false" checked="checked" class="fan-chat-option-false" value="false" disabled="disabled" /><label for="fan-chat-option-false" class="radio-text">No Fan Chat</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- right column -->
|
||||
<div class="session right">
|
||||
<h2>invite musicians</h2>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<div class="right" layout-link="select-friends">
|
||||
<a href="#" id="btn-choose-friends" class="button-grey">CHOOSE FRIENDS</a>
|
||||
</div>
|
||||
<div style="margin-right:140px;">
|
||||
Start typing friends' names or:
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- friend invitation box -->
|
||||
<div class="friendbox">
|
||||
<div id="selected-friends"></div>
|
||||
<input id="friend-input" type="text" placeholder="Type a friend's name" />
|
||||
</div>
|
||||
|
||||
<div class="mt35 mb15">
|
||||
Invite friends and contacts to join you on JamKazam from:
|
||||
</div>
|
||||
<div>
|
||||
<div class="left mr20">
|
||||
<div class="left">
|
||||
<a class="btn-email-invitation">
|
||||
<%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">E-mail</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="left mr20">
|
||||
<div class="left">
|
||||
<a id="btn-facebook-invitation">
|
||||
<%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">Facebook</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- <div class="left mr20">
|
||||
<div class="left">
|
||||
<a href="/#/createSession" title="This feature is not yet available.">
|
||||
<%= image_tag("content/icon_twitter.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">Twitter</div>
|
||||
</div> -->
|
||||
<div class="left left">
|
||||
<div class="left">
|
||||
<a class="btn-gmail-invitation">
|
||||
<%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right mt5 ml5">Google+</div>
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
<br clear="all"/>
|
||||
<br clear="all"/>
|
||||
<!-- terms -->
|
||||
<div id="divIntellectualProperty">
|
||||
<div class="terms-checkbox icheckbuttons">
|
||||
<input type="checkbox" id="intellectual-property" class="intellectual-property" />
|
||||
</div>
|
||||
<div id="divTerms" class="terms ml25">
|
||||
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons CC BY-NC-SA license</a> in accordance with the <a rel="external" href="http://www.jamkazam.com/corp/terms" target="_blank">JamKazam Terms of Service</a>.
|
||||
</div>
|
||||
</div>
|
||||
<br clear="all"/>
|
||||
<br clear="all"/>
|
||||
<div class="right mt10">
|
||||
<div>
|
||||
<a href="#" layout-link="home" class="button-grey">CANCEL</a>
|
||||
<a href="#" id="btn-create-session" class="button-orange">JAM!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue