web: change the bot panel design a bit (fixes #11)
This commit is contained in:
knuxify
parent
200897c5d7
commit
567aae5115
|
|
@ -20,35 +20,20 @@ body {
|
|||
flex-basis: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.large {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.tiny {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
.centred {
|
||||
.large { font-size: 1.2em; }
|
||||
.small { font-size: 0.8em; }
|
||||
.tiny { font-size: 0.5em; }
|
||||
.centred { text-align: center; }
|
||||
.thin { font-weight: 300; }
|
||||
.subtle { color: #ccc; }
|
||||
.row { display: flex; }
|
||||
.full-width { width: 100%; }
|
||||
.no-margin { margin: 0; }
|
||||
.left-align { text-align: left; }
|
||||
|
||||
.bot-panel {
|
||||
text-align: center;
|
||||
}
|
||||
.thin {
|
||||
font-weight: 300;
|
||||
}
|
||||
.subtle {
|
||||
color: #ccc;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
.left-align {
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
|
|
@ -56,35 +41,19 @@ body {
|
|||
height: 100px;
|
||||
background: center/contain url("/img/bot_generic.png");
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.panel-icon.large {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.panel-icon.online, .panel-icon.offline {
|
||||
width: 105px;
|
||||
}
|
||||
.panel-icon.online {
|
||||
border-left: 5px #5c5 solid;
|
||||
}
|
||||
.panel-icon.offline {
|
||||
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;
|
||||
}
|
||||
.panel-icon.large { width: 150px; height: 150px; }
|
||||
.panel-icon.online { width: 105px; border: 3px #5c5 solid; }
|
||||
.panel-icon.offline { width: 105px; border: 3px #c33 solid; }
|
||||
.panel-icon, .panel-text, .panel-actions { display: inline-block; align-self: center; }
|
||||
.panel-text { flex-grow: 1;}
|
||||
.panel-name { font-size: 1.8em; margin: 10px 0; }
|
||||
.panel-name h2 { font-size: 1em; margin: 0; padding: 0; }
|
||||
.panel-name .tiny { padding: 0; margin: 0; }
|
||||
.panel-status { padding-bottom: 10px; }
|
||||
.panel-actions a { width: 75%; }
|
||||
.panel-pane { width: 50%; }
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
|
|
@ -246,3 +215,9 @@ form .row {
|
|||
background-color: #ddd;
|
||||
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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container" style="min-height: 300px;">
|
||||
{% for user in users %}
|
||||
<div class="row light">
|
||||
<div class="panel-icon {{ "online" if user['enabled'] else "offline" }}"></div>
|
||||
<div class="panel-text">
|
||||
<div class="bot-panel row light">
|
||||
<div class="panel-text panel-pane">
|
||||
<div class="panel-icon {{ "online" if user['enabled'] else "offline" }}"></div>
|
||||
{% 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>
|
||||
<div class="panel-actions">
|
||||
<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>
|
||||
<div class="panel-actions panel-pane">
|
||||
<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>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -16,17 +16,27 @@
|
|||
</p>
|
||||
</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 %}
|
||||
<div class="row light">
|
||||
<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('@') %}
|
||||
<div class="panel-name">@{{ handle_list[1] }}<span class="subtle tiny">@{{ handle_list[2] }}</span></div>
|
||||
<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>
|
||||
{% set handle_list = bot['handle'].split('@') %}
|
||||
<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>
|
||||
<div class="panel-actions">
|
||||
<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>
|
||||
<div class="panel-actions panel-pane">
|
||||
<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>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue