Some gentle UI updates

Dockerfile

@@ -17,4 +17,4 @@ RUN mkdir -p /static && \
 
 USER app
 
-CMD uvicorn --host=0.0.0.0 asgi:application
+CMD sh ./run.sh

asgi.py

@@ -1,8 +1,15 @@
 import os
+os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'
+
+from django.conf import settings
 from django.core.asgi import get_asgi_application
 from django_simple_task import django_simple_task_middlware
-
-os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'
+from asgi_middleware_static_file import ASGIMiddlewareStaticFile
 
 app = get_asgi_application()
+app = ASGIMiddlewareStaticFile(
+    app,
+    static_url=settings.STATIC_URL,
+    static_root_paths=[settings.STATIC_ROOT]
+)
 application = django_simple_task_middlware(app)

docker-compose.yml

@@ -5,8 +5,8 @@ services:
         image: 'gedgo_app'
         env_file: '.env'
         container_name: 'gedgo_app'
-        # command: ['python', 'manage.py', 'runserver', '0.0.0.0:8000']
-        command: ['uvicorn', '--host=0.0.0.0', '--reload', 'asgi:application']
+        command: ['python', 'manage.py', 'runserver', '0.0.0.0:8000']
+        # command: ['uvicorn', '--host=0.0.0.0', '--reload', 'asgi:application']
         ports:
             - '8000:8000'
         volumes:

gedgo/static/js/timeline.js

@@ -36,7 +36,7 @@
             .append("line")
             .attr("x1", w/2).attr("y1", 10)
             .attr("x2", w/2).attr("y2", h - 10)
-            .attr("stroke", "teal");
+            .attr("stroke", "#004643");
 
         svg.selectAll("circle")
             .data(events)
@@ -45,9 +45,9 @@
             .attr("cx", w/2)
             .attr("cy", (d) => scale(d.year))
             .attr("r", 5)
-            .attr("fill", d => (d.year === birthyear || d.year === deathyear) ? "teal" : "white")
+            .attr("fill", d => (d.year === birthyear || d.year === deathyear) ? "#004643" : "#fffffe")
             .attr("stroke-width", 3)
-            .attr("stroke", d => (d.type === 'personal') ? "teal" : "orange");
+            .attr("stroke", d => (d.type === 'personal') ? "#004643" : "#f9bc60");
 
         svg.selectAll("text")
               .data(events)

gedgo/static/styles/style-default.css

@@ -1,47 +1,79 @@
 /* Move down content because we have a fixed navbar that is 50px tall */
 body {
-  background-color: #d5dce0;
+  background-color: #abd1c6;
   font-family: Camphor, Open Sans, Segoe UI, sans-serif;
   text-rendering: optimizeLegibility;
+  color: #001e1d;
 }
 
 a {
-  color: #537484;
+  color: #004643;
+}
+a:hover {
+  color: #004643;
 }
 
 .navbar {
-  background-color: #538463 !important;
+  background-color: #004643;
+}
+.navbar.navbar-inverse {
+  border: none;
 }
 .navbar-nav li a {
   color: #fcfcfc !important;
 }
 .navbar-nav .dropdown .footlist a {
   color: #666 !important;
 }
+
+a.dropdown-toggle {
+    margin-top: 3px;
+    padding-bottom: 0;
+}
+.navbar-nav .open .dropdown-toggle,
 .navbar-nav .active a {
-  background-color: #6e9b7d !important;
+  background-color: #004643 !important;
+  color: #f9bc60 !important;
 }
