[jarun#753] migrate to Bootstrap v4

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`] |
 
 Note: `BUKUSERVER_` is the common prefix (_every variable starts with it_).

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');

bukuserver/server.py

@@ -120,7 +120,7 @@ def shell_context():
     app.jinja_env.filters['netloc'] = lambda x: urlparse(x).netloc  # pylint: disable=no-member
 
     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='/'
         )

bukuserver/static/bukuserver/css/list.css

@@ -0,0 +1,4 @@
+/* overriding icon-button text color with theme color */
+form.icon button {
+    color: inherit;
+}

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;
 }

bukuserver/static/bukuserver/js/page_size.js

@@ -1,20 +1,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").attr('href', `#`).on('click', () => {
-          let page = prompt(`Set custom page size (empty for default)`, 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: "${page}"`);
-          return false;
-        });
+      $('a', this).last().clone().text("custom").attr('href', `#`).on('click', () => {
+        let page = prompt(`Set custom page size (empty for default)`, 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: "${page}"`);
+        return false;
       }).appendTo(this);
   })
 });

bukuserver/templates/bukuserver/bookmark_create.html

@@ -6,6 +6,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 %}

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 %}

bukuserver/templates/bukuserver/bookmark_edit.html

@@ -7,7 +7,7 @@
 
 {% block edit_form %}
   {{ super() }}
-  <form method="POST" action="{{ get_url('.delete_view') }}" class="delete-form" style="display: inline-block;  float: right">
+  <form method="POST" action="{{ get_url('.delete_view') }}" class="delete-form d-inline-block float-right">
     <input type="hidden" name="id" value="{{ request.args.get('id') }}"/>
     <input type="hidden" name="url" value="{{ return_url }}"/>
     {% if csrf_token %}
@@ -23,7 +23,8 @@
   {{ super() }}
   {{ buku.limit_navigation_if_popup() }}
   {{ buku.script('bookmark.js') }}
+  <script>$('.submit-row').append($('.delete-form'))</script>
+  {{ buku.horizontal_form(excluding_popups=True) }}
   {{ buku.focus() }}
   {{ buku.link_saved() }}
-  <script>$('.submit-row').append($('.delete-form'))</script>
 {% endblock %}

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 %}

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)}();

bukuserver/templates/bukuserver/home.html

@@ -9,48 +9,47 @@
 
 {% block menu_links %}
 {{ super() }}
-<form class="navbar-form navbar-right" action="{{ url_for('bookmark.index_view') }}" method="GET">
-  <div class="form-group">
+<form class="form-inline navbar-right" style="gap:.5ex" action="{{ url_for('bookmark.index_view') }}" method="GET">
+  <div class="d-inline-block align-middle">
     <input type="text" class="form-control" id="inputKeywords" placeholder="Search bookmark" name="flt1_buku_search">
   </div>
-  <button type="submit" class="btn btn-default">Search</button>
+  <button type="submit" class="btn btn-secondary">Search</button>
 </form>
 {% endblock %}
 
 {% block body %}
 {{ super() }}
-<main class="container text-center">
-  <div style="padding: 40px 15px">
+<main class="container text-center p-4">
     <h1>BUKU</h1>
     <p class="lead">Bookmark manager like a text-based mini-web</p>
     <p>
       <a class="btn btn-lg btn-success" href="{{ url_for('bookmark.index_view') }}" role="button">Bookmarks</a>
       <a class="btn btn-lg btn-success" href="{{ url_for('tag.index_view') }}" role="button">Tags</a>
       <a class="btn btn-lg btn-success" href="{{ url_for('statistic.index') }}" role="button">Statistics</a>
     </p>
-    <div class="col-md-4 col-md-offset-4">
+    <div class="col-md-4 offset-md-4">
       <form action="{{ url_for('admin.search') }}" method="POST">
         <div class="form-group">
           {{ form.keyword.label }}
-          {{ form.keyword(class_='form-control', style='display: inline;  width: auto') }}
+          {{ form.keyword(class_='form-control d-inline', style='width: auto') }}
         </div>
-        <div class="text-left col-sm-offset-3">
-          <div class="checkbox"> {{form.deep()}} {{form.deep.label}} </div>
-          <div class="checkbox"> {{form.regex()}} {{form.regex.label}} </div>
+        <div class="text-left">
+          <div class="form-check"> {{form.deep()}} {{form.deep.label}} </div>
+          <div class="form-check"> {{form.regex()}} {{form.regex.label}} </div>
         </div>
-        <button type="submit" class="btn btn-default">Search</button>
+        <button type="submit" class="btn btn-secondary">Search</button>
       </form>
     </div>
-    <div class="col-md-4 col-md-offset-4">
-      <p style="padding-top: 2em"> Bookmarklet:
+    <div class="col-md-4 offset-md-4">
+      <p class="pt-4"> Bookmarklet:
         <a title="Drag this link to your bookmarks toolbar" href="{{ buku.bookmarklet() }}">
           <b>✚ Add to Buku</b>
         </a><br/>
         <em style="font-size: smaller">Note: if you select text on the page before activating the bookmarklet, it'll be used as description instead of page metadata.</em>
       </p>
     </div>
 
-    <details class="col-md-6 col-md-offset-3">
+    <details class="col-md-6 offset-md-3">
       <summary style="display: list-item;  cursor: pointer"> <em><strong>Location Bar (keyboard-only) shortcut</strong></em> </summary>
       <dl>
         <dt>in Firefox:</dt>
@@ -70,6 +69,5 @@ <h1>BUKU</h1>
         </dd>
       </dl>
     </details>
-  </div>
 </main>
 {% endblock %}

bukuserver/templates/bukuserver/lib.html

@@ -17,8 +17,9 @@
 {% macro limit_navigation_if_popup() %}
   <style>
     .popup .navbar-brand {pointer-events: none}
-    .popup :is(#admin-navbar-collapse, .navbar-toggle) {display: none !important}
-    .popup .nav-tabs :is(:first-child, :nth-child(2):not(.active)) > * {display: none}
+    .popup #admin-navbar-collapse {display: block}
+    .popup :is(.navbar-nav, .navbar-toggler) {display: none}
+    .popup .nav-tabs :is(:first-child, :nth-child(2)) > .nav-link:not(.active) {display: none}
   </style>
   <script>opener && (opener !== window) && document.body.classList.add('popup')</script>
 {% endmacro %}
@@ -31,17 +32,37 @@
   {% endif %}
 {% endmacro %}
 
-{% macro fetch_checkbox(checked=True) %}
+{% macro fetch_checkbox(checked=True, modal=False) %}
   <script>
     $('.admin-form [name=fetch]').remove();
-    $('.admin-form').append(
-      $(`<div class="form-group"><label style="display: block"><span class="col-md-2 text-right">{{ _gettext('Fetch') }} &nbsp; </span>`
-        +`<span class="col-md-10"><input type="checkbox" name="fetch"{% if checked %} checked{% endif %}></span></label></div>`));
+    $('.admin-form fieldset{% if modal %} .modal-footer{% endif %}').{% if modal %}prepend{% else %}append{% endif %}(
+      $(`<div class="form-group {{ 'mb-0' if modal else '' }}"{% if modal %} style="flex-grow: 1"{% endif %}>`
+        +`<label class="control-label {{ 'mb-0' if modal else '' }}">{{ _gettext('Fetch') }} &nbsp; </label>`
+        +`<input type="checkbox" name="fetch"{% if checked %} checked{% endif %}></div>`));
+  </script>
+{% endmacro %}
+
+{% macro horizontal_form(excluding_popups=False) %}
+  <script>
+    $('.admin-form .form-group').each(function () {
+      if ($('.submit-row', this).length > 0{% if excluding_popups %} || document.body.matches('.popup'){% endif %}) {
+        $('.submit-row', this).addClass(document.body.matches('.popup') ? 'col-md-12' : 'offset-md-2');
+      } else if ($('input[type=checkbox], input[type=radio]', this).length > 0) {
+        $('label', this).addClass('form-row').css({cursor: 'pointer'}).html(`<span>${ $('label', this).html() }</span>`);
+        $('label span', this).addClass('col-md-2 col-form-label text-right d-inline-block');
+        $('input', this).appendTo($('label', this));
+      } else {
+        $(this).addClass('form-row');
+        $('input, textarea, select', this).addClass('col-md-10');
+        $('label', this).addClass('col-md-2 col-form-label text-right');
+      }
+    });
   </script>
 {% endmacro %}
 
 {% macro details_formatting(prefix='') %}
   <script>
+    $(`.modal-header h3`).wrapInner('<h5 class="modal-title">').children(0).unwrap();  // flask-admin #2505
     $(`body.popup {{prefix}} a`).attr('target', '_blank');
   </script>
 {% endmacro %}

bukuserver/templates/bukuserver/statistic.html

@@ -16,23 +16,23 @@
 {% endblock %}
 
 {% block body %}
-<div class="container">
-  <form class="form-inline" action="{{ url_for('statistic.index') }}" method="POST">
+<div class="container mb-4">
+  <form class="mb-4" action="{{ url_for('statistic.index') }}" method="POST">
     Data created
     <span id="created" rel="tooltip" title="{{ datetime }}" data-timestamp={{ datetime.timestamp() }}>{{ datetime_text }}</span>
-    <button type="submit" class="btn btn-default btn-sm">refresh</button>
+    <button type="submit" class="btn btn-secondary btn-sm">refresh</button>
   </form>
   <h3>Netloc</h3>
 
   {% if netlocs %}
-  <div>
+  <div class="row">
     <div class="col-md-6">
       <canvas id="mostCommonChart" width="500" height="500"></canvas>
     </div>
 
     <div class="col-md-6">
       {% if netlocs.cropped %}
-      <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#netlocModal">
+      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#netlocModal">
         View all
       </button>
       {% endif %}
@@ -65,12 +65,12 @@ <h3>Netloc</h3>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Netloc ranking</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
-          <table class="table table-condensed">
-            <thead class="bg-primary">
+          <table class="table table-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Rank</th>
                 <th>Netloc</th>
@@ -98,14 +98,14 @@ <h4 class="modal-title" id="myModalLabel">Netloc ranking</h4>
   <h3 class="col-md-12">Tag</h3>
 
   {% if tags %}
-  <div>
+  <div class="row">
     <div class="col-md-6">
       <canvas id="mostCommonTagChart" width="500" height="500"></canvas>
     </div>
 
     <div class="col-md-6">
       {% if tags.cropped %}
-      <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#tagRankModal">
+      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#tagRankModal">
         View all
       </button>
       {% endif %}
@@ -140,12 +140,12 @@ <h3 class="col-md-12">Tag</h3>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Tag ranking</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
-          <table class="table table-condensed">
-            <thead class="bg-primary">
+          <table class="table table-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Rank</th>
                 <th>Tag</th>
@@ -171,14 +171,14 @@ <h4 class="modal-title" id="myModalLabel">Tag ranking</h4>
   <h3 class="col-md-12">Title (common)</h3>
 
   {% if titles %}
-  <div>
+  <div class="row">
     <div class="col-md-6">
       <canvas id="mostCommonTitleChart" width="500" height="500"></canvas>
     </div>
 
     <div class="col-md-6">
       {% if titles.cropped %}
-      <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#titleModal">
+      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#titleModal">
         View all
       </button>
       {% endif %}
@@ -213,12 +213,12 @@ <h3 class="col-md-12">Title (common)</h3>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Common titles ranking</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
-          <table class="table table-condensed">
-            <thead class="bg-primary">
+          <table class="table table-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Rank</th>
                 <th>Title</th>
@@ -248,7 +248,7 @@ <h4 class="modal-title" id="myModalLabel">Common titles ranking</h4>
   {{ super() }}
   <script>// sticky table headers in modals
     $('.modal-body').each(function () {
-      $('thead', this).css({top: '-' + $.css(this, 'padding-top')});
+      $('thead', this).css({top: `calc(-${$.css(this, 'padding-top')} - 1px)`});  // +border
     });
   </script>
   {{ buku.script('Chart.js') }}

bukuserver/templates/bukuserver/tag_edit.html

@@ -3,5 +3,6 @@
 
 {% block tail %}
   {{ super() }}
+  {{ buku.horizontal_form() }}
   {{ buku.focus() }}
 {% endblock %}

bukuserver/templates/bukuserver/tags_list.html

@@ -8,8 +8,10 @@
 
 {% block model_menu_bar_before_filters %}
   {{ super() }}
-  <form id="refresh" class="hidden" method="POST" action="refresh"></form>
-  <li><a href="#" onclick="refresh.submit()">{{ _gettext('Refresh') }}</a></li>
+  <form id="refresh" class="d-none" method="POST" action="refresh"></form>
+  <li class="nav-item">
+    <a class="nav-link" href="#" onclick="refresh.submit()">{{ _gettext('Refresh') }}</a>
+  </li>
 {% endblock %}
 
 {% block tail %}