From 35839c1b4de0d2536c49e643d4a61d07bdd26010 Mon Sep 17 00:00:00 2001 From: Seth Call Date: Fri, 15 Jan 2016 20:18:58 -0600 Subject: [PATCH] * fix alignment/scroll issues on samples page --- .../javascripts/accounts_profile_samples.js | 2 +- .../client/accountProfileSamples.css.scss | 60 ++++++- .../_profile_edit_presence_controls.html.slim | 159 ++++++++---------- 3 files changed, 119 insertions(+), 102 deletions(-) diff --git a/web/app/assets/javascripts/accounts_profile_samples.js b/web/app/assets/javascripts/accounts_profile_samples.js index 5b0e9d1cd..fe9cbd870 100644 --- a/web/app/assets/javascripts/accounts_profile_samples.js +++ b/web/app/assets/javascripts/accounts_profile_samples.js @@ -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 diff --git a/web/app/assets/stylesheets/client/accountProfileSamples.css.scss b/web/app/assets/stylesheets/client/accountProfileSamples.css.scss index 76c76ebc8..9d7a6dbe0 100644 --- a/web/app/assets/stylesheets/client/accountProfileSamples.css.scss +++ b/web/app/assets/stylesheets/client/accountProfileSamples.css.scss @@ -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; diff --git a/web/app/views/clients/_profile_edit_presence_controls.html.slim b/web/app/views/clients/_profile_edit_presence_controls.html.slim index a286e14ae..482835bcb 100644 --- a/web/app/views/clients/_profile_edit_presence_controls.html.slim +++ b/web/app/views/clients/_profile_edit_presence_controls.html.slim @@ -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 \ No newline at end of file