Migration from Material design to Bootstrap 4

The material design assets used was not on Toolforge and the UI of the app was messed up. This caused a migration from MD to Bootstrap 4 which is supported by Toolforge. This patch also solves the ticket here: T172609, so that the app no longer fetches content out of Toolforge. Bug: T172609. Signed-off-by: Alangi Derick <alangiderick@gmail.com>
xSavitar · Dec 23, 2017 · 9cd5da5 · 9cd5da5
1 parent 7245727
commit 9cd5da5
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 204 deletions.
diff --git a/ifttt/core.py b/ifttt/core.py
@@ -61,8 +61,24 @@
                 ItemRevisions,
                 PopularPersonsBirthday]
 
+# Trigger description list
+trigger_desc = {
+                "article_of_the_day": "This Trigger fires whenever the daily featured article on Wikipedia is updated.",
+                "word_of_the_day": "This Trigger fires whenever a new Word of the day is posted on Wiktionary.",
+                "article_revisions": "This Trigger fires each time someone edits a specified Wikipedia article.",
+                "user_revisions": "This Trigger fires each time a specified user makes a contribution to Wikipedia.",
+                "new_hashtag": "This Trigger fires every time a Wikipedia edit includes a specific hashtag.",
+                "new_article": "This Trigger fires every time a new Wikipedia article is created.",
+                "new_category_member": "This Trigger fires every time an article is added to a specific category.",
+                "category_member_revisions": "This Trigger fires every time an article is edited within a specific category.",
+                "item_revisions": "This trigger fires when a specific Wikidata item is edited or revised",
+                "popular_persons_birthday": "This Trigger fires when it finds people that has a birthday recently from WDQS."
+              }
+
+# Number of triggers (disregarding PotD)
+list_count = len(ALL_TRIGGERS) - 1
+
 app = flask.Flask(__name__)
-material = Material(app)
 # Load default config first
 app.config.from_pyfile('../default.cfg', silent=True)
 # Override defaults if ifttt.cfg is present
@@ -89,13 +105,13 @@ def unauthorized(e):
 def page_not_found(e):
     """The page you are looking for is not found on the server"""
     g.skip_after_request = True
-    return render_template('error_pages/404.html'), 404
+    return render_template('error_pages/404.html', count=list_count), 404
 
 @app.errorhandler(500)
 def internal_server_error(e):
     """There was an internal server error"""
     g.skip_after_request = True
-    return render_template('error_pages/500.html'), 500
+    return render_template('error_pages/500.html', count=list_count), 500
 
 
 @app.after_request
@@ -135,10 +151,8 @@ def test_setup():
 
 @app.route('/ifttt/v1/rss-feeds')
 def index():
-    """Return the list of feeds in material design card template"""
+    """Return the list of feeds in card template"""
     feeds = {'samples': {'feeds': {}}}
-    # Sum the ALL_TRIGGERS list
-    list_count = len(ALL_TRIGGERS)
     for feed in ALL_TRIGGERS:
         feed_name = snake_case(feed.__name__)
         feed_display_name = feed_name.replace("_", " ").capitalize()
@@ -150,7 +164,7 @@ def index():
     # for the HTML in feeds.html to render correctly and not 
     # in JSON format as the flask default Content-Type.
     g.skip_after_request = True
-    return render_template('index.html', data=feeds, count=list_count)
+    return render_template('index.html', data=feeds, trigger_desc=trigger_desc, count=list_count)
 
 
 @app.route('/ifttt/v1/status')

diff --git a/ifttt/templates/error_pages/404.html b/ifttt/templates/error_pages/404.html
@@ -1,66 +1,48 @@
-{% extends "material/base.html" %}
-
-{% block title %} Page not found - 404 {% endblock %}
-
-{% block head %}
-    {{ super() }}
-    <link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-    <link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-    <link href="http://materialdesignblog.com/Material-Design-Flipper/material/css/ripples.min.css" rel="stylesheet">
-    <link href="http://materialdesignblog.com/Material-Design-Flipper/material/css/material-wfont.min.css" rel="stylesheet">
-    <link href="http://materialdesignblog.com/Material-Design-Flipper/css/flipper.css" rel="stylesheet">
+<!DOCTYPE html>
+<html>
+<head>
+    <title> Wikipedia RSS Feeds </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
     <style type="text/css">
-        #hover-card {
-            text-decoration: none;
-        }
-        #footer {
-            position: fixed;
-            height:70px;
-            bottom:0px;
-            left:0px;
-            right:0px;
-            margin-bottom:0px;
-        }
-    </style>
-{% endblock %}
-
-{% block content %}
-<div class="navbar navbar-default">
-    <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
+    #four-0-four {
+        height: 300px;
+    }
+    #search {
+        position: relative;
+        left: 50%;
+    }
+</style>
+</head>
+<body>
+    <nav class="navbar navbar-toggleable-md navbar-light bg-primary">
+        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
         </button>
