From 05a99e03d7493c103360efb08344eb5aa32979fb Mon Sep 17 00:00:00 2001
From: Torsten Grothoff <tg@wafflepowered.com>
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(-)

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```
+
+<br/>
 Step 1: `cd` into the directory:<br/>
 
 > ```$ cd taler-merchant-demos```
@@ -27,14 +31,24 @@ Step 5: Install UWSGI<br>
 
 <br/>
 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*<br>
 
 > ```$ pip3 install lxml```
+
+<br/>
+
+Step 7: Install NPM<br>
+
+> ```$ sudo apt install npm; sudo npm install -g npm node```
+
 <br>
 
+Step 8: Install scss<br>
+> ```$ 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```
 
+<br>
+
+To apply ***SCSS*** changes, use
+> ```$ make scss-build```
+
 ## Running the program
 To start the server, use the following command:<br>
 > ```$ 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 @@
       <a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') }}">Donations</a>
       <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') }}">Tipping/Survey</a>
       <a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">Back-office</a>
+      <a class="right">Language</a>
     </nav>
-  </div>
+  </div> <input type="checkbox" class="r"><label>test</label>
 
   <section id="main" class="content">
     {% 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