redesign

1 files changed, 144 insertions, 136 deletions

diff --git a/templates/index.html b/templates/index.html
index b08f68b..4372fd3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,162 +11,170 @@
     <script type="text/javascript" src="/static/jquery.min.js"></script>
     <script type="text/javascript" src="/static/smoothstate.min.js"></script>
     <script type="text/javascript" src="/static/materialize.min.js"></script>
-    <div class="container" id="main">
-        <header class="row">
-            <h3>Lehrersprüche</h3>
-            <div class="section">
-                {% if user.loggedin %}
-                <form action="/logout" method="post">
-                    <button class="btn" type="submit">Logout ({{ user.name }})</button>
-                </form>
-                {% else %}
-                <form action="/login" method="post">
-                    <div class="col s6 m4 l3 input-field">
-                        <label for="user">Benutzer</label>
-                        <input type="text" name="user">
-                    </div>
-                    <div class="col s6 m4 l3 input-field">
-                        <label for="user">Passwort</label>
-                        <input type="password" name="password">
-                    </div>
-                    <div class="col s6 m4 l2">
-                        <button class="btn col s12" type="submit">Anmelden</button>
+    <header>
+        <div class="navbar-fixed">
+            <nav class="nav-wrapper">
+                <a href="#" class="left brand-logo">Lehrersprüche</a>
+                <ul class="right">
+                    <li>
+                        {% if user.loggedin %}
+                        <a href="/logout">Logout ({{ user.name }})</a>
+                        {% else %}
+                        <a data-target="modal-login" class="modal-trigger" href="#modal-login">Login</button>
+                        {% endif %}
+                    </li>
+                    <li>
+                        <a class="dropdown-button" href="#!" data-activates="sort-dropdown">
+                            Sortierung<i class="material-icons right">arrow_drop_down</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a id="export" target="_blank" href="/export?filter={{ request.args.get("filter") or "" }}&sort={{ request.args.get("sort") or "" }}">
+                            <i class="material-icons">file_download</i>
+                        </a>
+                    </li>
+                </ul>
+                <form id="searchform" style="margin-left: 17em; margin-right: 24em;"><!-- TODO get rid of these magic margins -->
+                    <div class="input-field">
+                        <label for="filter"><i class="material-icons">search</i></label>
+                        <input type="search" name="filter" required>
+                        <i class="material-icons">close</i>
                     </div>
                 </form>
-                {% endif %}
-                <div class="col s12">
-                    <form>
-                        <div class="col s9 input-field">
-                            <label for="search">Stichworte</label>
-                            <input type="text" name="filter">
-                        </div>
-                        <div class="col s3">
-                            <button class="btn" type="submit">Suchen</button>
-                        </div>
-                    </form>
+                <a onclick="$('#searchform').removeClass('hide');"><i class="material-icons">search</i></a>
+            </nav>
+        </div>
+        <ul id="sort-dropdown" class="dropdown-content">
+            {% for meth in [["rank", "Angesagt"], ["score", "Punkte"], ["age", "Alter"], ["unread", "Ungelesen"]] %}
+            <li><a href="/?filter={{ request.args.get("filter") or "" }}&sort={{ meth[0] }}">{{ meth[1] }}</a></li>
+            {% endfor %}
+        </ul>
+        <form id="modal-login" class="modal row" action="/login" method="post">
+            <div class="modal-content">
+                <h4>Anmelden/Registrieren</h4>
+                <p>Als registrierter Benutzer werden deine Stimmen höher gewichtet. Veröffentlichte Sprüche kannst du später bearbeiten und löschen.</p>
+                <div class="col s6 input-field">
+                    <label for="user">Benutzer</label>
+                    <input type="text" name="user">
                 </div>
-                <div class="right">
-                    <div class="col offset-s5 s5">
-                        <form>
-                            <div class="input-field">
-                                <select name="sort" onchange="this.form.submit();">
-                                    {% for meth in [["rank", "Angesagt"], ["score", "Punkte"], ["age", "Alter"], ["unread", "Ungelesen"]] %}
-                                    <option value="{{ meth[0] }}"{% if selected_sort == meth[0] %} selected{% endif %}>{{ meth[1] }}</option>
-                                    {% endfor %}
-                                </select>
-                                <label>Sortierung</label>
-                            </div>
-                            <noscript><input type="submit" value="Anzeigen"></noscript>
-                        </form>
-                    </div>
-                    <div class="col s2">
-                        <a id="export" target="_blank" class="btn-floating btn-large right" href="/export{% if query %}?{{ query }}{% endif %}"><i class="material-icons">file_download</i></a>
-                    </div>
+                <div class="col s6 input-field">
+                    <label for="user">Passwort</label>
+                    <input type="password" name="password">
                 </div>
             </div>