-        <a class="navbar-brand" href="{{url_for('index')}}">Wikipedia RSS Feeds&nbsp;&nbsp;&nbsp;<span class="icon-material-keyboard-arrow-right"></span>&nbsp;&nbsp;&nbsp;Total of {{count}} Wikipedia RSS feed(s)</a>
-    </div>
-</div>
-<div class="container">
-    <div id="example-row" class="row">
-            <div class="col-xs-12 col-md-12 full-card">
-                <div class="flip-card active-card">
-                    <div class="card label-info" style="background-color: #7ec0ee !important;color: white; height: 450px;">
-                        <h1 align="center"><br />Page not found</h1>
-                        <h6 align="center">404</h6>
-                    </div>
-                </div>
+        <a class="navbar-brand text-white" href="{{url_for('index')}}">Wiki(pedi&amp;dat)a RSS Feeds&nbsp;&nbsp;>&nbsp;&nbsp; Total of {{count}} Wiki(pedi&amp;dat)a RSS feed(s)</a>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <form class="form-inline my-2 my-lg-0" id=search>
+                <input class="form-control mr-sm-2" type="text" placeholder="Search">
+                <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
+            </form>
+        </div>
+    </nav><br />
+    <div class="container">
+        <div class="card text-center" id="four-0-four">
+            <div class="card-header">
+                Ops, the page you are looking for is not found
+            </div><br /><br />
+            <div class="card-block">
+                <h4 class="card-title">404</h4>
+                <a href="{{url_for('index')}}" class="btn btn-primary">Back to Home</a>
             </div>
+        </div>
     </div>
-</div>
-
-<!-- JAVASCRIPT DEPENENCIES -->
-<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script src="http://materialdesignblog.com/Material-Design-Flipper/material/js/ripples.min.js"></script>
-<script src="http://materialdesignblog.com/Material-Design-Flipper/material/js/material.min.js"></script>
 
-{% endblock %}
+    <!-- JAVASCRIPT DEPENENCIES -->
+    <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.1.1/jquery.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 
-{% block footer %}
-<div class="navbar navbar-default" id="footer">
-    <div class="navbar-header">
-        <h3 style="position: relative;left: 180px;color: white;">(c) All rights reserved 2017 | Developed by Alangi Derick, supervised by Wikimedia Foundation</h3>
-    </div>
-</div>
-{% endblock %}
+</body>
+</html>
diff --git a/ifttt/templates/error_pages/500.html b/ifttt/templates/error_pages/500.html
@@ -1,66 +1,48 @@
-{% extends "material/base.html" %}
-
-{% block title %} Internal Server Error - 500 {% endblock %}
-
-{% block head %}
-    {{ super() }}
-    <link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-    <link href="//tools-static.wmflabs.org/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-    <link href="http://materialdesignblog.com/Material-Design-Flipper/material/css/ripples.min.css" rel="stylesheet">
-    <link href="http://materialdesignblog.com/Material-Design-Flipper/material/css/material-wfont.min.css" rel="stylesheet">
-    <link href="http://materialdesignblog.com/Material-Design-Flipper/css/flipper.css" rel="stylesheet">
+<!DOCTYPE html>
+<html>
+<head>
+    <title> Wikipedia RSS Feeds </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
     <style type="text/css">
-        #hover-card {
-            text-decoration: none;
-        }
-        #footer {
-            position: fixed;
-            height:70px;
-            bottom:0px;
-            left:0px;
-            right:0px;
-            margin-bottom:0px;
-        }
-    </style>
-{% endblock %}
-
-{% block content %}
-<div class="navbar navbar-default">
-    <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
+    #five-0-0 {
+        height: 300px;
+    }
+    #search {
+        position: relative;
+        left: 50%;
+    }
+</style>
+</head>
+<body>
+    <nav class="navbar navbar-toggleable-md navbar-light bg-primary">
+        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
         </button>
-        <a class="navbar-brand" href="{{url_for('index')}}">Wikipedia RSS Feeds&nbsp;&nbsp;&nbsp;<span class="icon-material-keyboard-arrow-right"></span>&nbsp;&nbsp;&nbsp;Total of {{count}} Wikipedia RSS feed(s)</a>
-    </div>
-</div>
-<div class="container">
-    <div id="example-row" class="row">
-            <div class="col-xs-12 col-md-12 full-card">
-                <div class="flip-card active-card">
-                    <div class="card label-info" style="background-color: #7ec0ee !important;color: white; height: 450px;">
-                        <h1 align="center"><br />Page not found</h1>
-                        <h6 align="center">500</h6>
-                    </div>
-                </div>
+        <a class="navbar-brand text-white" href="{{url_for('index')}}">Wiki(pedi&amp;dat)a RSS Feeds&nbsp;&nbsp;>&nbsp;&nbsp; Total of {{count}} Wiki(pedi&amp;dat)a RSS feed(s)</a>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <form class="form-inline my-2 my-lg-0" id=search>
+                <input class="form-control mr-sm-2" type="text" placeholder="Search">
+                <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
+            </form>
+        </div>
+    </nav><br />
+    <div class="container">
+        <div class="card text-center" id="five-0-0">
+            <div class="card-header">
+                Ops, we got an internal server error
+            </div><br /><br />
+            <div class="card-block">
+                <h4 class="card-title">500</h4>
+                <a href="{{url_for('index')}}" class="btn btn-primary">Back to Home</a>
             </div>
+        </div>
     </div>
-</div>
-
-<!-- JAVASCRIPT DEPENENCIES -->
-<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
-<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script src="http://materialdesignblog.com/Material-Design-Flipper/material/js/ripples.min.js"></script>
-<script src="http://materialdesignblog.com/Material-Design-Flipper/material/js/material.min.js"></script>
 
-{% endblock %}
+    <!-- JAVASCRIPT DEPENENCIES -->
+    <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.1.1/jquery.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 
-{% block footer %}
-<div class="navbar navbar-default" id="footer">
-    <div class="navbar-header">
-        <h3 style="position: relative;left: 180px;color: white;">(c) All rights reserved 2017 | Developed by Alangi Derick, supervised by Wikimedia Foundation</h3>
-    </div>
-</div>
-{% endblock %}
+</body>
+</html>