Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2024-12-24 14:07:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Modify the css for login modal to look good on smaller frame sizes

Browse Source
This commit is contained in:
Jeremy Zhang 2018-01-13 04:24:35 +00:00
parent d8eea5d590
commit 9a1b33c7d3
2 changed files with 114 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
webapp/titanembeds/static/css/embedstyle.css
View File

@ -473,6 +473,112 @@ a {
}
}
#loginmodal {
font-size: 9pt;
}
#loginmodal h4 {
font-size: 15pt;
}
#guest_login_instr {
margin: 0;
}
#loginmodal .flow-text {
font-size: 11pt;
}
@media screen and (max-width: 600px) {
#guest_login_instr {
display: none;
}
#loginmodal h4 {
font-size: 12pt;
}
}
@media screen and (max-width: 500px) {
#modal_guildinfobox {
width: 100%;
}
#modal_guildiconcircle {
float: left;
}
#authfields {
width: 100%;
}
#modal_guildiconcircle {
width: 55px;
}
#modal_guildname {
margin: 5px;
}
#authfield-choosetxt.flow-text {
font-size: 9pt;
margin-top: 3px;
margin-bottom: 3px;
}
}
@media screen and (max-width: 400px) {
#authfields {
margin-top: 5px;
}
#discordlogin_btn_warn {
display: none;
}
#loginmodal a.btn, #loginmodal a.btn-large {
height: 30px;
line-height: 30px;
padding: 0;
font-size: 7pt;
}
#loginmodal h4 {
display: none;
}
#discordlogin_box {
width: 100%;
}
#guestlogin_box {
width: 100%;
}
#discordlogin_btn {
width: 100%;
}
#custom_username_field {
margin-bottom: 0;
}
#custom_username_field_label {
font-size: 6pt;
}
#authfield-choosetxt {
font-size: 7pt;
}
}
@media screen and (max-width: 230px) {
#authfield-choosetxt {
display: none;
}
}
#nameplate {
cursor: pointer;
background: transparent;

16
webapp/titanembeds/templates/embed.html.j2
View File

@ -94,7 +94,7 @@
<div class="modal-content">
<h4>{{ login_greeting }}</h4>
<div id="loginmodal-maincontent" class="row valign-wrap">
<div id="modal_guildinfobox" class="col m3 s12 center-align">
<div id="modal_guildinfobox" class="col s3 center-align">
{% if guild['icon'] %}
<img id="modal_guildiconcircle" class="circle" src="{{ generate_guild_icon( guild['id'], guild['icon'] ) }}">
{% endif %}
@ -105,21 +105,21 @@
<a id="modal_invite_btn" class="waves-effect waves-light btn" target="_blank">discord.gg</a>
{% endif %}
</div>
<div class="col m9 s12">
<p class="flow-text">{{ _("Please choose one of the following methods to authenticate!") }}</p>
<div id="authfields" class="col s9">
<p id="authfield-choosetxt" class="flow-text">{{ _("Please choose one of the following methods to authenticate!") }}</p>
<div class="progress" id="loginProgress" style="display: none;">
<div class="indeterminate"></div>
</div>
<div class="row">
<div class="col s12 l4">
<div id="discordlogin_box" class="col s6 l4">
<a id="discordlogin_btn" href="{% if not same_target %}{{ url_for("embed.login_discord", _external=True) }}{% else %}{{ url_for("user.login_authenticated", redirect=request.url+"&create_authenticated_user=true", _external=True) }}{% endif %}" class="waves-effect waves-light btn-large" {% if not same_target %}target="_blank"{% endif %}>{{ _("Discord Login") }}</a>
<p>*{{ _("You will be invited into this server.") }}</p>
<p id="discordlogin_btn_warn">*{{ _("You will be invited into this server.") }}</p>
</div>
{% if unauth_enabled %}
<div class="col s12 l8">
<p>{{ _("Of course, you also have the option to login by picking a temporary username for your current browsing session.") }}</p>
<div id="guestlogin_box" class="col s6 l8">
<p id="guest_login_instr">{{ _("Of course, you also have the option to login by picking a temporary username for your current browsing session.") }}</p>
<input id="custom_username_field" type="text" {% if session.unauthenticated and session.username %}value="{{ session['username'] }}"{% endif %}>
<label class="active" for="custom_username_field">{{ _("Username (Hit ENTER/RETURN key to confirm)") }}</label>
<label id="custom_username_field_label" class="active" for="custom_username_field">{{ _("Username (Hit ENTER/RETURN key to confirm)") }}</label>
</div>
{% endif %}
</div>