Improve calendar and nl-list

CHANGELOG.md

@@ -14,6 +14,8 @@
   `/manage/accounts`.
 + TOC is now shown in pages where screen width is greater than 960 pixels.
 + Style changes: added a top bar with the site title. It replaces the floating menu on the top right.
++ Now logged-in users have an “Edit” button below the first heading. All users can access page history
+  by clicking the last modified time.
 + Added a built-in installer (`app_init.py`). You still need to manually create `site.conf`.
 
 ## 0.7.1

app.py

@@ -930,8 +930,10 @@ def calendar_month(y, m):
         (datetime.date(y, m, 1) <= Page.calendar) &
         (Page.calendar < datetime.date(y+1 if m==12 else y, 1 if m==12 else m+1, 1))
     ).order_by(Page.calendar)
+    page = int(request.args.get('page', 1))
 
-    return render_template('month.jinja2', d=datetime.date(y, m, 1), notes=notes)
+    return render_template('month.jinja2', d=datetime.date(y, m, 1), notes=notes.paginate(page),
+        page_n=page, total_count=notes.count(), min=min)
 
 @app.route('/history/revision/<int:revisionid>/')
 def view_old(revisionid):
@@ -984,7 +986,8 @@ def stats():
         notes_count=Page.select().count(),
         notes_with_url=Page.select().where(Page.url != None).count(),
         revision_count=PageRevision.select().count(),
-        users_count = User.select().count()
+        users_count = User.select().count(),
+        groups_count = UserGroup.select().count()
     )
 
 ## account management ##

i18n/salvi.en.json

@@ -61,6 +61,9 @@
         "page-created": "Page created",
         "write-a-comment": "Write a comment…",
         "input-tags": "Tags (comma separated)",
-        "no-tags": "No tags"
+        "no-tags": "No tags",
+        "notes-month-empty": "None found :(",
+        "calendar": "Calendar",
+        "groups-count": "User group count"
     }
 }

i18n/salvi.it.json

@@ -48,9 +48,21 @@
         "revision-count": "Numero di revisioni",
         "revision-count-per-page": "Media di revisioni per pagina",
         "remember-me-for": "Ricordami per",
+        "confirm-password": "Conferma password",
+        "email": "E-mail",
+        "optional": "opzionale",
+        "have-read-terms": "Ho letto i {0} e la {1}",
+        "terms-of-service": "Termini di Servizio",
+        "privacy-policy": "Politica sulla riservatezza",
+        "already-have-account": "Hai già un account?",
+        "logged-in-as": "Autenticato come",
+        "not-logged-in": "Non autenticato",
         "owner": "Proprietario",
         "write-a-comment": "Scrivi un commento…",
         "input-tags": "Etichette (separate da virgola)",
-        "no-tags": "Nessuna etichetta"
+        "no-tags": "Nessuna etichetta",
+        "notes-month-empty": "Non c\u2019\u00e8 nulla :(",
+        "calendar": "Calendario",
+        "groups-count": "Numero di gruppi utente"
     }
 }

static/style.css

