fix: ensure mobile-only text in [donation_history] is displayed correctly

[Benunc]

Bug Report

User Story

As a site admin, I want to be able to place the donation history shortcode in various places on the site (not just the donation history page) and have it display correctly so that my donors are not confused.

Current Behavior

Currently the shortcode displays just fine on the donation-history page auto-created by Give. But when you display it on any other page, post, or shortcode-enabled area it adds the column names within each cell.

Expected Behavior

I expect it not to display incorrectly, and to display the same way everywhere.

Bug Type

• This bug describes functionality that once worked as expected in version X.X.X.
• This bug describes functionality that never worked as expected.
• I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Place the [donation_history] shortcode anywhere on the site other than the Donation History page
2. View the shortcode output on the front end.
3. View the same shortcode on the Donation History page.
4. Compare the style
5. You'll see that this line is not added to the shortcode output when it's not on the Donation History Page: https://github.com/impress-org/give/blame/4e425729bbf00e7912fc008119f467b32c8c9dd3/assets/src/css/frontend/donation-history.scss#L26-L28

Visuals

Possible Solution

Apply those styles anywhere that shortcode is displayed.

Acceptance Criteria

• The donation history shortcode works on a different page
• The shortcode still works on the donation history page
• The styles work as intended on mobile device screens as well as large monitors (1500+px wide)

Environment

WordPress System Info

### WordPress Environment ###

Home URL: https://livegive.wpsteward.com
Site URL: https://livegive.wpsteward.com
WP Version: 4.9.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Show on Front: posts
Table Prefix Length: wp_8138bfdc07_
Table Prefix Length: 14
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, refunded, failed, revoked, cancelled, abandoned, processing, preapproval, give_subscription

Server Environment

Hosting Provider: DBH: localhost, SRV: livegive.wpsteward.com
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: Apache/2.4.37 (Unix) OpenSSL/1.0.1f
PHP Version: 7.0.32
PHP Post Max Size: 1 GB
PHP Time Limit: 30
PHP Max Input Vars: 5000
PHP Max Upload Size: 512 MB
cURL Version: ❌ 7.35.0, OpenSSL/1.0.1f - We recommend a minimum cURL version of 7.40.
SUHOSIN Installed: –
MySQL Version: ❌ 5.5.62 - We recommend a minimum MySQL version of 5.6. See: WordPress Requirements
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.3.0
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt❌New Offline Donation❌Offline Donation Instructions✔New User Registration✔User Registration Information✔Donor Note❌Email access✔Daily Email Report✔Weekly Email Report✔Monthly Email Report❌Renewal Receipt Email❌Subscription Cancelled Email❌Subscription Completed Email✔Subscription Reminder Email❌Subscriptions Email Access
Upgraded From: 2.2.1
Test Mode: Enabled
Currency Code: USD
Currency Position: After
Decimal Separator: .
Thousands Separator: ,
Success Page: https://livegive.wpsteward.com/donation-confirmation/
Failure Page: –
Donation History Page: https://livegive.wpsteward.com/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: Test Donation, Stripe - Credit Card, PayPal Payments Pro, Authorize.net, PayPal Standard
Default Payment Gateway: Stripe - Credit Card
PayPal IPN Verification: Disabled
PayPal IPN Notifications: IPN received for #1084 ( 8H4629943X7440214 ) on 09/04/2018 at 15:46. Status VERIFIED
Donor Email Access: Disabled

Active Give Add-ons

Give - Authorize.net Gateway: ✔ Licensed – by WordImpress – 1.4.3
Give - Email Reports: ✔ Licensed – by WordImpress – 1.1.2
Give - Form Field Manager: ❌ Unlicensed – by GiveWP – 1.4.0
Give - Google Analytics Donation Tracking: ❌ Unlicensed – by GiveWP – 1.2.2
Give - Manual Donations: ✔ Licensed – by WordImpress – 1.4.1
Give - PayPal Pro Gateway: ❌ Unlicensed – by GiveWP – 1.2.0
Give - PDF Receipts: ✔ Licensed – by WordImpress – 2.3
Give - Recurring Donations: ✔ Licensed – by WordImpress – 1.8.1
Give - Stripe Gateway: ❌ Unlicensed – by GiveWP – 2.1.1
Give - Tributes: ✔ Licensed – by WordImpress – 1.5.0
Give - Zapier: ✔ Licensed – by WordImpress – 1.2.1

Other Active Plugins

Ben's Helper Functions: by BenUNC –
Better Click To Tweet: by Ben Meredith – 5.5
Email Cop: by Ashfame – 0.1.1
Google Analytics for WordPress by MonsterInsights: by MonsterInsights – 7.3.0
Query Monitor: by John Blackbourn & contributors – 3.1.1
User Switching: by John Blackbourn & contributors – 1.4.0
WP Crontrol: by John Blackbourn & contributors – 1.6.2

Inactive Plugins

Akismet Anti-Spam: by Automattic – 4.0.8
Give - Currency Switcher: by GiveWP – 1.3.0
Give - Database HealthCheck: by WordImpress – 0.0.2
Give - Fee Recovery: by GiveWP – 1.7.2
Give - Mollie Gateway: by WordImpress – 1.1.1
Gutenberg: by Gutenberg Team – 4.1.1
Hello Dolly: by Matt Mullenweg – 1.6
Page Builder by SiteOrigin: by SiteOrigin – 2.9.1
RegistrationMagic Premium: by Registrationmagic – 3.8.1.7
Restrict Content Pro: by Restrict Content Pro Team – 2.9.10
Series Engine: by Eric Murrell (Volacious) – 2.6.1
SiteOrigin Widgets Bundle: by SiteOrigin – 1.13.2
The GDPR Framework: by Data443 – 1.0.18
WonderPlugin Tabs: by Magic Hills Pty Ltd – 5.8

Active MU Plugins

api-hacks.php: by –

Theme

Name: Twenty Seventeen
Version: 1.7
Author URL: https://wordpress.org/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

[kevinwhoffman]

Copying my explanation from Slack...

That text is only supposed to appear on mobile when the table collapses to one column. However it looks like the CSS to hide it is scoped within .give-donation-history which is a body class that only appears on the Donation History page. https://github.com/impress-org/give/blame/4e425729bbf00e7912fc008119f467b32c8c9dd3/assets/src/css/frontend/donation-history.scss#L26-L28

This is the temporary fix:

.give_user_history_main .title-for-mobile {
    display: none;
}

The permanent fix should use a properly prefixed class like .give-mobile-title which is scoped based on the class of the receipt table and not the body class of the page.