Add badges in the menu, tweak the design
This commit is contained in:
Thomas Sileo
parent
0e98145989
commit
01c7edc517
5 changed files with 52 additions and 27 deletions
35
app.py
35
app.py
|
|
@ -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
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
python-dateutil
|
||||
libsass
|
||||
gunicorn
|
||||
piexif
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,7 +118,7 @@ a:hover {
|
|||
margin-bottom: 40px;
|
||||
|
||||
.actor-icon {
|
||||
width:120px;
|
||||
width: 120px;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +130,7 @@ a:hover {
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.actor-box {
|
||||
.actor-box-big {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -206,19 +219,19 @@ form.action-form {
|
|||
}
|
||||
.summary {
|
||||
color: $color-summary;
|
||||
font-size:1.3em;
|
||||
margin-top:50px;
|
||||
margin-bottom:70px;
|
||||
font-size: 1.3em;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.summary a, .summay a:hover {
|
||||
color: $color-summary;
|
||||
text-decoration:underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#followers, #following, #new {
|
||||
margin-top:50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
#admin {
|
||||
margin-top:50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
textarea, input {
|
||||
background: $color-menu-background;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue