From 1b0dfb2acc9b2f971cf1e2102e6d4faefbc389f4 Mon Sep 17 00:00:00 2001
From: rubenwardy
Date: Wed, 9 May 2018 18:35:36 +0100
Subject: [PATCH] Add scss, improve homepage
---
app/models.py | 3 +-
app/scss/components.scss | 152 +++++++++++++++++++
app/scss/main.scss | 4 +
app/scss/packagegrid.scss | 35 +++++
app/scss/packages.scss | 75 ++++++++++
app/scss/page.scss | 81 ++++++++++
app/static/style.css | 303 --------------------------------------
app/templates/base.html | 2 +-
app/templates/index.html | 49 +++---
app/views/__init__.py | 5 +-
app/views/sass.py | 67 +++++++++
requirements.txt | 1 +
12 files changed, 444 insertions(+), 333 deletions(-)
create mode 100644 app/scss/components.scss
create mode 100644 app/scss/main.scss
create mode 100644 app/scss/packagegrid.scss
create mode 100644 app/scss/packages.scss
create mode 100644 app/scss/page.scss
delete mode 100644 app/static/style.css
create mode 100644 app/views/sass.py
diff --git a/app/models.py b/app/models.py
index 584cc83..9b64d3b 100644
--- a/app/models.py
+++ b/app/models.py
@@ -258,7 +258,8 @@ class Package(db.Model):
author=self.author.username, name=self.name)
def getMainScreenshotURL(self):
- return self.screenshots[0].url if len(self.screenshots) > 0 else None
+ screenshot = self.screenshots.first()
+ return screenshot.url if screenshot is not None else None
def getDownloadRelease(self):
for rel in self.releases:
diff --git a/app/scss/components.scss b/app/scss/components.scss
new file mode 100644
index 0000000..e6f33d1
--- /dev/null
+++ b/app/scss/components.scss
@@ -0,0 +1,152 @@
+
+h1 {
+ margin: 0;
+}
+
+h2, h3 {
+ margin: 5px 0;
+}
+
+a {
+ color: #0be;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #0df;
+ text-decoration: underline;
+}
+
+/* Containers */
+
+.box {
+ border-radius: 5px;
+ margin: 15px 0;
+}
+
+.box_grey {
+ padding: 10px;
+ background: #333;
+ border: 1px solid #444;
+}
+
+.ul_boxes {
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.ul_boxes > li {
+ padding: 0;
+ list-style: none;
+}
+
+.box_link {
+ display: block;
+ color: #ddd;
+ text-decoration: none;
+}
+
+.box_link:hover{
+ background: #3a3a3a;
+}
+
+/*
+ buttonset
+*/
+
+.buttonset, .buttonset li {
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.buttonset {
+ margin: 15px 0;
+}
+
+.button, .buttonset li a {
+ text-align: center;
+ display: inline-block;
+ padding: 0.5em 0.7em;
+ background: #333;
+ border: 1px solid #444;
+ color: #ddd;
+ border-radius: 5px;
+ text-decoration: none;
+}
+
+.button:hover, .buttonset li a:hover {
+ background: #444;
+ border: 1px solid #555;
+ text-decoration: none;
+}
+
+.btn_green {
+ background: #363 !important;
+ border: 1px solid #473;
+}
+
+.btn_green:hover {
+ background: #474 !important;
+}
+
+.linedbuttonset a {
+ border: 1px solid #eee;
+ border-radius: 3px;
+ padding: 4px 10px;
+ margin: 0;
+ display: block;
+}
+
+.linedbuttonset {
+ display: block;
+ margin: 0;
+}
+
+.linedbuttonset li {
+ display: inline-block;
+ margin: 10px 10px 0 0;
+}
+
+/* Alerts */
+
+#alerts {
+ list-style: none;
+ position: fixed;
+ bottom: 15px;
+ left: 0;
+ right: 0;
+}
+
+#alerts .alert {
+ margin: 5px 0;
+ vertical-align: middle;
+}
+
+#alerts .close {
+ float: right;
+ color: white;
+}
+
+#alerts .close:hover {
+ color: #fff;
+}
+
+.alert-error {
+ background: #933;
+ border: 1px solid #c44;
+}
+
+.alert-warning {
+ background: #963;
+ border: 1px solid #c96;
+}
+
+.alert-success {
+ background: #161;
+ border: 1px solid #393;
+}
diff --git a/app/scss/main.scss b/app/scss/main.scss
new file mode 100644
index 0000000..160d180
--- /dev/null
+++ b/app/scss/main.scss
@@ -0,0 +1,4 @@
+@import "page.scss";
+@import "components.scss";
+@import "packages.scss";
+@import "packagegrid.scss";
diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
new file mode 100644
index 0000000..dfdc009
--- /dev/null
+++ b/app/scss/packagegrid.scss
@@ -0,0 +1,35 @@
+.packagegrid {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.packagegrid li {
+ list-style: none;
+ display: inline-block;
+ padding: 0;
+ margin: 8px;
+}
+
+.packagegrid a {
+ display: block;
+ width: 246px;
+ height: 164px;
+ border-radius: 7px;
+ position: relative;
+ overflow: hidden;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+
+.packagegrid a span {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 5px;
+ background: rgba(255, 255, 255, 0.3);
+ color: black;
+}
diff --git a/app/scss/packages.scss b/app/scss/packages.scss
new file mode 100644
index 0000000..a786d79
--- /dev/null
+++ b/app/scss/packages.scss
@@ -0,0 +1,75 @@
+
+.screenshot_list, .screenshot_list li, .screenshot_list li a {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.screenshot_list li {
+ display: inline-block;
+ margin: 5px;
+ padding: 0;
+}
+
+.screenshot_list li a {
+ display: block;
+}
+
+.screenshot_list img {
+ width: 164px;
+ height: 164px;
+ object-fit: cover;
+}
+
+.box_img {
+ position: relative;
+ background-position: center;
+ background-size: cover;
+ background-image: url("screenshot.png");
+ min-height: 220px;
+ border-radius: 5px;
+ padding: 0;
+}
+
+.box_img > h2 {
+ display: inline-block;
+ position: absolute;
+ bottom: 15px;
+ left: 15px;
+}
+
+.sidebar_container {
+ display: block;
+ position: relative;
+ padding: 0;
+ margin: 0;
+}
+
+.sidebar_container .right, .sidebar_container .left{
+ position: absolute;
+ display: block;
+ top: 10px;
+ margin-top: 0;
+}
+
+.sidebar_container .right {
+ right: 0;
+ width: 280px;
+}
+
+.sidebar_container .left {
+ right: 295px;
+ left: 0;
+}
+
+.sidebar_container .right > *:first-child, .sidebar_container .left > *:first-child {
+ margin-top: 0;
+}
+
+.package-short-large {
+ font-size: 120%;
+}
+
+.pkg_wiz_1, .pkg_wiz_2 {
+ display: none;
+}
diff --git a/app/scss/page.scss b/app/scss/page.scss
new file mode 100644
index 0000000..9bb71d2
--- /dev/null
+++ b/app/scss/page.scss
@@ -0,0 +1,81 @@
+html, body {
+ font-family: "Arial", sans-serif;
+ background: #222;
+ color: #ddd;
+ padding: 0;
+ margin: 0;
+}
+
+nav, main, #alerts {
+ width: 90%;
+ max-width: 960px;
+ margin: auto;
+ padding: 0;
+ display: block;
+}
+
+nav {
+ margin: 0 auto 0 auto;
+ list-style: none;
+ background: #333;
+}
+
+nav .navbar-nav {
+ float: left;
+}
+
+nav .navbar-right {
+ float: right;
+}
+
+nav ul {
+ margin: 0 auto 0 auto;
+ padding: 0;
+ list-style: none;
+}
+
+nav li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-block;
+}
+
+nav li a {
+ color: #ddd;
+ margin: 0;
+ padding: 1em 1em;
+ display: block;
+ border-left: 1px solid #444;
+}
+
+nav a:hover {
+ color: #eee;
+ background: #444;
+ text-decoration: none;
+}
+
+header {
+ padding: 20px;
+ background: #113;
+}
+
+
+/* Footer */
+
+footer {
+ width: 80%;
+ max-width: 860px;
+ margin: auto;
+ padding: 50px 0 20px 0;
+}
+
+footer a {
+ color: #666;
+}
+
+.asideright {
+ float: right;
+ margin: 0 0 0 15px;
+ max-width: 300px;
+}
diff --git a/app/static/style.css b/app/static/style.css
deleted file mode 100644
index a85b3c3..0000000
--- a/app/static/style.css
+++ /dev/null
@@ -1,303 +0,0 @@
-html, body {
- font-family: "Arial", sans-serif;
- background: #222;
- color: #ddd;
- padding: 0;
- margin: 0;
-}
-
-h1 {
- text-align: center;
-}
-
-.screenshot_list, .screenshot_list li, .screenshot_list li a {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.screenshot_list li {
- display: inline-block;
- margin: 5px;
- padding: 0;
-}
-
-.screenshot_list li a {
- display: block;
-}
-
-.screenshot_list img {
- width: 164px;
- height: 164px;
- object-fit: cover;
-}
-
-
-h2, h3 {
- margin: 5px 0;
-}
-
-a {
- color: #0be;
- font-weight: bold;
- text-decoration: none;
-}
-
-a:hover {
- color: #0df;
- text-decoration: underline;
-}
-
-/* Containers */
-
-.box {
- border-radius: 5px;
- margin: 15px 0;
-}
-
-.box_grey {
- padding: 10px;
- background: #333;
- border: 1px solid #444;
-}
-
-.ul_boxes {
- display: block;
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.ul_boxes > li {
- padding: 0;
- list-style: none;
-}
-
-.box_link {
- display: block;
- color: #ddd;
- text-decoration: none;
-}
-
-.box_link:hover{
- background: #3a3a3a;
-}
-
-/*
- buttonset
-*/
-
-.buttonset, .buttonset li {
- display: block;
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-.buttonset {
- margin: 15px 0;
-}
-
-.buttonset li a {
- text-align: center;
- color: #ddd;
- text-decoration: none;
-}
-
-.buttonset li a:hover {
- background: #444;
-}
-
-.btn_green {
- background: #363 !important;
- border: 1px solid #473;
-}
-
-.btn_green:hover {
- background: #474 !important;
-}
-
-.linedbuttonset a {
- border: 1px solid #eee;
- border-radius: 3px;
- padding: 4px 10px;
- margin: 0;
- display: block;
-}
-
-.linedbuttonset {
- display: block;
- margin: 0;
-}
-
-.linedbuttonset li {
- display: inline-block;
- margin: 10px 10px 0 0;
-}
-
-/* Alerts */
-
-#alerts {
- list-style: none;
- position: fixed;
- bottom: 15px;
- left: 0;
- right: 0;
-}
-
-#alerts .alert {
- margin: 5px 0;
- vertical-align: middle;
-}
-
-#alerts .close {
- float: right;
- color: white;
-}
-
-#alerts .close:hover {
- color: #fff;
-}
-
-.alert-error {
- background: #933;
- border: 1px solid #c44;
-}
-
-.alert-warning {
- background: #963;
- border: 1px solid #c96;
-}
-
-.alert-success {
- background: #161;
- border: 1px solid #393;
-}
-
-/* Nav */
-
-nav, main, #alerts {
- width: 90%;
- max-width: 960px;
- margin: auto;
- padding: 0;
-}
-
-nav {
- margin: 15px auto 5px auto;
- list-style: none;
- background: #333;
- border-radius: 5px;
- border: 1px solid #444;
-}
-
-nav .navbar-nav {
- float: left;
-}
-
-nav .navbar-right {
- float: right;
-}
-
-nav ul {
- margin: 0 auto 0 auto;
- padding: 0;
- list-style: none;
-}
-
-nav li {
- margin: 0;
- padding: 0;
- list-style: none;
- display: inline-block;
-}
-
-nav li a {
- color: #ddd;
- margin: 0;
- padding: 10px 20px;
- display: block;
- border-left: 1px solid #444;
-}
-
-nav a:hover {
- color: #eee;
- background: #444;
- text-decoration: none;
-}
-
-
-/* Footer */
-
-footer {
- width: 80%;
- max-width: 860px;
- margin: auto;
- padding: 50px 0 20px 0;
-}
-
-footer a {
- color: #666;
-}
-
-.asideright {
- float: right;
- margin: 0 0 0 15px;
- max-width: 300px;
-}
-
-
-/* Mod */
-
-.box_img {
- position: relative;
- background-position: center;
- background-size: cover;
- background-image: url("screenshot.png");
- min-height: 220px;
- border-radius: 5px;
- padding: 0;
-}
-
-.box_img > h2 {
- display: inline-block;
- position: absolute;
- bottom: 15px;
- left: 15px;
-}
-
-.sidebar_container {
- display: block;
- position: relative;
- padding: 0;
- margin: 0;
-}
-
-.sidebar_container .right, .sidebar_container .left{
- position: absolute;
- display: block;
- top: 10px;
- margin-top: 0;
-}
-
-.sidebar_container .right {
- right: 0;
- width: 280px;
-}
-
-.sidebar_container .left {
- right: 295px;
- left: 0;
-}
-
-.sidebar_container .right > *:first-child, .sidebar_container .left > *:first-child {
- margin-top: 0;
-}
-
-.package-short-large {
- font-size: 120%;
-}
-
-.pkg_wiz_1, .pkg_wiz_2 {
- display: none;
-}
diff --git a/app/templates/base.html b/app/templates/base.html
index f4baef4..07131de 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -6,7 +6,7 @@
{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}
-
+
diff --git a/app/templates/index.html b/app/templates/index.html
index 42b02df..4dd1dd8 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -5,37 +5,34 @@ Dashboard
{% endblock %}
{% block content %}
+
+
-
-
-
Top Mods
-
-
-
Statistics
-
- - Total mods: 543
- - Missing mods: 1020
- - Downloads/day: 200
-
-
-
+
+ {% endfor %}
+
{% endblock %}
diff --git a/app/views/__init__.py b/app/views/__init__.py
index 3c8c009..17b9f00 100644
--- a/app/views/__init__.py
+++ b/app/views/__init__.py
@@ -27,6 +27,7 @@ def send_upload(path):
@app.route("/")
@menu.register_menu(app, ".", "Home")
def home_page():
- return render_template("index.html")
+ packages = Package.query.filter_by(approved=True).all()
+ return render_template("index.html", packages=packages)
-from . import users, githublogin, packages
+from . import users, githublogin, packages, sass
diff --git a/app/views/sass.py b/app/views/sass.py
new file mode 100644
index 0000000..2ae3896
--- /dev/null
+++ b/app/views/sass.py
@@ -0,0 +1,67 @@
+# -*- coding: utf-8 -*-
+"""
+A small Flask extension that makes it easy to use Sass (SCSS) with your
+Flask application.
+
+Code unabashedly adapted from https://github.com/weapp/flask-coffee2js
+
+:copyright: (c) 2012 by Ivan Miric.
+:license: MIT, see LICENSE for more details.
+"""
+
+import os
+import os.path
+import codecs
+from flask import *
+from scss import Scss
+
+from app import app
+
+def _convert(dir, src, dst):
+ original_wd = os.getcwd()
+ os.chdir(dir)
+
+ css = Scss()
+ source = codecs.open(src, 'r', encoding='utf-8').read()
+ output = css.compile(source)
+
+ os.chdir(original_wd)
+
+ outfile = codecs.open(dst, 'w', encoding='utf-8')
+ outfile.write(output)
+ outfile.close()
+
+def _getDirPath(originalPath, create=False):
+ path = originalPath
+
+ if not os.path.isdir(path):
+ path = os.path.join(app.root_path, path)
+
+ if not os.path.isdir(path):
+ if create:
+ os.mkdir(path)
+ else:
+ raise IOError("Unable to find " + originalPath)
+
+ return path
+
+def sass(app, inputDir='scss', outputPath='static', force=False, cacheDir=None):
+ static_url_path = app.static_url_path
+ inputDir = _getDirPath(inputDir)
+ cacheDir = _getDirPath(cacheDir or outputPath, True)
+
+ def _sass(filepath):
+ sassfile = "%s/%s.scss" % (inputDir, filepath)
+ cacheFile = "%s/%s.css" % (cacheDir, filepath)
+
+ # Source file exists, and needs regenerating
+ if os.path.isfile(sassfile) and (force or not os.path.isfile(cacheFile) or \
+ os.path.getmtime(sassfile) > os.path.getmtime(cacheFile)):
+ _convert(inputDir, sassfile, cacheFile)
+ app.logger.debug('Compiled %s into %s' % (sassfile, cacheFile))
+
+ return send_from_directory(cacheDir, filepath + ".css")
+
+ app.add_url_rule("/%s/.css" % (outputPath), 'sass', _sass)
+
+sass(app)
diff --git a/requirements.txt b/requirements.txt
index e24ae98..9bbd7b2 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -5,3 +5,4 @@ Flask-User==0.6.19
Flask-Menu>=0.7.0
Flask-Markdown>=0.3
GitHub-Flask>=3.2.0
+pyScss==1.3.4