Overhaul navbar

app.py

@@ -7,6 +7,7 @@ from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager, login_manager, current_user, login_user, \
     logout_user, login_required
 from flask_wtf import FlaskForm
+from flask_cache_buster import CacheBuster
 from wtforms import StringField, PasswordField, BooleanField, SubmitField
 from wtforms.validators import DataRequired
 import yaml
@@ -48,6 +49,13 @@ login_manager.login_view = 'login'
 
 db.create_all()
 
+config = {
+     'extensions': ['.js', '.css', '.csv'],
+     'hash_size': 10
+}
+
+cache_buster = CacheBuster(config=config)
+cache_buster.register_cache_buster(app)
 
 
 eastern = pytz.timezone('US/Eastern')
@@ -153,6 +161,11 @@ def get_current_user():
     g.user = current_user
 
 
+@app.route('/frame')
+def frame():
+    return render_template('frame.j2', apps = apps, games = games)
+
+
 @app.route('/')
 def index():
     current_time = eastern.localize(dt.datetime.now())
@@ -172,11 +185,11 @@ def game():
             return render_template('final_countdown.j2', final_countdown = final_countdown_data)
     if countdown_data != None:
         if current_user.is_authenticated:
-            return render_template('games.j2', apps = games, search = search, account_url = account_url, description = game_description, countdown = countdown_data, game_list = generate_game_list(current_user.username))
-        return render_template('games.j2', apps = games, search = search, account_url = account_url, description = game_description, countdown = countdown_data)
+            return render_template('games.j2', games = games, search = search, account_url = account_url, description = game_description, countdown = countdown_data, game_list = generate_game_list(current_user.username))
+        return render_template('games.j2', games = games, search = search, account_url = account_url, description = game_description, countdown = countdown_data)
     if current_user.is_authenticated:
-        return render_template('games.j2', apps = games, search = search, account_url = account_url, description = game_description, game_list = generate_game_list(current_user.username))
-    return render_template('games.j2', apps = games, search = search, account_url = account_url, description = game_description)
+        return render_template('games.j2', games = games, search = search, account_url = account_url, description = game_description, game_list = generate_game_list(current_user.username))
+    return render_template('games.j2', games = games, search = search, account_url = account_url, description = game_description)
 
 
 @app.route('/login', methods=['GET', 'POST'])

config/config.yaml

@@ -73,5 +73,5 @@ games:
   minecraft:
     name: "Minecraft"
     description: "<br>Remember playing Minecraft in high school? Or that one month on PS4? Or that one Bedrock server we used for a month?<br><br>Me neither, but join us in Java Edition at: <strong>mc.flamwenco.com</strong>"
-    link: "#"
+    link: "https://technicalincompetence.club/games"
     image: "minecraft.png"

requirements.txt

@@ -7,4 +7,5 @@ Flask-SimpleLDAP==1.4.0
 python-ldap==3.2.0
 ldap3==2.8.1
 Flask-SQLAlchemy==2.4.4
-Flask-WTF==0.14.3
+Flask-WTF==0.14.3
+Flask-Cache-Buster==1.0.1

static/icons/feathericons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2017 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

static/icons/lucide-icons/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

static/icons/lucide-icons/gamepad-2.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="6" y1="11" x2="10" y2="11"></line>
+  <line x1="8" y1="9" x2="8" y2="13"></line>
+  <line x1="15" y1="12" x2="15.01" y2="12"></line>
+  <line x1="18" y1="10" x2="18.01" y2="10"></line>
+  <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"></path>
+</svg>

static/icons/lucide-icons/snowflake.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+<symbol id="snowflake" viewBox="0 0 24 24">
+  <line x1="2" y1="12" x2="22" y2="12"></line>
+  <line x1="12" y1="2" x2="12" y2="22"></line>
+  <path d="M20 16l-4-4 4-4"></path>
+  <path d="M4 8l4 4-4 4"></path>
+  <path d="M16 4l-4 4-4-4"></path>
+  <path d="M8 20l4-4 4 4"></path>
+</symbol>
+</defs>
+</svg>

static/style.css

@@ -1,3 +1,7 @@
+body {
+  background-color: #f5f5f5 !important;
+}
+
 @media (max-width: 991.98px) {
   #userNameRow,
   #firstNameRow {
@@ -37,6 +41,10 @@
     color: #eee;
   }
 
+  .shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(0,0,0,.75) !important;
+  }
+
   .jumbotron {
     background-color: #333 !important;
   }
