templates/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Converse: Index</title>

    <!-- TODO -->
    <meta http-equiv="Content-Security-Policy" content="script-src https://code.getmdl.io 'self';">
    <!-- <link rel="shortcut icon" href="images/favicon.png"> -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-orange.min.css" />
    <link rel="stylesheet" href="/static/styles.css">
  </head>
  <body class="converse mdl-base mdl-color-text--grey-700 mdl-color--grey-100">
    <div class="mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary-dark">
        <div class="mdl-layout__header-row">
          <a href="/" class="mdl-layout-title mdl-color-text--blue-grey-50 cvs-title">Converse</a>
          <div class="mdl-layout-spacer"></div>
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-color-text--blue-grey-50 search-field">
            <form method="get" action="/search">
              <input class="mdl-textfield__input" type="search" id="search-query" aria-label="Search" name="query">
              <label class="mdl-textfield__label mdl-color-text--blue-grey-100" for="search-query">Search query...</label>
              <input type="submit" hidden />
            </form>
          </div>
          &nbsp;
          <a href="/thread/new">
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
              New Thread
            </button>
          </a>
        </div>
      </header>
      <main class="mdl-layout__content">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text mdl-grid">
              <h4 class="mdl-cell mdl-cell--12-col">Latest threads:</h4>
              <ul class="mdl-list">
                {% for thread in threads %}
                <li class="mdl-list__item thread-list-item mdl-list__item--three-line">
                  <a class="thread-link mdl-color-text--grey-800" href="/thread/{{ thread.id }}">
                    <span class="mdl-list__item-primary-content {% if loop.index < threads.len() %}thread-divider{% endif %}">
                      <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored mdl-list__item-icon">
                        <i class="material-icons">
                          {% if thread.sticky %}
                            announcement
                          {% else if thread.closed %}
                            lock
                          {% else %}
                            library_books
                          {% endif %}
                        </i>
                      </button>
                      <span class="thread-title">{{ thread.title }}<span class="thread-author"> by {{ thread.author_name }}</span></span>
                      <span class="mdl-list__item-text-body">
                        Last reply by {{ thread.post_author }} on {{ thread.posted }}.
                      </span>
                    </span>
                  </a>
                </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </section>
      </main>
      <footer class="mdl-mini-footer">
        <div class="mdl-mini-footer--right-section">
          <p>Powered by <a href="https://github.com/tazjin/converse">Converse</a></p>
        </div>
      </footer>
      </div>
      <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </body>
</html>