From b2435bfb6c2248d74d50894d3ee8a90140979ef5 Mon Sep 17 00:00:00 2001 From: Tomas Zigo <50632337+tmszi@users.noreply.github.com> Date: Sun, 23 Oct 2022 13:03:13 +0200 Subject: [PATCH] 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: `DESCRIPTION` with `DESCRIPTION` * utils: fix space between HTML element attributes * man: install module HTML man page hamburger menu TOC SVG images --- man/Makefile | 8 +++ man/grassdocs.css | 91 +++++++++++++++++++++++++++++- man/hamburger_menu.svg | 75 ++++++++++++++++++++++++ man/hamburger_menu_close.svg | 69 ++++++++++++++++++++++ scripts/g.extension/g.extension.py | 5 +- utils/mkhtml.py | 84 ++++++++++++++++++++++----- 6 files changed, 313 insertions(+), 19 deletions(-) create mode 100644 man/hamburger_menu.svg create mode 100644 man/hamburger_menu_close.svg diff --git a/man/Makefile b/man/Makefile index 8c48c0ac0eb..1a189c8d7c8 100644 --- a/man/Makefile +++ b/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) $< $@ diff --git a/man/grassdocs.css b/man/grassdocs.css index 6e64ee37194..9debe02d424 100644 --- a/man/grassdocs.css +++ b/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; +} diff --git a/man/hamburger_menu.svg b/man/hamburger_menu.svg new file mode 100644 index 00000000000..3070f871480 --- /dev/null +++ b/man/hamburger_menu.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + diff --git a/man/hamburger_menu_close.svg b/man/hamburger_menu_close.svg new file mode 100644 index 00000000000..ec300f9ec06 --- /dev/null +++ b/man/hamburger_menu_close.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + X + + diff --git a/scripts/g.extension/g.extension.py b/scripts/g.extension/g.extension.py index 8f0a3947e5b..b37d5adbe34 100644 --- a/scripts/g.extension/g.extension.py +++ b/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")) diff --git a/utils/mkhtml.py b/utils/mkhtml.py index f7d9054dc16..5a44f1ff9d8 100644 --- a/utils/mkhtml.py +++ b/utils/mkhtml.py @@ -385,7 +385,6 @@ def get_last_git_commit(src_dir, addon_path, is_addon):
GRASS logo -
""" header_nopgm = """

${PGM}

@@ -520,42 +519,90 @@ def escape_href(label): return label.replace(" ", "-").lower() -def write_toc(data): +def write_toc(data, hamburger_menu_toc=False): + """Write Table of Contents + + :param tuple data: parsed data from MyHTMLParser class instance + :param bool hamburger_menu_toc: write hamburger menu TOC for the + mobile, tablet screen + """ + if not data: return fd = sys.stdout - fd.write('
\n') - fd.write('

Table of contents

\n') - fd.write('\n") + fd.write("
\n") def update_toc(data): @@ -657,13 +704,20 @@ def get_addon_path(): ) if not re.search("", tmp_data, re.IGNORECASE): sys.stdout.write(header_tmpl.substitute(PGM=pgm, PGM_DESC=pgm_desc)) + if tmp_data: + header_logo_img_el = 'GRASS logo' for line in tmp_data.splitlines(True): # The cleanup happens on Makefile level too. if not re.search( "||
", line, re.IGNORECASE ): - sys.stdout.write(line) + if header_logo_img_el in line: + sys.stdout.write(line) + # create hamburger menu TOC + write_toc(create_toc(src_data), hamburger_menu_toc=True) + else: + sys.stdout.write(line) # create TOC write_toc(create_toc(src_data))