woocommerce/plugins/woocommerce-admin/client/mobile-banner/style.scss

71 lines
1.3 KiB
SCSS
Raw Normal View History

Add WooCommerce Mobile App Banner Ad for Android and iOS (https://github.com/woocommerce/woocommerce-admin/pull/5037) Fixes woocommerce/woocommerce-admin#4654 The feature calls for a mobile app ad banner to be displayed to users on mobile devices. Based on the discussion in woocommerce/woocommerce-admin#4654 this implements the following: 1. [an iOS Smart App Banner](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html). This banner is a meta tag that is generated in PHP. It will only display on iOS devices. One note about this: **This tag is not directly trackable like the implemented Android banner. If we would like to track its success then I believe [these instructions are relevant](https://stackoverflow.com/questions/12906502/is-it-possible-to-track-click-throughs-from-iphone-smart-banner/20422334woocommerce/woocommerce-admin#20422334)**. 2. A mobile app banner ad that **only displays on Android** and only displays at the `738px` breakpoint specified in the issue. To only display this banner ad on Android, we use basic checking of the user agent string. I weighed this up against other approaches and for this kind of niche use case a simple UA string check is (imho) still the best way to do this. 3. The banner ad makes use of user preferences to retain a per user setting that determines if that user has dismissed the Android banner. We don't/can't do anything like this for the iOS Smart App Banner (but in theory we shouldn't need to).
2020-08-27 01:46:53 +00:00
$element-spacing: 13px;
$banner-height: 56px;
// This class is a hack, added conditionally when displaying the app banner, it
// can be refactored away when the activity panel goes away.
.woocommerce-layout__show-app-banner {
padding-top: $banner-height;
@include breakpoint( '>782px' ) {
padding-top: 0;
}
}
.woocommerce-mobile-app-banner {
background-color: $woocommerce-brand-purple;
width: 100%;
display: flex;
height: $banner-height;
align-items: center;
padding: 0 6px 0 4px;
@include breakpoint( '>400px' ) {
padding: 0 $element-spacing 0 10px;
}
@include breakpoint( '>782px' ) {
display: none;
}
.gridicon {
Add WooCommerce Mobile App Banner Ad for Android and iOS (https://github.com/woocommerce/woocommerce-admin/pull/5037) Fixes woocommerce/woocommerce-admin#4654 The feature calls for a mobile app ad banner to be displayed to users on mobile devices. Based on the discussion in woocommerce/woocommerce-admin#4654 this implements the following: 1. [an iOS Smart App Banner](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html). This banner is a meta tag that is generated in PHP. It will only display on iOS devices. One note about this: **This tag is not directly trackable like the implemented Android banner. If we would like to track its success then I believe [these instructions are relevant](https://stackoverflow.com/questions/12906502/is-it-possible-to-track-click-throughs-from-iphone-smart-banner/20422334woocommerce/woocommerce-admin#20422334)**. 2. A mobile app banner ad that **only displays on Android** and only displays at the `738px` breakpoint specified in the issue. To only display this banner ad on Android, we use basic checking of the user agent string. I weighed this up against other approaches and for this kind of niche use case a simple UA string check is (imho) still the best way to do this. 3. The banner ad makes use of user preferences to retain a per user setting that determines if that user has dismissed the Android banner. We don't/can't do anything like this for the iOS Smart App Banner (but in theory we shouldn't need to).
2020-08-27 01:46:53 +00:00
fill: $white;
margin-right: 10px;
}
.components-button.is-secondary {
margin-left: auto;
color: $white;
box-shadow: inset 0 0 0 1px $white;
&:hover,
&:active {
color: $white;
box-shadow: inset 0 0 0 1px $white;
background: none;
}
}
.woocommerce-mobile-app-banner__description {
color: $white;
margin-left: 8px;
@include breakpoint( '>400px' ) {
margin-left: $element-spacing;
}
.woocommerce-mobile-app-banner__description__text {
&:first-child {
font-weight: bold;
}
margin: 0;
font-size: 10px;
@include breakpoint( '>400px' ) {
margin-left: 13px;
font-size: 13px;
}
}
}
}