More design tweaks

This commit is contained in:
Thomas Sileo 2018-07-01 12:49:16 +02:00
parent 8449ff0d6e
commit aea8a80fe1
7 changed files with 41 additions and 11 deletions

View file

@ -24,7 +24,7 @@ DEFAULT_THEME_STYLE = ThemeStyle.LIGHT.value
DEFAULT_THEME_PRIMARY_COLOR = { DEFAULT_THEME_PRIMARY_COLOR = {
ThemeStyle.LIGHT: "#1d781d", # Green ThemeStyle.LIGHT: "#1d781d", # Green
ThemeStyle.DARK: "#e14eea", # Purple ThemeStyle.DARK: "#33ff00", # Purple
} }

View file

@ -28,6 +28,23 @@ a:hover {
.gold { .gold {
color: $primary-color; color: $primary-color;
} }
.pcolor {
color: $primary-color;
}
.remote-follow-button {
background: $color-menu-background;
color: $color-light;
text-decoration: none;
padding: 5px 8px;
margin-top: 5px;
border-radius: 2px;
}
.remote-follow-button:hover {
text-decoration: none;
background: $primary-color;
color: $background-color;
}
#header { #header {
margin-bottom: 70px; margin-bottom: 70px;
@ -171,6 +188,14 @@ a:hover {
} }
} }
.bar-item-no-hover {
background: $color-menu-background;
padding: 5px;
color: $color-light;
margin-right:5px;
border-radius:2px;
}
.bar-item { .bar-item {
background: $color-menu-background; background: $color-menu-background;
padding: 5px; padding: 5px;
@ -178,6 +203,10 @@ a:hover {
margin-right:5px; margin-right:5px;
border-radius:2px; border-radius:2px;
} }
.bar-item:hover {
background: $primary-color;
color: $background-color;
}
button.bar-item { button.bar-item {
border: 0 border: 0
} }

View file

@ -4,8 +4,7 @@
<a href="{{ config.ID }}" class="u-url u-uid no-hover title"> <a href="{{ config.ID }}" class="u-url u-uid no-hover title">
<span style="font-size:1.1em;">{{ config.NAME }}</span> <span style="font-size:1.1em;">{{ config.NAME }}</span>
<span style="font-size:0.85em;" class="subtitle-username">@<span class="gold p-name">{{ config.USERNAME }}</span>@<span class="gold">{{ config.DOMAIN }}</span> <span style="font-size:0.85em;" class="subtitle-username">@<span class="gold p-name">{{ config.USERNAME }}</span>@<span class="gold">{{ config.DOMAIN }}</span>
<small><a style="background:#ddd;padding:5px 8px;margin-top:5px;border-radius:2px;text-decoration:none;" href="/remote_follow">Remote follow</a></small> <small><a class="remote-follow-button" href="/remote_follow">Remote follow</a></small>
</span>
</a> </a>
<div class="p-note summary"> <div class="p-note summary">
{{ config.SUMMARY | safe }} {{ config.SUMMARY | safe }}

View file

@ -25,12 +25,12 @@
{% if item | has_type('Announce') %} {% if item | has_type('Announce') %}
{% set boost_actor = item.activity.actor | get_actor %} {% set boost_actor = item.activity.actor | get_actor %}
<p style="margin-left:65px;padding-bottom:5px;"><span class="bar-item"><a style="color:#808080;" href="{{ boost_actor.url }}">{{ boost_actor.name }}</a> boosted</span></p> <p style="margin-left:65px;padding-bottom:5px;"><span class="bar-item-no-hover"><a style="color:#808080;" href="{{ boost_actor.url }}">{{ boost_actor.name }}</a> boosted</span></p>
{% if item.meta.object %} {% if item.meta.object %}
{{ utils.display_note(item.meta.object, ui=False) }} {{ utils.display_note(item.meta.object, ui=False) }}
{% endif %} {% endif %}
{% elif item | has_type('Create') %} {% elif item | has_type('Create') %}
{{ utils.display_note(item.activity.object, meta=item.meta) }} {{ utils.display_note(item.activity.object, meta=item.meta, no_color=True) }}
{% endif %} {% endif %}
{% endfor %} {% endfor %}

View file

@ -15,7 +15,7 @@
<link rel="alternate" href="{{ config.ID }}/feed.atom" type="application/atom+xml" title="Atom 0.3"> <link rel="alternate" href="{{ config.ID }}/feed.atom" type="application/atom+xml" title="Atom 0.3">
{% if config.THEME_COLOR %}<meta name="theme-color" content="{{ config.THEME_COLOR }}">{% endif %} {% if config.THEME_COLOR %}<meta name="theme-color" content="{{ config.THEME_COLOR }}">{% endif %}
<style> <style>
{{ config.CSS }} {{ config.CSS | safe }}
</style> </style>
</head> </head>
<body> <body>

View file

@ -14,20 +14,20 @@
{% if item | has_type('Announce') %} {% if item | has_type('Announce') %}
{% set boost_actor = item.activity.actor | get_actor %} {% set boost_actor = item.activity.actor | get_actor %}
<p style="margin-left:70px;padding-bottom:5px;"><span class="bar-item"><a style="color:#808080;" href="{{ boost_actor.url }}">{{ boost_actor.name or boost_actor.preferredUsername }}</a> boosted</span></p> <p style="margin-left:70px;padding-bottom:5px;"><span class="bar-item-no-hover"><a style="color:#808080;" href="{{ boost_actor.url }}">{{ boost_actor.name or boost_actor.preferredUsername }}</a> boosted</span></p>
{% if item.meta.object %} {% if item.meta.object %}
{{ utils.display_note(item.meta.object, ui=True) }} {{ utils.display_note(item.meta.object, ui=True) }}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if item | has_type('Follow') %} {% if item | has_type('Follow') %}
<p style="margin-left:70px;padding-bottom:5px;"><span class="bar-item">new follower</span> <!-- <a href="" class="bar-item">follow back</a></p> --> <p style="margin-left:70px;padding-bottom:5px;"><span class="bar-item-hover">new follower</span> <!-- <a href="" class="bar-item">follow back</a></p> -->
<div style="height: 100px;"> <div style="height: 100px;">
{{ utils.display_actor_inline(item.activity.actor | get_actor, size=50) }} {{ utils.display_actor_inline(item.activity.actor | get_actor, size=50) }}
</div> </div>
{% elif item | has_type('Accept') %} {% elif item | has_type('Accept') %}
<p style="margin-left:70px;padding-bottom:5px;"><span class="bar-item">you started following</span></p> <p style="margin-left:70px;padding-bottom:5px;"><span class="bar-item-hover">you started following</span></p>
<div style="height: 100px;"> <div style="height: 100px;">
{{ utils.display_actor_inline(item.activity.actor | get_actor, size=50) }} {{ utils.display_actor_inline(item.activity.actor | get_actor, size=50) }}
</div> </div>

