Fixed cog img locations for CC invasion tracker

Cog images are now pointed to the correct URL. Also some fixes for mobile viewing.

Author: zzzachzzz

.gitignore

@@ -2,4 +2,5 @@
 __pycache__/
 *.py[cod]
 *$py.class
+# Other
 *.env

toonkit/__init__.py

@@ -5,7 +5,7 @@
 app = Flask(__name__)
 app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY')
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db' # Testing DB (SQLite)
-# app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URI') # Production DB (PostgreSQL)
+# app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL') # Production DB (PostgreSQL)
 db = SQLAlchemy(app)
 
 from toonkit.routes.main import main

toonkit/static/css/style.css

@@ -185,15 +185,21 @@ header div img {
 }
 
 .contributor > .main-content {
-  min-width: 70%
+  min-width: 70%;
+  margin-left: 2%;
+}
+.contributor > .main-content > h1 {
+  font-size: 2.2em;
 }
 
 .contributor > img {
   vertical-align: middle;
-  display: inline-block;
-  width: 170px;
-  height: 170px;
-  margin-right: 1%;
+  display: block;
+  width: 100%;
+  min-height: 100px;
+  min-width: 100px;
+  max-height: 170px;
+  max-width: 170px;
 }
 
 /*CC Invasion Tracker*/

toonkit/static/js/cc-tracker.js

@@ -27,7 +27,7 @@ function initInvasions() {
                         `<div class="cog-card">
                           <h2 style="text-align: center;">${o.cogs_attacking}</h3>
                           <div class="cog-card-inner">
-                            <img draggable="false" class="cog" src="http://localhost:5000/static/images/cogs/${o.cogs_attacking.toLowerCase().replace(/ /g,'_')}.png">
+                            <img draggable="false" class="cog" src="http://toonkit.herokuapp.com/static/images/cogs/${o.cogs_attacking.toLowerCase().replace(/ /g,'_')}.png">
                             <div style="text-align: center;">
                               <h3>${o.name}</h3>
                               <p style="font-size:12px;">${o.count_total-o.count_defeated} / ${o.count_total} Cogs<br/>
@@ -49,7 +49,7 @@ function initInvasions() {
                 $("#noinv").hide();
                 // Use Cog silhouette image if regular image missing
                 $(".cog").on("error", function() {
-                    $(this).attr('src', 'http://localhost:5000/static/images/cogs/1_unknown_cog.png');
+                    $(this).attr('src', 'http://toonkit.herokuapp.com/static/images/cogs/1_unknown_cog.png');
                 });
             }
         }

toonkit/templates/cc/cc-support.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 <div class="main-content">
-  <h1><a id="Toontown_Corporate_Clash_Technical_Issues_FAQ_0"></a>Toontown: Corporate Clash Technical Issues FAQ</h1>
+  <h1 class="pad-left"><a id="Toontown_Corporate_Clash_Technical_Issues_FAQ_0"></a>Corporate Clash Technical Issues FAQ</h1>
   <p>Read this before posting about your issue in <code>#game-support</code>. The purpose of this document is to provide a central hub for common issues relating to Toontown: Corporate Clash, and how to solve them. To submit a solution, please create a <a href="https://github.com/Toonkit/Website">pull request</a> by editing the appropriate text with a description of how to fix the issue.</p>
   <p>You may submit both questions and issues: for <strong>gameplay-related issues</strong>, please make sure that the issue is reproducable by other users before submitting a solution, and that it isn’t too obscure.</p>
   <blockquote>

toonkit/templates/cc/cc-tracker.html

@@ -9,7 +9,7 @@ <h1 class="pad-left">Invasions Tracker</h1>
   This tracker uses API publicly provided by the Corporate Clash Team.
   <a href="https://github.com/CorporateClash/api-docs">View it on GitHub</a>
   <h3 class="pad-left">This list automatically refreshes every minute.</h3>
-  <h2 id="noinv" style="display: none;">Sorry, there aren't any invasions right now!</h2>
+  <h2 id="noinv" class="pad-left" style="display: none;">Sorry, there aren't any invasions right now!</h2>
   <div id="curinv">
     <!-- Invasion cards inserted here by cc-tracker.js -->
   </div>

toonkit/templates/staff.html

@@ -7,7 +7,7 @@ <h1>Toonkit Contributors</h1>
     <div class="contributor">
       <img draggable="false" src="{{ url_for('static', filename='images/staff/zach.png') }}">
       <div class="main-content">
-        <h1>Contributor - Zach</h1>
+        <h1 class="pad-left">Contributor - Zach</h1>
         <div class="pad-left">
           <h2>Pythonista / Web Dev / Backend </h2>
           <p><b>Zach</b> is a contributor of Toonkit. Questions about Toonkit's codebase and contributing to the site should be directed to Zach through the Toonkit Discord.</p>
@@ -23,7 +23,7 @@ <h2>Pythonista / Web Dev / Backend </h2>
     <div class="contributor">
       <img draggable="false" src="https://i.imgur.com/KAXiUwm.png">
       <div class="main-content">
-        <h1>Admin - Vice</h1>
+        <h1 class="pad-left">Admin - Vice</h1>
         <div class="pad-left">
           <h2>Founder, Web Dev</h2>
           <p><b>Vice</b>, also known as ViceWatercolour, is a founder of Toonkit. His main interests are music production, journalism, creative writing, and politics. His primary language is English, born and raised in the United States.</p>
@@ -39,7 +39,7 @@ <h2>Founder, Web Dev</h2>
     <div class="contributor">
       <img draggable="false" src="https://i.imgur.com/jaXreg8.png">
       <div class="main-content">
-        <h1>Admin - Bin</h1>
+        <h1 class="pad-left">Admin - Bin</h1>
         <div class="pad-left">
           <h2>Founder, Web Dev / Backend</h2>
           <p><b>Bin</b> is a founder of Toonkit. His main interests are software development, game design, cybersecurity, and cryptography. His primary language is English, born in the United States. He prefers to remain largely anonymous online.</p>