@@ -330,4 +338,31 @@
 
 .colon {
   font-size: 40px;
+}
+
+.overlay-frame {
+  z-index: 1050;
+  position: fixed;
+  top: 55px;
+  right: 10px;
+  border-radius: .25rem;
+  border: 1px solid #6c757d;
+}
+
+#overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1040;
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+@media (max-width: 575.98px) { 
+  .navbar-nav > li {
+    padding-right: .5rem;
+    padding-left: .5rem;
+  }
 }

templates/fragments/navbar.j2

@@ -0,0 +1,55 @@
+<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
+    <div class="navbar-brand d-none d-md-block">Technical Incompetence</div>
+    <ul class="navbar-expand navbar-nav">
+        {% if request.path == url_for('index') %}
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        {% else %}
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for('index') }}">Home</a>
+        {% endif %}
+        </li>
+        {% if request.path == url_for('game') %}
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Games <span class="sr-only">(current)</span></a>
+        {% else %}
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for('game') }}">Games</a>
+        {% endif %}
+        </li>
+    </ul>
+    <form class="form-inline ml-auto">
+        <a onclick="showApps();" style="cursor: pointer;">
+            <svg
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                style="vertical-align: middle;">
+                <use xlink:href="{{url_for('.static', filename='icons/feathericons/feather-sprite.svg')}}#grid"/>
+            </svg>
+        </a>
+        {% if account_url is defined and account_url != '' %}
+            {% if current_user.is_authenticated %}
+                <a href="{{ account_url }}" style="color: white;">
+                    <svg
+                        width="24"
+                        height="24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        style="vertical-align: middle; margin-left: 1rem;">
+                        <use xlink:href="{{url_for('.static', filename='icons/feathericons/feather-sprite.svg')}}#user"/>
+                    </svg>
+                </a>
+            {% else %}
+                <a class="btn btn-sm btn-primary" style="margin-left: 1rem;" href="{{ account_url }}" role="button">Sign In</a>
+            {% endif %}
+        {% endif %}
+    </form>
+</nav>

templates/frame.j2

@@ -0,0 +1,67 @@
+{% extends "bootstrap/base.html" %}
+{% block title %}Technical Incompetence - Home{% endblock %}
+
+{% block styles %}
+{{super()}}
+{# <link rel="icon" type="image/png" href="{{url_for('.static', filename='favicon.png')}}" /> #}
+<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
+{% if countdown is defined %}
+    <link rel="stylesheet" href="{{url_for('.static', filename='clock.css')}}">
+{% endif %}
+<style>
+html {
+    scrollbar-width: none;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+    <div class="container" style="margin-top: 15px">
+        <h5>Apps</h5>
+        <div class="row" style="margin-left: auto; margin-right: auto;">
+            {% for app in apps %}
+                <div class="col-xs-4" style="width: 90px;">
+                    <div class="card" onclick="goToLink('{{ app['link'] }}');" style="background-color: rgba(0,0,0,0); border: none;">
+                        <div class="card-body" style="padding: .5rem; text-align: center;">
+                            {% if app['image'] is defined %}
+                                <img src="{{url_for('.static', filename='images/' )}}{{ app['image'] }}" class="card-img" style="width: 64px !important; padding-bottom: 5px;">
+                            {% endif %}
+                            <p class="card-title" style="font-size: .75rem">{{ app['name'] }}</p>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+        <h5>Games</h5>
+        <div class="row" style="margin-left: auto; margin-right: auto;">
+            {% for app in games %}
+                <div class="col-xs-4" style="width: 90px;">
+                    <div class="card" onclick="goToLink('{{ app['link'] }}');" style="background-color: rgba(0,0,0,0); border: none;">
+                        <div class="card-body" style="padding: .5rem; text-align: center;">
+                            {% if app['image'] is defined %}
+                                <img src="{{url_for('.static', filename='images/' )}}{{ app['image'] }}" class="card-img" style="width: 64px !important; padding-bottom: 5px;">
+                            {% endif %}
+                            <p class="card-title" style="font-size: .75rem">{{ app['name'] }}</p>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super () }}
+<script>
+$( ".card" ).hover(
+  function() {
+    $(this).css('cursor', 'pointer'); 
+  }, function() {
+   
+});
+
+function goToLink(link) {
+    window.top.location = link;
+}
+</script>
+{% endblock %}

templates/games.j2

@@ -3,7 +3,7 @@
 
 {% block styles %}
 {{super()}}
