diff options
-rw-r--r-- | Makefile | 26 | ||||
-rw-r--r-- | README.md | 23 | ||||
-rw-r--r-- | talermerchantdemos/blog/templates/base.html | 3 | ||||
-rw-r--r-- | talermerchantdemos/static/navbar.css | 25 |
4 files changed, 68 insertions, 9 deletions
@@ -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 @@ -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 |