Use a link tag instead of a button tag for buttons

There are various rendering artifacts when trying to override the
rendering of buttons on different browsers
This commit is contained in:
Kovid Goyal 2016-06-11 10:59:51 +05:30
parent 72a9cafdb5
commit b45a6366cb
3 changed files with 9 additions and 9 deletions

View File

@ -6,7 +6,7 @@ from ajax import ajax
from dom import clear, set_css, build_rule, svgicon
from elementmaker import E
from gettext import gettext as _
from widgets import create_button, BUTTON_VPADDING, create_spinner, Breadcrumbs
from widgets import create_button, create_spinner, Breadcrumbs
from modals import show_modal
from book_list.globals import get_boss, get_session_data
from book_list.theme import get_color, get_font_size
@ -51,7 +51,7 @@ class SearchPanel:
E.input(
type='search', name='search-books',
title=_('Search for books'), placeholder=_('Enter the search query'),
style="flex-grow: 10; padding: {} 0.5em; margin-right: 0.5em".format(BUTTON_VPADDING), onkeydown=self.on_input_keydown.bind(self),
style="flex-grow: 10; margin-right: 0.5em", onkeydown=self.on_input_keydown.bind(self),
),
search_button
))

View File

@ -48,7 +48,7 @@ class BooksView:
))
more.lastChild.setAttribute('rel', 'next')
set_css(more.firstChild, display='block', margin_left='auto', margin_right='auto')
set_css(more, font_size='1.5rem', padding_top='1.5rem', margin_bottom='1.5rem', width='100%', text_align='center')
set_css(more, font_size='1.5rem', padding_top='1.5rem', margin_bottom='1.5rem', text_align='center', display='flex')
more.appendChild(E.div(
create_spinner(), '\xa0' + _('Fetching metadata for more books, please wait') + '…',
style='margin-left:auto; margin-right:auto; display:none')

View File

@ -8,27 +8,27 @@ from elementmaker import E
from book_list.theme import get_color
# Button {{{
BUTTON_VPADDING = '0.5ex'
def create_button(text, icon=None, action=None, tooltip=None, highlight=False):
ic = ''
if icon:
ic = svgicon(icon)
text = '\xa0' + text
ans = E.button(ic, text, class_='calibre-push-button', type='button', title=tooltip or '')
ans = E.a(ic, E.span(text), class_='calibre-push-button', href='javascript: void(0)', title=tooltip or '')
if action is not None:
ans.addEventListener('click', def(event): event.preventDefault(), action(event);)
if highlight:
set_css(ans, font_size='larger', font_weight='bold')
return ans
create_button.style = build_rule('button.calibre-push-button',
create_button.style = build_rule('a.calibre-push-button',
border_radius='1em', background_clip='padding-box', background_color=get_color('button-start'),
background_image='linear-gradient(to bottom, {}, {})'.format(get_color('button-start'), get_color('button-end')),
padding=BUTTON_VPADDING + ' 1em', color=get_color('button-text'), cursor='pointer', font_size='inherit'
padding='0.5ex 1em', color=get_color('button-text'), cursor='pointer', font_size='inherit', display='inline-flex', align_items='center',
box_shadow='0px 2px 1px rgba(50, 50, 50, 0.75)',
)
create_button.style += build_rule('button.calibre-push-button:hover', transform='scale(1.2)')
create_button.style += build_rule('button.calibre-push-button:active', transform='scale(2)')
create_button.style += build_rule('a.calibre-push-button:hover', transform='scale(1.2)')
create_button.style += build_rule('a.calibre-push-button:active', transform='scale(2)')
# }}}
# Spinner {{{