BBO Discussion Forums: Quick fix: forum handviewer on mobile - BBO Discussion Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Quick fix: forum handviewer on mobile

#1 User is online   smerriman 

  • PipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 3,725
  • Joined: 2014-March-15
  • Gender:Male

Posted 2022-July-05, 00:14

My smartphone has a 412x892 resolution. Due to some margins and padding, this means standard 400x300 handviewer iframes inside forum posts don't fit on the screen; South's bidding is always offscreen and inaccessible.

There is some inline CSS on the forum pages:

/* CSS: bbo_handviewer*/
.hv_frame {
    border: 0;
    float: left;
    padding-right: 0.2em; /* Separate diagram from text */
    padding-top: 0.4em; /* Separate one diagram from another */
}

Any chance you can add:
.hv_frame iframe {max-width:100%;}

Then on my screen it'll scale down to fit (it'll add whitespace underneath since it has a fixed height rather than scaling responsively, but at least it'll be readable).
0

#2 User is offline   pescetom 

  • PipPipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 7,204
  • Joined: 2014-February-18
  • Gender:Male
  • Location:Italy

Posted 2022-July-05, 01:57

I have the same problem and always have to (enable auto-rotate and) rotate to see the full bidding. This would be a useful fix.
0

#3 User is online   smerriman 

  • PipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 3,725
  • Joined: 2014-March-15
  • Gender:Male

Posted 2022-July-05, 14:39

Ooops, my mistake - I see you actually implemented the code already (thanks, super quick :)) but I had a typo - it's just:

.hv_frame {max-width:100%;}

since that's the iframe itself.
0

#4 User is offline   pescetom 

  • PipPipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 7,204
  • Joined: 2014-February-18
  • Gender:Male
  • Location:Italy

Posted 2022-July-05, 14:52

View Postsmerriman, on 2022-July-05, 14:39, said:

Ooops, my mistake - I see you actually implemented the code already (thanks, super quick :)) but I had a typo - it's just:

.hv_frame {max-width:100%;}

since that's the iframe itself.

I hope that works better, because I still lack S bidding on my phone.
0

#5 User is offline   Gerardo 

  • PipPipPipPipPipPip
  • Group: Admin
  • Posts: 2,482
  • Joined: 2003-February-12
  • Gender:Male
  • Location:Dartmouth, NS, Canada

Posted 2022-July-05, 15:01

.hv_frame {
	border: 0;
	float: left;
	padding-right: 0.2em; /* Separate diagram from text */
	padding-top: 0.4em; /* Separate one diagram from another */
	max-width:100%;
}


#6 User is online   smerriman 

  • PipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 3,725
  • Joined: 2014-March-15
  • Gender:Male

Posted 2022-July-05, 15:17

Hm, looks like it's only being output on desktop. I guess the forum must be using a different theme for mobile and so CSS has to be added to a different place to get it to show up there.
0

#7 User is offline   Gerardo 

  • PipPipPipPipPipPip
  • Group: Admin
  • Posts: 2,482
  • Joined: 2003-February-12
  • Gender:Male
  • Location:Dartmouth, NS, Canada

Posted 2022-July-05, 18:31

Please recheck.

#8 User is online   smerriman 

  • PipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 3,725
  • Joined: 2014-March-15
  • Gender:Male

Posted 2022-July-05, 19:14

Still not seeing any relevant CSS output to mobile user-agents.

But it looks like mobile-specific CSS is in https://www.bridgeba.../ipb_styles.css, so editing that file should work.
0

#9 User is offline   Gerardo 

  • PipPipPipPipPipPip
  • Group: Admin
  • Posts: 2,482
  • Joined: 2003-February-12
  • Gender:Male
  • Location:Dartmouth, NS, Canada

Posted 2022-July-05, 19:29

There is only one source for .hv_frame, currently named: https://www.bridgeba..._handviewer.css (name might change in the future).

If you are seeing .hv_frame, it is defined here, there is no separate definition for mobile. It might be using a different version of this file though.

I just ensured all sources for this file are sync'ed with the max-width content added.

If you don't see it in your device, try reloading this file.

If still having issues, yell.

#10 User is online   smerriman 

  • PipPipPipPipPipPipPip
  • Group: Advanced Members
  • Posts: 3,725
  • Joined: 2014-March-15
  • Gender:Male

Posted 2022-July-05, 20:10

It looks like what's happening is that on desktop, it's embedding all the stylesheets stored in the css_15 folder, while on mobile, it ignores all of these and embeds all the stylesheets from the css_2 folder instead.

So copying bbo_handviewer.css into the css_2 folder instead should work (but the float + padding aren't needed in the copy as they need to be in separate columns anyway).

My original message about seeing hv_iframe was me looking at the source on desktop; I didn't realise at that point it was different on mobile (where no hv_iframe is showing at all).
0

#11 User is offline   Gerardo 

  • PipPipPipPipPipPip
  • Group: Admin
  • Posts: 2,482
  • Joined: 2003-February-12
  • Gender:Male
  • Location:Dartmouth, NS, Canada

Posted 2022-July-05, 21:45

I see. I need to look at this closer.

#12 User is offline   barmar 

  • PipPipPipPipPipPipPipPipPipPipPipPip
  • Group: Admin
  • Posts: 21,398
  • Joined: 2004-August-21
  • Gender:Male

Posted 2022-July-11, 16:23

This might have something to do with the different forum "skins" for mobile and desktop.

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users