1
Fork 0
mirror of https://github.com/RYGhub/royalnet.git synced 2024-11-23 11:34:18 +00:00

Web improvements

This commit is contained in:
Steffo 2019-08-01 21:40:59 +02:00
parent 46c0334571
commit f029120159
10 changed files with 116 additions and 69 deletions

View file

@ -30,7 +30,7 @@
}
session["login_date"] = [la data e l'ora di adesso]</code></pre>
<form action="{{ url_for("login.login_done") }}" method="post" class="login-form fullsize">
<form action="{{ url_for("login.login_done") }}" method="post" class="login-form full">
<label for="login-username">
<span class="label-text">Username</span>
<input id="login-username" type="text" name="username">

View file

@ -13,7 +13,7 @@
</span>
</div>
<div class="dbox-bot">
<form method="post" class="newaccount-form fullsize">
<form method="post" class="newaccount-form full">
<label for="newaccount-username">
<span class="label-text">Username</span>
<input id="newaccount-username" type="text" name="username">

View file

@ -9,58 +9,72 @@
<h1>
{{ royal.username }}
</h1>
<div class="dbox profile-links">
<div class="dbox-top">
<span class="left">Account collegati</span>
<div class="columns-3">
<div class="column">
<div class="dbox profile-links">
<div class="dbox-top">
<span class="left">Account collegati</span>
</div>
<div class="dbox-bot">
<ul class="links-list">
<li><span class="links-item links-linked">royalnet:{{ royal.username }}</span></li>
{% for telegram in royal.telegram %}
{% if telegram.username %}
<li><a class="links-item links-linked" href="https://t.me/{{ telegram.username }}">telegram:{{ telegram.mention() }}</a></li>
{% else %}
<li><span class="links-item links-linked">telegram:{{ telegram.mention() }}</span></li>
{% endif %}
{% else %}
<li><span class="links-item links-missing">Telegram non collegato</span></li>
{% endfor %}
{% for discord in royal.discord %}
<li><span class="links-item links-linked">discord:{{ discord.full_username() }}</span></li>
{% else %}
<li><span class="links-item links-missing">Discord non collegato</span></li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="dbox-bot">
<ul class="links-list">
<li><span class="links-item links-linked">royalnet:{{ royal.username }}</span></li>
{% for telegram in royal.telegram %}
{% if telegram.username %}
<li><a class="links-item links-linked" href="https://t.me/{{ telegram.username }}">telegram:{{ telegram.mention() }}</a></li>
{% else %}
<li><span class="links-item links-linked">telegram:{{ telegram.mention() }}</span></li>
{% endif %}
{% else %}
<li><span class="links-item links-missing">Telegram non collegato</span></li>
{% endfor %}
{% for discord in royal.discord %}
<li><span class="links-item links-linked">discord:{{ discord.full_username() }}</span></li>
{% else %}
<li><span class="links-item links-missing">Discord non collegato</span></li>
{% endfor %}
</ul>
</div>
</div>
<div class="dbox profile-stats">
<div class="dbox-top">
<span class="left">Statistiche</span>
</div>
<div class="dbox-bot">
<ul class="stats-list">
<li><span class="stats-info">Righe del diario create</span>: <span class="stats-value">{{ royal.diario_created|length }}</span></li>
<li><span class="stats-info">Righe del diario in cui è menzionato</span>: <span class="stats-value">{{ royal.diario_quoted|length }}</span></li>
<li><span class="stats-info">Modifiche alla wiki</span>: <span class="stats-value">{{ royal.wiki_contributions|length }}</span>
{% if royal.active_kv_group %}
<li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value">{{ royal.active_kv_group[0].group_name }}</span></li>
{% else %}
<li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value disabled">Nessuno</span></li>
{% endif %}
</ul>
</div>
</div>
<div class="dbox profile-aliases">
<div class="dbox-top">
<span class="left">Alias</span>
</div>
<div class="dbox-bot">
<ul class="alias-list">
{% for alias in royal.aliases %}
<li>{{ alias.alias|capitalize }}</li>
{% endfor %}
</ul>
<div class="column">
<div class="dbox profile-stats">
<div class="dbox-top">
<span class="left">Statistiche</span>
</div>
<div class="dbox-bot">
<ul class="stats-list">
<li><span class="stats-info">Righe del diario create</span>: <span class="stats-value">{{ royal.diario_created|length }}</span></li>
<li><span class="stats-info">Righe del diario in cui è menzionato</span>: <span class="stats-value">{{ royal.diario_quoted|length }}</span></li>
<li><span class="stats-info">Modifiche alla wiki</span>: <span class="stats-value">{{ royal.wiki_contributions|length }}</span>
{% if royal.active_kv_group %}
<li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value">{{ royal.active_kv_group[0].group_name }}</span></li>
{% else %}
<li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value disabled">Nessuno</span></li>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="column">
<div class="dbox profile-aliases">
<div class="dbox-top">
<span class="left">Alias</span>
</div>
<div class="dbox-bot">
<ul class="alias-list">
{% for alias in royal.aliases %}
<li>{{ alias.alias|capitalize }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<h2>
Medals
</h2>
<p>
TODO
</p>
</div>
{% endblock %}

View file

@ -17,7 +17,7 @@
</span>
</div>
<div class="dbox-bot">
<form method="POST" class="wikiedit-form fullsize">
<form method="POST" class="wikiedit-form full">
<label for="wikiedit-title" class="label-big">
<span class="label-text">Titolo</span>
<input id="wikiedit-title" type="text" name="title" value="{{ page.title }}">

View file

@ -314,22 +314,22 @@ table tbody tr:last-child td:first-child {
table tbody tr:last-child td:last-child {
border-radius: 0 0 4px 0;
}
form.fullsize label {
form.full label {
margin-top: 4px;
margin-bottom: 4px;
display: flex;
}
form.fullsize label .label-text {
form.full label .label-text {
margin-right: 12px;
min-width: 60px;
}
form.fullsize label input {
form.full label input {
flex-grow: 1;
}
form.fullsize label.label-big {
form.full label.label-big {
font-size: x-large;
}
form.fullsize label.label-big * {
form.full label.label-big * {
font-size: x-large;
}
*[disabled=""],
@ -398,17 +398,31 @@ form.fullsize label.label-big * {
background-color: rgba(160, 204, 255, 0.2);
color: #ffffff !important;
}
.horizontal-container {
.horizontal-container-main {
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
}
@media (max-width: 799px) {
.horizontal-container {
@media (max-width: 1199px) {
.horizontal-container-main {
flex-direction: column;
}
}
.columns-3 {
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
}
.columns-3 .column {
width: 33.3%;
}
.fill {
width: 100%;
height: 100%;
margin: 0 !important;
}
.vertical-main {
width: 100%;
}

File diff suppressed because one or more lines are too long

View file

@ -387,7 +387,7 @@ table {
}
}
form.fullsize {
form.full {
label {
margin-top: 4px;
@ -492,18 +492,37 @@ form.fullsize {
}
//Horizontal container, should contain elements such as main and sidebar
.horizontal-container {
.horizontal-container-main {
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
@media (max-width: 799px)
@media (max-width: 1199px)
{
flex-direction: column;
}
}
//Tripart horizontal container
.columns-3 {
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
.column {
width: 33.3%;
}
}
//Fill the whole parent element and ignore margins
.fill {
width: 100%;
height: 100%;
margin: 0 !important;
}
//Vertical main page container
.vertical-main {
width: 100%;

View file

@ -228,14 +228,14 @@ nav .nav-sitename {
nav .nav-login-unavailable {
opacity: 0.25;
}
.horizontal-container {
.horizontal-container-main {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
@media (min-width: 800px) {
.horizontal-container {
.horizontal-container-main {
flex-direction: row;
}
}

View file

@ -275,7 +275,7 @@ nav {
//Elements
.horizontal-container {
.horizontal-container-main {
display: flex;
justify-content: center;
align-content: center;

View file

@ -55,7 +55,7 @@
</span>
</div>
</nav>
<div class="horizontal-container">
<div class="horizontal-container-main">
<div class="vertical-main">
{% block content %}{% endblock %}
</div>