feat: Enhance gallery functionality with lightbox feature and improve icon sprite accessibility
- Added a lightbox feature for gallery images, allowing users to view photos in a modal with navigation controls. - Updated the SVG sprite to include inline styles for better accessibility. - Increased CSS specificity by doubling the `.vc-app` class to ensure styles override Astra theme defaults. - Introduced new shortcodes for bus tours, about section, and articles in the VC_Sections class. - Improved the handling of featured images in the single tour template for sharper display. - Updated version number to 1.8.15.
This commit is contained in:
@@ -11,6 +11,9 @@ class VC_Display {
|
||||
'viator_top_destinations',
|
||||
'viator_top_attractions',
|
||||
'viator_browse_activities',
|
||||
'viator_bus_tours',
|
||||
'viator_about',
|
||||
'viator_articles',
|
||||
'viator_faq',
|
||||
'viator_testimonials',
|
||||
'viator_tour_card',
|
||||
@@ -24,9 +27,12 @@ class VC_Display {
|
||||
);
|
||||
|
||||
public static function init() {
|
||||
// Priority 20 so Astra has already registered/enqueued its stylesheet;
|
||||
// our CSS then loads after it and wins equal-specificity ties.
|
||||
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ), 20 );
|
||||
// Priority 100 so the theme (Astra + child) has already enqueued ALL of
|
||||
// its stylesheets — including the parent style.css and the child's chrome
|
||||
// CSS, which are enqueued by the theme at priority 20 and would otherwise
|
||||
// print AFTER us (plugins run before themes at equal priority) and win
|
||||
// equal-specificity ties. Loading last makes our design win those ties.
|
||||
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ), 100 );
|
||||
add_action( 'template_redirect', array( __CLASS__, 'maybe_enrich_single' ) );
|
||||
add_action( 'pre_get_posts', array( __CLASS__, 'filter_archive_query' ) );
|
||||
add_filter( 'single_template', array( __CLASS__, 'single_template' ) );
|
||||
@@ -146,11 +152,15 @@ class VC_Display {
|
||||
wp_enqueue_style( 'vc-fonts', 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap', array(), null );
|
||||
|
||||
// One scoped stylesheet (.vc-app) covers listing, single, and homepage
|
||||
// sections — ported from the "Hop On Hop Off" design. Depend on the Astra
|
||||
// theme stylesheet (when present) so our rules load AFTER it and win ties.
|
||||
// sections — ported from the "Hop On Hop Off" design. Declare every theme
|
||||
// stylesheet that could fight ours as a dependency (when present) so our
|
||||
// rules always print AFTER them and win equal-specificity ties. We enqueue
|
||||
// at priority 100, so by now the theme (priority 20) has registered them.
|
||||
$deps = array( 'vc-fonts' );
|
||||
if ( wp_style_is( 'astra-theme-css', 'registered' ) ) {
|
||||
$deps[] = 'astra-theme-css';
|
||||
foreach ( array( 'astra-theme-css', 'astra-parent', 'hoho-chrome' ) as $handle ) {
|
||||
if ( wp_style_is( $handle, 'registered' ) ) {
|
||||
$deps[] = $handle;
|
||||
}
|
||||
}
|
||||
wp_enqueue_style( 'vc-design', VC_PLUGIN_URL . 'assets/css/vc-design.css', $deps, VC_VERSION );
|
||||
wp_add_inline_style( 'vc-design', self::astra_overrides() );
|
||||
@@ -180,42 +190,89 @@ class VC_Display {
|
||||
. '.vc-fullwidth.ast-page-builder-template .site-main>article'
|
||||
. '{padding:0!important;margin:0!important;border:0!important;max-width:none!important;}',
|
||||
'.vc-fullwidth #primary,.vc-fullwidth #content{margin:0!important;padding:0!important;}',
|
||||
// display:block undoes Astra's `.site-content .ast-container{display:flex}`
|
||||
// (≥922px), which otherwise sizes our content to its contents instead
|
||||
// of filling the full-width container.
|
||||
'.vc-fullwidth .site-content .ast-container,.vc-fullwidth .ast-container'
|
||||
. '{max-width:none!important;padding-left:0!important;padding-right:0!important;}',
|
||||
. '{max-width:none!important;padding-left:0!important;padding-right:0!important;display:block!important;}',
|
||||
'.vc-fullwidth .entry-content{margin-block:0!important;}',
|
||||
'.vc-fullwidth .site-content{padding:0!important;}',
|
||||
// Guard against a stray horizontal scrollbar from any full-bleed child.
|
||||
'body.vc-fullwidth{overflow-x:hidden;}',
|
||||
// A gradient stands in when no hero image is set, so the banner is
|
||||
// never blank.
|
||||
'.vc-app .hero__media,.vc-app .hero-tour{background:linear-gradient(120deg,#101317,#2cafc2);}',
|
||||
'.vc-app.vc-app .hero__media,.vc-app.vc-app .hero-tour{background:linear-gradient(120deg,#101317,#2cafc2);}',
|
||||
// Normalize: stop Astra from decorating our components. Its
|
||||
// .entry-content rules (underlined links, list bullets/indent)
|
||||
// out-specify our scoped base, so reset them here (!important beats
|
||||
// e.g. `.ast-single-post .entry-content a`). The .vc-app.vc-app
|
||||
// doubling lifts specificity without touching design class rules.
|
||||
'.vc-app a,.vc-app.vc-app a{text-decoration:none;box-shadow:none;}',
|
||||
'.vc-app :is(ul,ol),.vc-app.vc-app :is(ul,ol){list-style:none!important;margin:0!important;padding:0!important;}',
|
||||
'.vc-app li{margin:0!important;}',
|
||||
// e.g. `.ast-single-post .entry-content a`). Every selector matches
|
||||
// the doubled `.vc-app.vc-app` scope of the main stylesheet so these
|
||||
// patches keep winning against it, not just against the theme.
|
||||
'.vc-app.vc-app a{text-decoration:none;box-shadow:none;}',
|
||||
// No !important on margin/padding: the doubled .vc-app.vc-app scope
|
||||
// already out-specifies Astra's list rules, and !important here was
|
||||
// steamrolling design lists that need their own spacing — e.g. the
|
||||
// rail (<ul class="rail">) whose vertical padding gives the hover glow
|
||||
// room. list-style stays !important (purely cosmetic; prose lists
|
||||
// re-enable bullets via a higher-specificity rule).
|
||||
'.vc-app.vc-app :is(ul,ol){list-style:none!important;margin:0;padding:0;}',
|
||||
'.vc-app.vc-app li{margin:0;}',
|
||||
// …but keep the tour "Overview" prose (the_content) readable.
|
||||
'.vc-app .tour__text a{text-decoration:underline;}',
|
||||
'.vc-app .tour__text ul{list-style:disc!important;margin:1em 0!important;padding-inline-start:1.5em!important;}',
|
||||
'.vc-app .tour__text ol{list-style:decimal!important;margin:1em 0!important;padding-inline-start:1.5em!important;}',
|
||||
'.vc-app .tour__text li{margin:.25em 0!important;}',
|
||||
'.vc-app.vc-app .tour__text a{text-decoration:underline;}',
|
||||
'.vc-app.vc-app .tour__text ul{list-style:disc!important;margin:1em 0!important;padding-inline-start:1.5em!important;}',
|
||||
'.vc-app.vc-app .tour__text ol{list-style:decimal!important;margin:1em 0!important;padding-inline-start:1.5em!important;}',
|
||||
'.vc-app.vc-app .tour__text li{margin:.25em 0!important;}',
|
||||
// Links must inherit the design colour (Astra colours links with its
|
||||
// theme colour, which turned white card titles/destination names into
|
||||
// coloured text). Buttons keep their own colour.
|
||||
'.vc-app a:not(.btn){color:inherit;}',
|
||||
'.vc-app .tour__text a{color:var(--c-teal);}',
|
||||
// …but not ring-badges: they set their own colour on the <a>, and this
|
||||
// inherit rule out-specifies .ring-badge--top/--scroll, which turned
|
||||
// the badge text white (inherited) on light backgrounds.
|
||||
'.vc-app.vc-app a:not(.btn):not(.ring-badge){color:inherit;}',
|
||||
'.vc-app.vc-app .tour__text a{color:var(--c-teal);}',
|
||||
// Real tour titles are far longer than the mockup\'s city names — clamp
|
||||
// them and stop price/duration values wrapping mid-number.
|
||||
'.vc-app .dcard__title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}',
|
||||
'.vc-app .titem__desc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}',
|
||||
'.vc-app .dcard__meta .meta__v{white-space:nowrap;}',
|
||||
'.vc-app.vc-app .dcard__title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}',
|
||||
'.vc-app.vc-app .titem__desc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}',
|
||||
// Real tour descriptions run long; the on-hover card blurb clamps to
|
||||
// three lines with an ellipsis instead of spilling over the card.
|
||||
'.vc-app.vc-app .dcard__desc p{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}',
|
||||
'.vc-app.vc-app .dcard__meta .meta__v{white-space:nowrap;}',
|
||||
// Astra's page-builder layout centres/limits every entry-content child
|
||||
// (max-width:none; margin:auto), which flattened the hero inset. Our
|
||||
// sections are full-bleed, so re-assert 0 side-margins; !important
|
||||
// beats Astra's 4-class selector. The hero keeps its small inset — the
|
||||
// only section with an intentional side margin.
|
||||
'.vc-app.vc-app>*{max-width:none!important;margin-inline:0!important;}',
|
||||
// Heroes keep their small inset (rounded card look) — .hero on the
|
||||
// home/archive pages and .hero-tour on the single-tour page. Without
|
||||
// this they went full-bleed after the margin-inline:0 reset above.
|
||||
'.vc-app.vc-app>.hero,.vc-app.vc-app>.hero-tour{margin:var(--page-inset)!important;}',
|
||||
// Let vertical decorations (rotating badges, card glow, promo bus, FAQ
|
||||
// watermark) escape, but keep the horizontal axis clipped so a
|
||||
// full-bleed section or decorative element can't cause a mobile
|
||||
// sideways scroll. overflow-x:clip (unlike hidden) does NOT force
|
||||
// overflow-y to auto, so the y-axis stays truly visible.
|
||||
'.vc-app.vc-app{overflow-x:clip;overflow-y:visible;}',
|
||||
// Astra wraps the content in article/.entry-content/.ast-container,
|
||||
// some of which clip overflow — that cut the card hover glow at the
|
||||
// rail edges. Open them up on our pages only (page scroll stays
|
||||
// contained by body.vc-fullwidth{overflow-x:hidden}).
|
||||
'.vc-fullwidth .site-main,.vc-fullwidth #primary,.vc-fullwidth #content,'
|
||||
. '.vc-fullwidth .site-content,.vc-fullwidth .ast-container,'
|
||||
. '.vc-fullwidth .entry-content,.vc-fullwidth .site-main>article'
|
||||
. '{overflow:visible!important;}',
|
||||
// FAQ question buttons must stay flat — Astra gives <button> a shadow.
|
||||
'.vc-app.vc-app .acc__q{box-shadow:none!important;}',
|
||||
// Astra colours every heading on the element itself (h1–h6 and
|
||||
// .entry-content :where(h1..h6)), beating our container-inherited
|
||||
// colours. Make headings inherit again — no !important, so design
|
||||
// classes (.hero__title, the white .tcard titles) keep their own.
|
||||
'.vc-app.vc-app :is(h1,h2,h3,h4,h5,h6){color:inherit;}',
|
||||
// Typography: force the design font over Astra inside our scopes.
|
||||
'.vc-app,.vc-app h1,.vc-app h2,.vc-app h3,.vc-app h4,.vc-app h5,.vc-app h6,'
|
||||
. '.vc-app p,.vc-app a,.vc-app span,.vc-app li,.vc-app button,.vc-app input,'
|
||||
. '.vc-app select,.vc-app textarea,.vc-app blockquote'
|
||||
'.vc-app.vc-app,.vc-app.vc-app h1,.vc-app.vc-app h2,.vc-app.vc-app h3,.vc-app.vc-app h4,.vc-app.vc-app h5,.vc-app.vc-app h6,'
|
||||
. '.vc-app.vc-app p,.vc-app.vc-app a,.vc-app.vc-app span,.vc-app.vc-app li,.vc-app.vc-app button,.vc-app.vc-app input,'
|
||||
. '.vc-app.vc-app select,.vc-app.vc-app textarea,.vc-app.vc-app blockquote'
|
||||
. '{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}',
|
||||
)
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user