Improve the look of the /library page

website/forms.py

@@ -5,6 +5,6 @@
 
 class EmoteUploadForm(Form):
     emote  = FileField('Emote', validators=[DataRequired()])
-    name   = StringField('Name', validators=[DataRequired(), Length(min=3, max=32)])
+    name   = StringField('Name', validators=[DataRequired(), Length(min=3, max=20)])
     shared = BooleanField('Enable sharing')
 

website/static/custom.css

@@ -59,3 +59,32 @@ table.table tbody tr td {
 .site-content {
     flex: 1;
 }
+
+.shared-emote {
+    padding: 7px;
+    align-items: center;
+    text-align: center;
+    background: #f5f5f5;
+    font-size: 12px;
+    width: 100px;
+    height: 80px;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.shared-emote img {
+    display: block;
+    margin: auto;
+    width: 40%;
+}
+
+.column.is-emote {
+    padding: 2px;
+}
+
+.columns.is-centered {
+    margin: auto;
+    padding: 10px;
+}

website/templates/base.html

@@ -28,7 +28,6 @@
             Shared Library
           </a>
         </span>
-        </a>
         <a class="nav-item" href="{{ url_for('guilds') }}">
           <img class="avatar is-32x32" src="{{ user.avatar_url }}" alt="User avatar">{{ user.name }}
         </a>

website/templates/guild.html

@@ -17,7 +17,7 @@ <h1 class="title">{{ guild.name }}</h1>
       </div>
     </nav>
     <div class="content">
-      This is a list of all of the emotes that have been added to <strong>{{ guild.name }}</strong>. To add a new emote, press the <strong>Upload Emote</strong> button above, or search our <a href="#">Shared Library</a>.
+      This is a list of all of the emotes that have been added to <strong>{{ guild.name }}</strong>. To add a new emote, press the <strong>Upload Emote</strong> button above, or search our <a href="{{ url_for('library') }}">Shared Library</a>.
     </div>
     {% if emotes %}
       <table class="table">

website/templates/library.html

@@ -9,10 +9,13 @@ <h1 class="title">Library</h1>
       This page contains the <strong>shared emotes</strong> that users have uploaded to Discord Emotes. To add one to your server, click on it in the list.
     </div>
     {% if emotes %}
-    <div class="columns is-multiline is-mobile">
+    <div class="columns is-multiline is-mobile is-centered">
       {% for emote in emotes.items %}
-        <div class="column is-narrow">
-          <img class="image is-64x64" src="/emotes/{{ emote.path() }}"></td>
+        <div class="column is-narrow is-emote">
+          <div class="shared-emote has-text-centered">
+            <img class="image is-48x48" src="/emotes/{{ emote.path() }}">
+            {{ emote.name }}
+          </div>
         </div>
       {% endfor %}
     </div>
@@ -23,7 +26,7 @@ <h1 class="title">Library</h1>
         </div>
       </div>
     {% endif %}
-    <nav class="level">
+    <nav class="level is-mobile">
       <div class="level-left">
         <div class="level-item">
           {% if emotes.has_prev %}

website/views.py

@@ -144,12 +144,12 @@ def add_emote(guild_id):
 
     form = EmoteUploadForm()
     if form.validate_on_submit():
-        if len(emotes) > 10:
+        if len(emotes) >= 10:
             flash('You have already reached the maximum number of emotes for this server', 'is-danger')
             return redirect(request.url)
 
         if len(form.name.data) > 20:
-            flash('The name of your emote must be under 20 characters', 'is-danger')
+            flash('The name of your emote must be 20 characters or less', 'is-danger')
             return redirect(request.url)
 
         try: