Huge updates:

1. Redesigned the web 2. Fixed logging in redirect issue 3. Added new route 4. Fixed sql issue on entry 5. Fixed typos
2017-09-14 16:39:53 +07:00
parent ae8ce075e8
commit 00c5aba77d
12 changed files with 348 additions and 116 deletions
--- a/App/Views/base.html
+++ b/App/Views/base.html
@@ -6,6 +6,7 @@
        <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/picnic.min.css">
        <link rel="stylesheet" href="/css/rome.css">
+        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <title>{% block title %}{% endblock %}</title>

        <style>
@@ -18,6 +19,10 @@
                padding: 80px 0 0;
            }

+            .flex>* {
+                padding-right: .6em;
+            }
+
            nav.transparent {
                box-shadow: none;
                background: none;
@@ -37,7 +42,6 @@
            }

            .top {
-                position: fixed;
                z-index: 10001;
            }

@@ -52,18 +56,105 @@
            td, th {
                padding: .3em .45em .3em .6em;
            }
+
+            .fitty {
+              display: inline-block;
+              white-space: nowrap;
+              line-height: 1em;
+              padding-bottom: .1em;
+              text-align: center;
+            }
+
+            .title {
+                font-family: 'Lobster', cursive;
+                font-size: x-large;
+            }
+
+            nav .menu>.navy {
+                color: #000;
+                margin-right: 2.5em;
+            }
+
+            .navy:hover, .title:hover {
+                color: rgba(17, 17, 17, .3);
+            }
+
+            .hidden-hover {
+                opacity: 0;
+            }
+
+            .hidden-hover:hover {
+                opacity: 1;
+            }
+
+            .filter a {
+                text-align: center;
+            }
+
+            .card footer {
+                position: absolute;
+                bottom: 0;
+            }
+
+            .card-wrapper {
+                margin: 0 auto;
+            }
+
+            .box {
+                padding: 1em;
+                background-color: rgba(17, 17, 17, .1);
+                border: none;
+                height: 17em;
+                width: 17em;
+                margin: .6em auto;
+            }
+
+            .new i {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-right: -50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .box:hover {
+                background-color: rgba(17, 17, 17, .05);
+            }
+
+            .card footer {
+                padding-left: 0;
+                padding-bottom: 0;
+            }
        </style>
    </head>
    <body>
        <nav>
            <a href="/" class="brand">
-                <span><i class="fa fa-home" aria-hidden="true"></i></span>
+                <span class="title">Live Info</span>
            </a>
            {% block nav %}{% endblock %}
        </nav>
        <script src="/js/rome.js"></script>
+        <script src="/js/fitty.min.js"></script>
+        <script src="/js/slidr.min.js"></script>
        {% block body %}
        {% endblock %}

+        <script>
+            function fadeOutEffect() {
+                var fadeTarget = document.getElementById("info");
+                var fadeEffect = setInterval(function () {
+                    if (!fadeTarget.style.opacity) {
+                        fadeTarget.style.opacity = 1;
+                    }
+                    if (fadeTarget.style.opacity < 0.1) {
+                        clearInterval(fadeEffect);
+                    } else {
+                        fadeTarget.style.opacity -= 0.1;
+                    }
+                }, 50);
+            }
+        </script>
+
    </body>
 </html>