-{# <link rel="icon" type="image/png" href="{{url_for('.static', filename='favicon.png')}}" /> #}
+<link rel="icon" type="image/png" href="{{url_for('.static', filename='favicon.png')}}" />
 <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
 {% if countdown is defined %}
     <link rel="stylesheet" href="{{url_for('.static', filename='clock.css')}}">
@@ -11,31 +11,12 @@
 {% endblock %}
 
 {% block navbar %}
-<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <div class="navbar-brand">Technical Incompetence</div>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
-            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavDropdown">
-        <ul class="navbar-nav">
-            <li class="nav-item">
-                <a class="nav-link" href="/">Home</a>
-            </li>
-            <li class="nav-item active">
-                <a class="nav-link" href="#">Games <span class="sr-only">(current)</span></a>
-            </li>
-        </ul>
-        <form class="form-inline ml-auto">
-            {% if account_url is defined and account_url != '' %}
-                <a class="btn btn-primary" href="{{ account_url }}" role="button">My Account</a>
-            {% endif %}
-        </form>
-    </div>
-</nav>
+{% include "fragments/navbar.j2" %}
 {% endblock %}
 
 {% block content %}
+    <iframe id="apps" src="http://localhost:5000/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
+    <div id="overlay" style="display: none;" onclick="showApps();"></div>
     <div class="container" style="margin-top: 15px">
     {% if search['active'] == True %}
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
@@ -44,20 +25,20 @@
         <br><br>
     {% endif %}
     {% if countdown is defined %}
-        {% include "countdown.j2" %}
+        {% include "fragments/countdown.j2" %}
     {% endif %}
     <p>{{ description }}</p>
         <div class="row">
-            {% for app in apps %}
-                {% include "card.j2" %}
+            {% for app in games %}
+                {% include "fragments/card.j2" %}
             {% endfor %}
         </div>
         <div class="row">
-            {% include "card_list.j2" %}
+            {% include "fragments/card_list.j2" %}
         </div>
         <br>
     </div>
-    {% include "new_game_modal.j2" %}
+    {% include "fragments/new_game_modal.j2" %}
 {% endblock %}
 
 {% block scripts %}
@@ -91,6 +72,11 @@ function goToLink(link) {
     window.location = link;
 }
 
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
+
 function addGame() {
     game_title = $('#game-title').val();
     game_link = $('#game-link').val();

templates/index.j2

@@ -3,7 +3,7 @@
 
 {% block styles %}
 {{super()}}
-{# <link rel="icon" type="image/png" href="{{url_for('.static', filename='favicon.png')}}" /> #}
+<link rel="icon" type="image/png" href="{{url_for('.static', filename='favicon.png')}}" />
 <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
 {% if countdown is defined %}
     <link rel="stylesheet" href="{{url_for('.static', filename='clock.css')}}">
@@ -11,31 +11,12 @@
 {% endblock %}
 
 {% block navbar %}
-<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <div class="navbar-brand">Technical Incompetence</div>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
-            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavDropdown">
-        <ul class="navbar-nav">
-            <li class="nav-item active">
-                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="/games">Games</a>
-            </li>
-        </ul>
-        <form class="form-inline ml-auto">
-            {% if account_url is defined and account_url != '' %}
-                <a class="btn btn-primary" href="{{ account_url }}" role="button">My Account</a>
-            {% endif %}
-        </form>
-    </div>
-</nav>
+{% include "fragments/navbar.j2" %}
 {% endblock %}
 
 {% block content %}
+    <iframe id="apps" src="http://localhost:5000/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
+    <div id="overlay" style="display: none;" onclick="showApps();"></div>
     <div class="container" style="margin-top: 15px">
     {% if search['active'] == True %}
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
@@ -44,12 +25,12 @@
         <br><br>
     {% endif %}
     {% if countdown is defined %}
-        {% include "countdown.j2" %}
+        {% include "fragments/countdown.j2" %}
     {% endif %}
     <p>{{ description }}</p>
         <div class="row">
             {% for app in apps %}
-                {% include "card.j2" %}
+                {% include "fragments/card.j2" %}
             {% endfor %}
         </div>
     </div>
@@ -83,5 +64,10 @@ $( ".card" ).hover(
 function goToLink(link) {
     window.location = link;
 }
+
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
 </script>
 {% endblock %}

templates/login.j2

@@ -8,12 +8,12 @@
 {% endblock %}
 
 {% block navbar %}
-<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <div class="navbar-brand">Technical Incompetence Account</div>
-</nav>
+{% include "fragments/navbar.j2" %}
 {% endblock %}
 
 {% block content %}
+    <iframe id="apps" src="http://localhost:5000/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
+    <div id="overlay" style="display: none;" onclick="showApps();"></div>
     <div class="container" style="margin-top: 15px">
         <div class="jumbotron">
             <h1>Sign in for our awesome service</h1>
@@ -29,4 +29,14 @@
 
         {{wtf.quick_form(form, novalidate=True)}}
     </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super () }}
+<script>
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
+</script>
 {% endblock %}