mirror of
https://github.com/Lynnesbian/FediBooks/
synced 2025-04-19 10:11:57 +00:00
web: change the bot panel design a bit (fixes #11)
This commit is contained in:
knuxify
parent
200897c5d7
commit
567aae5115
3 changed files with 56 additions and 71 deletions
|
|
@ -20,35 +20,20 @@ body {
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
.large {
|
.large { font-size: 1.2em; }
|
||||||
font-size: 1.2em;
|
.small { font-size: 0.8em; }
|
||||||
}
|
.tiny { font-size: 0.5em; }
|
||||||
.small {
|
.centred { text-align: center; }
|
||||||
font-size: 0.8em;
|
.thin { font-weight: 300; }
|
||||||
}
|
.subtle { color: #ccc; }
|
||||||
.tiny {
|
.row { display: flex; }
|
||||||
font-size: 0.5em;
|
.full-width { width: 100%; }
|
||||||
}
|
.no-margin { margin: 0; }
|
||||||
.centred {
|
.left-align { text-align: left; }
|
||||||
|
|
||||||
|
.bot-panel {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
padding: 10px;
|
||||||
.thin {
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
.subtle {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.no-margin {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.left-align {
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-icon {
|
.panel-icon {
|
||||||
|
|
@ -56,35 +41,19 @@ body {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background: center/contain url("/img/bot_generic.png");
|
background: center/contain url("/img/bot_generic.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.panel-icon.large {
|
.panel-icon.large { width: 150px; height: 150px; }
|
||||||
width: 150px;
|
.panel-icon.online { width: 105px; border: 3px #5c5 solid; }
|
||||||
height: 150px;
|
.panel-icon.offline { width: 105px; border: 3px #c33 solid; }
|
||||||
}
|
.panel-icon, .panel-text, .panel-actions { display: inline-block; align-self: center; }
|
||||||
.panel-icon.online, .panel-icon.offline {
|
.panel-text { flex-grow: 1;}
|
||||||
width: 105px;
|
.panel-name { font-size: 1.8em; margin: 10px 0; }
|
||||||
}
|
.panel-name h2 { font-size: 1em; margin: 0; padding: 0; }
|
||||||
.panel-icon.online {
|
.panel-name .tiny { padding: 0; margin: 0; }
|
||||||
border-left: 5px #5c5 solid;
|
.panel-status { padding-bottom: 10px; }
|
||||||
}
|
.panel-actions a { width: 75%; }
|
||||||
.panel-icon.offline {
|
.panel-pane { width: 50%; }
|
||||||
border-left: 5px #c33 solid;
|
|
||||||
}
|
|
||||||
.panel-icon, .panel-text, .panel-actions {
|
|
||||||
display: inline-block;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.panel-text {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0 0 10px 15px;
|
|
||||||
}
|
|
||||||
.panel-name {
|
|
||||||
font-size: 1.8em;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.panel-actions {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -246,3 +215,9 @@ form .row {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.panel-actions a { width: 100%; margin-bottom: 10px; height: 50px; font-size: 1.2em; display: flex; align-items: center; justify-content: center; }
|
||||||
|
.row { display: block; }
|
||||||
|
.panel-pane { width: 100%; }
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,18 +15,18 @@
|
||||||
<a class="button btn-secondary btn-large" href="/" role="button"><i class="fas fa-arrow-left"></i> Back</a>
|
<a class="button btn-secondary btn-large" href="/" role="button"><i class="fas fa-arrow-left"></i> Back</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container" style="min-height: 300px;">
|
<div class="container" style="min-height: 300px;">
|
||||||
{% for user in users %}
|
{% for user in users %}
|
||||||
<div class="row light">
|
<div class="bot-panel row light">
|
||||||
|
<div class="panel-text panel-pane">
|
||||||
<div class="panel-icon {{ "online" if user['enabled'] else "offline" }}"></div>
|
<div class="panel-icon {{ "online" if user['enabled'] else "offline" }}"></div>
|
||||||
<div class="panel-text">
|
|
||||||
{% set handle_list = user['fedi_id'].split('@') %}
|
{% set handle_list = user['fedi_id'].split('@') %}
|
||||||
<div class="panel-name">@{{ handle_list[1] }}<span class="subtle tiny">@{{ handle_list[2] }}</span></div>
|
<div class="panel-name"><h2>@{{ handle_list[1] }}</h2><span class="subtle tiny">@{{ handle_list[2] }}</span></div>
|
||||||
<div class="panel-status">{{ "Active" if user['enabled'] else "Inactive" }}, {{ post_count[user['fedi_id']] }} posts in database</div>
|
<div class="panel-status">{{ "Active" if user['enabled'] else "Inactive" }}, {{ post_count[user['fedi_id']] }} posts in database</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-actions">
|
<div class="panel-actions panel-pane">
|
||||||
<a class="button btn-secondary" href="/bot/accounts/toggle/{{ user['fedi_id'] }}" title="Turn on/off"><i class="fas fa-power-off"></i></a><a class="button btn-dangerous" href="/bot/accounts/delete/{{ user['fedi_id'] }}" title="Delete"><i class="fas fa-trash"></i></a>
|
<a class="button btn-secondary" href="/bot/accounts/toggle/{{ user['fedi_id'] }}" title="Turn on/off"><span><i class="fas fa-power-off"></i> Turn on/off</span></a>
|
||||||
|
<a class="button btn-dangerous" href="/bot/accounts/delete/{{ user['fedi_id'] }}" title="Delete"><span><i class="fas fa-trash"></i> Delete</span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
|
|
@ -16,17 +16,27 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container" style="min-height: 300px;">
|
<div class="container">
|
||||||
|
{% if bot_count == 0 %}
|
||||||
|
<div class="row light" style="min-height: 200px; font-size: 22px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
You do not have any bots! Click on the "New bot" button above to create one.
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
{% for bot in bots %}
|
{% for bot in bots %}
|
||||||
<div class="row light">
|
<div class="row bot-panel light">
|
||||||
|
<div class="panel-text panel-pane">
|
||||||
<div class="panel-icon {{ 'online' if bot['enabled'] else 'offline'}}" style="{{ 'background-image: url(\'' + bot['icon'] + '\')' if bot['icon'] else '' }}"></div>
|
<div class="panel-icon {{ 'online' if bot['enabled'] else 'offline'}}" style="{{ 'background-image: url(\'' + bot['icon'] + '\')' if bot['icon'] else '' }}"></div>
|
||||||
<div class="panel-text">
|
|
||||||
{% set handle_list = bot['handle'].split('@') %}
|
{% set handle_list = bot['handle'].split('@') %}
|
||||||
<div class="panel-name">@{{ handle_list[1] }}<span class="subtle tiny">@{{ handle_list[2] }}</span></div>
|
<div class="panel-name"><h2>@{{ handle_list[1] }}</h2><span class="subtle tiny">@{{ handle_list[2] }}</span></div>
|
||||||
<div class="panel-status">{{ "Online" if bot['enabled'] else "Offline"}}, learning from {{ bot_users[bot['handle']] }} accounts.{% if bot['handle'] in next_posts %} Next post in {{ next_posts[bot['handle']][0] }} minutes.{% endif %}</div>
|
<div class="panel-status">{{ "Online" if bot['enabled'] else "Offline"}}, learning from {{ bot_users[bot['handle']] }} accounts.{% if bot['handle'] in next_posts %} Next post in {{ next_posts[bot['handle']][0] }} minutes.{% endif %}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-actions">
|
<div class="panel-actions panel-pane">
|
||||||
<a class="button btn-secondary" href="/bot/toggle/{{ bot['handle'] }}" title="Turn on/off"><i class="fas fa-power-off"></i></a><a class="button btn-secondary" href="/bot/edit/{{ bot['handle'] }}" title="Configure"><i class="fas fa-cog"></i></a><a class="button btn-secondary" href="/bot/accounts/{{ bot['handle'] }}" title="Accounts learned from"><i class="fas fa-users"></i></a><a class="button btn-secondary" href="/bot/blacklist/{{ bot['handle'] }}" title="Banned words"><i class="fas fa-strikethrough"></i></a><a class="button btn-secondary" href="/bot/chat/{{ bot['handle'] }}" title="Chat"><i class="fas fa-comment"></i></a><a class="button btn-dangerous" href="/bot/delete/{{ bot['handle'] }}" title="Delete"><i class="fas fa-trash"></i></a>
|
<a class="button btn-secondary" href="/bot/toggle/{{ bot['handle'] }}" title="Turn on/off"><span><i class="fas fa-power-off"></i> Turn on/off</span></a>
|
||||||
|
<a class="button btn-secondary" href="/bot/edit/{{ bot['handle'] }}" title="Configure"><span><i class="fas fa-cog"></i> Configure</span></a>
|
||||||
|
<a class="button btn-secondary" href="/bot/accounts/{{ bot['handle'] }}" title="Accounts learned from"><span><i class="fas fa-users"></i> Accounts learned from</span></a>
|
||||||
|
<a class="button btn-secondary" href="/bot/blacklist/{{ bot['handle'] }}" title="Banned words"><span><i class="fas fa-strikethrough"></i> Banned words</span></a>
|
||||||
|
<a class="button btn-secondary" href="/bot/chat/{{ bot['handle'] }}" title="Chat"><span><i class="fas fa-comment"></i> Chat</span></a>
|
||||||
|
<a class="button btn-dangerous" href="/bot/delete/{{ bot['handle'] }}" title="Delete"><span><i class="fas fa-trash"></i> Delete</span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
Loading…
editor.table_modal.header
Reference in a new issue