Add badges in the menu, tweak the design

This commit is contained in:
Thomas Sileo 2018-06-22 22:27:28 +02:00
parent 0e98145989
commit 01c7edc517
5 changed files with 52 additions and 27 deletions

35
app.py
View file

@ -6,6 +6,7 @@ import mimetypes
import os
import urllib
from datetime import datetime
from datetime import timezone
from functools import wraps
from typing import Any
from typing import Dict
@ -18,6 +19,7 @@ import piexif
import pymongo
import timeago
from bson.objectid import ObjectId
from dateutil import parser
from flask import Flask
from flask import Response
from flask import abort
@ -103,10 +105,27 @@ def verify_pass(pwd):
@app.context_processor
def inject_config():
q = {
"type": "Create",
"activity.object.type": "Note",
"activity.object.inReplyTo": None,
"meta.deleted": False,
}
notes_count = DB.outbox.find(
{"$or": [q, {"type": "Announce", "meta.undo": False}]}
).count()
q = {"type": "Create", "activity.object.type": "Note", "meta.deleted": False}
with_replies_count = DB.outbox.find(
{"$or": [q, {"type": "Announce", "meta.undo": False}]}
).count()
return dict(
microblogpub_version=VERSION,
config=config,
logged_in=session.get("logged_in", False),
followers_count=DB.followers.count(),
following_count=DB.following.count(),
notes_count=notes_count,
with_replies_count=with_replies_count,
)
@ -183,24 +202,16 @@ def get_actor(url):
@app.template_filter()
def format_time(val):
if val:
return datetime.strftime(
datetime.strptime(val, "%Y-%m-%dT%H:%M:%SZ"), "%B %d, %Y, %H:%M %p"
)
dt = parser.parse(val)
return datetime.strftime(dt, "%B %d, %Y, %H:%M %p")
return val
@app.template_filter()
def format_timeago(val):
if val:
try:
return timeago.format(
datetime.strptime(val, "%Y-%m-%dT%H:%M:%SZ"), datetime.utcnow()
)
except Exception:
return timeago.format(
datetime.strptime(val, "%Y-%m-%dT%H:%M:%S.%fZ"), datetime.utcnow()
)
dt = parser.parse(val)
return timeago.format(dt, datetime.now(timezone.utc))
return val

View file

@ -1,3 +1,4 @@
python-dateutil
libsass
gunicorn
piexif

View file

@ -77,7 +77,15 @@ a:hover {
}
}
a {
padding: 2px 7px;
padding: 5px 10px;
small.badge {
background-color: $color-menu-background;
color: $color-light;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px 0px 5px;
font-weight: bold;
}
}
a.selected {
background: $primary-color;
@ -88,6 +96,11 @@ a:hover {
background: $primary-color;
color: $background-color;
text-decoration: none;
border-radius: 2px;
.badge {
color: $primary-color;
background: $background-color;
}
}
}
}
@ -117,7 +130,7 @@ a:hover {
overflow: hidden;
}
}
.actor-box {
.actor-box-big {
display: block;
text-decoration: none;
@ -207,8 +220,8 @@ form.action-form {
.summary {
color: $color-summary;
font-size: 1.3em;
margin-top:50px;
margin-bottom:70px;
margin-top: 60px;
margin-bottom: 50px;
}
.summary a, .summay a:hover {
color: $color-summary;

View file

@ -1 +1 @@
.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:40px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{padding:20px 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:2px 7px}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box{display:block;text-decoration:none}.actor-box .actor-box-wrapper{margin-bottom:40px}.actor-box .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.3em;margin-top:50px;margin-bottom:70px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}
.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:40px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{padding:20px 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:5px 10px}#header .menu a small.badge{background-color:#ddd;color:#555;border-radius:2px;margin-left:5px;padding:3px 5px 0px 5px;font-weight:bold}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none;border-radius:2px}#header .menu a:hover .badge{color:#1d781d;background:#eee}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box-big{display:block;text-decoration:none}.actor-box-big .actor-box-wrapper{margin-bottom:40px}.actor-box-big .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box-big .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.3em;margin-top:60px;margin-bottom:50px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}

View file

@ -10,10 +10,10 @@
</div>
<div class="menu">
<ul>
<li><a href="/" {% if request.path == "/" %}class="selected"{% endif %}>/</a></li>
<li><a href="/with_replies" {% if request.path == "/with_replies" %}class="selected"{% endif %}>/with_replies</a></li>
<li><a href="/followers"{% if request.path == "/followers" %} class="selected" {% endif %}>/followers</a></li>
<li><a href="/following"{% if request.path == "/following" %} class="selected" {% endif %}>/following</a></li>
<li><a href="/" {% if request.path == "/" %}class="selected"{% endif %}>notes <small class="badge">{{ notes_count }}</small></a></li>
<li><a href="/with_replies" {% if request.path == "/with_replies" %}class="selected"{% endif %}>with replies <small class="badge">{{ with_replies_count }}</small></a></li>
<li><a href="/followers"{% if request.path == "/followers" %} class="selected" {% endif %}>followers <small class="badge">{{ followers_count }}</small></a></li>
<li><a href="/following"{% if request.path == "/following" %} class="selected" {% endif %}>following <small class="badge">{{ following_count }}</small></a></li>
<!-- <li><a href="/about"{% if request.path == "/about" %} class="selected" {% endif %}>/about</a></li>
-->
{% if logged_in %}
@ -23,7 +23,7 @@
<li><a href="/admin"{% if request.path == "/admin" %} class="selected" {% endif %}>/admin</a></li>
<li><a href="/logout">/logout</a></li>
{% else %}
<li><a href="/remote_follow"{% if request.path == "/remote_follow" %} class="selected" {% endif %}>/remote_follow</a></li>
<li><a href="/remote_follow"{% if request.path == "/remote_follow" %} class="selected" {% endif %}>remote follow</a></li>
{% endif %}
</ul>
</div>