theme: support full page width

[mudler]

Hi @McShelby 👋

As promised here I am asking for some advice here, is there a way to have full-width pages, or a way to make them consume all the available space?

I think would be nice to offer a toggle for those that wants to use full space of the page, however there are also corner cases (like the screenshot below, for example) when this is an issue as well.

Thanks for making relearn!

[McShelby]

In the past I was strictly agaist this.

1. Generally, it decreases readability
2. With my limited Hugo knowledge it was difficult to achieve

Now, the second point doesn't apply anymore. Implementing this is pretty easy to achieve. So with the old hard coded value as default there is no reason not to do this.

In the best case, it will be included in the next release - but first I have to finish #679.

[JohannOberdorfer]

Hi All,
a nice idea indeed.
One way could be to add an extra button on top of the page to allow a user to switch the current page (document type = "page") to full screen and vice versa.

Implementation:

STEP-1:

Tell hugo to render an extra "embed" page. In config.toml the following is required:

'''
[outputs]
page = ["HTML", "RSS", "PRINT", "EMBED"]

[outputFormats]
[outputFormats.EMBED]
name= "EMBED"
baseName = "index.embed"
# path = "embed.html"
isHTML = true
mediaType = 'text/html'
permalinkable = true
'''

Step-2:

Modify the file ..\layouts\partials\topbar\area\end.html to show the button ontop of the page:

<!-- customized
	 copied from: ksu-cs-textbooks-hugo-theme-relearn-main
 -->
{{- with .OutputFormats.Get "EMBED" }}
	<div id="top-embed-link">
		<a class="print-link" title='{{ T "Embeddable-version" }}' href="{{ .RelPermalink }}">
			<i class="fas fa-expand-arrows-alt fa-fw"></i>
		</a>
	</div>
{{- end -}}
<!-- customized -->

{{- partial "topbar/button/edit.html" (dict
	"page" .
)}}
{{- partial "topbar/button/print.html" (dict
	"page" .
)}}
{{- partial "topbar/button/prev.html" (dict
	"page" .
)}}
{{- partial "topbar/button/next.html" (dict
	"page" .
)}}
{{- partial "topbar/button/more.html" (dict
	"page" .
)}}

Step-3:

Create a new \layouts\partials\archetypes\default\article-embed.html with the following content:

<style>
#R-body {
	/* quick fix for centering the content */
    display: contents;
	margin-inline-start:50px; /* var(--INTERNAL-MENU-WIDTH-L) */
}
.button {
  background-color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
  color: white;
  /* border-style: solid; */
  border-radius:10px;
  padding: 4px 12px;
  display: inline-block;
  position: fixed;
  top: 10px;
  right: 80px;
  opacity: 0.4;
}
</style>

{{- $page := .page }}
{{- $content := .content }}

{{- with $page }}
	<article class="default">

		<a class="button" href="javascript:history.back();" >
			<i class="fas fa-expand-arrows-alt fa-fw"></i>
		</a>
		
		<h1> {{ .Title }} </h1>

		{{ $content | safeHTML }}
		
		<footer class="footline">
			<!--
			{{/* - partial "content-footer.html" . */}}
			-->
			
			<!-- <i class="fas fa-expand-arrows-alt fa-fw"></i>
				❮ Previous...
			-->
		</footer>
		<hr/>
	</article>
{{- end }}

Please also notice that the <style> codeblock is a quick hack so that the page appears to have the same style as the rest, I am shure this is not perfect but for the moment serves the purpose.

Step-4

Customization is required for the following files stored in \layouts\partials:

footer.embed.html copy from footer.html but without the extras which should not appear in full-screen mode.
header.embed.html same story, here the side menu needs to be removed.

[McShelby]

As far as I understood this (@mudler correct me if I am wrong) this issue is not about hiding the chrome part (menu & topbar) but to leverage existing available whitespace to the left and right of the article if your screen width exceeds the current maximum width threshold.

[JohannOberdorfer]

oops, I understand, sorry for the confusion here :=).

[FidelusAleksander]

I'd love this aswell