utils: module HTML man page use hamburger menu TOC for screen width <…

… 1024 px (#2606)

* utils: module HTML man page use hamburger menu TOC for screen width < 1024 px

* Fix flake8, black errors.

* g.extension: copy CSS style file into addons docs HTML dir for every addon instalation

* g.extension: copy hamburger menu SVG image files into addons docs HTML dir for every addon instalation

* utils: set CSS class for every hamburger menu link list item

To prevent the link path from being replaced with a local path during
addon installation.

Example:

`<a href="#description">DESCRIPTION</a>`

with

`<a href="file:///usr/lib64/grass83/docs/html/#description">DESCRIPTION</a>`

* utils: fix space between HTML element attributes

* man: install module HTML man page hamburger menu TOC SVG images

man/Makefile

@@ -7,6 +7,8 @@ MANPAGES := $(patsubst $(HTMLDIR)/%.html,$(MANDIR)/%.$(MANSECT),$(wildcard $(HTM
 DSTFILES := \
 	$(HTMLDIR)/grassdocs.css \
 	$(HTMLDIR)/grass_logo.png \
+	$(HTMLDIR)/hamburger_menu.svg \
+	$(HTMLDIR)/hamburger_menu_close.svg \
 	$(HTMLDIR)/grass_icon.png \
 	$(HTMLDIR)/jquery.fixedheadertable.min.js \
 	$(HTMLDIR)/parser_standard_options.css \
@@ -148,6 +150,12 @@ $(HTMLDIR)/grassdocs.css: grassdocs.css
 $(HTMLDIR)/grass_logo.png: grass_logo.png
 	$(INSTALL_DATA) $< $@
 
+$(HTMLDIR)/hamburger_menu.svg: hamburger_menu.svg
+	$(INSTALL_DATA) $< $@
+
+$(HTMLDIR)/hamburger_menu_close.svg: hamburger_menu_close.svg
+	$(INSTALL_DATA) $< $@
+
 $(HTMLDIR)/grass_icon.png: grass_icon.png
 	$(INSTALL_DATA) $< $@
 

man/grassdocs.css

@@ -1,7 +1,7 @@
 /* GRASS GIS documentation site style sheet
  *
  * send improvements to GRASS Developers list
- * 
+ *
  *  (eg how to reach the same result on netscape, mozilla konqueror?)
  *
  * Fonts:
@@ -234,3 +234,92 @@ table.compact tr:nth-child(even) {
 s {
     text-decoration-color: rgba(0, 0, 0, 0.53);
 }
+
+@media screen and (max-width: 1023.99px) {
+    .toc {
+        display: none
+    }
+}
+
+@media screen and (min-width: 1023.99px) {
+    .toc-mobile-screen, .toc-mobile-screen:target, .hamburger {
+        display: none;
+    }
+}
+
+.hamburger, .close {
+    border: none;
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 32px;
+    height: 32px;
+}
+
+.hamburger {
+    background: white;
+}
+
+.hamburger img, .close img {
+    width: 100%;
+    height: 100%;
+}
+
+.toc-mobile-screen {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    list-style: none;
+    background: white;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: start;
+    align-items: center;
+    transform: translateY(-100%);
+    transition: transform 0.2s ease;
+}
+
+.toc-mobile-screen:target {
+    transform: translateY(0);
+}
+
+.toc-mobile-screen > li > a {
+    display: block;
+    font-family: arial,sans-serif;
+    color: rgb(25%, 60%, 25%);
+    font-weight: bold;
+    font-size: 1.2rem;
+    text-decoration: none;
+    border-bottom: 1px solid rgb(25%, 60%, 25%);
+    padding-bottom: 0.5rem;
+    text-align: center;
+}
+
+.toc-mobile-screen li a {
+    text-decoration: none;
+    border-bottom: 1px solid rgb(25%, 60%, 25%);
+    margin-bottom: 1rem;
+}
+
+.toc-mobile-screen li {
+    padding-bottom: 1rem;
+}
+
+.toc-mobile-screen li  a:hover, li a:focus {
+    border-bottom: 2px solid rgb(25%, 60%, 25%);
+}
+
+.toc-mobile-screen > li:first-child {
+    padding-top: 5rem;
+}
+
+.toc-mobile-screen > li {
+    padding-top: 2rem;
+}

scripts/g.extension/g.extension.py

@@ -2152,9 +2152,6 @@ def check_style_file(name):
     dist_file = os.path.join(os.getenv("GISBASE"), "docs", "html", name)
     addons_file = os.path.join(options["prefix"], "docs", "html", name)
 
-    if os.path.isfile(addons_file):
-        return
-
     try:
         shutil.copyfile(dist_file, addons_file)
     except OSError as error:
@@ -2190,6 +2187,8 @@ def check_dirs():
     create_dir(os.path.join(options["prefix"], "docs", "html"))
     create_dir(os.path.join(options["prefix"], "docs", "rest"))
     check_style_file("grass_logo.png")
+    check_style_file("hamburger_menu.svg")
+    check_style_file("hamburger_menu_close.svg")
     check_style_file("grassdocs.css")
     create_dir(os.path.join(options["prefix"], "etc"))
     create_dir(os.path.join(options["prefix"], "docs", "man", "man1"))