Fix controls help screen not rendering properly on safari

This commit is contained in:
Kovid Goyal 2017-05-27 13:20:50 +05:30
parent 8c2f2cfc0e
commit b40031caf0
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C

View File

@ -291,23 +291,23 @@ class ControlsOverlay:
def show(self, container): def show(self, container):
self.container_id = container.getAttribute('id') self.container_id = container.getAttribute('id')
def msg(txt): def msg(txt):
return set_css(E.div(txt), padding='1ex 1em', position='relative', top='50%', transform='translateY(-50%)') return set_css(E.div(txt), padding='1ex 1em', text_align='center', margin='auto')
container.appendChild(E.div( container.appendChild(E.div(
style=f'overflow: hidden; width: 100vw; height: 100vh; text-align: center; font-size: 1.3rem; font-weight: bold; background: {get_color("window-background")};' + style=f'overflow: hidden; width: 100vw; height: 100vh; text-align: center; font-size: 1.3rem; font-weight: bold; background: {get_color("window-background")};' +
'display:flex; flex-direction: column; align-items: stretch', 'display:flex; flex-direction: column; align-items: stretch',
E.div( E.div(
msg(_('Tap for controls')), msg(_('Tap for controls')),
style='height: 25vh; border-bottom: solid 2px currentColor', style='height: 25vh; display:flex; align-items: center; border-bottom: solid 2px currentColor',
), ),
E.div( E.div(
style="display: flex; align-items: stretch; flex-grow: 10", style="display: flex; align-items: stretch; flex-grow: 10",
E.div( E.div(
msg(_('Tap to turn back')), msg(_('Tap to turn back')),
style='width: 25vw; border-right: solid 2px currentColor', style='width: 25vw; display:flex; align-items: center; border-right: solid 2px currentColor',
), ),
E.div( E.div(
msg(_('Tap to turn page')), msg(_('Tap to turn page')),
style='width: 75vw;', style='width: 75vw; display:flex; align-items: center',
) )
) )
)) ))