krz/michelangelo

A Tumblr web client.

clone: git clone https://gitbay.org/krz/michelangelo.git

main: templates/layout.html · raw

 1<!doctype html>
 2<html lang="en">
 3<head>
 4  <meta charset="utf-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1">
 6  <title>{{.Title}}</title>
 7  <link rel="stylesheet" href="/static/app.css">
 8</head>
 9<body>
10  <nav>
11    <a class="brand" href="/">Michelangelo</a>
12    <div class="nav-links">
13      {{if .BlogName}}
14        <a href="/" class="nav-blogname">{{.BlogName}}</a>
15      {{end}}
16      <div class="type-filter">
17        <a href="#" data-type="photo" class="active">Photos</a>
18        <a href="#" data-type="video">Videos</a>
19      </div>
20      <form class="search-form" action="/search" method="get">
21        <input type="search" name="q" placeholder="Search tags…"
22          value="{{if eq .View "search"}}{{.QueryOrBlog}}{{end}}">
23      </form>
24      <a href="/logout" class="nav-logout">Logout</a>
25    </div>
26  </nav>
27
28  <main>
29    {{if eq .View "blog"}}
30      <h2 class="page-header">
31        <a href="https://{{.QueryOrBlog}}.tumblr.com" target="_blank" rel="noopener">{{.QueryOrBlog}}</a>
32      </h2>
33    {{else if eq .View "search"}}
34      <h2 class="page-header">Tag: {{.QueryOrBlog}}</h2>
35    {{end}}
36
37    <div id="grid" class="masonry-grid"></div>
38    <div id="sentinel"></div>
39    <div id="loader" class="loader hidden">
40      <span></span><span></span><span></span>
41    </div>
42    <p id="end-message" class="end-message hidden">No more posts.</p>
43  </main>
44
45  <!-- Lightbox overlay -->
46  <div id="lightbox" class="lightbox hidden" role="dialog" aria-modal="true">
47    <button class="lightbox-close" aria-label="Close">&#x2715;</button>
48    <button class="lightbox-prev" aria-label="Previous">&#x2039;</button>
49    <button class="lightbox-next" aria-label="Next">&#x203a;</button>
50    <div class="lightbox-media"></div>
51    <div class="lightbox-actions">
52      <button class="btn-like" data-id="" data-key="" data-liked="false">&#9825; Like</button>
53      <button class="btn-reblog" data-id="" data-key="" data-blog="">&#8635; Reblog</button>
54      <a class="btn-source" href="#" target="_blank" rel="noopener">&#8599; Source</a>
55    </div>
56  </div>
57
58  <script>
59    window.MICHELANGELO = {
60      view:    "{{.View}}",
61      blog:    "{{.QueryOrBlog}}",
62      query:   "{{.QueryOrBlog}}",
63      myBlog:  "{{.BlogName}}"
64    };
65  </script>
66  <script src="/static/app.js"></script>
67</body>
68</html>