| @@ -3492,4 +3492,195 @@ | ||
| 3492 | 3492 | font-weight: 400; |
| 3493 | 3493 | line-height: 1.5; |
| 3494 | 3494 | } |
| 3495 | 3495 | |
| 3496 | + | |
| 3497 | +/* ============================================================ | |
| 3498 | + Trip listing — Compact card layout | |
| 3499 | + Settings → Frontend Theme → "Listing card layout". | |
| 3500 | + Opt-in; the default "standard" card is left untouched. | |
| 3501 | + .yatra-listing-compact → compact on mobile (both compact modes) | |
| 3502 | + .yatra-listing-compact--all → compact on desktop too (compact_all) | |
| 3503 | + The class is placed on the LISTING CONTAINER (.yatra-listing-page for the | |
| 3504 | + archive/taxonomy, .yatra-tour-shortcode / .yatra-discount-shortcode for the | |
| 3505 | + shortcode + Gutenberg block), NOT on <body>. That lets each listing resolve | |
| 3506 | + its own layout: the site-wide Design setting is the default, and an | |
| 3507 | + individual shortcode/block can override it (card_layout / cardLayout attr). | |
| 3508 | + The compact card intentionally shows only: image, title, price, | |
| 3509 | + and the "View Details" button — everything else is hidden for density. | |
| 3510 | + ============================================================ */ | |
| 3511 | + | |
| 3512 | +/* --- Compact on mobile (<=768px): compact_mobile AND compact_all --- */ | |
| 3513 | +@media (max-width: 768px) { | |
| 3514 | + /* Force a single column so each compact card becomes a full-width | |
| 3515 | + horizontal row — covers every trip-card grid wrapper: | |
| 3516 | + .yatra-trip-grid → archive / taxonomy | |
| 3517 | + .yatra-tour-grid → [yatra_trip]/[yatra_tour] shortcode + Tour block | |
| 3518 | + .yatra-discount-grid → discount-and-deals shortcode */ | |
| 3519 | + .yatra-listing-compact .yatra-trip-grid, | |
| 3520 | + .yatra-listing-compact .yatra-tour-grid, | |
| 3521 | + .yatra-listing-compact .yatra-discount-grid { | |
| 3522 | + grid-template-columns: 1fr !important; | |
| 3523 | + gap: 12px; | |
| 3524 | + } | |
| 3525 | + .yatra-listing-compact .yatra-trip-card { | |
| 3526 | + display: grid !important; | |
| 3527 | + grid-template-columns: 116px minmax(0, 1fr) !important; | |
| 3528 | + align-items: stretch; | |
| 3529 | + gap: 0; | |
| 3530 | + overflow: hidden; | |
| 3531 | + /* Neutralise the Grid/List view toggle so Compact stays compact whether | |
| 3532 | + the visitor is in grid OR list view (list-view forces min-height:240). */ | |
| 3533 | + min-height: 0 !important; | |
| 3534 | + max-height: none !important; | |
| 3535 | + flex-direction: initial !important; | |
| 3536 | + } | |
| 3537 | + .yatra-listing-compact .yatra-trip-card-image { | |
| 3538 | + height: 100% !important; | |
| 3539 | + min-height: 118px !important; | |
| 3540 | + width: auto !important; | |
| 3541 | + min-width: 0 !important; | |
| 3542 | + aspect-ratio: auto !important; | |
| 3543 | + border-radius: 0; | |
| 3544 | + align-self: stretch; | |
| 3545 | + } | |
| 3546 | + /* Keep the image overlays readable on the small thumbnail. */ | |
| 3547 | + .yatra-listing-compact .yatra-discount-badge { | |
| 3548 | + font-size: 0.65rem; | |
| 3549 | + padding: 2px 6px; | |
| 3550 | + } | |
| 3551 | + .yatra-listing-compact .yatra-favorite-btn { | |
| 3552 | + width: 26px; | |
| 3553 | + height: 26px; | |
| 3554 | + } | |
| 3555 | + .yatra-listing-compact .yatra-trip-card-image img { | |
| 3556 | + width: 100% !important; | |
| 3557 | + height: 100% !important; | |
| 3558 | + object-fit: cover; | |
| 3559 | + } | |
| 3560 | + .yatra-listing-compact .yatra-trip-content { | |
| 3561 | + padding: 10px 12px !important; | |
| 3562 | + display: flex; | |
| 3563 | + flex-direction: column; | |
| 3564 | + gap: 6px; | |
| 3565 | + min-width: 0; | |
| 3566 | + } | |
| 3567 | + .yatra-listing-compact .yatra-trip-title { | |
| 3568 | + font-size: 0.95rem; | |
| 3569 | + line-height: 1.3; | |
| 3570 | + margin: 0; | |
| 3571 | + display: -webkit-box; | |
| 3572 | + -webkit-line-clamp: 2; | |
| 3573 | + -webkit-box-orient: vertical; | |
| 3574 | + overflow: hidden; | |
| 3575 | + } | |
| 3576 | + .yatra-listing-compact .yatra-trip-destinations, | |
| 3577 | + .yatra-listing-compact .yatra-trip-card-meta, | |
| 3578 | + .yatra-listing-compact .yatra-trip-short-description, | |
| 3579 | + .yatra-listing-compact .yatra-trip-stats-row, | |
| 3580 | + .yatra-listing-compact .yatra-trip-traveler-types, | |
| 3581 | + .yatra-listing-compact .yatra-trip-activities, | |
| 3582 | + .yatra-listing-compact .yatra-trip-categories-compact, | |
| 3583 | + .yatra-listing-compact .yatra-difficulty-overlay, | |
| 3584 | + .yatra-listing-compact .yatra-group-discount-badge, | |
| 3585 | + .yatra-listing-compact .yatra-trip-listing-dp-urgency { | |
| 3586 | + display: none !important; | |
| 3587 | + } | |
| 3588 | + .yatra-listing-compact .yatra-trip-footer { | |
| 3589 | + margin-top: auto; | |
| 3590 | + display: flex; | |
| 3591 | + /* The base mobile footer is flex-direction:column — force a single row | |
| 3592 | + so price and the button sit side by side in the compact card. */ | |
| 3593 | + flex-direction: row !important; | |
| 3594 | + flex-wrap: nowrap; | |
| 3595 | + align-items: center; | |
| 3596 | + justify-content: space-between; | |
| 3597 | + align-self: stretch; | |
| 3598 | + gap: 8px; | |
| 3599 | + padding: 0 !important; | |
| 3600 | + border: 0 !important; | |
| 3601 | + } | |
| 3602 | + .yatra-listing-compact .yatra-trip-card-price { margin: 0 !important; width: auto !important; align-items: flex-start; } | |
| 3603 | + .yatra-listing-compact .yatra-card-view-btn { flex: 0 0 auto; } | |
| 3604 | + .yatra-listing-compact .yatra-trip-price { font-size: 1rem; } | |
| 3605 | + .yatra-listing-compact .yatra-card-view-btn { | |
| 3606 | + padding: 6px 10px !important; | |
| 3607 | + font-size: 0.8rem; | |
| 3608 | + white-space: nowrap; | |
| 3609 | + } | |
| 3610 | +} | |
| 3611 | + | |
| 3612 | +/* --- Compact on desktop too (>=769px): compact_all only. | |
| 3613 | + Respects the visitor's Grid/List view toggle: | |
| 3614 | + • Grid view → the multi-column grid is kept, cards are just shorter | |
| 3615 | + • List view → compact horizontal rows (list-view supplies the row) | |
| 3616 | + The density trimming (hiding the extra blocks) applies to both. --- */ | |
| 3617 | +@media (min-width: 769px) { | |
| 3618 | + /* Density — identical in grid and list. */ | |
| 3619 | + .yatra-listing-compact--all .yatra-trip-content { | |
| 3620 | + gap: 8px; | |
| 3621 | + min-width: 0; | |
| 3622 | + padding: 14px 16px !important; | |
| 3623 | + } | |
| 3624 | + .yatra-listing-compact--all .yatra-trip-title { | |
| 3625 | + font-size: 1.05rem; | |
| 3626 | + line-height: 1.3; | |
| 3627 | + margin: 0; | |
| 3628 | + display: -webkit-box; | |
| 3629 | + -webkit-line-clamp: 2; | |
| 3630 | + -webkit-box-orient: vertical; | |
| 3631 | + overflow: hidden; | |
| 3632 | + } | |
| 3633 | + .yatra-listing-compact--all .yatra-trip-destinations, | |
| 3634 | + .yatra-listing-compact--all .yatra-trip-card-meta, | |
| 3635 | + .yatra-listing-compact--all .yatra-trip-short-description, | |
| 3636 | + .yatra-listing-compact--all .yatra-trip-stats-row, | |
| 3637 | + .yatra-listing-compact--all .yatra-trip-traveler-types, | |
| 3638 | + .yatra-listing-compact--all .yatra-trip-activities, | |
| 3639 | + .yatra-listing-compact--all .yatra-trip-categories-compact, | |
| 3640 | + .yatra-listing-compact--all .yatra-difficulty-overlay, | |
| 3641 | + .yatra-listing-compact--all .yatra-group-discount-badge, | |
| 3642 | + .yatra-listing-compact--all .yatra-trip-listing-dp-urgency { | |
| 3643 | + display: none !important; | |
| 3644 | + } | |
| 3645 | + .yatra-listing-compact--all .yatra-trip-footer { | |
| 3646 | + margin-top: auto; | |
| 3647 | + display: flex; | |
| 3648 | + flex-direction: row !important; | |
| 3649 | + flex-wrap: nowrap; | |
| 3650 | + align-items: center; | |
| 3651 | + justify-content: space-between; | |
| 3652 | + gap: 12px; | |
| 3653 | + padding-top: 4px !important; | |
| 3654 | + border: 0 !important; | |
| 3655 | + } | |
| 3656 | + .yatra-listing-compact--all .yatra-trip-card-price { margin: 0 !important; width: auto !important; } | |
| 3657 | + .yatra-listing-compact--all .yatra-card-view-btn { flex: 0 0 auto; white-space: nowrap; } | |
| 3658 | + | |
| 3659 | + /* GRID view (DEFAULT) → a shorter vertical card. Grid-agnostic: applies to | |
| 3660 | + every wrapper (archive grid, shortcode/block .yatra-tour-grid, and | |
| 3661 | + .yatra-discount-grid) since none of them except the archive list-view | |
| 3662 | + needs the horizontal row. */ | |
| 3663 | + .yatra-listing-compact--all .yatra-trip-card-image { | |
| 3664 | + height: 160px !important; | |
| 3665 | + aspect-ratio: auto !important; | |
| 3666 | + } | |
| 3667 | + | |
| 3668 | + /* LIST view (archive only) → compact horizontal row overrides the vertical | |
| 3669 | + default. The Grid/List toggle exists only on .yatra-trip-grid, so the | |
| 3670 | + shortcode/block/discount grids always keep the compact vertical card. */ | |
| 3671 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-card { | |
| 3672 | + min-height: 0 !important; | |
| 3673 | + max-height: none !important; | |
| 3674 | + } | |
| 3675 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-card-image { | |
| 3676 | + height: 160px !important; | |
| 3677 | + min-height: 0 !important; | |
| 3678 | + max-height: none !important; | |
| 3679 | + aspect-ratio: auto !important; | |
| 3680 | + align-self: stretch; | |
| 3681 | + } | |
| 3682 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-content { | |
| 3683 | + padding: 16px 18px !important; | |
| 3684 | + justify-content: flex-start; | |
| 3685 | + } | |
| 3686 | +} | |
