From 3b46ba1c8e72c0ad4ec67b8693f1298f7740140f Mon Sep 17 00:00:00 2001 From: Torsten Grothoff Date: Sun, 6 Sep 2020 13:19:00 +0200 Subject: Re-Designed blog --- talermerchantdemos/.vscode/launch.json | 15 +++++++++ talermerchantdemos/blog/templates/base.html | 50 +++++++++++++++++++++------- talermerchantdemos/blog/templates/index.html | 2 +- talermerchantdemos/static/__init__.py | 1 + talermerchantdemos/static/demo.css | 27 +++++++++++---- talermerchantdemos/static/navbar.css | 50 ++++++++++++++++++++++++++++ 6 files changed, 125 insertions(+), 20 deletions(-) create mode 100644 talermerchantdemos/.vscode/launch.json create mode 100644 talermerchantdemos/static/__init__.py create mode 100644 talermerchantdemos/static/navbar.css (limited to 'talermerchantdemos') diff --git a/talermerchantdemos/.vscode/launch.json b/talermerchantdemos/.vscode/launch.json new file mode 100644 index 0000000..7a9dfa0 --- /dev/null +++ b/talermerchantdemos/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/talermerchantdemos/blog/templates/base.html b/talermerchantdemos/blog/templates/base.html index 3d7d0f0..493e77d 100644 --- a/talermerchantdemos/blog/templates/base.html +++ b/talermerchantdemos/blog/templates/base.html @@ -23,11 +23,20 @@ Taler Essay Shop Demo + + {% block styles %}{% endblock %} {% block scripts %}{% endblock %} -
+

Taler Demo

Shop

On this page you can buy articles using an imaginary currency (for now). @@ -56,17 +77,16 @@ published by the FSF and available gratis at gnu.org.

- -

You can learn more about Taler on our main website.

-
-

Copyright © 2014—2018 Inria

+
+
+
@@ -74,6 +94,12 @@ This is the main content of the page. {% endblock %}
+
+

You can learn more about Taler on our main website.

+
+

Copyright © 2014—2020 Taler Systems SA

+
+ diff --git a/talermerchantdemos/blog/templates/index.html b/talermerchantdemos/blog/templates/index.html index 0159779..89ac3b8 100644 --- a/talermerchantdemos/blog/templates/index.html +++ b/talermerchantdemos/blog/templates/index.html @@ -30,7 +30,7 @@
{% for article in articles %}
-

{{article.title}}

+

{{article.title}}

{{ article.teaser|safe }} (Pay to read more...)