-.navbar-nav .open .dropdown-toggle {
-  background-color: #6e9b7d !important;
+.btn-primary {
+  border: none;
+  background-color: #f9bc60 !important;
 }
 
 .navbar-brand {
   color: #fff !important;
+  padding-bottom: 35px;
 }
 
 .main-container {
   margin-top: 65px;
 }
 
+.main-container > .row > div {
+  padding: 0 5px;
+}
+
+.blog .time {
+  color: #999;
+}
+
+.documentary,
+.blog {
+  padding: 20px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.documentary:first-child,
+.blog:first-child {
+    padding-top: 0;
+}
+
 .main {
   margin: 5px;
-  color: #666;
-  background-color: #fff;
+  color: #001e1d;
+  background-color: #fffffe;
   padding: 20px;
   border-radius: 5px;
-  border-style: solid;
-  border-color: #d3d3d3;
-  border-width: 1px;
 }
 .section {
   margin-top: 35px;
@@ -55,6 +87,7 @@ a {
   min-height: 100%;
   max-height: 100%;
   margin-bottom: 10px;
+  border: 1px solid #eee
 }
 .subsection-thumb {
   display: block;
@@ -84,9 +117,23 @@ a {
     min-height: 64px;
 }
 
-.comment-area {
+textarea.comment-area.form-control {
   resize: none;
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  border-radius: 0;
+  border: none;
+  background-color: #eee;
+  border-bottom: 2px solid #004643;
+}
+textarea.comment-area.form-control:focus {
+  background-color: #fffffe;
+  border-top: 1px solid #004643;
+  border-left: 1px solid #004643;
+  border-right: 1px solid #004643;
 }
+
 .card {
   margin-bottom: 5px;
 }
@@ -106,7 +153,7 @@ a {
 
 rect {
   fill: white;
-  stroke: teal;
+  stroke: #004643;
   stroke-width: 2;
 }
 path {

gedgo/static/styles/style-login.css

@@ -28,21 +28,16 @@ body {
 .form-signin .form-control:focus {
   z-index: 2;
 }
-.form-signin input[type="email"] {
-  margin-bottom: -1px;
+.form-signin input {
+  margin-bottom: 5px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.form-signin input[type="password"] {
-  margin-bottom: 10px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
 .pod {
   background-color: #FFFBFF;
   border-radius: 10px;
   padding: 15px 15px 20px 15px;
   margin: 0 auto;
   min-height: 80px;
   max-width: 380px;
-}
+}

gedgo/templates/default/base.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-    <link href="{{ STATIC_URL }}styles/style-default.css?v=2" rel="stylesheet" type="text/css" >
+    <link href="{{ STATIC_URL }}styles/style-default.css?v=3" rel="stylesheet" type="text/css" >
     {% block headappend %}{% endblock %}
   </head>
   <body>

gedgo/templates/default/blogpost_list.html

@@ -20,33 +20,33 @@ <h4>Archive</h4>
     <!-- Posts  -->
     {% if posts.object_list %}
         {% for post in posts.object_list %}
-        <div class="pod">
+        <div class="pod blog">
             <a href="/gedgo/blog/post/{{ post.id }}"><h2>{{ post.title }}</h2></a>
-            <div class="body">{{ post.body|linebreaks|truncatewords:200 }}</div>
             <div class="time">{{ post.created }}</div>
+            <div class="body">{{ post.body|linebreaks|truncatewords:200 }}</div>
         </div>
         {% endfor %}
     {% else %}
         <div class="pod">
             No blog posts written yet.
         </div>
     {% endif %}
-        
+
     <!-- Next/Prev page links  -->
     {% if posts.object_list and posts.paginator.num_pages > 1 %}
     <div class="section">
       <div style="text-align: center;">
         {% if posts.has_previous %}
-            <a class="btn btn-default" href="?page={{ posts.previous_page_number }}"> &lt;&lt; newer entries </a>
+            <a class="btn btn-default" href="?page={{ posts.previous_page_number }}"> &lt; newer</a>
         {% endif %}
 
         <span class="current">
             &nbsp;Page {{ posts.number }} of {{ posts.paginator.num_pages }}&nbsp;
         </span> {# post list #}
 
         {% if posts.has_next %}
-            <a class="btn btn-default" href="?page={{ posts.next_page_number }}">older entries &gt;&gt; </a>
-        {% endif %} 
+            <a class="btn btn-default" href="?page={{ posts.next_page_number }}">older &gt;</a>
+        {% endif %}
       </div>
     </div>
   {% endif %}

gedgo/templates/default/documentaries.html

@@ -21,7 +21,7 @@
 {% block content %}
 {% if documentaries.exists %}
     {% for documentary in documentaries.iterator %}
-      <div class="row">
+      <div class="row documentary">
         <div class="col-xs-6 col-sm-3">
           <a class="pull-left" href="/gedgo/documentaries/{{ documentary.title | urlencode }}/">
             <img style="width: 100%" class="documentary-thumb media-object" src="/gedgo/media/gedcom/{{ documentary.thumb.docfile.name }}?size=w640h480">

gedgo/templates/default/gedcom.html

@@ -6,7 +6,7 @@
 {% for photo in gedcom.photo_sample %}
   <div class="col-lg-4 col-md-6" style="padding: 0 10px; padding-bottom: 10px">
   <a href="{% if photo.key_person_tag %}{{ photo.key_person_tag.pointer }}{% else %}/gedgo/document/{{ photo.id }}{% endif %}">
-      <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="sidebar-thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';">
+      <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="sidebar-thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';">
   </a>
 </div>
 {% endfor %}

gedgo/templates/default/person-card.html

@@ -2,7 +2,7 @@
   <div class="col-xs-5">
     <a href="/gedgo/{{ somebody.gedcom.id }}/{{ somebody.pointer }}/">
         <img src="{% if somebody.photos %}/gedgo/media/gedcom/{{ somebody.key_photo.docfile.name }}?size=w128h128{% else %}{{ STATIC_URL }}img/generic_person.gif{% endif %}"
-              class="thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';"></a>
+              class="thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';"></a>
   </div>
   <div class="card-content col-xs-7">
     <h4 class="card-title"><a href="/gedgo/{{ somebody.gedcom.id }}/{{ somebody.pointer }}/">{{ somebody.full_name }}</a></h4>

gedgo/templates/default/person.html

@@ -6,7 +6,7 @@
 {% for photo in photos %}
     <div class="col-lg-4 col-md-6" style="padding: 0 10px; padding-bottom: 10px">
       <a href="/gedgo/document/{{ photo.id }}">
-        <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="sidebar-thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';">
+        <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="sidebar-thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';">
       </a>
     </div>
 {% empty %}
@@ -23,7 +23,7 @@
 <div class="row">
     <div class="col-xs-5">
       <a href="{% if person.photos %}/gedgo/document/{{ person.key_photo.id }}{% else %}#{% endif %}">
-          <img src="{% if person.photos %}/gedgo/media/gedcom/{{ person.key_photo.docfile.name }}?size=w640h480{% else %}{{ STATIC_URL }}img/generic_person.gif{% endif %}" class="thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';">
+          <img src="{% if person.photos %}/gedgo/media/gedcom/{{ person.key_photo.docfile.name }}?size=w640h480{% else %}{{ STATIC_URL }}img/generic_person.gif{% endif %}" class="thumb img-rounded" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';">
       </a>
     </div>
     <div class="col-xs-7">
@@ -97,8 +97,8 @@ <h4>Family Photos:</h4>
       <div class="col-xs-4 col-sm-3">
         <a href="/gedgo/document/{{ photo.id }}">
           <!-- TODO: Fix hacks -->
-          <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="subsection-thumb img-rounded center-block clearfix visible-xs" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';">
-          <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="sidebar-thumb img-rounded center-block clearfix hidden-xs" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';">
+          <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="subsection-thumb img-rounded center-block clearfix visible-xs" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';">
+          <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="sidebar-thumb img-rounded center-block clearfix hidden-xs" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';">
         </a>
       </div>
     {% endfor %}
@@ -108,7 +108,7 @@ <h4>Family Photos:</h4>
 
   <!-- Children -->
   {% if family.children.exists %}
-    <h4>Children:</h4>
+    <h4>Children</h4>
     <div class="row">
     {% for somebody in family.ordered_children.iterator %}
       <div class="col-sm-6">
@@ -123,7 +123,7 @@ <h4>Children:</h4>
 
 {% if posts.exists %}
 <div class="section">
-  <h3>Related blog posts:</h3>
+  <h3>Related blog posts</h3>
   {% for post in posts.iterator %}
     <a href="/gedgo/blog/post/{{ post.id }}">{{ post.title }}</a>&nbsp; ({{ post.created }})<br>
   {% endfor %}
@@ -132,12 +132,12 @@ <h3>Related blog posts:</h3>
 
 {% if photos %}
 <div class="section visible-xs">
-  <h3>Photos:</h3>
+  <h3>Photos</h3>
   <div class="row">
   {% for photo in photos %}
         <div class="col-xs-4">
           <a href="/gedgo/document/{{ photo.id }}">
-            <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="subsection-thumb img-rounded center-block clearfix" onerror="this.onerror=null;this.src='{{ STATIC_URL }}/question.jpg';">
+            <img src="/gedgo/media/gedcom/{{ photo.docfile.name }}?size=w128h128" class="subsection-thumb img-rounded center-block clearfix" onerror="this.onerror=null;this.src='{{ STATIC_URL }}img/question.jpg';">
           </a>
         </div>
   {% endfor %}
@@ -147,7 +147,7 @@ <h3>Photos:</h3>
 
 {% if person.documentaries %}
 <div class="section">
-  <h3>Documentaries:</h3>
+  <h3>Documentaries</h3>
   {% for doc in person.documentaries %}
       <a href="{{ doc.location }}">{{ doc.title }}</a><br>
   {% endfor %}
@@ -156,7 +156,7 @@ <h3>Documentaries:</h3>
 
 {% if person.notes.exists %}
 <div class="section">
-  <h3>Notes:</h3>
+  <h3>Notes</h3>
   {% for note in person.notes.all %}
       {{ note.text|linebreaks }}
   {% endfor %}
@@ -165,7 +165,7 @@ <h3>Notes:</h3>
 
 {% if person.documents %}
 <div class="section">
-  <h3>Documents:</h3>
+  <h3>Documents</h3>
   {% for doc in person.documents %}
       <a href="/gedgo/document/{{ doc.id }}">
         <span class="glyphicon glyphicon-{{ doc.glyph }}"></span> &nbsp; {{ doc.docfile.name }}
@@ -174,13 +174,13 @@ <h3>Documents:</h3>
 {% endif %}
 
 <div class="section hidden-xs" id="timeline-pod">
-    <h3>Timeline:</h3>
+    <h3>Timeline</h3>
     <div id="timeline" data-gid="{{gedcom.id}}" data-pid="{{person.pointer}}"></div>
 </div>
 
 {% if person.child_family %}
 <div class="section hidden-xs">
-    <h3>Pedigree Chart:</h3>
+    <h3>Pedigree Chart</h3>
     <div id="pedigree-tree" data-gid="{{gedcom.id}}" data-pid="{{person.pointer}}"></div>
 </div>
 {% endif %}

gedgo/views/blog.py

@@ -1,11 +1,15 @@
 from django.core.paginator import Paginator, InvalidPage, EmptyPage
 from django.shortcuts import get_object_or_404
 from django.contrib.auth.decorators import login_required
+from django.db.models.functions import Trunc
 
 from gedgo.models import BlogPost
 from gedgo.views.util import render, process_comments
 
 from datetime import datetime
+from pytz import timezone
+
+eastern = timezone('US/Eastern')
 
 
 @login_required
@@ -18,7 +22,7 @@ def blog(request, year, month):
     if month:
         posts = posts.filter(created__month=month)
 
-    paginator = Paginator(posts, 2)
+    paginator = Paginator(posts, 5)
 
     try:
         page = int(request.GET.get("page", '1'))
@@ -30,9 +34,14 @@ def blog(request, year, month):
     except (InvalidPage, EmptyPage):
         posts = paginator.page(paginator.num_pages)
 
-    months = set(
+    months = (
         (d.year, d.month, datetime(2012, d.month, 1).strftime('%B'))
-        for d in BlogPost.objects.values_list('created', flat=True))
+        for d in BlogPost.objects \
+                .annotate(group=Trunc('created', 'month', tzinfo=eastern)) \
+                .order_by('-group') \
+                .distinct() \
+                .values_list('group', flat=True)
+    )
 
     return render(
         request,

reqs.pip

@@ -8,3 +8,4 @@ flake8
 anyjson
 dropbox==9.0.0
 django-simple-task
+ASGIMiddlewareStaticFile

run.sh

@@ -0,0 +1,8 @@
+# /bin/sh
+set -e
+
+# Apply any migrations before launching the listener
+./manage.py migrate
+
+# Run the application
+uvicorn --host=0.0.0.0 --workers=4 asgi:application