Merge pull request #761 from LeXofLeviafan/bootstrap3

[#753] pre-migration WebUI fixes

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=600, toolbar=no, scrollbars=yes, status=no, dialog=1');
+window.open(url, '_blank', 'menubar=no, height=600, width=800, toolbar=no, scrollbars=yes, status=no, dialog=1');

bukuserver/requirements.txt

@@ -1,7 +1,6 @@
 arrow>=1.2.2
 Flask-Admin>=1.6.1,<2
 Flask-API>=3.0.post1
-Flask-Bootstrap>=3.3.7.1
 flask-paginate>=2022.1.8
 Flask-WTF>=1.0.1
 Flask>=2.2.2,<2.3

bukuserver/server.py

@@ -9,7 +9,6 @@
 from flask.cli import FlaskGroup
 from flask_admin import Admin
 from flask_api import FlaskAPI
-from flask_bootstrap import Bootstrap
 
 import buku
 from buku import BukuDb, __version__
@@ -120,7 +119,6 @@ def shell_context():
 
     app.jinja_env.filters['netloc'] = lambda x: urlparse(x).netloc  # pylint: disable=no-member
 
-    Bootstrap(app)
     admin = Admin(
         app, name='buku server', template_mode='bootstrap3',
         index_view=views.CustomAdminIndexView(

bukuserver/static/bukuserver/css/bookmark.css

@@ -9,3 +9,18 @@ table tr td:not(:first-child) {
         width: min(1000px, 80%);
     }
 }
+
+.link {
+    display: block;
+}
+
+.tag-list {
+    font-size: larger;
+    display: flex;
+    gap: 1px;
+    flex-wrap: wrap;
+}
+
+.description {
+    white-space: pre-wrap;
+}

bukuserver/static/bukuserver/css/statistic.css

@@ -0,0 +1,16 @@
+/* limit dialog height with a scrollbox */
+.modal-body {
+    max-height: calc(100vh - 120px);
+    overflow: auto;
+}
+
+/* make the table header sticky */
+.modal-body thead {
+    position: sticky;
+    /* setting `top:` with JS, to account for theme differences */
+}
+
+/* overriding icon-button text color with theme color */
+.modal-header :is(button, button:hover) {
+    color: inherit;
+}

bukuserver/static/bukuserver/js/bookmark.js

@@ -1,8 +1,8 @@
 $(document).ready(function() {
-  $.getJSON( "/api/tags", function( json ) {
-    $('input#tags').select2({
-      tags: json.tags,
-      tokenSeparators: [','],
-    });
-  });
+  window._tags = (Date.now() - (window._tagsQueried||0) < 1000 ? _tags :
+                  new Promise(resolve => {
+                    window._tagsQueried = Date.now();
+                    $.getJSON('/api/tags', ({tags}) => resolve(tags));
+                  }));
+  _tags.then(tags => $('input#tags').select2({tags, tokenSeparators: [',']}));
 });

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=600,%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=600,%20width=800,%20toolbar=no,%20scrollbars=yes,%20status=no,%20dialog=1%22)}();

bukuserver/templates/bukuserver/home.html

@@ -8,7 +8,7 @@
 
 {% block menu_links %}
 {{ super() }}
-<form class="navbar-form navbar-right" action="{{url_for('bookmark.index_view')}}" method="GET">
+<form class="navbar-form navbar-right" action="{{ url_for('bookmark.index_view') }}" method="GET">
   <div class="form-group">
     <input type="text" class="form-control" id="inputKeywords" placeholder="Search bookmark" name="flt1_buku_search">
   </div>
@@ -18,29 +18,29 @@
 
 {% block body %}
 {{ super() }}
-<main class="container">
-  <div style="padding: 40px 15px; text-align: center;">
+<main class="container text-center">
+  <div style="padding: 40px 15px">
     <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>
+      <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">
-      <form class="form-horizontal" action="{{url_for('admin.search')}}" method="POST">
+    <div class="col-md-4 col-md-offset-4">
+      <form action="{{ url_for('admin.search') }}" method="POST">
         <div class="form-group">
-          {{form.keyword.label}}
-          {{form.keyword()}}
+          {{ form.keyword.label }}
+          {{ form.keyword(class_='form-control', style='display: inline;  width: auto') }}
         </div>
-        <div class="text-left col-sm-offset-2">
-          <div class="form-group"> {{form.deep()}} {{form.deep.label}} </div>
-          <div class="form-group"> {{form.regex()}} {{form.regex.label}} </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>
         <button type="submit" class="btn btn-default">Search</button>
       </form>
     </div>
-    <div class=" col-md-4 col-md-offset-4">
+    <div class="col-md-4 col-md-offset-4">
       <p style="padding-top: 2em"> Bookmarklet:
         <a title="Drag this link to your bookmarks toolbar" href="{{ buku.bookmarklet() }}">
           <b>✚ Add to Buku</b>

bukuserver/templates/bukuserver/lib.html

@@ -27,8 +27,8 @@
   <script>
     $('.admin-form [name=fetch]').remove();
     $('.admin-form').append(
-      $(`<label class="form-group" style="display: block"><span class="col-md-2 text-right">{{ _gettext('Fetch') }}</span>`
-        +`<span class="col-md-10"><input type="checkbox" name="fetch"{% if checked %} checked{% endif %}></span></label>`))
+      $(`<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>`));
   </script>
 {% endmacro %}