Merge branch 'custom-theming' into 'master'

Custom Theming

See merge request Volkor/QuadFile!2

README.md

@@ -19,8 +19,8 @@ Needed:
 
 * Python 3 (Required for python-magic)
 * sqlite3 package for your OS (To create the database)
-* Install flask, currently that should be the only requirement and hopefully forever (``pip install -r requirements.txt``)
-* python-magic - For the mimetype filtering
+* Install the python requirements with (``pip install -r requirements.txt``)
+* nginx or another reverse proxy.
 
 Recommended:
 

run.py

@@ -1,6 +1,7 @@
 #!/usr/bin/env python3
 from flask import Flask, request, redirect, url_for, send_from_directory, abort, render_template
-from werkzeug import secure_filename
+from werkzeug.utils import secure_filename
+from werkzeug.middleware.proxy_fix import ProxyFix
 from threading import Thread, Timer
 import logging
 import os
@@ -19,8 +20,9 @@ from QuadFile import db
 from QuadFile.output import print_log, time_to_string
 from QuadFile import application
 
-app = Flask(__name__)
 
+app = Flask(__name__, template_folder=config['THEME_FOLDER'] + "/templates", static_folder=config['THEME_FOLDER'] + "/static")
+app.wsgi_app = ProxyFix(app.wsgi_app)
 
 # TODO: Try to turn these into functions or something I dunno
 print_log('Main', 'Running in "' + os.getcwd() + '"')
@@ -102,11 +104,11 @@ def upload_file():
     if file and allowed_file(file):
       filename = secure_filename(file.filename)
       if filename.find(".")!=-1: #check if filename has a .(to check if it should split ext)
-        filename = secrets.token_urlsafe(5) + '.' + filename.rsplit('.',1)[1]
+        filename = secrets.token_urlsafe(3) + '.' + filename.rsplit('.',1)[1]
       else:
-        filename = secrets.token_urlsafe(5)
+        filename = secrets.token_urlsafe(3)
 
-      deletekey = secrets.token_urlsafe(16)
+      deletekey = secrets.token_urlsafe(10)
       thread1 = Thread(target = db.add_file, args = (filename, deletekey))
       thread1.start()
       print_log('Thread', 'Adding file to DB', print_debug)
@@ -185,7 +187,7 @@ def delete_file_key_api():
   if config["GEN_DELETEKEY"]:
     df = db.get_file_from_key(deletekey)
     if not df:
-      print_log('Web', 'Someone used an invalid deletion key')
+      print_log('Web', 'Someone used an invalid deletion key', print_debug)
       return "Error: Invalid deletion key!\n"
     for file in df:
       print_log('Thread', 'Deleting ' + file["file"] + ' with deletion key')
@@ -193,7 +195,7 @@ def delete_file_key_api():
         os.remove(os.path.join(config["UPLOAD_FOLDER"], file["file"]))
         db.delete_entry(file["file"])
       except Exception:
-        print_log('Warning', 'Failed to delete ' + file["file"] + ' : Invalid key')
+        print_log('Warning', 'Failed to delete ' + file["file"])
         return "Error: Failed to delete file, not exactly sure why though\n"
   else:
     return 'Deletion keys are not enabled on this server.\n'

static/regular.css

