On Wed, Jul 12, 2017 at 9:27 PM, George Gelashvili <ggelashv...@pivotal.io>
wrote:
> Hi Dave,
>
>
>> Hmm, seems like the dependencies are broken. Adding them throws me down
>> what seems like a rabbit hole of manual installation, starting with:
>>
>> (pgaweb) piranha:pgaweb dpage$ pip install -r requirements.txt
>> Requirement already satisfied: Django==1.8.18 in
>> /Users/dpage/.virtualenvs/pgaweb/lib/python2.7/site-packages (from -r
>> requirements.txt (line 1))
>> Requirement already satisfied: psycopg2==2.7.1 in
>> /Users/dpage/.virtualenvs/pgaweb/lib/python2.7/site-packages (from -r
>> requirements.txt (line 2))
>> Collecting libsass==0.13.2 (from -r requirements.txt (line 3))
>> Using cached libsass-0.13.2.tar.gz
>> Could not import setuptools which is required to install from a source
>> distribution.
>> Traceback (most recent call last):
>> File
>> "/Users/dpage/.virtualenvs/pgaweb/lib/python2.7/site-packages/pip/req/req_install.py",
>> line 387, in setup_py
>> import setuptools # noqa
>> File
>> "/Users/dpage/.virtualenvs/pgaweb/lib/python2.7/site-packages/setuptools/__init__.py",
>> line 10, in <module>
>> from six.moves import filter, map
>> ImportError: No module named six.moves
>>
>> Perhaps the entire dependency tree should be added to requirements.txt?
>>
>>
>
> What version of pip runs in your pyenv? We're able to pip install
> requirements inside a new 2.7.10 virtualenv, that gets created with pip
> 9.0.1 by default.
>
Apologies - my virtual env was messed up.
>
>
>> - Scripts to yarn to compile the SCSS and run the application
>>>
>> - Add startapp.sh script to start the application
>>>
>>
>> The application runs under uWSGI - it's not going to be started via a
>> script. It's auto-updated periodically from git, and uWSGI will restart
>> when necessary so if any pre-processing of files is required, that needs to
>> be done at startup automatically.
>>
>
> Okay, so it sounds like shelling out to yarn in wsgi would resolve this.
>
I think your suggestion below would be cleaner.
> Otherwise, what does the auto-update process look like? perhaps
> compilation steps belong there rather than in app startup.
>
It's really just a GIT pull. uWSGI then detects the change and restarts
that app. We could certainly have it do "git pull && yarn install && yarn
run scss" or similar.
Now that said, the scss doesn't actually seem to build for me. I had to
make 2 changes to get anywhere:
1) Change the tag in base.html to:
<link href="{% sass_src 'css/pgaweb.scss' %}" rel="stylesheet"
type="text/css" />
2) Remove the STATIC_ROOT directive from settings.py (so it didn't try to
compile to /static) and replace with COMPRESS_ROOT='static/' and
SASS_PROCESSOR_ROOT='static/'.
That left me with a running site, that seems to behave as expected, at
least when run standalone.
Patch attached - comments?
--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake
EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
diff --git a/.gitignore b/.gitignore
index a7d59b0..b714747 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
.DS_Store
.idea
node_modules/
-pgaweb/settings_local.py
\ No newline at end of file
+pgaweb/settings_local.py
+*.pyc
+static/css/pgaweb.css
+static/css/pgaweb.css.map
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0d9f2e3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,69 @@
+pgAdmin Website
+
+# Installation instructions
+
+## Install Python dependencies
+Run the command:
+
+```bash
+pip install -r requirements.txt
+```
+
+## Create local settings file
+Create a the file pgaweb/settings_local.py from pgaweb/settings.py changing
the needed options to run locally.
+For connection complaints inquiring about postgres "running locally and
accepting connections on Unix domain socket...",
+you'll need to change the `HOST` from the postgres data directory to
`localhost`.
+
+
+## Database setup
+
+### Create a new database
+
+Create a new database using the command
+
+```bash
+createdb pgaweb
+```
+
+### Migrate database
+
+```bash
+./manage.py migrate
+```
+
+### Populate the table
+
+You will at least need to:
+
+```bash
+./manage.py loaddata ./versions/fixtures/versions.json
+```
+
+If you want to see the other content in the site running locally,
+you will need to repeat this for the other fixtures:
+
+```bash
+./manage.py loaddata ./download/fixtures/packages.json
+./manage.py loaddata ./download/fixtures/distributions.json
+./manage.py loaddata ./download/fixtures/versions.json
+./manage.py loaddata ./download/fixtures/downloads.json
+./manage.py loaddata ./faq/fixtures/categories.json
+./manage.py loaddata ./faq/fixtures/faqs.json
+./manage.py loaddata ./news/fixtures/news.json
+```
+
+## Install frontend requirements
+
+```bash
+pushd static
+yarn install
+popd
+```
+
+# Start the application
+
+```bash
+cd static
+
+yarn start
+```
diff --git a/pgaweb/settings.py b/pgaweb/settings.py
index 2ad99c9..f5a25ba 100644
--- a/pgaweb/settings.py
+++ b/pgaweb/settings.py
@@ -46,6 +46,7 @@ INSTALLED_APPS = (
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
+ 'sass_processor',
'download',
'faq',
'news',
@@ -123,5 +124,9 @@ USE_TZ = True
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
+# Location for SCSS output
+SASS_PROCESSOR_ROOT = 'static/'
+COMPRESS_ROOT = 'static/'
+
# Load local settings overrides
from settings_local import *
diff --git a/pgaweb/templates/pgaweb/base.html
b/pgaweb/templates/pgaweb/base.html
index f5ea6a6..6af244d 100755
--- a/pgaweb/templates/pgaweb/base.html
+++ b/pgaweb/templates/pgaweb/base.html
@@ -1,4 +1,6 @@
{% load staticfiles %}
+{% load sass_tags %}
+
<!DOCTYPE html>
<html lang="en">
<head>
@@ -15,7 +17,7 @@
<link href="{% static 'node_modules/bootstrap/dist/css/bootstrap.min.css'
%}" rel="stylesheet">
<link href="{% static 'node_modules/font-mfizz/dist/font-mfizz.css' %}"
rel="stylesheet" >
<link href="{% static 'node_modules/font-awesome/css/font-awesome.min.css'
%}" rel="stylesheet">
- <link href="{% static 'css/pgaweb.css' %}?2017060701" rel="stylesheet">
+ <link href="{% sass_src 'css/pgaweb.scss' %}" rel="stylesheet"
type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!--[if lt IE 9]>
diff --git a/requirements.txt b/requirements.txt
index 6e83d47..92b5f29 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1,5 @@
Django==1.8.18
psycopg2==2.7.1
+libsass==0.13.2
+django-compressor==2.1.1
+django-sass-processor==0.5.4
\ No newline at end of file
diff --git a/startapp.sh b/startapp.sh
new file mode 100755
index 0000000..bc2b689
--- /dev/null
+++ b/startapp.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+pushd static
+yarn start
\ No newline at end of file
diff --git a/static/css/pgaweb.css b/static/css/pgaweb.css
deleted file mode 100644
index c501c5b..0000000
--- a/static/css/pgaweb.css
+++ /dev/null
@@ -1,273 +0,0 @@
-/* Main body */
-body {
- padding-top: 50px;
- padding-bottom: 30px;
-}
-
-/* Navbar and menus */
-.dropdown-header {
- font-weight: bold;
- font-style: italic;
- margin-top: 8px;
- margin-left: -10px;
-}
-
-.navbar-brand > i {
- vertical-align: middle;
- font-size: 25px;
- color: #FFFFFF;
-}
-
-.navbar-inverse .navbar-brand {
- color: #2C76B4;
-}
-
-.navbar-inverse .navbar-brand:hover {
- color: #2C76B4;
-}
-
-.navbar-inverse .navbar-brand:focus {
- color: #2C76B4;
-}
-
-/* Home page header image with expansion */
-.header {
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- color: white;
-}
-
-.header h1, .header h2 {
- color: white;
- background-color: transparent;
- text-align: center;
-}
-
-@media (max-width: 767px) {
- h1, h2, h3, h4 { text-align: center; }
-}
-
-@media (min-width: 0px) {
- .header { background: #005363 url(../img/header-s.jpg) top center;
background-size: cover; }
- .header h1 { font-size: 55px; }
- .header h2 { font-size: 30px; }
- .header p { font-size: 15px; }
-
- #illustration { margin-bottom: -130px; }
- .expand img { margin-bottom: 120px !important; margin-top: -100px
!important; }
-}
-@media (min-width: 482px) {
- .header { background: #005363 url(../img/header-m.jpg) top center;
background-size: cover; }
- .header h1 { font-size: 55px; }
- .header h2 { font-size: 30px; }
- .header p { font-size: 15px; }
-
- #illustration { margin-bottom: -260px; }
- .expand img { margin-bottom: 200px !important; margin-top: -225px
!important; }
-}
-@media (min-width: 768px) {
- .header { background: #005363 url(../img/header-m.jpg) top center;
background-size: cover; }
- .header h1 { font-size: 55px; }
- .header h2 { font-size: 20px; }
- .header p { font-size: 15px; }
- .header .lead { font-size: 22px; }
-
- #illustration { margin-bottom: -310px;}
- .expand img { margin-bottom: 300px !important; margin-top: -260px
!important; }
-}
-
-@media (min-width: 992px) {
- .header { background: #005363 url(../img/header-l.jpg) top center;
background-size: cover; }
- .header h1 { font-size: 55px; margin-top: 50px; }
- .header h2 { font-size: 20px; margin-bottom: 40px;}
- .header p { font-size: 15px; }
-
- #illustration { margin-bottom: -400px; }
- .expand img { margin-bottom: 400px !important; margin-top: -300px
!important; }
-
- .space-before { padding-top: 40px; }
- .space-after { padding-bottom: 40px; }
-}
-
-#illustration {
- z-index: 1;
- text-align: center;
- width: 100%;
-}
-
-#illustration img {
- max-width:100%;
- -webkit-transition: all 0.8s;
- -o-transition: all 0.8s;
- -moz-transition: all 0.8s;
- transition: all 0.8s;
-}
-
-.expand img {
- margin-bottom: 400px;
- margin-top: -300px;
-}
-
-.content {
- position: relative;
- z-index: 999;
- margin-bottom: 40px;
- background: #fff;
-}
-
-/* END: Home page header image with expansion */
-
-/* HTML anchor offset */
-:target:before {
- content:"";
- display:block;
- height:60px; /* fixed header height*/
- margin:-60px 0 0; /* negative fixed header height */
-}
-
-/* Side-bar borders */
-.sidebar {
- margin-top: 20px;
-}
-
-.sidebar-left {
- margin-left: 0px;
-}
-
-.sidebar-right {
- margin-right: 0px;
-}
-
-/* Title styles */
-h1 {
- display: block;
- text-align: left;
- margin-bottom: 20px;
- background-color: #2C76B4;
- border-radius:5px;
- padding: 5px 7px;
- color: #FFFFFF;
- font-size: 30px;
-}
-
-h2 {
- text-align: left;
- margin-bottom: 10px;
- color: #2C76B4;
- font-size: 20px;
-}
-
-h3 {
- text-align: left;
- margin-bottom: 8px;
- font-size: 16px;
-}
-
-h4 {
- text-align: left;
- margin-bottom: 6px;
- font-size: 14px;
-}
-
-/* Quicklinks box */
-.quicklinks {
- text-align: center;
-}
-
-.quicklinks h2 {
- text-align: center;
- margin-top: 0px !important;
- margin-bottom: 20px !important;
-
-}
-
-.quicklinks p {
- font-size: 15px !important;
-}
-
-.quicklinks i {
- font-size: 40px !important;
- margin-top: 20px;
- color: #000000 !important;
-}
-
-/* Downloads box */
-.downloads {
- font-size: 1.2em;
-}
-
-.downloads ul {
- margin-bottom: 0px;
- line-height: 2em;
-}
-
-.downloads i {
- line-height: 2em;
-}
-
-/* Version box */
-.version {
- text-align: center;
- margin-top: 30px;
-}
-
-.version p {
- font-size: 16px !important;
- margin-bottom: 0px;
-}
-
-.version a {
- font-weight: bolder !important;
-}
-
-/* Table-like layout */
-.table {
- display: table;
- width: 100%;
-}
-.table .row {
- display: table-row;
-}
-.table .row .cell {
- display: table-cell;
-}
-
-/* Terminal-like code display */
-.terminal {
- background-color: #000000;
- color: #47d147;
-}
-
-/* Warning bars */
-.warning {
- background-color: #ffffcc;
- border-left: 6px solid #ffeb3b;
- padding: 5px;
-}
-
-/*
- FontAwesome have removed support for mfizz icon support for Apple, Windows,
Linux etc
- So we need to handle it manuaaly and we will redirect mfizz icon to
fontawesome icon
- fa-apple, fa-linux, fa-windows.
-*/
-.icon-apple:before,
-.icon-windows:before,
-.icon-linux:before {
- display: inline-block;
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-.icon-apple:before {
- content: "\f179";
-}
-.icon-windows:before {
- content: "\f17a";
-}
-.icon-linux:before {
- content: "\f17c";
-}
\ No newline at end of file
diff --git a/static/css/pgaweb.scss b/static/css/pgaweb.scss
new file mode 100644
index 0000000..1bba4bd
--- /dev/null
+++ b/static/css/pgaweb.scss
@@ -0,0 +1,269 @@
+/* Main body */
+body {
+ padding-top: 50px;
+ padding-bottom: 30px; }
+
+/* Navbar and menus */
+.dropdown-header {
+ font-weight: bold;
+ font-style: italic;
+ margin-top: 8px;
+ margin-left: -10px; }
+
+.navbar-brand > i {
+ vertical-align: middle;
+ font-size: 25px;
+ color: #FFFFFF; }
+
+.navbar-inverse .navbar-brand {
+ color: #2C76B4; }
+
+.navbar-inverse .navbar-brand:hover {
+ color: #2C76B4; }
+
+.navbar-inverse .navbar-brand:focus {
+ color: #2C76B4; }
+
+/* Home page header image with expansion */
+.header {
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ color: white; }
+
+.header h1, .header h2 {
+ color: white;
+ background-color: transparent;
+ text-align: center; }
+
+@media (max-width: 767px) {
+ h1, h2, h3, h4 {
+ text-align: center; } }
+
+@media (min-width: 0px) {
+ .header {
+ background: #005363 url(../img/header-s.jpg) top center;
+ background-size: cover; }
+ .header h1 {
+ font-size: 55px; }
+ .header h2 {
+ font-size: 30px; }
+ .header p {
+ font-size: 15px; }
+ #illustration {
+ margin-bottom: -130px; }
+ .expand img {
+ margin-bottom: 120px !important;
+ margin-top: -100px !important; } }
+
+@media (min-width: 482px) {
+ .header {
+ background: #005363 url(../img/header-m.jpg) top center;
+ background-size: cover; }
+ .header h1 {
+ font-size: 55px; }
+ .header h2 {
+ font-size: 30px; }
+ .header p {
+ font-size: 15px; }
+ #illustration {
+ margin-bottom: -260px; }
+ .expand img {
+ margin-bottom: 200px !important;
+ margin-top: -225px !important; } }
+
+@media (min-width: 768px) {
+ .header {
+ background: #005363 url(../img/header-m.jpg) top center;
+ background-size: cover; }
+ .header h1 {
+ font-size: 55px; }
+ .header h2 {
+ font-size: 20px; }
+ .header p {
+ font-size: 15px; }
+ .header .lead {
+ font-size: 22px; }
+ #illustration {
+ margin-bottom: -310px; }
+ .expand img {
+ margin-bottom: 300px !important;
+ margin-top: -260px !important; } }
+
+@media (min-width: 992px) {
+ .header {
+ background: #005363 url(../img/header-l.jpg) top center;
+ background-size: cover; }
+ .header h1 {
+ font-size: 55px;
+ margin-top: 50px; }
+ .header h2 {
+ font-size: 20px;
+ margin-bottom: 40px; }
+ .header p {
+ font-size: 15px; }
+ #illustration {
+ margin-bottom: -400px; }
+ .expand img {
+ margin-bottom: 400px !important;
+ margin-top: -300px !important; }
+ .space-before {
+ padding-top: 40px; }
+ .space-after {
+ padding-bottom: 40px; } }
+
+#illustration {
+ z-index: 1;
+ text-align: center;
+ width: 100%; }
+
+#illustration img {
+ max-width: 100%;
+ -webkit-transition: all 0.8s;
+ -o-transition: all 0.8s;
+ -moz-transition: all 0.8s;
+ transition: all 0.8s; }
+
+.expand img {
+ margin-bottom: 400px;
+ margin-top: -300px; }
+
+.content {
+ position: relative;
+ z-index: 999;
+ margin-bottom: 40px;
+ background: #fff; }
+
+/* END: Home page header image with expansion */
+/* HTML anchor offset */
+:target:before {
+ content: "";
+ display: block;
+ height: 60px;
+ /* fixed header height*/
+ margin: -60px 0 0;
+ /* negative fixed header height */ }
+
+/* Side-bar borders */
+.sidebar {
+ margin-top: 20px; }
+
+.sidebar-left {
+ margin-left: 0px; }
+
+.sidebar-right {
+ margin-right: 0px; }
+
+/* Title styles */
+h1 {
+ display: block;
+ text-align: left;
+ margin-bottom: 20px;
+ background-color: #2C76B4;
+ border-radius: 5px;
+ padding: 5px 7px;
+ color: #FFFFFF;
+ font-size: 30px; }
+
+h2 {
+ text-align: left;
+ margin-bottom: 10px;
+ color: #2C76B4;
+ font-size: 20px; }
+
+h3 {
+ text-align: left;
+ margin-bottom: 8px;
+ font-size: 16px; }
+
+h4 {
+ text-align: left;
+ margin-bottom: 6px;
+ font-size: 14px; }
+
+/* Quicklinks box */
+.quicklinks {
+ text-align: center; }
+
+.quicklinks h2 {
+ text-align: center;
+ margin-top: 0px !important;
+ margin-bottom: 20px !important; }
+
+.quicklinks p {
+ font-size: 15px !important; }
+
+.quicklinks i {
+ font-size: 40px !important;
+ margin-top: 20px;
+ color: #000000 !important; }
+
+/* Downloads box */
+.downloads {
+ font-size: 1.2em; }
+
+.downloads ul {
+ margin-bottom: 0px;
+ line-height: 2em; }
+
+.downloads i {
+ line-height: 2em; }
+
+/* Version box */
+.version {
+ text-align: center;
+ margin-top: 30px; }
+
+.version p {
+ font-size: 16px !important;
+ margin-bottom: 0px; }
+
+.version a {
+ font-weight: bolder !important; }
+
+/* Table-like layout */
+.table {
+ display: table;
+ width: 100%; }
+
+.table .row {
+ display: table-row; }
+
+.table .row .cell {
+ display: table-cell; }
+
+/* Terminal-like code display */
+.terminal {
+ background-color: #000000;
+ color: #47d147; }
+
+/* Warning bars */
+.warning {
+ background-color: #ffffcc;
+ border-left: 6px solid #ffeb3b;
+ padding: 5px; }
+
+/*
+ FontAwesome have removed support for mfizz icon support for Apple, Windows,
Linux etc
+ So we need to handle it manuaaly and we will redirect mfizz icon to
fontawesome icon
+ fa-apple, fa-linux, fa-windows.
+*/
+.icon-apple:before,
+.icon-windows:before,
+.icon-linux:before {
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale; }
+
+.icon-apple:before {
+ content: "\f179"; }
+
+.icon-windows:before {
+ content: "\f17a"; }
+
+.icon-linux:before {
+ content: "\f17c"; }
diff --git a/static/package.json b/static/package.json
index a56a75d..2d1dc75 100644
--- a/static/package.json
+++ b/static/package.json
@@ -12,7 +12,9 @@
},
"devDependencies": {},
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "scss": "pushd .. && ./manage.py compilescss && popd",
+ "start": "yarn run scss && pushd .. && ./manage.py runserver"
},
"author": "Dave Page",
"license": "PostgreSQL"
diff --git a/static/yarn.lock b/static/yarn.lock
new file mode 100644
index 0000000..18a2e2a
--- /dev/null
+++ b/static/yarn.lock
@@ -0,0 +1,25 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+bootstrap@^3.3.7:
+ version "3.3.7"
+ resolved
"https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71";
+
+font-awesome@^4.7.0:
+ version "4.7.0"
+ resolved
"https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133";
+
+font-mfizz@^2.3.0:
+ version "2.3.0"
+ resolved
"https://registry.yarnpkg.com/font-mfizz/-/font-mfizz-2.3.0.tgz#f12582680d2f3d1fc111e94a44c0b57b3b5d5c05";
+
+fotorama@^4.6.4:
+ version "4.6.4"
+ resolved
"https://registry.yarnpkg.com/fotorama/-/fotorama-4.6.4.tgz#7376961b6c7eeccb6c76411aceba7795ffe22eae";
+ dependencies:
+ jquery ">=1.8"
+
+jquery@>=1.8, jquery@^3.2.0:
+ version "3.2.1"
+ resolved
"https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787";
