From 0351b65efa166d0618720b6382793e73e7095dab Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Wed, 24 May 2017 18:56:26 +0000
Subject: [PATCH] Improved the login modal style

---
 webapp/titanembeds/static/css/embedstyle.css | 8 +++++++-
 webapp/titanembeds/templates/embed.html.j2   | 8 ++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/webapp/titanembeds/static/css/embedstyle.css b/webapp/titanembeds/static/css/embedstyle.css
index 7edbf79..673f71d 100644
--- a/webapp/titanembeds/static/css/embedstyle.css
+++ b/webapp/titanembeds/static/css/embedstyle.css
@@ -209,10 +209,16 @@ a {
   max-width: 200px;
 }
 
-.btn {
+.btn, #discordlogin_btn {
   max-width: 100%;
 }
 
+@media only screen and (max-width: 800px) {
+  #modal_guildiconcircle {
+    max-width: 75px;
+  }
+}
+
 @media only screen and (min-width: 800px) {
   .valign-wrap {
     display: -webkit-flex;
diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2
index 7656c99..ad469cd 100644
--- a/webapp/titanembeds/templates/embed.html.j2
+++ b/webapp/titanembeds/templates/embed.html.j2
@@ -77,7 +77,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">
+            <div id="modal_guildinfobox" class="col m3 s12 center-align">
               {% if guild['icon'] %}
               <img id="modal_guildiconcircle" class="circle" src="{{ generate_guild_icon( guild['id'], guild['icon']  ) }}">
               {% endif %}
@@ -90,12 +90,12 @@
                   <div class="indeterminate"></div>
               </div>
               <div class="row">
-                <div class="col s12 m4">
+                <div class="col s12 l4">
                   <a id="discordlogin_btn" href="{{ url_for("embed.login_discord", _external=True) }}" class="waves-effect waves-light btn-large" target="_blank">Discord Login</a>
                   <p>*You will be invited into this server.</p>
                 </div>
                 {% if unauth_enabled %}
-                <div class="col s12 m8">
+                <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>
                   <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>
@@ -157,7 +157,7 @@
     </script>
 
     <script id="mustache_usermessage" type="text/template">
-      <p><span id="discordmessage_{{id}}" title="{{full_timestamp}}" class="chattimestamp">{{time}}</span> <span class="chatusername">{{username}}#{{discriminator}}</span> <span class="chatmessage">{{{content}}}</span></p>
+      <p><span id="discordmessage_{{id}}" title="{{full_timestamp}}" class="chattimestamp">{{time}}</span> <span class="chatusername">{{username}}#{{discriminator}}</span> <span class="chatmessag">{{{content}}}</span></p>
     </script>
 
     <script id="mustache_memberrole" type="text/template">