@@ -1,130 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
-
-/* Being lazy 101 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Open Sans", "Lato", sans-serif;
-  color: #ffffff;
-  background-color: #1d1d1d;
-}
-
-@keyframes rise {
-    from {margin-top: 50px;opacity:0;}
-    to {margin-top: 0;opacity:1;}
-}
-
-@keyframes appear {
-    from {opacity:0;}
-    to {opacity:1;}
-}
-
-.a4 {
-  width: 100%;
-  max-width: 920px;
-  padding: 15px;
-  margin-left: auto;
-  margin-right: auto;
-  animation: appear 0.75s ease-out;
-}
-
-.a4 .title {
-  font-size: 24pt;
-  font-weight: 300;
-  text-align: right;
-  margin: 0;
-  animation: rise 0.75s ease-out;
-}
-
-.title {
-  font-size: 34pt;
-  font-weight: 300;
-  margin-bottom: 20px;
-  text-align: center;
-  animation: appear 0.75s ease-out;
-}
-
-.links {
-  font-size: 0;
-  margin-top: 20px;
-  text-align: center;
-  list-style: none;
-}
-
-.links li {
-  font-size: 12pt;
-  display: inline-block;
-  padding: 5px;
-  width: 25%;
-  animation: rise 1s ease-out;
-}
-
-.links li a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.links li a:hover {
-  text-decoration: underline;
-}
-
-.note {
-  text-align: center;
-  font-size: 8pt;
-  color: #AAAAAA;
-  animation: appear 0.75s ease-out;
-}
-
-/* Restyle with custom margins */
-
-p {
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-h1 {
-  margin-top: 25px;
-  margin-bottom: 10px;
-}
-
-h2 {
-  margin-top: 25px;
-  margin-bottom: 5px;
-}
-
-.title a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.title a:hover {
-  text-decoration: underline;
-}
-
-a {
-  color: #33BB33;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-ul {
-  list-style: none;
-  padding-left: 15px;
-}
-
-ul li:before {
-  content: "- ";
-}
-
-.dmca {
-  width: 100%;
-  height: auto;
-  padding: 10px;
-}

static/style.css

@@ -1,138 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
-
-/* Being lazy 101 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Open Sans", "Lato", sans-serif;
-  color: #ffffff;
-  background-color: #1d1d1d;
-}
-
-@keyframes rise {
-    from {margin-top: 50px;opacity:0;}
-    to {margin-top: 0;opacity:1;}
-}
-
-@keyframes appear {
-    from {opacity:0;}
-    to {opacity:1;}
-}
-
-.page {
-  width: 100%;
-  max-width: 720px;
-  padding: 10px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 50vh;
-  transform: translateY(-50%)
-}
-
-.note {
-  text-align: center;
-  font-size: 8pt;
-  color: #AAAAAA;
-  animation: appear 0.75s ease-out;
-}
-
-.title {
-  font-size: 34pt;
-  font-weight: 300;
-  margin-bottom: 5px;
-  text-align: center;
-  animation: appear 0.75s ease-out;
-}
-
-.links {
-  font-size: 0;
-  margin-top: 5px;
-  text-align: center;
-  list-style: none;
-}
-
-.links li {
-  font-size: 12pt;
-  display: inline-block;
-  padding: 5px;
-  width: 15%;
-  animation: rise 1s ease-out;
-}
-
-@media all and (max-width: 360px){
-  .links li {
-    width: 40%;
-    margin-bottom: 5px;
-    padding: 5px;
-  }
-}
-
-@media all and (max-width: 600px){
-  .links li {
-    width: 20%;
-    margin-bottom: 5px;
-    padding: 5px;
-  }
-}
-
-.links li a, .fileLink {
-  color: inherit;
-  text-decoration: none;
-  color: #999999;
-}
-
-.links li a:hover, .fileLink {
-  text-decoration: underline;
-}
-
-.uploadForm {
-  width: 100%;
-  text-align: center;
-  animation: appear 0.75s ease-out;
-}
-
-.uploadButton {
-  position: relative;
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 100%;
-  cursor: pointer;
-  background-color: #229922;
-  border-radius: 10px;
-  transition: background 0.1s ease-out;
-  overflow: hidden;
-}
-
-.uploadButton:hover {
-  background-color: #33BB33;
-}
-
-@keyframes pulse {
-  0% {background-color: #117711;}
-  50% {background-color: #44CC44;}
-  100% {background-color: #117711;}
-}
-
-.uploading {
-  animation: pulse 3s infinite;
-}
-
-.uploadButton p {
-  padding: 20px;
-  font-weight: 300;
-  font-size: 24pt;
-}
-
-.uploadButton input[type="file"] {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  right: 0;
-  opacity: 0;
-}

theme/static/regular.css

@@ -0,0 +1,26 @@
+*{margin:0;padding:0;box-sizing:border-box;}
+body{font-family:"Open Sans", "Lato", sans-serif;color:#ffffff;background-color:#1d1d1d;}
+@keyframes rise{from{margin-top:50px;opacity:0;}
+to{margin-top:0;opacity:1;}
+}
+@keyframes appear{from{opacity:0;}
+to{opacity:1;}
+}
+.a4{width:100%;max-width:920px;padding:15px;margin-left:auto;margin-right:auto;animation:appear 0.75s ease-out;}
+.a4 .title{font-size:24pt;font-weight:300;text-align:right;margin:0;animation:rise 0.75s ease-out;}
+.title{font-size:34pt;font-weight:300;margin-bottom:20px;text-align:center;animation:appear 0.75s ease-out;}
+.links{font-size:0;margin-top:20px;text-align:center;list-style:none;}
+.links li{font-size:12pt;display:inline-block;padding:5px;width:25%;animation:rise 1s ease-out;}
+.links li a{color:inherit;text-decoration:none;}
+.links li a:hover{text-decoration:underline;}
+.note{text-align:center;font-size:8pt;color:#AAAAAA;animation:appear 0.75s ease-out;}
+p{margin-top:5px;margin-bottom:10px;}
+h1{margin-top:25px;margin-bottom:10px;}
+h2{margin-top:25px;margin-bottom:5px;}
+.title a{color:inherit;text-decoration:none;}
+.title a:hover{text-decoration:underline;}
+a{color:#33BB33;text-decoration:none;}
+a:hover{text-decoration:underline;}
+ul{list-style:none;padding-left:15px;}
+ul li:before{content:"- ";}
+.dmca{width:100%;height:auto;padding:10px;}

theme/static/style.css

@@ -0,0 +1,33 @@
+*{padding:0;box-sizing:border-box;}
+html{background-color:#1d1d1d;background-size:cover;}
+body{font-family:"Open Sans", "Lato", sans-serif;color:#ffffff;display:block;}
+.btn{font-size:0;position:fixed;bottom:0;right:0;float:right;color:#ffffff;cursor:pointer;}
+.btn li{font-size:12pt;display:inline-block;}
+@keyframes rise{from{margin-top:50px;opacity:0;}
+to{margin-top:0;opacity:1;}
+}
+@keyframes appear{from{opacity:0;}
+to{opacity:1;}
+}
+.img{width: -moz-available;width: -webkit-fill-available;}
+.page{max-width: 720px;padding: 10px;margin-left: auto;margin-right: auto;display: flex;flex-direction: column;justify-content: center;min-height: 97vh;}
+.note{text-align:center;font-size:8pt;color:#AAAAAA;animation:appear 0.75s ease-out;}
+.title{font-size:34pt;font-weight:300;margin-bottom:30px;text-align:center;animation:appear 0.75s ease-out;}
+.links{font-size:0;margin-top:40px;text-align:center;list-style:none;}
+.links li{font-size:12pt;display:inline-block;padding:5px;width:15%;animation:rise 1s ease-out;}
+@media all and (max-width:360px){.links li{width:40%;margin-bottom:5px;padding:5px;}
+}
+@media all and (max-width:600px){.links li{width:20%;margin-bottom:5px;padding:5px;}
+}
+.links li a, .fileLink{color:inherit;text-decoration:none;color:#999999;}
+.links li a:hover, .fileLink{text-decoration:underline;}
+.uploadForm{width:100%;text-align:center;animation:appear 0.75s ease-out;}
+.uploadButton{position:relative;margin-right:auto;margin-left:auto;max-width:100%;cursor:pointer;background-color:#229922;border-radius:10px;transition:background 0.1s ease-out;}
+.uploadButton:hover{background-color:#33BB33;}
+@keyframes pulse{0%{background-color:#117711;}
+50%{background-color:#44CC44;}
+100%{background-color:#117711;}
+}
+.uploading{animation:pulse 3s infinite;}
+.uploadButton p{padding:20px;font-weight:300;font-size:24pt;}
+.uploadButton input[type="file"]{position:absolute;display:block;width:100%;height:100%;top:0;right:0;opacity:0;}