Improving Paperless’ Interface

Improved Paperless Interface
Improved Paperless Interface

Paperless, now known as paperless-ng, and paperless-ngx is an open source Django is a Python web framework. web application for searching documents that have been indexed using OCR (Optical Character Recognition). The backend can be gutted in any way you like to run customized operations pre and post document The document consumption process can be paired with ocrmypdf for precise control of the generated text layer when using the Tesseract OCR Engine. Paperless provides a robust, quick, and hands Connect a scanner to this system, and never see paper again. solution for those who may want to go “paperless”. The interface is lacking though — it’s the Django admin dashboard after all. On initial deployment it looks bare.

Default Paperless Interface
Default Paperless Interface

The project has provided a way to override CSS and JavaScript at run time. To do this, create the files overrides.css and overrides.js in the media folder from the project’s root directory. I’m going for a clean look. Here’s a stylesheet override implementing some improvements to the interface.

css 
body { background-color: #fcfcfc; max-width: 1800px; margin: 0 auto; }
label[for="searchbar"] { display: none !important; }
.result .header { background-color: #fff !important }
.result .header a, .result a.tag { color: #000 !important; }
.result .header .info { display: none !important; }
.result .date { color: #555 !important; }
thead th a:link, thead th a:visited { color: #000 !important; }
thead th, tfoot td { color: #000 !important; }
a.section:link, a.section:visited { color: #000 !important; }
#changelist-filter { background: transparent }
.results, #changelist-filter, #login-form, fieldset { text-align: left }
.selector .help-icon { background: url(/static/admin/img/icon-unknown.svg) 0 0 no-repeat !important; }
.xfull { margin-top: -1rem; }
.object-tools { display: inline-block; }
.module, #changelist .actions { background-color: transparent; }

#changelist #toolbar { 
  border-top: none !important; 
  border-bottom: none !important; 
  background-color: transparent !important;
}

.djangoql-toggle { display: none !important; }
.paginator { border-top: none !important; }
#changelist .paginator { border-bottom: none !important; }
#changelist .toplinks { border-bottom: none !important; }
.grid { margin-right: 0 !important; }
.quiet { margin: 0 1rem !important; color: #555; }

@media (max-width: 560px) { table#result_list { display: block; overflow:scroll } }

.paginator .this-page {font-size: 24px !important; color: #17541f; }
.paginator a:link, .paginator a:visited { background-color: transparent !important; color: #000 !important; }
.paginator a:focus, .paginator a:hover { background-color: #ccc !important; border-radius: 6px; }
#header { color: #000 !important; background-color: transparent !important; }
#header a:link, #header a:visited { color: #000 !important; }
.breadcrumbs { display: none !important; }
#content h1 { display: none !important; }
#content-related { float: none !important; width: 100% !important; position: inherit !important; margin-right: 0 !important; text-align: left; background-color: transparent !important; }
.colMS { margin: 0 auto !important; }
#branding, #user-tools, #content { text-align: center; }
.colMS div:first-child h3:first-child { color: #17541f; font-size: 2rem !important; }
.colMS div:first-child { margin-bottom: 4rem !important; }
.actions { margin-bottom: 2rem; justify-content: center; }
textarea { vertical-align: middle !important }
#changelist-search > div, #changelist-search input[type="submit"] { font-weight:bold; margin: 0 auto; }
#changelist #toolbar form input[type="submit"] { margin: 1rem auto; padding: 8px 24px; }

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  color: #fff !important;
}

.button, .button:active, .button:focus, .button:hover, a.button, .submit-row input, input[type="submit"], input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover, input[type="button"], input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover {
    background-color: #17541f !important;
}

.button, #changelist #toolbar form input[type="submit"] { border: none !important; box-shadow: none !important; }

#changelist-search input#searchbar { width: 100%; }

#searchbar {
  margin: 2rem 0 !important;
  height: 1rem !important; 
  padding: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) { #searchbar { width: 100% !important; } }

.module h2, .module caption, .inline-group h2 {
    background-color: #eee;
    color: #000 !important;
}

.object-tools a:link, .object-tools a:visited { border-radius: 3px; background-color: #17541f; }

We should also replace the default logo with its darker variant, since the background colors are now significantly lighter.

diff 
diff --git a/src/documents/templates/admin/base_site.html b/src/documents/templates/admin/base_site.html
index 0f76ec58..d84574ca 100644
--- a/src/documents/templates/admin/base_site.html
+++ b/src/documents/templates/admin/base_site.html
@@ -55,7 +55,7 @@

 {% block branding %}
 <h1 id="site-name">
-	<a href="{% url 'admin:index' %}"><img src="{% static 'paperless/img/logo-light.png' %}" alt="Paperless" /></a>
+	<a href="{% url 'admin:index' %}"><img src="{% static 'paperless/img/logo-dark.png' %}" alt="Paperless" /></a>
 </h1>
 {% endblock %}

Every page of the application has been improved. Notably, the table row headers have been adjusted for responsive Responsive View Responsive View The overall result is decent enough.

Default Paperless Interface
Improved Paperless Search Interface

More functional improvements can be implemented using We can implement search suggestions using text from the OCR layer. but I’ll leave it there. The changes listed in this article can be viewed at this repository.

27 October 2019 — Written
3 November 2021 — Updated
Thedro Neely — Creator
improving-paperless-interface.md — Article

More Content

Openring

Web Ring

Comments

References

  1. https://thedroneely.com/git/
  2. https://thedroneely.com/
  3. https://thedroneely.com/posts/
  4. https://thedroneely.com/projects/
  5. https://thedroneely.com/about/
  6. https://thedroneely.com/contact/
  7. https://thedroneely.com/abstracts/
  8. https://ko-fi.com/thedroneely
  9. https://thedroneely.com/tags/css/
  10. https://thedroneely.com/tags/python/
  11. https://thedroneely.com/posts/improving-paperless-interface/#isso-thread
  12. https://thedroneely.com/posts/rss.xml
  13. https://thedroneely.com/images/improving-paperless-interface.png
  14. https://github.com/the-paperless-project/paperless
  15. https://github.com/jonaswinkler/paperless-ng#paperless-ng
  16. https://github.com/paperless-ngx/paperless-ngx#readme
  17. https://www.djangoproject.com/
  18. https://github.com/jbarlow83/OCRmyPDF
  19. https://github.com/tesseract-ocr/tesseract
  20. https://thedroneely.com/images/improving-paperless-interface-default.png
  21. https://thedroneely.com/posts/improving-paperless-interface/#code-block-9018d15
  22. https://thedroneely.com/posts/improving-paperless-interface/#code-block-ab83fbe
  23. https://thedroneely.com/images/improving-paperless-interface-mobile.png
  24. https://thedroneely.com/images/improving-paperless-interface-search.png
  25. https://github.com/tdro/paperless/commits/master
  26. https://www.thedroneely.com/posts/improving-paperless-interface.md
  27. https://thedroneely.com/posts/tweaking-the-bash-shell/
  28. https://thedroneely.com/posts/writing-nixos-modules-and-switching-to-cgit/
  29. https://thedroneely.com/projects/bulma-resume/
  30. https://git.sr.ht/~sircmpwn/openring
  31. https://drewdevault.com/2022/11/12/In-praise-of-Plan-9.html
  32. https://drewdevault.com/
  33. https://mxb.dev/blog/the-indieweb-for-everyone/
  34. https://mxb.dev/
  35. https://www.taniarascia.com/simplifying-drag-and-drop/
  36. https://www.taniarascia.com/
  37. https://thedroneely.com/posts/improving-paperless-interface#isso-thread
  38. https://thedroneely.com/posts/improving-paperless-interface#code-block-9018d15
  39. https://thedroneely.com/posts/improving-paperless-interface#code-block-ab83fbe
  40. https://thedroneely.com/posts/adding-headroom-with-javascript/
  41. https://thedroneely.com/posts/site-updates-navigation/
  42. https://thedroneely.com/projects/news-aggregator/
  43. https://thedroneely.com/posts/finding-that-one-percent/
  44. https://thedroneely.com/archives/posts/
  45. https://drewdevault.com/2022/09/16/Open-source-matters.html
  46. https://mxb.dev/blog/make-free-stuff/
  47. https://thedroneely.com/sitemap.xml
  48. https://thedroneely.com/index.json
  49. https://thedroneely.com/resume/
  50. https://gitlab.com/tdro
  51. https://github.com/tdro
  52. https://codeberg.org/tdro
  53. https://thedroneely.com/analytics
  54. https://thedroneely.com/posts/improving-paperless-interface#
  55. https://creativecommons.org/licenses/by-sa/2.0/
  56. https://thedroneely.com/git/thedroneely/thedroneely.com
  57. https://opensource.org/licenses/GPL-3.0
  58. https://www.thedroneely.com/
  59. https://thedroneely.com/posts/improving-paperless-interface/#