Cutlery/calibre
1
0
Fork 0
mirror of https://github.com/kovidgoyal/calibre.git synced 2025-07-08 02:34:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use a link tag instead of a button tag for buttons

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pyj/book_list/search.pyj
View File

@ -6,7 +6,7 @@ from ajax import ajax
from dom import clear, set_css, build_rule, svgicon from dom import clear, set_css, build_rule, svgicon
from elementmaker import E from elementmaker import E
from gettext import gettext as _ 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 modals import show_modal
from book_list.globals import get_boss, get_session_data from book_list.globals import get_boss, get_session_data
from book_list.theme import get_color, get_font_size from book_list.theme import get_color, get_font_size
@ -51,7 +51,7 @@ class SearchPanel:
E.input( E.input(
type='search', name='search-books', type='search', name='search-books',
title=_('Search for books'), placeholder=_('Enter the search query'), 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 search_button
)) ))

2
src/pyj/book_list/views.pyj
View File

@ -48,7 +48,7 @@ class BooksView:
)) ))
more.lastChild.setAttribute('rel', 'next') more.lastChild.setAttribute('rel', 'next')
set_css(more.firstChild, display='block', margin_left='auto', margin_right='auto') 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( more.appendChild(E.div(
create_spinner(), '\xa0' + _('Fetching metadata for more books, please wait') + '…', create_spinner(), '\xa0' + _('Fetching metadata for more books, please wait') + '…',
style='margin-left:auto; margin-right:auto; display:none') style='margin-left:auto; margin-right:auto; display:none')

12
src/pyj/widgets.pyj
View File

@ -8,27 +8,27 @@ from elementmaker import E
from book_list.theme import get_color from book_list.theme import get_color
# Button {{{ # Button {{{
BUTTON_VPADDING = '0.5ex'
def create_button(text, icon=None, action=None, tooltip=None, highlight=False): def create_button(text, icon=None, action=None, tooltip=None, highlight=False):
ic = '' ic = ''
if icon: if icon:
ic = svgicon(icon) ic = svgicon(icon)
text = '\xa0' + text 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: if action is not None:
ans.addEventListener('click', def(event): event.preventDefault(), action(event);) ans.addEventListener('click', def(event): event.preventDefault(), action(event);)
if highlight: if highlight:
set_css(ans, font_size='larger', font_weight='bold') set_css(ans, font_size='larger', font_weight='bold')
return ans 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'), 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')), 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('a.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:active', transform='scale(2)')
# }}} # }}}
# Spinner {{{ # Spinner {{{