Dark theme. Massive cleanup. Removed MGT data. Broken down base.html

.gitignore

@@ -3,6 +3,9 @@ myenv
 timelnr/config.py
 timelnr/static/images/*
 !timelnr/static/images/IMAGES_GO_HERE
+!timelnr/static/images/header_light.png
+!timelnr/static/images/header_dark.png
+!timelnr/static/images/logo_xs.png
 test.py
 credentials.json
 token.pickle

README.md

@@ -6,22 +6,25 @@ Timelnr is a web app built in Pyton, Flesk and Jinja. It was originally built fo
 
 - A MySQL database where the data will be stored
 - A Docker environment
+- Python
 
 ## Docker deployment
 
-1. Setup a MySQL database, and set the credentials in `timelnr/config.py` as explained in the section below
+1. Create a MySQL database, and set the credentials in `timelnr/config.py` as explained in the section below
 2. Edit `start.sh` to configure your Docker environment (container name, and container port)`
 3. Create a virtual environment (`python -m venv venv`) and activate it (`. venv/bin/activate`)
 4. Run `start.sh` to build the Docker image and let it run on your server
-5. If everything works correctly, your instance of timlnr should be now reacheable, and you can now deactivate the virtual environment
+5. If everything works correctly, your instance of timlnr should be now reacheable, and you can now `deactivate` the virtual environment
 
 ## Config.py
 
-Open `timelnr/config.py` to configure Timelnr:
+Open `timelnr/config-sample.py` to configure Timelnr:
 
 |                           | Description                                                | Example                            |
 | ------------------------- | ---------------------------------------------------------- | ---------------------------------- |
+| SECRET_KEY                | A key (byte format) you should generate yourself           | `b'MY_KEY_HERE'`                   |
 | DB_HOST                   | Your database host address                                 | `http://localhost:3306`            |
+| DB_NAME                   | Your database name                                         | DB_Timelnr                         |
 | DB_USER                   | Your database username                                     | myUser                             |
 | DB_PSW                    | Your database password                                     | myPassword                         |
 | DB_TABLE_PREFIX           | The table prefix to be used. Should end with an underscore | tln\_                              |
@@ -30,13 +33,15 @@ Open `timelnr/config.py` to configure Timelnr:
 | SPREADSHEET_LABELS_RANGE  | Range covering the entry labels                            | Labels!A3:D13                      |
 | SPREADSHEET_LANG_RANGE    | Range covering the supported languages                     | Languages!A1:C15                   |
 
+> **_IMPORTANT:_** Once you are done setting up the config file, rename it to `config.py`.
+
 ## Sheet structure
 
 Here you can find a [Useful Template](https://docs.google.com/spreadsheets/d/1ZRiYTOvSCwL_b4kQMDPXzId8Y3lX_pPHKhufqx5noP0/edit?usp=sharing). Feel free to make a copy and edit to your needs.
 
 > **_IMPORTANT:_** The sheet structure can be changed, as long as the data ranges defined in `timelnr/config.py` are correct.
 
-In the sheet there should be three pages: Entries (the content of the timeline), Languages (list of supported languages) and Labels (management and styling).
+In the sheet there should be three pages: Entries (the content of the timeline), Labels (management and styling), and Languages (list of supported languages).
 
 The Entries page normally has the following structure:
 
@@ -51,7 +56,7 @@ The Entries page normally has the following structure:
 - **ID**: entry ID. Must be unique
 - **YEAR**: the year when a specific timeline entry happened
 - **GAME**: title of the game. Should be used only for the first entry belonging to the game
-- **COLOR**: css class defined in `timelnr/config.py`
+- **COLOR**: name of the CSS class defined in the Labels page
 - **SOURCE**: unused. Refers to the game that is source of that information
 - **IMG**: name of the image relative to the entry. Stored in `timelnr/static/images/`
 - **VID**: unused. link to a YouTube video related to the entry
@@ -82,10 +87,15 @@ The Entries page normally has the following structure:
 3. Run `py imorter.py`. This will recreate the SQL database
 4. Create a virtual environment (`python -m venv venv`) and activate it (`. venv/bin/activate`)
 5. Rebuild docker image with `sh start.sh`
-6. If everything works correctly, your instance of timlnr should now be reacheable, and you can now deactivate the virtual environment
+6. If everything works correctly, your instance of timlnr should now be reacheable, and you can now `deactivate` the virtual environment
 
 ### Change styling and labels
 
 1. Edit the CSS files you want to change
 2. Edit the labels colors from the Labels page of the sheet
 3. Restart the Docker container with `docker restart timelnr`
+
+### Notes on editing and styling
+
+- If HTML files are changed, it's necessary to restart the Docker container (`docker restart timelnr`)
+- If only CSS files are changed, it's sufficient to just refresh the web page, deleting the cache (`Ctrl`+`F5`)

requirements.txt

@@ -1,6 +1,8 @@
-Flask==1.1.2
+Flask==2.0.2
+Flask-Session==0.4
 Flask-SQLAlchemy==2.4.3
-Jinja2==2.11.3
+Jinja2==3.0
+markupsafe==2.0.1
 py==1.10.0
 PyMySQL==0.9.3
 requests==2.23.0

start.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 app="timelnr"
 docker build -t ${app} .
-docker run -d -p 56733:80 \
+docker run -d -p 56730:80 \
   --name=${app} \
   -v $PWD:/app ${app}

timelnr/__init__.py

@@ -6,6 +6,7 @@
 config = Config()
 
 app.config.from_object(config)
+app.secret_key = config.SECRET_KEY
 
 db = create_engine(config.SQLALCHEMY_DATABASE_URI,
                    pool_pre_ping=True, pool_recycle=3600)

timelnr/config-sample.py

@@ -4,6 +4,7 @@
 
 
 class Config:
+    SECRET_KEY = b'GENERATE_SECRET_KEY'
     DB_HOST = 'YOUR_DATABASE_HOST'
     DB_USER = 'YOUR_DATABASE_USER'
     DB_PSW = 'YOUR_DATABASE_PASSWORD'

timelnr/routes.py

@@ -1,4 +1,4 @@
-from flask import redirect, render_template, url_for
+from flask import request, redirect, render_template, session, url_for
 from timelnr import app, config, db
 
 langs = {}
@@ -19,6 +19,17 @@ def root():
     return redirect(url_for('home', curr_lang='en'))
 
 
+@app.get("/toggle-theme")
+def toggle_theme():
+    current_theme = session.get("theme")
+    if current_theme == "dark":
+        session["theme"] = "light"
+    else:
+        session["theme"] = "dark"
+
+    return redirect(request.args.get("current_page"))
+
+
 @app.route("/<string:curr_lang>")
 def home(curr_lang):
     with db.connect() as connection:
@@ -68,4 +79,4 @@ def home(curr_lang):
                 'label': label
             }
             entries.append(entry)
-    return render_template('timeline.html', entries=entries, curr_lang=curr_lang, langs=langs, labels=list_labels)
+    return render_template('timeline.html', entries=entries, curr_lang=curr_lang, langs=langs, labels=list_labels, theme=session.get("theme"))

timelnr/static/js/functions.js

@@ -1,28 +1,14 @@
 $(document).ready(function () {
-  //HIDE ELEMENTS ON LOAD
-  //$('#entry-add').hide();
-  //$('.entry-status').find('p').hide();
-
-  //REVEAL/HIDE NON-CANON
-  $("#button-canon").click(function (event) {
+
+  //REVEAL/HIDE BY CLASS
+  $("#button-hide").click(function (event) {
     $(this).text(function (i, text) {
       return text === "Show everything"
-        ? "Hide uncertain canon"
+        ? "Hide Class"
         : "Show everything";
     });
-    $(".mgspo-group").slideToggle(250);
-    $(".d-md-block.mgspo-label").slideToggle(250);
-    //$('.mgr').slideToggle(250);
-  });
-
-  //REVEAL/HIDE MGSV
-  $("#button-mgsv").click(function (event) {
-    console.log("HIDEEE");
-    $(this).text(function (i, text) {
-      return text === "Show MGSV" ? "Hide MGSV" : "Show MGSV";
-    });
-    $(".mgsv-group").slideToggle(250);
-    //$('.mgr').slideToggle(250);
+    $(".myclass-group").slideToggle(250);
+    $(".d-md-block.myclass-label").slideToggle(250);
   });
 
   /**

timelnr/static/style.css

@@ -1,5 +1,35 @@
+:root {
+  background-color: #dcdcdc;
+  --text: #424243;
+  --entry-background: #f9f3f3;
+  --entry-text: #424243;
+  --entry-date: #ffffff;
+  --entry-date-background: #72a68b;
+  --timeline-bar: #9c9c9c;
+  --link-color: #72a68b;
+  --link-color-hover: #5b8e74;
+  --quicknav-link: #fff;
+  --quicknav-box-background: #9c9c9c !important;
+  --header: #212529;
+}
+
+:root.dark-mode {
+  background-color: #131817;
+  --text: #4b4b4b;
+  --entry-background: #0c0c0c;
+  --entry-text: #7a7a7a;
+  --entry-date: #a5b5b1;
+  --entry-date-background: #192d2a;
+  --timeline-bar: #263d35;
+  --link-color: #597164;
+  --link-color-hover: #475b50;
+  --quicknav-link: #b7cac5;
+  --quicknav-box-background: #516b64 !important;
+  --header: #556360;
+}
+
 body {
-  background-color: #dcdcdc !important;
+  background-color: transparent !important;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -9,27 +39,35 @@ body {
 
 p {
   font-family: "Roboto", sans-serif;
-  color: #424243;
+  color: var(--text);
   text-align: justify;
 }
 
 a,
 a:visited,
 a:active,
 a:link {
-  color: #72a68b;
+  color: var(--link-color);
   text-decoration: none !important;
 }
 
 a:hover {
-  color: #5b8e74 !important;
+  color: var(--link-color-hover) !important;
 }
 
 a.anchor {
   position: relative;
   top: -100px;
 }
 
+h1, h2, h5 {
+  color: var(--header);
+}
+
+ul, ol {
+  color: var(--text);
+}
+
 .mgt-navbar {
   background-color: #232323 !important;
 }
@@ -50,7 +88,7 @@ a.anchor {
 }
 
 .timeline-bar {
-  background: #9c9c9c;
+  background: var(--timeline-bar);
   width: 2px;
   height: 25px;
   margin-left: auto;
@@ -59,13 +97,13 @@ a.anchor {
 
 .entry {
   text-align: center;
-  background: #f9f3f3;
+  background: var(--entry-background);;
   border-radius: 0px;
 }
 .entry p {
   font-family: "Roboto", sans-serif;
   font-size: 14px;
-  color: #424242;
+  color: var(--entry-text);
   margin-top: 5px;
   text-align: center;
   min-height: 35px;
@@ -79,15 +117,16 @@ a.anchor {
 
 .entry-date {
   text-align: center;
-  color: #ffffff;
-  background: #72a68b;
+  color: var(--entry-date);
+  background: var(--entry-date-background);
   height: 40px;
 }
 .entry-date h1 {
   font-family: "Oswald", sans-serif;
   font-size: 18px;
   height: 18px;
   margin-top: 10px;
+  color: var(--entry-date);
 }
 
 .entry-label h1 {
@@ -124,8 +163,9 @@ a.anchor {
   z-index: 9999999;
 }
 .hidebuttons > button {
-  color: #ffffff !important;
+  color: var(--quicknav-link) !important;
   margin-bottom: 4px !important;
+  background: var(--quicknav-box-background) !important;
 }
 
 .quicknav {
@@ -138,10 +178,10 @@ a.anchor {
 }
 
 .quicknav a {
-  color: #ffffff !important;
+  color: var(--quicknav-link) !important;
 }
 .quicknav a:hover {
-  color: #ffffff !important;
+  color: var(--quicknav-link) !important;
   text-decoration: underline !important;
 }
 
@@ -154,4 +194,7 @@ a.anchor {
   font-size: 12px;
   margin-bottom: 4px;
   width: 100px;
+  background: var(--quicknav-box-background) !important;
 }
+
+