Add optional CSS column layout

Author: arran4

Dockerfile

@@ -3,6 +3,7 @@ VOLUME /data
 ENV EXTERNAL_URL=http://localhost:8080
 ENV OAUTH2_CLIENT_ID=""
 ENV OAUTH2_SECRET=""
+ENV GBM_CSS_COLUMNS=""
 EXPOSE 8080
 EXPOSE 8443
 COPY gobookmarks /bin/gobookmarks

README.md

@@ -71,6 +71,7 @@ You will require 3 environment arguments:
 | `OAUTH2_CLIENT_ID` | The Client ID generated from setting up Oauth2 on github: https://github.com/settings/developers |
 | `OAUTH2_SECRET` | Secret ID  generated from setting up Oauth2 on github: https://github.com/settings/developers |
 | `EXTERNAL_URL` | The fully qualified URL that it is to accept connections from. Ie `http://localhost:8080`        |
+| `GBM_CSS_COLUMNS` | If set (to any value) the `Column` keyword in your bookmarks will create CSS multi-column breaks rather than table cells. |
 
 ## Oauth2 setup
 

funcs.go

@@ -46,6 +46,9 @@ func NewFuncs(r *http.Request) template.FuncMap {
 		"ref": func() string {
 			return r.URL.Query().Get("ref")
 		},
+		"useCssColumns": func() bool {
+			return UseCssColumns
+		},
 		"loggedIn": func() (bool, error) {
 			session := r.Context().Value(ContextValues("session")).(*sessions.Session)
 			githubUser, ok := session.Values["GithubUser"].(*github.User)

main.css

@@ -114,3 +114,18 @@ div.title {
 .category-form textarea {
         height: 30vh;
 }
+
+.cssColumns .bookmarkColumns {
+        column-width: 18em;
+        column-gap: 1em;
+}
+
+.cssColumns .columnBreak {
+        break-before: column;
+}
+
+.cssColumns .categoryBlock {
+        break-inside: avoid;
+        page-break-inside: avoid;
+        -webkit-column-break-inside: avoid;
+}

settings.go

@@ -0,0 +1,5 @@
+package gobookmarks
+
+import "os"
+
+var UseCssColumns = os.Getenv("GBM_CSS_COLUMNS") != ""

templates/indexPage.gohtml

@@ -4,11 +4,33 @@
         <a href="{{ OAuth2URL }}">Login</a><br>
     {{else}}
         {{- range bookmarkPages }}
-        <div class="bookmarkPage">
+        <div class="bookmarkPage{{ if useCssColumns }} cssColumns{{ end }}">
             {{- range .Blocks }}
             {{- if .HR }}
             <hr class="bookmarkHr" />
             {{- else }}
+            {{- if useCssColumns }}
+            <div class="bookmarkColumns">
+                {{- $first := true }}
+                {{- range .Columns }}
+                    {{- if not $first }}<div class="columnBreak"></div>{{ end }}
+                    {{- range .Categories }}
+                        <div class="categoryBlock">
+                            <h2>{{ .Name }} <a class="edit-link" href="/editCategory?index={{ .Index }}&ref={{ref}}" title="Edit">&#9998;</a></h2>
+                            <ul  style="list-style-type: none;">
+                                {{- range .Entries }}
+                                    <li>
+                                        <img src="/proxy/favicon?url={{ .Url }}" alt="•" style="width: 1em; max-height: 1em; font-weight: bolder; font-family: -moz-bullet-font;" />
+                                        <a href="{{ .Url }}" target="_blank">{{ .Name }}</a>
+                                    </li>
+                                {{- end }}
+                            </ul>
+                        </div>
+                    {{- end }}
+                    {{- $first = false }}
+                {{- end }}
+            </div>
+            {{- else }}
             <table>
                 <tr valign="top">
                     {{- range .Columns }}