View file

@ -15,7 +15,7 @@
{% macro display_note(obj, perma=False, ui=False, likes=[], shares=[], meta={}) -%} {% macro display_note(obj, perma=False, ui=False, likes=[], shares=[], meta={}, no_color=False) -%}
{% set actor = obj.attributedTo | get_actor %} {% set actor = obj.attributedTo | get_actor %}
<div class="note h-entry" id="activity-{{ obj.id | permalink_id }}"> <div class="note h-entry" id="activity-{{ obj.id | permalink_id }}">
@ -26,7 +26,9 @@
</div> </div>
<div class="note-wrapper"> <div class="note-wrapper">
<a href="{{ actor.url }}" style="margin:0;text-decoration:none;" class="no-hover"><strong>{{ actor.name or actor.preferredUsername }}</strong> <span class="l">@{{ actor.preferredUsername }}@{{ actor.url | domain }}</span></a> <a href="{{ actor.url }}" style="margin:0;text-decoration:none;" class="no-hover"><strong>{{ actor.name or actor.preferredUsername }}</strong>
<span class="l">@{% if not no_color and obj.id | is_from_outbox %}<span class="pcolor">{{ actor.preferredUsername }}</span>{% else %}{{ actor.preferredUsername }}{% endif %}@
{% if not no_color and obj.id | is_from_outbox %}<span class="pcolor">{{ actor.url | domain }}</span>{% else %}{{ actor.url | domain }}{% endif %}</span></a>
{% if not perma %} {% if not perma %}
<span style="float:right"> <span style="float:right">