@@ -35,6 +35,7 @@ body{font-family:sans-serif;background-color:var(--bg-main); color: var(--fg-mai
 /* content styles */
 .article-header {text-align: center;}
 #firstHeading {font-family:sans-serif; text-align: center;font-size:3em; font-weight: normal}
+@media (min-width:800px) {.homepage #firstHeading {font-size: 4.5em}}
 .inner-content{font-family:serif; margin: 1.7em auto; max-width: 1280px; line-height: 1.9; color: var(--fg-main)}
 .inner-content em,.inner-content strong{color: var(--fg-sharp)}
 .inner-content h1{color: var(--fg-error)}
@@ -64,6 +65,7 @@ body{font-family:sans-serif;background-color:var(--bg-main); color: var(--fg-mai
 .nl-new{margin:6px 0 12px 0;display:flex;justify-content:start; float: right}
 .nl-new > a{margin-right:12px}
 .nl-prev,.nl-next{text-align:center}
+.nl-placeholder {font-style: italic; text-align: center;}
 input{border:0;border-bottom:3px solid var(--border);font:inherit;color:var(--fg-main);background-color:transparent}
 input:focus{color:var(--fg-sharp);border-bottom-color:var(--border-sharp)}
 input.error{border-bottom-color:var(--btn-error)}
@@ -161,6 +163,10 @@ a:hover{color:var(--fg-link-hover)}
     .nl-list {display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr; column-gap: 1.5em}
     .nl-list > .nl-prev, .nl-list > .nl-next {grid-column-end: span 2}
 }
+@media (min-width:1200px){
+    .nl-list {grid-template-columns: 1fr 1fr 1fr}
+    .nl-list > .nl-prev, .nl-list > .nl-next {grid-column-end: span 3}
+}
 
 
 /* dark theme */

templates/calendar.jinja2

@@ -3,9 +3,10 @@
 {% block title %}Calendar – {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>Calendar</h1>
+<article>
+  <h1 id="firstHeading">{{ T('calendar') }}</h1>
 
-<ul>
+  <ul>
     {% for year in range(till_year, from_year-1, -1) %}
     <li>
       <strong>{{ year }} {% if year == now.year %}(current){% endif %}:</strong>
@@ -16,9 +17,9 @@
       </ul>
     </li>
     {% endfor %}
-</ul>
+  </ul>
 
-<p>
+  <p>
     Show more years: 
     <ul class="inline">
       <li>
@@ -28,5 +29,6 @@
         <a href="?from_year={{ from_year - 15 }}">in the past</a>
       </li>
     </ul>
-</p>
+  </p>
+</article>
 {% endblock %}

templates/home.jinja2

@@ -3,16 +3,17 @@
 {% block title %}{{ T('homepage') }} - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>{{ T('welcome').format(app_name) }}</h1>
+<article class="homepage">
+  <h1 id="firstHeading">{{ T('welcome').format(app_name) }}</h1>
 
-<div class="nl-new">
+  <div class="nl-new">
     <a href="/create/"><button class="submit-primary">{{ T('new-note') }}</button></a>
-</div>
+  </div>
 
-<h2>{{ T('latest-notes') }}</h2>
+  <h2>{{ T('latest-notes') }}</h2>
 
-<br style="clear:both">
+  <br style="clear:both">
-<ul class="nl-list">
+  <ul class="nl-list">
     {% for n in new_notes %}
     <li>
       <a href="{{ n.get_url() }}" class="nl-title">{{ n.title }}</a>
@@ -30,12 +31,15 @@
       {% if n.calendar %}
       <p class="nl-calendar">
         <span class="material-icons">calendar_today</span>
+        <a href="/calendar/{{ n.calendar.year }}/{{ n.calendar.month }}">
           <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
+        </a>
       </p>
       {% endif %}
     </li>
     {% endfor %}
     <li><a href="/p/most_recent/">{{ T('show-all') }}</a></li>
-</ul>
+  </ul>
+</article>
 
 {% endblock %}

templates/listrecent.jinja2

@@ -1,11 +1,12 @@
 {% extends "base.jinja2" %}
 
 {% block content %}
-<h1>Notes by date</h1>
+<article>
+  <h1>Notes by date</h1>
 
-<p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
+  <p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
 
-<ul class="nl-list">
+  <ul class="nl-list">
     {% if page_n > 1 %}
     <li class="nl-prev"><a href="/p/most_recent/{{ page_n - 1 }}">&laquo; Previous page</a></li>
     {% endif %}
@@ -26,7 +27,9 @@
       {% if n.calendar %}
       <p class="nl-calendar">
         <span class="material-icons">calendar_today</span>
+        <a href="/calendar/{{ n.calendar.year }}/{{ n.calendar.month }}">
           <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
+        </a>
       </p>
       {% endif %}
     </li>
@@ -34,5 +37,6 @@
     {% if page_n <= total_count // 20 %}
     <li class="nl-next"><a href="/p/most_recent/{{ page_n + 1 }}/">Next page &raquo;</a></li>
     {% endif %}
-</ul>
+  </ul>
+</article>
 {% endblock %}

templates/listtag.jinja2

@@ -3,12 +3,14 @@
 {% block title %}Notes tagged #{{ tagname }} - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>{{ T('notes-tagged') }} #{{ tagname }}</h1>
+<article>
+  <h1 id="firstHeading">#{{ tagname }}</h1>
+  <div class="preview-subtitle">{{ T('notes-tagged') }}</div>
 
-{% if total_count > 0 %}
+  {% if total_count > 0 %}
-<p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
+  <p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
 
-<ul class="nl-list">
+  <ul class="nl-list">
     {% if page_n > 1 %}
     <li class="nl-prev"><a href="/tags/{{ tagname }}/{{ page_n - 1 }}/">&laquo; Previous page</a></li>
     {% endif %}
@@ -30,7 +32,9 @@
         {% if n.calendar %}
         <p class="nl-calendar">
           <span class="material-icons">calendar_today</span>
+          <a href="/calendar/{{ n.calendar.year }}/{{ n.calendar.month }}">
             <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
+          </a>
         </p>
         {% endif %}
       </p>
@@ -39,10 +43,11 @@
     {% if page_n < total_count // 20 %}
     <li class="nl-next"><a href="/tags/{{ tagname }}/{{ page_n + 1 }}/">Next page &raquo;</a></li>
     {% endif %}
-</ul>
+  </ul>
-{% else %}
+  {% else %}
-<p class="nl-placeholder">{{ T('notes-tagged-empty') }}</p>
+  <p class="nl-placeholder">{{ T('notes-tagged-empty') }}</p>
-{% endif %}
+  {% endif %}
 
+</article>
 
 {% endblock %}

templates/month.jinja2

@@ -3,9 +3,13 @@
 {% block title %}{{ d.strftime("%B %Y") }} – {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>{{ d.strftime("%B %Y") }}</h1>
+<article>
+  <h1 id="firstHeading">{{ d.strftime("%B %Y") }}</h1>
 
-<ul>
+  {% if total_count > 0 %}
+  <p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
+
+  <ul class="nl-list">
     {% for n in notes %}
     <li>
       <a href="{{ n.get_url() }}" class="nl-title">{{ n.title }}</a>
@@ -21,12 +25,25 @@
       {% if n.calendar %}
       <p class="nl-calendar">
         <span class="material-icons">calendar_today</span>
+        {% if n.calendar.year == d.year and n.calendar.month == d.month %}
+        <strong>
           <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
+        </strong>
+        {% else %}
+        <a href="/calendar/{{ n.calendar.year }}/{{ n.calendar.month }}">
+          <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
+        </a>
+        {% endif %}
       </p>
       {% endif %}
     </li>
     {% endfor %}
-</ul> 
+  </ul> 
+  {% else %}
+  <p class="nl-placeholder">{{ T('notes-month-empty') }}</p>
+  {% endif %}
 
+  <p>{{ T('back-to') }} <a href="/calendar">{{ T('calendar') }}</a></p>
+</article>
 
 {% endblock %}

templates/stats.jinja2

@@ -11,5 +11,6 @@
   <li>{{ T("revision-count") }}: <strong>{{ revision_count }}</strong></li>
   <li>{{ T("revision-count-per-page") }}: <strong>{{ (revision_count / notes_count)|round(2) }}</strong></li>
   <li>{{ T('users-count') }}: <strong>{{ users_count }}</strong></li>
+  <li>{{ T('groups-count') }}: <strong>{{ groups_count }}</strong></li>
 </ul>
 {% endblock %}

templates/view.jinja2

@@ -12,7 +12,12 @@
     <h1 id="firstHeading">{{ p.title }}</h1>
 
     {% if p.calendar %}
-    <p class="calendar-subtitle"><span class="material-icons">calendar_today</span>{{ p.calendar.strftime('%B %-d, %Y') }}</p>
+    <p class="calendar-subtitle">
+      <span class="material-icons">calendar_today</span>
+      <a href="/calendar/{{ p.calendar.year }}/{{ p.calendar.month }}">
+        <time datetime="{{ p.calendar.isoformat() }}">{{ p.calendar.strftime('%B %-d, %Y') }}</time>
+      </a>
+    </p>
     {% endif %}
     
     <ul class="article-actions inline">