From 9a6238e0a41f2db1746d2d978272812c074b757d Mon Sep 17 00:00:00 2001 From: Ross Moody Date: Tue, 6 Aug 2019 09:50:22 -0700 Subject: [PATCH 1/2] Admin title polish (#2089) * style * group actions with search row * consolidate page title to h4 --- app/assets/stylesheets/admin/style.scss | 26 +++++++++++++++++++ app/views/admin/channels/index.html.slim | 12 ++++----- app/views/admin/partners/index.html.slim | 11 ++++---- app/views/admin/partners/new.html.slim | 3 ++- .../admin/payout_reports/index.html.slim | 11 ++++---- app/views/admin/publishers/index.html.slim | 11 ++++---- app/views/admin/shared/_sidebar.html.slim | 2 +- .../admin/stats/contributions/index.html.slim | 3 ++- .../publisher_statistics/index.html.slim | 3 ++- .../admin/stats/referrals/index.html.slim | 3 ++- .../admin/stats/top_balances/index.html.slim | 3 ++- .../top_youtube_channels/index.html.slim | 3 ++- .../index.html.slim | 3 +-- 13 files changed, 63 insertions(+), 31 deletions(-) diff --git a/app/assets/stylesheets/admin/style.scss b/app/assets/stylesheets/admin/style.scss index fbeac5ef63..fa726d4738 100644 --- a/app/assets/stylesheets/admin/style.scss +++ b/app/assets/stylesheets/admin/style.scss @@ -1,5 +1,31 @@ @import "colors"; +// Heading and button row +.panel-heading { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 0 20px 0; +} + +.action-group { + display: grid; + grid-template-columns: 2fr 1fr; + grid-gap: 32px; + align-items: center; +} + +// Bootstrap overrides. Could be refined +.btn-default { + color: $braveGray-2 !important; + border: 1px solid $braveGray-7 !important; + margin: 0 8px; +} + +.btn-primary { + margin: 0 4px; +} + /* header */ #header { background: $braveGray-1; diff --git a/app/views/admin/channels/index.html.slim b/app/views/admin/channels/index.html.slim index 528443b64b..0f07be2e27 100644 --- a/app/views/admin/channels/index.html.slim +++ b/app/views/admin/channels/index.html.slim @@ -3,17 +3,17 @@ div.row section.panel header.panel-heading h4= "#{params[:type]&.titlecase} Channels" - = form_tag(admin_channels_path, method: "get") - .input-group - = text_field_tag(:q, params[:q], class:'form-control') - .input-group-btn - = submit_tag("Search", class: 'btn btn-default') + .action-group + = form_tag(admin_channels_path, method: "get") + .input-group + = text_field_tag(:q, params[:q], class:'form-control') + .input-group-btn + = submit_tag("Search", class: 'btn btn-default') = hidden_field_tag(:type, params[:type]) label = check_box_tag('verified', 1, params[:verified].present?, class: 'checkbox') = "Verified" - br div.panel-body div.adv-table diff --git a/app/views/admin/partners/index.html.slim b/app/views/admin/partners/index.html.slim index 9cad510322..4c24a81d03 100644 --- a/app/views/admin/partners/index.html.slim +++ b/app/views/admin/partners/index.html.slim @@ -4,11 +4,12 @@ div.row header.panel-heading.partner-container h4 Partners = link_to "Add a Partner", new_admin_partner_path, class: "btn btn-primary btn-partner" - = form_tag(admin_partners_path, method: "get") - .input-group - = text_field_tag(:q, params[:q], class:'form-control') - .input-group-btn - = submit_tag("Search", class: 'btn btn-default') + .action-group + = form_tag(admin_partners_path, method: "get") + .input-group + = text_field_tag(:q, params[:q], class:'form-control') + .input-group-btn + = submit_tag("Search", class: 'btn btn-default') .partner-filters label diff --git a/app/views/admin/partners/new.html.slim b/app/views/admin/partners/new.html.slim index fa3da7f22b..7dfa485b22 100644 --- a/app/views/admin/partners/new.html.slim +++ b/app/views/admin/partners/new.html.slim @@ -3,7 +3,8 @@ .notifications .alert.alert-warning.flash = msg -h1 Add a new partner +header.panel-heading + h4 Add a new partner = form_with url: admin_partners_path, method: :post do |f| .form-group diff --git a/app/views/admin/payout_reports/index.html.slim b/app/views/admin/payout_reports/index.html.slim index cdb47c35c8..1cf9c5c771 100644 --- a/app/views/admin/payout_reports/index.html.slim +++ b/app/views/admin/payout_reports/index.html.slim @@ -1,14 +1,13 @@ -.d-flex - h1 Payout Reports +.panel-heading + h4 Payout Reports .ml-4 = form_tag upload_settlement_report_admin_payout_reports_path, id: "settlementForm", multipart: :true label = file_field_tag :file, { class: 'd-none', id: "settlementFile", accept: ".json,application/json" } .btn.btn-primary Upload Settlement Report - .ml-4 - - toggle_text = Rails.cache.fetch('payout_in_progress') ? "Remove payout in progress" : "Set payout in progress" - = form_tag toggle_payout_in_progress_admin_payout_reports_path - = submit_tag("#{toggle_text}", class: "btn btn-primary") + - toggle_text = Rails.cache.fetch('payout_in_progress') ? "Remove payout in progress" : "Set payout in progress" + = form_tag toggle_payout_in_progress_admin_payout_reports_path + = submit_tag("#{toggle_text}", class: "btn btn-primary") javascript: document.getElementById('settlementFile').addEventListener("change", function() { diff --git a/app/views/admin/publishers/index.html.slim b/app/views/admin/publishers/index.html.slim index f7fad5e9f3..ec9fa79828 100644 --- a/app/views/admin/publishers/index.html.slim +++ b/app/views/admin/publishers/index.html.slim @@ -5,11 +5,12 @@ div.row section.panel header.panel-heading h4 Publishers - = form_tag(admin_publishers_path, method: "get") - .input-group - = text_field_tag(:q, params[:q], class:'form-control') - .input-group-btn - = submit_tag("Search", class: 'btn btn-default', name: nil) + .action-group + = form_tag(admin_publishers_path, method: "get") + .input-group + = text_field_tag(:q, params[:q], class:'form-control') + .input-group-btn + = submit_tag("Search", class: 'btn btn-default', name: nil) .form-inline.mt-1 = select_tag(:status, options_for_select(PublisherStatusUpdate::ALL_STATUSES, params[:status]), include_blank: "Filter by status" , class: "form-control mr-2", onchange:"this.form.submit()") = select_tag(:role, options_for_select(Publisher::ROLES, params[:role]), include_blank: "Filter by role" , class: "form-control", onchange: "this.form.submit()") diff --git a/app/views/admin/shared/_sidebar.html.slim b/app/views/admin/shared/_sidebar.html.slim index 9b91486923..ae15a27e41 100644 --- a/app/views/admin/shared/_sidebar.html.slim +++ b/app/views/admin/shared/_sidebar.html.slim @@ -13,7 +13,7 @@ aside = nav_link "Channel", admin_stats_top_balances_path(type: Eyeshade::TopBalances::CHANNEL) = nav_link "Owner", admin_stats_top_balances_path(type: Eyeshade::TopBalances::OWNER) = nav_link "Uphold", admin_stats_top_balances_path(type: Eyeshade::TopBalances::UPHOLD) - = nav_link "Top Youtube Channels", admin_stats_top_youtube_channels_path + = nav_link "Top YouTube Channels", admin_stats_top_youtube_channels_path li a href='#' class="sidebar-toggle pull-right" = fa_icon "chevron-down" diff --git a/app/views/admin/stats/contributions/index.html.slim b/app/views/admin/stats/contributions/index.html.slim index 02d9dcb6cc..5d03f4140c 100644 --- a/app/views/admin/stats/contributions/index.html.slim +++ b/app/views/admin/stats/contributions/index.html.slim @@ -1,2 +1,3 @@ -h2 Top Publisher Contributions +.panel-heading + h4 Top Publisher Contributions = render partial: 'admin/stats/top_eyeshade_wallets', result: @result, publishers: @publishers, youtube_channel_details: @youtube_channel_details diff --git a/app/views/admin/stats/publisher_statistics/index.html.slim b/app/views/admin/stats/publisher_statistics/index.html.slim index 577fc3251c..77edc94cb0 100644 --- a/app/views/admin/stats/publisher_statistics/index.html.slim +++ b/app/views/admin/stats/publisher_statistics/index.html.slim @@ -1,4 +1,5 @@ -h1= "Publisher Stats" +.panel-heading + h4= "Publisher Stats" #publisherStats = link_to "Download as CSV", admin_stats_publisher_statistics_path(format: 'csv') diff --git a/app/views/admin/stats/referrals/index.html.slim b/app/views/admin/stats/referrals/index.html.slim index e610c7a63e..914abfe9f8 100644 --- a/app/views/admin/stats/referrals/index.html.slim +++ b/app/views/admin/stats/referrals/index.html.slim @@ -1,2 +1,3 @@ -h2 Top Publisher Referrals +.panel-heading + h4 Top Publisher Referrals = render partial: 'admin/stats/top_eyeshade_wallets', result: @result, publishers: @publishers, youtube_channel_details: @youtube_channel_details diff --git a/app/views/admin/stats/top_balances/index.html.slim b/app/views/admin/stats/top_balances/index.html.slim index 3224dd654c..3de2449a5b 100644 --- a/app/views/admin/stats/top_balances/index.html.slim +++ b/app/views/admin/stats/top_balances/index.html.slim @@ -1,4 +1,5 @@ -h2= "Top Balances for #{params[:type].titleize}" +.panel-heading + h4= "Top Balances for #{params[:type].titleize}" = form_tag nil, method: :get do = hidden_field_tag "type", @type diff --git a/app/views/admin/stats/top_youtube_channels/index.html.slim b/app/views/admin/stats/top_youtube_channels/index.html.slim index af572e3736..0362f06eb4 100644 --- a/app/views/admin/stats/top_youtube_channels/index.html.slim +++ b/app/views/admin/stats/top_youtube_channels/index.html.slim @@ -1,4 +1,5 @@ -br +.panel-heading + h4= "Top YouTube Channels" div.panel-body div.adv-table table.display.table.table-bordered.table-striped.dynamic-table id="dynamic-table" diff --git a/app/views/admin/unattached_promo_registrations/index.html.slim b/app/views/admin/unattached_promo_registrations/index.html.slim index cf3e1ca46c..798ea1c003 100644 --- a/app/views/admin/unattached_promo_registrations/index.html.slim +++ b/app/views/admin/unattached_promo_registrations/index.html.slim @@ -1,7 +1,6 @@ .unattached-promo-registrations .flex - h1 Referral Promo - hr + h4 Referral Promo .flex .panel.panel--double = form_tag admin_unattached_promo_registrations_path, id: "create-referral-codes" do From 8c892f63d70e75f9b2cd39b33801f1bc1a4b4489 Mon Sep 17 00:00:00 2001 From: Albert Wang Date: Tue, 6 Aug 2019 13:08:07 -0700 Subject: [PATCH 2/2] Small UX fix for site banner (#2070) * Use usernames instead of links as arguments for site banner UI * Add placeholder * Support underscores for handles for site banner --- app/javascript/packs/banner_editor.jsx | 36 +++++++++++++++++++------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/app/javascript/packs/banner_editor.jsx b/app/javascript/packs/banner_editor.jsx index 8b806c991a..f4f950d6c8 100644 --- a/app/javascript/packs/banner_editor.jsx +++ b/app/javascript/packs/banner_editor.jsx @@ -76,7 +76,7 @@ export default class BannerEditor extends React.Component { scale: 1, linkSelection: false, linkOption: "Youtube", - currentLink: "", + currentUsername: "", youtube: this.props.values.youtube || "", twitter: this.props.values.twitter || "", twitch: this.props.values.twitch || "", @@ -96,6 +96,8 @@ export default class BannerEditor extends React.Component { ); this.incrementChannelIndex = this.incrementChannelIndex.bind(this); this.decrementChannelIndex = this.decrementChannelIndex.bind(this); + this.currentPlaceholder = this.currentPlaceholder.bind(this); + this.updateCurrentUsername = this.updateCurrentUsername.bind(this); this.updateYoutube = this.updateYoutube.bind(this); this.updateTwitter = this.updateTwitter.bind(this); this.updateTwitch = this.updateTwitch.bind(this); @@ -294,16 +296,28 @@ export default class BannerEditor extends React.Component { addLink() { switch (this.state.linkOption) { case "Youtube": - this.setState({ youtube: this.state.currentLink }); + this.setState({ youtube: "https://www.youtube.com/" + this.state.currentUsername }); break; case "Twitter": - this.setState({ twitter: this.state.currentLink }); + this.setState({ twitter: "https://www.twitter.com/" + this.state.currentUsername }); break; case "Twitch": - this.setState({ twitch: this.state.currentLink }); + this.setState({ twitch: "https://www.twitch.tv/" + this.state.currentUsername }); break; } - this.setState({ currentLink: "" }); + this.setState({ currentUsername: "" }); + } + + currentPlaceholder() { + switch (this.state.linkOption) { + case "Youtube": + return "Youtube user name"; + case "Twitter": + return "Twitter handle"; + case "Twitch": + return "Twitch handle"; + } + return ""; } handleLinkDelete(option) { @@ -324,8 +338,8 @@ export default class BannerEditor extends React.Component { this.setState({ linkOption: value }); } - updateCurrentLink(event) { - this.setState({ currentLink: event.target.value }); + updateCurrentUsername(event) { + this.setState({ currentUsername: event.target.value.replace("/^a-zA-Z0-9._/g", '') }); } updateTitle(event) { @@ -975,13 +989,15 @@ export default class BannerEditor extends React.Component { this.updateCurrentLink(e)} - value={this.state.currentLink} + placeholder={this.currentPlaceholder()} + placeholderTextColor="#707070" + onChange={this.updateCurrentUsername} + value={this.state.currentUsername} maxLength={80} /> {this.renderDropdown()} this.addLink()}> - + Add Link + + Add User Name or Handle )}