-        </header>
-        <main>
-            {% with msgs = get_flashed_messages() %}
-                {% if msgs %}
-            <div>
-                {% for msg in msgs %}
+            <div class="modal-footer">
+                <button class="modal-action modal-close btn-flat" type="submit">Anmelden</button>
+            </div>
+        </form>
+    </header>
+    <main class="section container" id="main">
+        <noscript><p class="center section">Bitte aktiviere JavaScript, um alle Funktionen der Seite nutzen zu können.</p></noscript>
+        {% with msgs = get_flashed_messages() %}
+            {% if msgs %}
+            <div class="section">
+            {% for msg in msgs %}
                 <p>{{ msg }}</p>
-                {% endfor %}
+            {% endfor %}
             </div>
-                {% endif %}
-            {% endwith %}
-            {% if tags %}
-                {% for tag in tags %}
+            {% endif %}
+        {% endwith %}
+        {% if tags %}
+        <div class="section">
+            {% for tag in tags %}
             <div class="chip">
                 {{ tag }}
                 <a href="/?filter={{ tags|reject('sameas', tag)|join('+') }}"><i class="material-icons">close</i></a>
             </div>
-                {% endfor %}
-            {% endif %}
-            <ul class="collection">
-                {% for joke in jokes[currentpage*perpage:(currentpage+1)*perpage] %}
-                <li class="collection-item row valign-wrapper">
-                    <div class="col s4 m2 valign">
-                        {% if not joke.deleted %}
-                        <div>
-                            <i class="material-icons">whatshot</i> <span class="right">{{ joke.score }} Punkte</span>
-                        </div>
-                        <form action="/upvote" method="post">
-                            <input type="hidden" name="id" value="{{ joke.id }}">
-                            <button class="btn{% if joke.upvoted %} disabled{% endif %}" type="submit" style="width: 100%;">
-                                <i class="material-icons">thumb_up</i>
-                            </button>
-                        </form>
-                        <form action="/downvote" method="post">
-                            <input type="hidden" name="id" value="{{ joke.id }}">
-                            <button class="btn{% if joke.downvoted %} disabled{% endif %}" type="submit" style="width: 100%;">
-                                <i class="material-icons">thumb_down</i>
-                            </button>
-                        </form>
-                        {% else %}
-                        <form action="/undelete" method="post">
-                            <input type="hidden" name="id" value="{{ joke.id }}">
-                            <button class="btn-flat" type="submit" style="width: 100%;">
-                                <i class="material-icons">delete undo</i>
-                            </button>
-                        </form>
-                        {% endif %}
+            {% endfor %}
+        </div>
+        {% endif %}
+        <ul class="collection">
+            {% for joke in jokes[currentpage*perpage:(currentpage+1)*perpage] %}
+            <li class="collection-item row valign-wrapper">
+                <div class="col s4 m2 valign">
+                    {% if not joke.deleted %}
+                    <div>
+                        <i class="material-icons">whatshot</i> <span class="right">{{ joke.score }} Punkte</span>
                     </div>
-                    <div class="joke flow-text col s8 m10{% if joke.deleted %} grey-text{% endif %}" style="line-height: 1.5">
-                        {% if joke.mine %}
-                        <form action="/edit" method="post">
-                            <input type="hidden" name="id" value="{{ joke.id }}">
-                            <button type="button" class="btn-floating right blue noteditor" onclick="openEditor(this)"><i class="material-icons">edit</i></button>
-                            <div class="input-field hide editor">
-                                <label for="text">Spruch bearbeiten</label>
-                                <textarea class="materialize-textarea" name="text">{{ joke.text }}</textarea>
-                                <button type="submit" class="btn-floating right blue"><i class="material-icons">done</i></button>
-                            </div>
-                        </form>
-                        {% endif %}
-                        <div class="textfield noteditor">
-                            {{ joke.html|safe }}
+                    <form action="/upvote" method="post">
+                        <input type="hidden" name="id" value="{{ joke.id }}">
+                        <button class="btn{% if joke.upvoted %} disabled{% endif %}" type="submit" style="width: 100%;">
+                            <i class="material-icons">thumb_up</i>
+                        </button>
+                    </form>
+                    <form action="/downvote" method="post">
+                        <input type="hidden" name="id" value="{{ joke.id }}">
+                        <button class="btn{% if joke.downvoted %} disabled{% endif %}" type="submit" style="width: 100%;">
+                            <i class="material-icons">thumb_down</i>
+                        </button>
+                    </form>
+                    {% else %}
+                    <form action="/undelete" method="post">
+                        <input type="hidden" name="id" value="{{ joke.id }}">
+                        <button class="btn-flat" type="submit" style="width: 100%;">
+                            <i class="material-icons">delete undo</i>
+                        </button>
+                    </form>
+                    {% endif %}
+                </div>
+                <div class="joke flow-text col s8 m10{% if joke.deleted %} grey-text{% endif %}" style="line-height: 1.5">
+                    {% if joke.mine %}
+                    <form action="/edit" method="post">
+                        <input type="hidden" name="id" value="{{ joke.id }}">
+                        <button type="button" class="btn-floating right blue noteditor" onclick="openEditor(this)"><i class="material-icons">edit</i></button>
+                        <div class="input-field hide editor">
+                            <label for="text">Spruch bearbeiten</label>
+                            <textarea class="materialize-textarea" name="text">{{ joke.text }}</textarea>
+                            <button type="submit" class="btn-floating right blue"><i class="material-icons">done</i></button>
                         </div>
