* fix alignment/scroll issues on samples page

This commit is contained in:
Seth Call 2016-01-15 20:18:58 -06:00
parent e14484164f
commit 35839c1b4d
3 changed files with 119 additions and 102 deletions

View File

@ -378,7 +378,7 @@
}
function formatTitle(title) {
return title && title.length > 30 ? title.substring(0, 30) + "..." : title;
return title;
}
// This function is a bit of a mess. It was pulled

View File

@ -2,35 +2,65 @@
@import "site_validator.css.scss";
.profile-online-sample-controls {
table.profile-table {
.profile-table {
width: 100%;
tr:nth-child(even) td {
div:nth-child(even) .cell {
padding: 0.25em 0.25em 1em 0.25em;
vertical-align: top;
}
tr:nth-child(odd) td {
div:nth-child(odd) .cell {
padding: 0.25em;
vertical-align: top;
}
}
.profile-row {
@include border_box_sizing;
clear:both;
margin-bottom:20px;
label {
display:block;
margin-bottom:5px;
}
.sample.site_validator {
input[type="text"] {
width:calc(100% - 70px)
}
min-height:25px;
}
}
.quarter-cell {
@include border_box_sizing;
float:left;
width:25%;
}
.thirds-cell {
@include border_box_sizing;
float:left;
width:33.33%;
}
.sample-list {
border: 1px inset #cfcfcf;
padding: 0.5em;
min-height:150px;
margin-top:20px;
.empty {
font-style: italic;
}
min-height: 150px;
overflow: scroll;
overflow: auto;
.close-button {
cursor:pointer;
}
}
table.control-table {
width: 100%;
}
.sample-row {
position: relative;
clear: both;
@ -45,7 +75,19 @@
margin: 3px 30px 15px 0px;
}
.add-recording-source {
float:right;
}
.site_validator {
min-height:44px;
.btn-add-jk-recording {
margin: 1px 1px 2px 2px;
vertical-align: top;
}
a, .spinner-small {
margin: 1px 1px 2px 2px;
vertical-align: top;

View File

@ -1,100 +1,75 @@
.profile-online-sample-controls
table.profile-table
tr
td colspan="25%": label Website (URL):
td colspan="25%": label SoundCloud (username):
td colspan="25%": label ReverbNation (username):
td colspan="25%": label Bandcamp (username):
tr
td colspan="25%"
table.control-table: tr.url_validator.presence.site_validator
td colspan="100%"
input.website maxlength="4000" type="text"
td
span.spinner-small
td colspan="25%"
table.control-table: tr.soundcloud_validator.presence.site_validator
td colspan="100%"
input.soundcloud-username maxlength="100" type="text"
td
span.spinner-small
td colspan="25%"
table.control-table: tr.reverbnation_validator.presence.site_validator
td colspan="100%"
input.reverbnation-username maxlength="100" type="text"
td
span.spinner-small
td colspan="25%"
table.control-table: tr.bandcamp_validator.presence.site_validator
td colspan="100%"
input.bandcamp-username maxlength="100" type="text"
td
span.spinner-small
.profile-table
.profile-row
.quarter-cell
label Website (URL):
.url_validator.presence.site_validator
input.website maxlength="4000" type="text"
span.spinner-small
.quarter-cell
label SoundCloud (username):
.soundcloud_validator.presence.site_validator
input.soundcloud-username maxlength="100" type="text"
span.spinner-small
.quarter-cell
label ReverbNation (username):
.reverbnation_validator.presence.site_validator
input.reverbnation-username maxlength="100" type="text"
span.spinner-small
tr
td colspan="25%": label Fandalism (username):
td colspan="25%": label
| YouTube 
a href="https://support.google.com/youtube/answer/2657968?ref_topic=3024172&hl=en" rel="external" (channel name)
| :
td colspan="25%": label
| Facebook 
a href="https://www.facebook.com/help/174987089221178" rel="external" (page name)
| :
td colspan="25%": label Twitter (username):
tr
td colspan="25%"
table.control-table: tr.fandalism_validator.presence.site_validator
td colspan="100%"
input.fandalism-username maxlength="100" type="text"
td
span.spinner-small
td colspan="25%"
table.control-table: tr.youtube_validator.presence.site_validator
td colspan="100%"
input.youtube-username maxlength="100" type="text"
td
span.spinner-small
td colspan="25%"
table.control-table: tr.facebook_validator.presence.site_validator
td colspan="100%"
input.facebook-username maxlength="100" type="text"
td
span.spinner-small
td colspan="25%"
table.control-table: tr.twitter_validator.presence.site_validator
td colspan="100%"
input.twitter-username maxlength="100" type="text"
td
span.spinner-small
tr
td colspan="33.33%": label JamKazam Recordings:
td colspan="33.33%": label SoundCloud Recordings (URL):
td colspan="33.33%": label YouTube Videos (URL):
tr.add-samples-controls-row
td colspan="33.33%"
a.btn-add-jk-recording.button-grey BROWSE
td colspan="33.33%"
table.control-table: tr.rec_soundcloud_validator.sample.site_validator
td colspan="100%"
input.soundcloud-recording maxlength="4000" type="text"
td
a.btn-add-soundcloud-recording.button-grey.add-recording-source ADD
span.spinner-small
td colspan="33.33%"
table.control-table: tr.rec_youtube_validator.sample.site_validator
td colspan="100%"
input.youtube-video maxlength="4000" type="text"
td
a.btn-add-youtube-video.button-grey.add-recording-source ADD
span.spinner-small
tr.add-samples-list-row
td colspan="33.33%"
.quarter-cell
label Bandcamp (username):
.bandcamp_validator.presence.site_validator
input.bandcamp-username maxlength="100" type="text"
span.spinner-small
.profile-row
.quarter-cell.cell
label Fandalism (username):
.fandalism_validator.presence.site_validator
input.fandalism-username maxlength="100" type="text"
span.spinner-small
.quarter-cell.cell
label
| YouTube 
a href="https://support.google.com/youtube/answer/2657968?ref_topic=3024172&hl=en" rel="external" (channel name)
|
.youtube_validator.presence.site_validator
input.youtube-username maxlength="100" type="text"
span.spinner-small
.quarter-cell.cell
label
| Facebook 
a href="https://www.facebook.com/help/174987089221178" rel="external" (page name)
|
.facebook_validator.presence.site_validator
input.facebook-username maxlength="100" type="text"
span.spinner-small
.quarter-cell.cell
label Twitter (username):
.twitter_validator.presence.site_validator
input.twitter-username maxlength="100" type="text"
span.spinner-small
.profile-row.recordings
.thirds-cell.cell
label JamKazam Recordings:
.sample.site_validator
a.btn-add-jk-recording.button-grey BROWSE
.sample-list source-type='jamkazam'
.empty No recordings
td colspan="33.33%"
.thirds-cell.cell
label SoundCloud Recordings (URL):
.rec_soundcloud_validator.sample.site_validator
input.soundcloud-recording maxlength="4000" type="text"
a.btn-add-soundcloud-recording.button-grey.add-recording-source ADD
span.spinner-small
.sample-list source-type='soundcloud'
.empty No recordings
td colspan="33.33%"
.thirds-cell.cell
label YouTube Videos (URL):
.rec_youtube_validator.sample.site_validator
input.youtube-video maxlength="4000" type="text"
a.btn-add-youtube-video.button-grey.add-recording-source ADD
span.spinner-small
.sample-list source-type='youtube'
.empty No recordings