{% else %} diff --git a/talermerchantdemos/static/__init__.py b/talermerchantdemos/static/__init__.py new file mode 100644 index 0000000..6b61bdc --- /dev/null +++ b/talermerchantdemos/static/__init__.py @@ -0,0 +1 @@ +app.static_folder = 'static' diff --git a/talermerchantdemos/static/demo.css b/talermerchantdemos/static/demo.css index b2688ad..7733515 100644 --- a/talermerchantdemos/static/demo.css +++ b/talermerchantdemos/static/demo.css @@ -44,26 +44,39 @@ } body { - overflow-y: scroll; + overflow-x: hidden; + overflow-y: auto; +} + +body * { + /* margin-left: 0.5vw; */ + left: 0.1vw; } @media (min-width: 500px) { .content { - margin-left: 25%; + /* margin-left: 0vw; */ padding-left: 2em; margin-right: 1em; - overflow-x: auto; + overflow-x: hidden; + overflow-y: auto; } .demobar { - height: 100%; + /* height: 100%; */ + /* width: 25%; */ + /* NOTE: Please use "vh"/"vw" instead of "%" when possible, in the future. */ + height: min-content; + width: 100vw; margin: 0; top: 0; left: 0; background-color: #033; color: white; - position: fixed; - width: 25%; + position: relative; padding-right: 1em; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; + text-align: center; } } + diff --git a/talermerchantdemos/static/navbar.css b/talermerchantdemos/static/navbar.css new file mode 100644 index 0000000..21d73a7 --- /dev/null +++ b/talermerchantdemos/static/navbar.css @@ -0,0 +1,50 @@ +/** + * @author Torsten Grothoff + * @name navbar.css + * @description Makes the navigation bar have styles + */ + + +.navcontainer{ + overflow:hidden; + background:#144; + margin-bottom:50px; + width:100%; + color:white; + position:-webkit-sticky; + position:sticky; + top:0px; + width: 100vw; + backdrop-filter: blur(10px); + opacity: 1; + z-index: 10000; +} +nav { + left: 1vw; + position: relative; + background:#144; + z-index: 10000; +} + +nav a { + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + background: #00000000; +} + +nav a:hover { + background: #00000022; +} + +nav a.active { + background-color: #4CAF50; +} + +nav a.active:hover { + background: #377c39; +} \ No newline at end of file -- cgit v1.2.3 From 0f5e458d234a32beee31caa9df3501bfe809005b Mon Sep 17 00:00:00 2001 From: Torsten Grothoff Date: Sun, 6 Sep 2020 13:20:47 +0200 Subject: add license --- talermerchantdemos/static/navbar.css | 1 + 1 file changed, 1 insertion(+) (limited to 'talermerchantdemos') diff --git a/talermerchantdemos/static/navbar.css b/talermerchantdemos/static/navbar.css index 21d73a7..91ee1df 100644 --- a/talermerchantdemos/static/navbar.css +++ b/talermerchantdemos/static/navbar.css @@ -2,6 +2,7 @@ * @author Torsten Grothoff * @name navbar.css * @description Makes the navigation bar have styles + * @license LGPL-3.0-or-later */ -- cgit v1.2.3 From 05a99e03d7493c103360efb08344eb5aa32979fb Mon Sep 17 00:00:00 2001 From: Torsten Grothoff Date: Sun, 6 Sep 2020 16:47:30 +0200 Subject: Added readme stuff, ad messed with css, and other stuff, and more stuff. --- Makefile | 26 +++++++++++++++++++++++++- README.md | 23 +++++++++++++++++++++-- talermerchantdemos/blog/templates/base.html | 3 ++- talermerchantdemos/static/navbar.css | 25 ++++++++++++++++++++----- 4 files changed, 68 insertions(+), 9 deletions(-) (limited to 'talermerchantdemos') diff --git a/Makefile b/Makefile index d40e2f4..eefac0d 100644 --- a/Makefile +++ b/Makefile @@ -3,7 +3,7 @@ install_global=false .PHONY: all all: - @echo "This is a python project, no compilation required" + @echo "This is a python project, no compilation required\nSCSS/SASS Initial Setup: make sass-setup\nSCSS/SASS Build (for static files): make sass-build" .PHONY: install @@ -38,3 +38,27 @@ dist: .PHONY: pretty pretty: yapf -r -i talerblog/ + +# SASS/SCSS + +sass-setup: + @echo "This is the initial sass-installation/setup script." + @echo "This setup must run as root, on a machine that has NPM installed!" + @echo "If your password is requested (for escalation), please enter it." + sudo npm install -g sass + +scss-setup: sass-setup + +sass-build: + @echo "Warning: If Sass/Scss is not installed, please run \`make sass-setup\` first!" + @echo "This script will only convert files inside /static" + sass talermerchantdemos/static:talermerchantdemos/static + +scss-build: sass-build + +sass-autobuild: + @echo "Warning: If Sass/Scss is not installed, please run \`make sass-setup\` first!" + @echo "This script will automatically build sass/scss files in the static directory!" + sass --watch talermerchantdemos/static:talermerchantdemos/static + +scss-autobuild: sass-autobuild diff --git a/README.md b/README.md index 967bafa..0dde54e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # Taler Merchant Demos Setup *Warning: This page is not completed yet. Follow the instructions at your own risk* ## Installing the dependencies +*Step 0 (Optional - Reccomended): Update Apt Repositories* +> ```$ sudo apt update``` + +
Step 1: `cd` into the directory:
> ```$ cd taler-merchant-demos``` @@ -27,14 +31,24 @@ Step 5: Install UWSGI

Step 6: Install LXML -*NOTE: DO NOT INSTALL USING PIP2 (on my system, that is what the pip command uses) - INSTALL IT USING PIP3* +*NOTE: DO NOT INSTALL USING PIP2 (on my system, that is what the pip command uses) - INSTALL IT USING PIP3*
> ```$ pip3 install lxml``` + +
+ +Step 7: Install NPM
+ +> ```$ sudo apt install npm; sudo npm install -g npm node``` +
+Step 8: Install scss
+> ```$ make sass-install``` + ## Quick Install for the dependencies Here's one command to automatically install all dependencies at once: -> ```$ sudo apt install python3.8 python3-pip -y; pip3 install lxml uwsgi; ./configure --destination=local``` +> ```$ sudo apt install python3.8 python3-pip -y; pip3 install lxml uwsgi; ./configure --destination=local;sudo apt install npm; sudo npm install -g npm node``` ## Configuring the demo *This is just how I did it, and not the main method of doing it* @@ -70,6 +84,11 @@ Step 3: Configure the config: To apply changes, use > ```$ make install``` +
+ +To apply ***SCSS*** changes, use +> ```$ make scss-build``` + ## Running the program To start the server, use the following command:
> ```$ taler-merchant-demos --serve-http blog``` diff --git a/talermerchantdemos/blog/templates/base.html b/talermerchantdemos/blog/templates/base.html index 493e77d..2a094dc 100644 --- a/talermerchantdemos/blog/templates/base.html +++ b/talermerchantdemos/blog/templates/base.html @@ -86,8 +86,9 @@ Donations Tipping/Survey Back-office + Language -
+
{% block main %} diff --git a/talermerchantdemos/static/navbar.css b/talermerchantdemos/static/navbar.css index 91ee1df..d5496c9 100644 --- a/talermerchantdemos/static/navbar.css +++ b/talermerchantdemos/static/navbar.css @@ -27,25 +27,40 @@ nav { z-index: 10000; } -nav a { +nav * { border: none; color: white; - padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; background: #00000000; + height: inherit; +} +nav *{ + padding: 15px 32px; } -nav a:hover { +nav *:hover { background: #00000022; } -nav a.active { +nav *.active { background-color: #4CAF50; } -nav a.active:hover { +nav *.active:hover { background: #377c39; +} + +nav * { + cursor: pointer; +} +nav a.right { + float:right; + margin-right: 5vw; +} + +input[type=checkbox]:checked + label { + color: red; } \ No newline at end of file -- cgit v1.2.3 From 7c08b690cc5d3bca79172b8f891e2000179cd703 Mon Sep 17 00:00:00 2001 From: Torsten Grothoff Date: Sun, 6 Sep 2020 18:36:33 +0200 Subject: language switcher now works --- talermerchantdemos/blog/templates/base.html | 17 ++++- talermerchantdemos/static/navbar.css | 97 ++++++++++++++------------ talermerchantdemos/static/navbar.css.map | 1 + talermerchantdemos/static/navbar.scss | 103 ++++++++++++++++++++++++++++ 4 files changed, 172 insertions(+), 46 deletions(-) create mode 100644 talermerchantdemos/static/navbar.css.map create mode 100644 talermerchantdemos/static/navbar.scss (limited to 'talermerchantdemos') diff --git a/talermerchantdemos/blog/templates/base.html b/talermerchantdemos/blog/templates/base.html index 2a094dc..87b1738 100644 --- a/talermerchantdemos/blog/templates/base.html +++ b/talermerchantdemos/blog/templates/base.html @@ -86,9 +86,22 @@ Donations Tipping/Survey Back-office - Language + + Language + +
+
+
+ EN
+ DE
+ FR
+ IT
+ JP +
+ - + +
{% block main %} diff --git a/talermerchantdemos/static/navbar.css b/talermerchantdemos/static/navbar.css index d5496c9..aabacc3 100644 --- a/talermerchantdemos/static/navbar.css +++ b/talermerchantdemos/static/navbar.css @@ -4,63 +4,72 @@ * @description Makes the navigation bar have styles * @license LGPL-3.0-or-later */ - - -.navcontainer{ - overflow:hidden; - background:#144; - margin-bottom:50px; - width:100%; - color:white; - position:-webkit-sticky; - position:sticky; - top:0px; - width: 100vw; - backdrop-filter: blur(10px); - opacity: 1; - z-index: 10000; +.navcontainer { + overflow: hidden; + background: #144; + margin-bottom: 50px; + width: 100%; + color: white; + position: -webkit-sticky; + position: sticky; + top: 0px; + width: 100vw; + backdrop-filter: blur(10px); + opacity: 1; + z-index: 10000; } + nav { - left: 1vw; - position: relative; - background:#144; - z-index: 10000; + left: 1vw; + position: relative; + background: #144; + z-index: 10000; +} + +nav a, nav span, .navbtn { + border: none; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + background: #00000000; + height: inherit; } -nav * { - border: none; - color: white; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - background: #00000000; - height: inherit; +nav a, nav span, .navbtn { + padding: 15px 32px; } -nav *{ - padding: 15px 32px; + +nav a:hover, nav span:hover, .navbtn:hover { + background: #00000022; } -nav *:hover { - background: #00000022; +nav a.active, nav span.active, .navbtn.active { + background-color: #4CAF50; } -nav *.active { - background-color: #4CAF50; +nav a.active:hover, nav span.active:hover, .navbtn.active:hover { + background: #377c39; } -nav *.active:hover { - background: #377c39; +nav a, nav span, .navbtn { + cursor: pointer; } -nav * { - cursor: pointer; +nav .right { + float: right; + margin-right: 5vw; } -nav a.right { - float:right; - margin-right: 5vw; +nav .right div.nav { + display: none; +} +nav .right div.nav:hover { + display: block; +} + +nav .right:hover div.nav { + display: block; } -input[type=checkbox]:checked + label { - color: red; -} \ No newline at end of file +/*# sourceMappingURL=navbar.css.map */ diff --git a/talermerchantdemos/static/navbar.css.map b/talermerchantdemos/static/navbar.css.map new file mode 100644 index 0000000..1725bd6 --- /dev/null +++ b/talermerchantdemos/static/navbar.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EAiCI;EACA;;AAPA;EACI;;AAEJ;EACI;;;AAMJ;EACI","file":"navbar.css"} \ No newline at end of file diff --git a/talermerchantdemos/static/navbar.scss b/talermerchantdemos/static/navbar.scss new file mode 100644 index 0000000..312bf0c --- /dev/null +++ b/talermerchantdemos/static/navbar.scss @@ -0,0 +1,103 @@ +/** + * @author Torsten Grothoff + * @name navbar.css + * @description Makes the navigation bar have styles + * @license LGPL-3.0-or-later + */ + + +.navcontainer{ + overflow:hidden; + background:#144; + margin-bottom:50px; + width:100%; + color:white; + position:-webkit-sticky; + position:sticky; + top:0px; + width: 100vw; + backdrop-filter: blur(10px); + opacity: 1; + z-index: 10000; +} +nav { + left: 1vw; + position: relative; + background:#144; + z-index: 10000; +} + +nav a, nav span,.navbtn { + border: none; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + background: #00000000; + height: inherit; +} +nav a, nav span,.navbtn{ + padding: 15px 32px; +} + +nav a:hover, nav span:hover,.navbtn:hover { + background: #00000022; +} + +nav a.active, nav span.active,.navbtn.active { + background-color: #4CAF50; +} + +nav a.active:hover, nav span.active:hover,.navbtn.active:hover { + background: #377c39; +} + +nav a, nav span,.navbtn { + cursor: pointer; +} +nav .right { + // input[type=checkbox] { + // // // opacity: 0; + // // // position: absolute; + // // position: relative; + // // left:0.5vw; + // // // top:0; + // // width: inherit; + // // height: inherit; + + // // $sx: 1.5; + // // $sy: 1.5; + + // // -ms-transform: scale($sx,$sy); /* IE */ + // // -moz-transform: scale($sx,$sy); /* FF */ + // // -webkit-transform: scale($sx,$sy); /* Safari and Chrome */ + // // -o-transform: scale($sx,$sy); /* Opera */ + // // transform: scale($sx,$sy); + // // float:right; + // opacity: 0; + // } + // input[type=checkbox]:checked + div.nav { + // display: block; + // } + // input[type=checkbox] + div.nav { + // display: none; + // } + div.nav { + display: none; + } + div.nav:hover { + display: block; + } + float:right; + margin-right: 5vw; +} +nav .right:hover { + div.nav { + display:block; + } +} + +// input[type=checkbox]:checked + label { +// color: red; +// } \ No newline at end of file -- cgit v1.2.3 From 3b378dd884ffd9580e95d0b20964eb57b87f7552 Mon Sep 17 00:00:00 2001 From: Torsten Grothoff Date: Sun, 6 Sep 2020 18:39:11 +0200 Subject: removed a br to make it look better --- talermerchantdemos/blog/templates/base.html | 1 - 1 file changed, 1 deletion(-) (limited to 'talermerchantdemos') diff --git a/talermerchantdemos/blog/templates/base.html b/talermerchantdemos/blog/templates/base.html index 87b1738..114b08a 100644 --- a/talermerchantdemos/blog/templates/base.html +++ b/talermerchantdemos/blog/templates/base.html @@ -90,7 +90,6 @@ Language
-

EN
DE
-- cgit v1.2.3