-                        {% if joke.mine and not joke.deleted %}
-                        <form action="/delete" method="post">
-                            <input type="hidden" name="id" value="{{ joke.id }}">
-                            <button class="btn-floating right red noteditor" type="submit"><i class="material-icons">delete</i></button>
-                        </form>
-                        {% endif %}
+                    </form>
+                    {% endif %}
+                    <div class="textfield noteditor">
+                        {{ joke.html|safe }}
                     </div>
-                </li>
+                    {% if joke.mine and not joke.deleted %}
+                    <form action="/delete" method="post">
+                        <input type="hidden" name="id" value="{{ joke.id }}">
+                        <button class="btn-floating right red noteditor" type="submit"><i class="material-icons">delete</i></button>
+                    </form>
+                    {% endif %}
+                </div>
+            </li>
+            {% endfor %}
+        </ul>
+        {% if jokes|length > perpage %}
+        <div class="section center">
+            <ul class="pagination">
+                <li{% if currentpage==0 %} class="disabled"{% endif %}><a href="/page/{{ currentpage-1 }}{% if query %}?{{ query }}{% endif %}"><i class="material-icons">chevron_left</i></a></li>
+                {% for page in range((jokes|length/perpage)|round(0, 'ceil')|int) %}
+                <li{% if currentpage==loop.index0 %} class="active"{% endif %}><a href="/page/{{ loop.index0 }}{% if query %}?{{ query }}{% endif %}">{{ loop.index }}</a></li>
                 {% endfor %}
+                <li{% if currentpage==loop.length-1 %} class="disabled"{% endif %}><a href="/page/{{ currentpage+1 }}{% if query %}?{{ query }}{% endif %}"><i class="material-icons">chevron_right</i></a></li>
             </ul>
-            {% if jokes|length > 0 %}
-            <div class="section center">
-                <ul class="pagination">
-                    <li{% if currentpage==0 %} class="disabled"{% endif %}><a href="/page/{{ currentpage-1 }}{% if query %}?{{ query }}{% endif %}"><i class="material-icons">chevron_left</i></a></li>
-                    {% for page in range((jokes|length/perpage)|round(0, 'ceil')|int) %}
-                    <li{% if currentpage==loop.index0 %} class="active"{% endif %}><a href="/page/{{ loop.index0 }}{% if query %}?{{ query }}{% endif %}">{{ loop.index }}</a></li>
-                    {% endfor %}
-                    <li{% if currentpage==loop.length-1 %} class="disabled"{% endif %}><a href="/page/{{ currentpage+1 }}{% if query %}?{{ query }}{% endif %}"><i class="material-icons">chevron_right</i></a></li>
-                </ul>
+        </div>
+        {% endif %}
+        <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
+            <a data-target="modal-submit" class="modal-trigger btn-floating btn-large red" href="#modal-submit">
+                <i class="material-icons">add</i>
+            </a>
+        </div>
+        <form id="modal-submit" class="modal bottom-sheet" action="/submit" method="post">
+            <div class="modal-content">
+                <h4>Spruch hinzufügen</h4>
+                <p>Du kannst <em>/kursiv/</em>, <b>*fett*</b> schreiben, und <a>#Tags</a> verwenden.</p>
+                <div class="input-field">
+                    <textarea class="materialize-textarea" name="text"></textarea>
+                </div>
             </div>
-            <div class="divider"></div>
-            {% endif %}
-            <div class="section">
-                <form action="/submit" method="post">
-                    <div class="row">
-                        <div class="col s12 m9 input-field">
-                            <label for="text">Neuen Spruch hinzufügen</label>
-                            <textarea class="materialize-textarea" name="text"></textarea>
-                        </div>
-                        <div class="col s12 m3">
-                            <input type="submit" class="btn" value="hinzufügen">
-                        </div>
-                    </div>
-                </form>
+            <div class="modal-footer">
+                <input type="submit" class="modal-action modal-close btn-flat" value="Abschicken">
             </div>
-        </main>
-    </div>
+        </form>
+    </main>
     <script type="text/javascript">
         function materialjs() {
-            $('select').material_select();
+            $('.dropdown-button').dropdown();
+            $('.modal-trigger').leanModal();
         }
 
         $(document).ready(function() {