mirror of
https://github.com/sossuOrkesteri/sossunVerkkosivut.git
synced 2026-10-12 19:23:37 +03:00
Refactoring internationalization and active tab selection
Navbar items are now passed as a dictionary to the templating engine. Route definition now makes use of Flask's converters. Removed unecessary references to super-blocks from layout.html children.
This commit is contained in:
Suksi
@@ -3,48 +3,54 @@ import json
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
class NavbarItem():
|
||||
def __init__(self, url, template, title):
|
||||
self.url = url
|
||||
self.title = title
|
||||
self.template = template
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
return render_template("index.html", luokka0="active")
|
||||
# Navbar definitions in different languages
|
||||
navbars = {
|
||||
"fi": [
|
||||
NavbarItem("etusivu", "index.html", "Etusivu"),
|
||||
NavbarItem("tilaa", "tilaa_sossu.html", "Tilaa meidät keikalle"),
|
||||
NavbarItem("mukaan", "tule_mukaan.html", "Tule mukaan"),
|
||||
NavbarItem("ajankohtaista", "ajankohtaista.html", "Ajankohtaista"),
|
||||
],
|
||||
"en": [
|
||||
NavbarItem("main", "english_main.html", "Main"),
|
||||
NavbarItem("bookus", "book_sossu.html", "Book us"),
|
||||
NavbarItem("join", "join_sossu.html", "Join SOSSu"),
|
||||
NavbarItem("socialmedia", "ajankohtaista.html", "Social Media"),
|
||||
]
|
||||
}
|
||||
|
||||
@app.route("/eng")
|
||||
def eng_index():
|
||||
return render_template("english_main.html", luokka0="active")
|
||||
def getNavbarDict(lang):
|
||||
return {item.url:item.title for item in navbars[lang]}
|
||||
|
||||
#tilaaSossuKeikalle
|
||||
@app.route("/tilaasossu")
|
||||
def tilaa():
|
||||
return render_template("tilaa_sossu.html", luokka1="active")
|
||||
# Default routes, defined by navbar items
|
||||
@app.route("/<page>")
|
||||
@app.route("/", defaults={"page": navbars["fi"][0].url})
|
||||
def getPage(page):
|
||||
for lang in ["en", "fi"]:
|
||||
for index,item in enumerate(navbars[lang]):
|
||||
if page == item.url:
|
||||
return render_template(item.template,
|
||||
navbar=getNavbarDict(lang),
|
||||
active=index,
|
||||
lang=lang)
|
||||
return render_template("error.html", navbar=getNavbarDict("en"), msg="Page not found")
|
||||
|
||||
@app.route("/bookus")
|
||||
def order():
|
||||
return render_template("book_sossu.html", luokka1="active",)
|
||||
|
||||
#mitenSoittajaksi
|
||||
@app.route("/mukaan")
|
||||
def mukaan():
|
||||
return render_template("tule_mukaan.html", luokka2="active")
|
||||
|
||||
@app.route("/joinsossu")
|
||||
def join():
|
||||
return render_template("join_sossu.html", luokka2="active")
|
||||
|
||||
#ajankohtaista
|
||||
@app.route("/ajankohtaista")
|
||||
def ajankohtaista():
|
||||
# social media tab is defined explicitly because of the extra data it needs
|
||||
@app.route("/ajankohtaista", defaults={"lang": "fi"})
|
||||
@app.route("/socialmedia", defaults={"lang": "en"})
|
||||
def some(lang):
|
||||
try:
|
||||
file = open("instagram_media.json", "r")
|
||||
media = json.loads(file.read())
|
||||
except FileNotFoundError as err:
|
||||
return render_template("error.html", msg=str(err))
|
||||
return render_template('ajankohtaista.html', media=media, luokka3="active")
|
||||
|
||||
@app.route("/socialmedia")
|
||||
def some_page():
|
||||
try:
|
||||
file = open("instagram_media.json", "r")
|
||||
media = json.loads(file.read())
|
||||
except FileNotFoundError as err:
|
||||
return render_template("error.html", msg=str(err))
|
||||
return render_template('social_media_en.html', media=media, luokka3="active")
|
||||
return render_template('ajankohtaista.html',
|
||||
media=media,
|
||||
lang=lang,
|
||||
navbar=getNavbarDict(lang))
|
||||
|
||||
@@ -42,7 +42,11 @@
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="someShowmore" onclick="showmore(this)">
|
||||
{% if lang == "fi" %}
|
||||
<small> näytä lisää </small>
|
||||
{% else %}
|
||||
<small> show more </small>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
{% extends "layout_english.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<h2>Book us to your event!</h2>
|
||||
<p>
|
||||
We are more than a party orchestra, more than a big band and a way better
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
{% extends "layout_english.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
|
||||
<p>
|
||||
SOSSu is the orchestra of Savo Student Nation of the University of Helsinki.
|
||||
This 12 year old orchestra has over 30 players:
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<code>
|
||||
{{ msg }}
|
||||
</code>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<p>Savolaisen Osakunnan Soitannollinen Seura SOSSu ry, eli tuttavallisemmin
|
||||
<p>
|
||||
Savolaisen Osakunnan Soitannollinen Seura SOSSu ry, eli tuttavallisemmin
|
||||
SOSSu, on Helsingin yliopiston
|
||||
<a href="https://savolainenosakunta.fi/">Savolaisen osakunnan</a> orkesteri, joka koostuu
|
||||
sekä savolaisista että savonmielisistä soittajista. Yli 30 henkisen
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
{% extends "layout_english.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<h2>Join SOSSu!</h2>
|
||||
<h3>Would you like to be part of a student orchestra in Helsinki?</h3>
|
||||
<p>
|
||||
|
||||
+21
-10
@@ -1,4 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
{# Macro to build the list of navbar items #}
|
||||
{% macro navbarItems() -%}
|
||||
{% for url,title in navbar.items() %}
|
||||
<a href="{{url}}"
|
||||
class="navbarItem
|
||||
{% if active == loop.index0 %}
|
||||
active
|
||||
{% endif %}">
|
||||
{{title}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{%- endmacro%}
|
||||
|
||||
<html lang="fi">
|
||||
<head>
|
||||
{% block head %}
|
||||
@@ -20,21 +34,18 @@
|
||||
<div id="navbar" class="shadow">
|
||||
<div id="navbarInner">
|
||||
<div id="navbarLinks">
|
||||
<a class="navbarItem {{luokka0}}" href="/">Etusivu</a>
|
||||
<a class="navbarItem {{luokka1}}" href="/tilaasossu">Tilaa meidät keikalle</a>
|
||||
<a class="navbarItem {{luokka2}}" href="/mukaan">Tule mukaan</a>
|
||||
<a class="navbarItem {{luokka3}}" href="/ajankohtaista">Ajankohtaista</a>
|
||||
{{ navbarItems() }}
|
||||
</div>
|
||||
<div id="mobileButton" class="navbarItem"><img src="/static/menu.svg"></div>
|
||||
<a href="/eng" class="navbarItem"><img src="/static/flags/english.svg"></a>
|
||||
{% if lang == "fi" %}
|
||||
<a href="/main" class="navbarItem"><img src="/static/flags/english.svg"></a>
|
||||
{% elif lang == "en" %}
|
||||
<a href="/" class="navbarItem"><img src="/static/flags/finnish.svg"></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!--Mobiiliversion valikon sisältö -->
|
||||
<div id="mobileLinks">
|
||||
<a class="navbarItem {{luokka0}}" href="/">Etusivu</a>
|
||||
<a class="navbarItem {{luokka1}}" href="/tilaasossu">Tilaa meidät keikalle</a>
|
||||
<a class="navbarItem {{luokka2}}" href="/mukaan">Tule mukaan</a>
|
||||
<a class="navbarItem {{luokka3}}" href="/ajankohtaista">Ajankohtaista</a>
|
||||
{{ navbarItems() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="icon" href="/static/sossu-64x64.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Savolaisen Osakunnan Soitannollinen Seura SOSSu ry</title>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="website">
|
||||
<div id="header">
|
||||
<img id="headerPicture" src="/static/img-banner.jpg" object-fit="contain">
|
||||
</div>
|
||||
|
||||
<div id="navbar">
|
||||
<div id="navbarInner">
|
||||
<div id="navbarLinks">
|
||||
<a class="navbarItem {{luokka0}}" href="/eng">Main</a>
|
||||
<a class="navbarItem {{luokka1}}" href="/bookus">Book us</a>
|
||||
<a class="navbarItem {{luokka2}}" href="/joinsossu">Join SOSSu</a>
|
||||
<a class="navbarItem {{luokka3}}" href="/socialmedia">Social Media</a>
|
||||
</div>
|
||||
<div id="mobileButton" class="navbarItem"><img src="/static/menu.svg"></div>
|
||||
<a href="/" class="navbarItem"><img src="/static/flags/finnish.svg"></a>
|
||||
</div>
|
||||
|
||||
<!--Mobiiliversion valikon sisältö -->
|
||||
<div id="mobileLinks">
|
||||
<a class="navbarItem {{luokka0}}" href="/eng">Main</a>
|
||||
<a class="navbarItem {{luokka1}}" href="/bookus">Book us</a>
|
||||
<a class="navbarItem {{luokka2}}" href="/joinsossu">Join SOSSu</a>
|
||||
<a class="navbarItem {{luokka3}}" href="/ajankohtaista">Social Media</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="centerbox">{% block content %}{% endblock %}</div>
|
||||
<footer id="footer">
|
||||
<p>Savolaisen Osakunnan Soitannollinen Seura SOSSu ry</p>
|
||||
<p>sossu.orkesteri [at] gmail.com</p>
|
||||
<p>Mannerheimintie 5 A</p>
|
||||
<p>00100 Helsinki</p>
|
||||
<br>
|
||||
<a href="https://www.instagram.com/sossuorkesteri/"><img class="social-media-logos" src="/static/instagram.svg"></a>
|
||||
<a href="https://www.facebook.com/SOSSu.orkesteri"><img class="social-media-logos" src="/static/facebook.svg"></a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var mobileMenuBtn = document.getElementById("mobileButton");
|
||||
var mobileMenu = document.getElementById("mobileLinks");
|
||||
|
||||
mobileMenuBtn.addEventListener("click", () => {
|
||||
if (mobileMenu.style.display === "grid") {
|
||||
mobileMenu.style.display = "none";
|
||||
document.getElementById("mobileButton").style.backgroundColor='#ffd6f1';
|
||||
} else {
|
||||
mobileMenu.style.display = "grid";
|
||||
document.getElementById("mobileButton").style.backgroundColor='#FA9CC2';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
{% extends "layout_english.html" %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="/static/ajankohtaista.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
{% for entry in media %}
|
||||
<div class="some-entry">
|
||||
<a href="{{ entry["permalink"] }}"
|
||||
target="_blank"
|
||||
style="position: relative">
|
||||
<img class="some-picture-overlay"
|
||||
src="static/ig-logo.svg">
|
||||
<img class="some-picture"
|
||||
alt="{{ entry["caption"] }}"
|
||||
{% if entry["media_type"] == "IMAGE"
|
||||
or entry["media_type"] == "CAROUSEL_ALBUM" %}
|
||||
src={{ entry["media_url"] }}
|
||||
{% elif entry["media_type"] == "VIDEO" %}
|
||||
src={{ entry["thumbnail_url"] }}
|
||||
{% endif %}>
|
||||
</a>
|
||||
<div class="some-info">
|
||||
<div class="some-timestamp">
|
||||
<small>{{ entry["timestamp"] }} </small>
|
||||
</div>
|
||||
<div class="some-caption" id="short">
|
||||
{{ entry["caption"] }}
|
||||
</div>
|
||||
<div class="some-caption" id="long" onclick="showless(this)">
|
||||
{{ entry["caption"] }}
|
||||
</div>
|
||||
<div class="some-caption" id="dummy">
|
||||
{{ entry["caption"] }}
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="some-showmore" onclick="showmore(this)">
|
||||
<small> näytä lisää </small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<script>
|
||||
function showmore(elem) {
|
||||
let captionLong = elem.parentNode.querySelector(".some-caption#long");
|
||||
captionLong.style.display = "block";
|
||||
console.log("showmore");
|
||||
}
|
||||
|
||||
function showless(elem) {
|
||||
elem.style.display = "none";
|
||||
console.log("showless");
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,9 +1,5 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<h2>Tilaa meidät keikalle!</h2>
|
||||
<p>
|
||||
Savolaisen Osakunnan Soitannollinen Seura, tuttavallisemmin SOSSu,
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block head %}{{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<h2>Tule mukaan SOSSuun!</h2>
|
||||
<h3>Tunnetko kaipausta rinnassasi olla osa Helsingin savolaisinta opiskelijaorkesteria?</h3>
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user