Contrib.social

Mobile and Responsive

Open on Drupal.org →
Created on 24 January 2022, over 3 years ago
Updated 3 March 2023, about 2 years ago

Problem/Motivation

This is a really useful module. But I see two problems for usability on mobile devices:

  1. Any theme/CSS sizing of the .spb-popup-main-wrapper is overwritten by the module/popup Width setting (presumably by JS?). It means that the popup width can never be more than 360px (to accommodate smallest devices).
  2. The use of the ESC key to close the browser is useful on laptops/desktops, but not much use on touch screens.

Proposed resolution

Are there any suggestions on how to add relative units (vw or %) to the Popup "Width" settings? It is briefly mentioned at #3181345: Responsive → but dismissed. A manual tweak of simple_popup_blocks.js allows this. Perhaps if Width is stored as a string rather than an integer then units could be incorporated (eg, '360px' or '80vh')??

Any ideas on utilising click/touch outside the Popup (ie on the overlay) to close the Popup? This is common behaviour on many websites.

💬 Support request
Status

Active

Version

2.0

Component

Code

Created by

🇬🇧United Kingdom robcarr Perthshire, Scotland

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 2 years ago →
    🇧🇪Belgium DuneBL

    On my side, I have added the following rule which apply on mobile an also when the width of the popup is larger than the page

    .spb-popup-main-wrapper{
  max-width: 100% ;
}

    This allow the popup to auto-resize on the page width.
    I think this should be added in the default css of the popup

  • Comment about 1 month ago →
    🇮🇹Italy finex

    I've created a library override on my theme redefining the JS and CSS using flexbox to improve the responsiveness (I'm using libraries-override to completely remove the module js/css because I've also refactored the js without jquery and fade it/out effects).

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024