From 34ca66d10c29e54d8c5a62b095590a44f7e67a35 Mon Sep 17 00:00:00 2001 From: LeXofLeviafan Date: Sun, 25 Aug 2024 20:31:19 +0200 Subject: [PATCH] [jarun#753] migrate to Bootstrap v4 --- bukuserver/README.md | 2 +- bukuserver/bookmarklet.js | 2 +- bukuserver/server.py | 2 +- bukuserver/static/bukuserver/css/list.css | 25 +++++--- bukuserver/static/bukuserver/css/modal.css | 2 +- .../templates/bukuserver/bookmark_create.html | 1 + .../bukuserver/bookmark_create_modal.html | 3 +- .../bukuserver/bookmark_details_modal.html | 4 +- .../templates/bukuserver/bookmark_edit.html | 5 +- .../bukuserver/bookmark_edit_modal.html | 1 + .../templates/bukuserver/bookmarklet.url | 2 +- .../templates/bukuserver/bookmarks_list.html | 4 +- bukuserver/templates/bukuserver/home.html | 28 +++++---- bukuserver/templates/bukuserver/lib.html | 57 ++++++++++++------- .../templates/bukuserver/statistic.html | 38 ++++++------- bukuserver/templates/bukuserver/tag_edit.html | 1 + .../templates/bukuserver/tags_list.html | 6 +- bukuserver/views.py | 6 +- tests/test_views.py | 8 +-- 19 files changed, 116 insertions(+), 81 deletions(-) diff --git a/bukuserver/README.md b/bukuserver/README.md index 86cee542..e19dd1ac 100644 --- a/bukuserver/README.md +++ b/bukuserver/README.md @@ -118,7 +118,7 @@ The following are os env config variables available for bukuserver. | DISABLE_FAVICON | disable bookmark [favicons](https://wikipedia.org/wiki/Favicon) | boolean [default: `true`] ([here's why](#why-favicons-are-disabled-by-default))| | OPEN_IN_NEW_TAB | url link open in new tab | boolean [default: `false`] | | REVERSE_PROXY_PATH | reverse proxy path | string | -| THEME | [GUI theme](https://bootswatch.com/3) | string [default: `default`] (`slate` is a good pick for dark mode) | +| THEME | [GUI theme](https://bootswatch.com/4) | string [default: `default`] (`slate` is a good pick for dark mode) | | LOCALE | GUI language (partial support) | string [default: `en`] | | DEBUG | debug mode (verbose logging etc.) | boolean [default: `false`] | diff --git a/bukuserver/bookmarklet.js b/bukuserver/bookmarklet.js index e0b126d4..644526fc 100644 --- a/bukuserver/bookmarklet.js +++ b/bukuserver/bookmarklet.js @@ -16,4 +16,4 @@ url = "{{url}}" + "?url=" + encodeURIComponent(url) + "&title=" + encodeURIComponent(title) + "&description=" + encodeURIComponent(desc); -window.open(url, '_blank', 'menubar=no, height=600, width=800, toolbar=no, scrollbars=yes, status=no, dialog=1'); +window.open(url, '_blank', 'menubar=no, height=700, width=800, toolbar=no, scrollbars=yes, status=no, dialog=1'); diff --git a/bukuserver/server.py b/bukuserver/server.py index 5ae498eb..0d9b5002 100644 --- a/bukuserver/server.py +++ b/bukuserver/server.py @@ -125,7 +125,7 @@ def shell_context(): app.jinja_env.globals.update(_p=_p) admin = Admin( - app, name='buku server', template_mode='bootstrap3', + app, name='buku server', template_mode='bootstrap4', index_view=views.CustomAdminIndexView( template='bukuserver/home.html', url='/' ) diff --git a/bukuserver/static/bukuserver/css/list.css b/bukuserver/static/bukuserver/css/list.css index 8e722957..9936f295 100644 --- a/bukuserver/static/bukuserver/css/list.css +++ b/bukuserver/static/bukuserver/css/list.css @@ -1,20 +1,29 @@ +/* overriding icon-button text color with theme color */ +form.icon button { + color: inherit; +} + .filters .filter-op {width: var(--filter-op) !important} .filters .filter-val {width: calc(var(--filters) - var(--filter-op) - var(--filter-buttons) - var(--filter-type)) !important} #filter_form[action^='/tag/'] {--filter-type: var(--filter-type-tags)} -:root {--filters: 645px; --filter-op: 9em; --filter-buttons: 12.5em; --filter-type: 5.5em; --filter-type-tags: 9em} +:root {--filters: 510px; --filter-op: 9rem; --filter-buttons: 12.5rem; --filter-type: 6rem; --filter-type-tags: 9.5rem} /* due to how flask-admin filters are set up, each language requires manual adjustments for full-width sizes */ -html[lang=de] {--filter-buttons: 19em} -html[lang=fr] {--filter-buttons: 17em} -html[lang=ru] {--filter-buttons: 16.5em; --filter-type: 8.5em; --filter-type-tags: 11em} +html[lang=de] {--filter-buttons: 18rem} +html[lang=fr] {--filter-buttons: 16rem} +html[lang=ru] {--filter-buttons: 16.5rem; --filter-type: 8.5rem; --filter-type-tags: 11.5rem} +@media (max-width: 767px) { + .filters .filter-val {width: calc(var(--filters) - var(--filter-op) - var(--filter-type)) !important} + #filter_form .pull-right:first-child {margin: .5ex 0} +} @media (min-width: 768px) { - :root {--filters: 710px; --filter-op: 11.5em} + :root {--filters: 690px; --filter-op: 11.5rem} } @media (min-width: 992px) { - :root {--filters: 930px; --filter-op: 20em} + :root {--filters: 930px; --filter-op: 20rem} } @media (min-width: 1200px) { - :root {--filters: 1130px; --filter-op: 20em} - html[lang=ru] #filter_form[action^='/bookmark/'] {--filter-op: 25em} /* the last 'buku' filter has a rather long name */ + :root {--filters: 1110px; --filter-op: 20rem} + html[lang=ru] #filter_form[action^='/bookmark/'] {--filter-op: 25rem} /* the last 'buku' filter has a rather long name */ } diff --git a/bukuserver/static/bukuserver/css/modal.css b/bukuserver/static/bukuserver/css/modal.css index 20de439b..764e50d9 100644 --- a/bukuserver/static/bukuserver/css/modal.css +++ b/bukuserver/static/bukuserver/css/modal.css @@ -5,7 +5,7 @@ body.modal-open { /* limit dialog height with a scrollbox */ .modal-content { - max-height: calc(100vh - 60px); + max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; } diff --git a/bukuserver/templates/bukuserver/bookmark_create.html b/bukuserver/templates/bukuserver/bookmark_create.html index d344a272..f42e5918 100644 --- a/bukuserver/templates/bukuserver/bookmark_create.html +++ b/bukuserver/templates/bukuserver/bookmark_create.html @@ -7,6 +7,7 @@ {{ buku.limit_navigation_if_popup() }} {{ buku.script('bookmark.js') }} {{ buku.fetch_checkbox() }} + {{ buku.horizontal_form(excluding_popups=True) }} {{ buku.focus() }} {{ buku.link_saved() }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmark_create_modal.html b/bukuserver/templates/bukuserver/bookmark_create_modal.html index 30c6e45f..645c3680 100644 --- a/bukuserver/templates/bukuserver/bookmark_create_modal.html +++ b/bukuserver/templates/bukuserver/bookmark_create_modal.html @@ -10,6 +10,7 @@ {% block tail %} {{ super() }} {{ buku.script('bookmark.js') }} - {{ buku.fetch_checkbox() }} + {{ buku.fetch_checkbox(modal=True) }} + {{ buku.horizontal_form() }} {{ buku.focus('.modal-body') }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmark_details_modal.html b/bukuserver/templates/bukuserver/bookmark_details_modal.html index 916a0fcc..4e208e9c 100644 --- a/bukuserver/templates/bukuserver/bookmark_details_modal.html +++ b/bukuserver/templates/bukuserver/bookmark_details_modal.html @@ -4,8 +4,8 @@ {% block header_text %}

{% if request.args.get('id') == 'random' %} - {% endif %} {{_gettext('View Record')}} #{{model.id}} diff --git a/bukuserver/templates/bukuserver/bookmark_edit.html b/bukuserver/templates/bukuserver/bookmark_edit.html index 036b9d0c..79b5542f 100644 --- a/bukuserver/templates/bukuserver/bookmark_edit.html +++ b/bukuserver/templates/bukuserver/bookmark_edit.html @@ -7,7 +7,7 @@ {% block edit_form %} {{ super() }} -
+ {% if csrf_token %} @@ -24,7 +24,8 @@ {{ buku.set_lang() }} {{ buku.limit_navigation_if_popup() }} {{ buku.script('bookmark.js') }} + + {{ buku.horizontal_form(excluding_popups=True) }} {{ buku.focus() }} {{ buku.link_saved() }} - {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmark_edit_modal.html b/bukuserver/templates/bukuserver/bookmark_edit_modal.html index 3ddf6484..ac491a62 100644 --- a/bukuserver/templates/bukuserver/bookmark_edit_modal.html +++ b/bukuserver/templates/bukuserver/bookmark_edit_modal.html @@ -4,5 +4,6 @@ {% block tail %} {{ super() }} {{ buku.script('bookmark.js') }} + {{ buku.horizontal_form() }} {{ buku.focus('.modal-body') }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/bookmarklet.url b/bukuserver/templates/bukuserver/bookmarklet.url index d692019b..23446b66 100644 --- a/bukuserver/templates/bukuserver/bookmarklet.url +++ b/bukuserver/templates/bukuserver/bookmarklet.url @@ -1 +1 @@ -javascript:void%20function(){var%20e=location.href,t=document.title.trim()||%22%22,o=document.getSelection().toString().trim()||(document.querySelector(%22meta[name$=description%20i],%20meta[property$=description%20i]%22)||{}).content||%22%22;o.length%3E4e3%26%26(o=o.substr(0,4e3)+%22...%22,alert(%22The%20selected%20text%20is%20too%20long,%20it%20will%20be%20truncated.%22)),e=%22{{url}}%3Furl=%22+encodeURIComponent(e)+%22%26title=%22+encodeURIComponent(t)+%22%26description=%22+encodeURIComponent(o),window.open(e,%22_blank%22,%22menubar=no,%20height=600,%20width=800,%20toolbar=no,%20scrollbars=yes,%20status=no,%20dialog=1%22)}(); +javascript:void%20function(){var%20e=location.href,t=document.title.trim()||%22%22,o=document.getSelection().toString().trim()||(document.querySelector(%22meta[name$=description%20i],%20meta[property$=description%20i]%22)||{}).content||%22%22;o.length%3E4e3%26%26(o=o.substr(0,4e3)+%22...%22,alert(%22The%20selected%20text%20is%20too%20long,%20it%20will%20be%20truncated.%22)),e=%22{{url}}%3Furl=%22+encodeURIComponent(e)+%22%26title=%22+encodeURIComponent(t)+%22%26description=%22+encodeURIComponent(o),window.open(e,%22_blank%22,%22menubar=no,%20height=700,%20width=800,%20toolbar=no,%20scrollbars=yes,%20status=no,%20dialog=1%22)}(); diff --git a/bukuserver/templates/bukuserver/bookmarks_list.html b/bukuserver/templates/bukuserver/bookmarks_list.html index 18db15ff..0cf0947e 100644 --- a/bukuserver/templates/bukuserver/bookmarks_list.html +++ b/bukuserver/templates/bukuserver/bookmarks_list.html @@ -10,7 +10,9 @@ {{ super() }} {% if data %} {% set _random = url_for('bookmark.details_view', modal=True, id='random', url=return_url, **(request.args|flt)) %} -
  • {{ _('Random') }}
    • +
  • + {{ _('Random') }} +
    • {% endif %} {% endblock %} diff --git a/bukuserver/templates/bukuserver/home.html b/bukuserver/templates/bukuserver/home.html index 5da41227..61d5a954 100644 --- a/bukuserver/templates/bukuserver/home.html +++ b/bukuserver/templates/bukuserver/home.html @@ -9,20 +9,19 @@ {% block menu_links %} {{ super() }} - -
    - + +
    +
    - + {% endblock %} {% block body %} {{ super() }} -
    -
    +

    BUKU

    {{ _('Bookmark manager like a text-based mini-web') }}

    @@ -30,22 +29,22 @@

    BUKU

    {{ _('Tags') }} {{ _('Statistic') }}

    -
    +
    {{ form.keyword.label }} - {{ form.keyword(class_='form-control', style='display: inline; width: auto') }} + {{ form.keyword(class_='form-control d-inline', style='width: auto') }}
    -
    +
    {% for field in [form.all_keywords, form.markers, form.deep, form.regex] -%} -
    {{field()}} {{field.label}}
    +
    {{field()}} {{field.label}}
    {%- endfor %}
    - +
    -
    -

    {{_('Bookmarklet')}}: +

    +

    {{_('Bookmarklet')}}: ✚ {{ _('Add to Buku') }}
    @@ -53,7 +52,7 @@

    BUKU

    -
    +
    {{ _('Location Bar (keyboard-only) shortcut') }}
    {{ _('in Firefox:') }}
    @@ -76,7 +75,6 @@

    BUKU

    -
    {% endblock %} diff --git a/bukuserver/templates/bukuserver/lib.html b/bukuserver/templates/bukuserver/lib.html index 0068e9de..25465d68 100644 --- a/bukuserver/templates/bukuserver/lib.html +++ b/bukuserver/templates/bukuserver/lib.html @@ -17,8 +17,9 @@ {% macro limit_navigation_if_popup() %} {% endmacro %} @@ -31,17 +32,37 @@ {% endif %} {% endmacro %} -{% macro fetch_checkbox(checked=True) %} +{% macro fetch_checkbox(checked=True, modal=False) %} +{% endmacro %} + +{% macro horizontal_form(excluding_popups=False) %} + {% endmacro %} {% macro details_formatting(prefix='') %} {% endmacro %} @@ -94,20 +115,18 @@ $(document).ready(function() { const SIZES = [20, 50, 100]; // hardcoded list; see page_size_form() in admin/model/layout.html let pageSize = url => new URL(url || location.host).searchParams.get('page_size'); - $(`.actions-nav .dropdown-menu`).each(function () { - let _sizes = $(`li a`, this).map(function () {return pageSize(this.href)}).get(); + $(`.nav.nav-tabs .dropdown-menu`).each(function () { + let _sizes = $(`a.dropdown-item`, this).map(function () {return pageSize(this.href)}).get(); if (SIZES.every((x, i) => x == _sizes[i])) - $(`li`, this).last().clone().each(function () { - $('a', this).text({{ _('custom')|tojson }}).attr('href', `#`).on('click', () => { - let page = prompt({{ _('Set custom page size (empty for default)')|tojson }}, pageSize(location) || ''); - if ((page == "") || (Number(page) >= 1)) { - let search = new URL(location).searchParams; - (page ? search.set('page_size', parseInt(page)) : search.delete('page_size')); - location.search = search; - } else if (page != null) - alert({{ _('Invalid page size')|tojson }} + `: "${page}"`); - return false; - }); + $('a', this).last().clone().text({{ _('custom')|tojson }}).attr('href', `#`).on('click', () => { + let page = prompt({{ _('Set custom page size (empty for default)')|tojson }}, pageSize(location) || ''); + if (Number(page) || (page == "")) { + let search = new URL(location).searchParams; + (page ? search.set('page_size', page) : search.delete('page_size')); + location.search = search; + } else if (page != null) + alert({{ _('Invalid page size')|tojson }} + `: "${page}"`); + return false; }).appendTo(this); }) }); diff --git a/bukuserver/templates/bukuserver/statistic.html b/bukuserver/templates/bukuserver/statistic.html index 911dd1f4..5fa2b9ad 100644 --- a/bukuserver/templates/bukuserver/statistic.html +++ b/bukuserver/templates/bukuserver/statistic.html @@ -17,23 +17,23 @@ {% endblock %} {% block body %} -
    -
    +
    + {{ _('Data created') }} {{ datetime_text }} - +

    {{ _('Netloc') }}

    {% if netlocs %} -
    +
    {% if netlocs.cropped %} - {% endif %} @@ -66,12 +66,12 @@

    {{ _('Netloc') }}

    - +
    - - +
    + @@ -99,14 +99,14 @@

    {{ _('Tag') }}

    {% if tags %} -
    +
    {% if tags.cropped %} - {% endif %} @@ -141,12 +141,12 @@

    {{ _('Tag') }}

    - +
    -
    {{ _('Rank') }} {{ _('Netloc') }}
    - +
    + @@ -172,14 +172,14 @@

    {{ _('Title (common)') }}

    {% if titles %} -
    +
    {% if titles.cropped %} - {% endif %} @@ -214,12 +214,12 @@

    {{ _('Title (common)') }}

    - +
    -
    {{ _('Rank') }} {{ _('Tag') }}
    - +
    + @@ -250,7 +250,7 @@ {{ buku.set_lang() }} {{ buku.script('Chart.js') }} diff --git a/bukuserver/templates/bukuserver/tag_edit.html b/bukuserver/templates/bukuserver/tag_edit.html index 320d0654..9813b911 100644 --- a/bukuserver/templates/bukuserver/tag_edit.html +++ b/bukuserver/templates/bukuserver/tag_edit.html @@ -4,5 +4,6 @@ {% block tail %} {{ super() }} {{ buku.set_lang() }} + {{ buku.horizontal_form() }} {{ buku.focus() }} {% endblock %} diff --git a/bukuserver/templates/bukuserver/tags_list.html b/bukuserver/templates/bukuserver/tags_list.html index b2890710..cd6720f0 100644 --- a/bukuserver/templates/bukuserver/tags_list.html +++ b/bukuserver/templates/bukuserver/tags_list.html @@ -8,8 +8,10 @@ {% block model_menu_bar_before_filters %} {{ super() }} - -
  • {{ _('Refresh') }}
    • + +
  • + {{ _('Refresh') }} +
    • {% endblock %} {% block tail %} diff --git a/bukuserver/views.py b/bukuserver/views.py index 8c37c8ae..c6138ab3 100644 --- a/bukuserver/views.py +++ b/bukuserver/views.py @@ -141,7 +141,7 @@ def _list_entry(self, context: Any, model: Namespace, name: str) -> Markup: if netloc and self.url_render_mode != 'netloc' and url_for_index_view_netloc: tag_links += [link(f'netloc:{netloc}', url_for_index_view_netloc, badge='success')] for tag in filter(None, model.tags.split(',')): - tag_links += [link(tag, get_index_view_url(flt0_tags_contain=tag.strip()), badge='default')] + tag_links += [link(tag, get_index_view_url(flt0_tags_contain=tag.strip()), badge='secondary')] res += [f'
    {"".join(tag_links)}
    '] description = model.description and f'
    {escape(model.description)}
    ' if description: @@ -152,7 +152,7 @@ def _list_entry(self, context: Any, model: Namespace, name: str) -> Markup: def get_detail_value(self, context, model, name): value = super().get_detail_value(context, model, name) if name == 'tags': - tags = (link(s.strip(), url_for('bookmark.index_view', flt0_tags_contain=s.strip()), badge='default') + tags = (link(s.strip(), url_for('bookmark.index_view', flt0_tags_contain=s.strip()), badge='secondary') for s in (value or '').split(',') if s.strip()) return Markup(f'
    {"".join(tags)}
    ') if name == 'url': @@ -623,7 +623,7 @@ def format_value(field, bookmark, spacing=''): def link(text, url, new_tab=False, html=False, badge=''): target = ('' if not new_tab else ' target="_blank"') - cls = ('' if not badge else f' class="btn label label-{badge}"') + cls = ('' if not badge else f' class="btn badge badge-{badge}"') return f'{text if html else escape(text)}' diff --git a/tests/test_views.py b/tests/test_views.py index 24344325..6c99dfc6 100644 --- a/tests/test_views.py +++ b/tests/test_views.py @@ -156,7 +156,7 @@ def test_bookmarklet_view(bukudb, client, exists, uri, tab, args): response = client.get('/bookmarklet', query_string=query, follow_redirects=True) dom = assert_response(response, uri, argnames=args) - assert dom.xpath(f'//ul{xpath_cls("nav nav-tabs")}/li{xpath_cls("active")}/a/text()') == [tab] + assert dom.xpath(f'//ul{xpath_cls("nav nav-tabs")}//a{xpath_cls("nav-link active")}/text()') == [tab] assert dom.xpath('//input[@name="link"]/@value') == [query['url']] assert bool(dom.xpath('//input[@name="id"]')) == exists @@ -315,9 +315,9 @@ def test_env_entry_render_params(bukudb, app, client, mode, favicons, new_tab): target = '' if not new_tab else ' target="_blank"' icon = '' if not favicons else f' ' prefix = f'' if mode == 'netloc': assert cell == f'{prefix} ({netloc}){suffix}' @@ -374,7 +374,7 @@ def test_env_reverse_proxy_path(proxy_path, client): def test_env_theme(theme, client): dom = assert_response(client.get('/'), '/') assert dom.xpath('//head/link[@rel="stylesheet"][starts-with(@href, $href)]', - href=f'/static/admin/bootstrap/bootstrap3/swatch/{theme or "default"}/bootstrap.min.css?') + href=f'/static/admin/bootstrap/bootstrap4/swatch/{theme or "default"}/bootstrap.min.css?') _DICT = {
    {{ _('Rank') }} {{ _('Title') }}
    {icon}{title}' - tags = [f'{s}' for s in _tags] + tags = [f'{s}' for s in _tags] netloc_tag = ('' if mode == 'netloc' else - f'netloc:{netloc}') + f'netloc:{netloc}') suffix = f'
    {netloc_tag}{"".join(tags)}
    {desc}