Upgrade to Bootstrap 5

sipa/blueprints/news.py

@@ -25,8 +25,9 @@ def show():
         reverse=True,
     )
     if len(news) == 0:
-        return render_template("index.html", articles=None,
-                               previous_range=0, next_range=0)
+        return render_template(
+            "news.html", articles=None, previous_range=0, next_range=0
+        )
 
     default_step = 10
     # calculating mod len() allows things like `end=-1` for the last
@@ -56,8 +57,12 @@ def show():
     if end < len(news) - 1:
         next_range = {'start': end + 1, 'end': min(end + delta, len(news) - 1)}
 
-    return render_template("index.html", articles=news[start:end+1],
-                           previous_range=prev_range, next_range=next_range)
+    return render_template(
+        "news.html",
+        articles=news[start : end + 1],
+        previous_range=prev_range,
+        next_range=next_range,
+    )
 
 
 @bp_news.route("/<filename>")
@@ -66,6 +71,6 @@ def show_news(filename):
 
     for article in news:
         if article.file_basename == filename:
-            return render_template("template.html", article=article)
+            return render_template("news.html", articles=[article])
 
     abort(404)

sipa/blueprints/pages.py

@@ -33,4 +33,4 @@ def show(category_id, article_id):
     if article.link:
         return redirect(article.link)
 
-    return render_template("template.html", article=article)
+    return render_template("page.html", article=article)

sipa/flatpages.py

@@ -132,6 +132,12 @@ def hidden(self) -> bool:
         """
         return self.localized_page.meta.get('hidden', False)
 
+    @property
+    def icon(self) -> str:
+        return self.localized_page.meta.get("icon") or self.localized_page.meta.get(
+            "glyphicon"
+        )
+
     def __getattr__(self, attr: str) -> str:
         """Return the meta attribute of the localized page
 

sipa/initialization.py

@@ -99,6 +99,37 @@ def init_app(app, **kwargs):
     app.context_processor(inject_meetingcal)
 
     app.add_template_filter(render_links)
+
+    def glyphicon_to_bi(glyphicon: str) -> str:
+        MAP = {
+            "glyphicon-briefcase": "bi-briefcase-fill",
+            "glyphicon-bullhorn": "bi-megaphone-fill",
+            "glyphicon-chevron-down": "bi-chevron-down",
+            "glyphicon-cloud": "bi-cloud-fill",
+            "glyphicon-comment": "bi-chat-left-fill",
+            "glyphicon-dashboard": "bi-speedometer",
+            "glyphicon-download-alt": "bi-download",
+            "glyphicon-envelope": "bi-envelope-fill",
+            "glyphicon-euro": "bi-currency-euro",
+            "glyphicon-file": "bi-file-earmark-fill",
+            "glyphicon-globe": "bi-globe-europe-africa",
+            "glyphicon-headphones": "bi-headphones",
+            "glyphicon-list-alt": "bi-card-list",
+            "glyphicon-lock": "bi-lock-fill",
+            "glyphicon-log-in": "bi-box-arrow-in-right",
+            "glyphicon-question-sign": "bi-question-circle-fill",
+            "glyphicon-retweet": "bi-arrow-repeat",
+            "glyphicon-signal": "bi-router-fill",  # used for router page
+            "glyphicon-star": "bi-star-fill",
+            "glyphicon-tasks": "bi-box-arrow-up-right",
+            "glyphicon-tint": "bi-droplet-fill",
+            "glyphicon-transfer": "bi-arrow-left-right",
+            "glyphicon-user": "bi-person-fill",
+            "glyphicon-wrench": "bi-wrench-adjustable",
+        }
+        return MAP.get(glyphicon, glyphicon.replace("glyphicon-", "bi-"))
+
+    app.add_template_filter(glyphicon_to_bi)
     logger.debug("Jinja globals have been set",
                  extra={'data': {'jinja_globals': app.jinja_env.globals}})
 

sipa/static/css/style.css

@@ -2,23 +2,22 @@
 	display: none;
 }
 
-.newsblock {
-	margin-bottom: 40px;
-}
 
 hr {
 	margin-bottom: 5px;
 	margin-top: 5px;
 }
 
-body {
-	padding-top: 50px;
+/* LINKS:
+ * Don't underline them if they're not part of a special component
+ * (i.e., don't have a `class=` attribute
+ */
+a:not([class]):not(:hover) {
+    text-decoration: none;
 }
 
-.affix {
-	top: 60px;
-	width: 100%;
-	max-width: inherit;
+a:not([class]):hover {
+    text-decoration: underline;
 }
 
 @media (min-width: 768px) {
@@ -61,36 +60,6 @@ body {
 	opacity: 1;
 }
 
-@media (max-height: 480px) {
-    #navbar {
-        max-height: 200px;
-    }
-}
-
-@media (max-height: 300px) {
-    #navbar {
-        max-height: 150px;
-    }
-}
-
-@media (max-width: 767px) {
-    #navbar {
-        background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), white 40%);
-    }
-
-    #navbar > ul:last-child {
-        border-bottom: 4px double rgba(0, 0, 0, 0.1);
-    }
-}
-
-#trafficgauge {
-    height: 200px;
-    /* Hack to remove upper spacing of the trafficgauge
-     * See https://github.com/toorshia/justgage/issues/172
-     */
-    margin-top: -50px;
-}
-
 .module {
     padding: 15px;
     margin-bottom: 10px;
@@ -118,18 +87,6 @@ body {
     margin-right: -15px;
 }
 
-a#traffic_gauge_link {
-    text-decoration: none;
-    transition: text-shadow 1s ease, color 1s ease;
-    -moz-transition: text-shadow 1s ease, color 1s ease;
-    -webkit-transition: text-shadow 1s ease, color 1s ease;
-    -o-transition: text-shadow 1s ease, color 1s ease;
-}
-
-#traffic_gauge_error {
-    margin-top: 1em;
-}
-
 div#row-contact div.module > div > div.row + div.row{
     margin-top: 1em;
 }
@@ -139,10 +96,6 @@ td {
 	padding-bottom: 20px;
 }
 
-#trafstat {
-	width: 100%;
-}
-
 img[alt=software_logo] {
 	width: 100px;
 }
@@ -161,7 +114,7 @@ img[alt=software_logo] {
 
 
 .text-password {
-	filter: blur(2px);
+	filter: blur(5px);
 	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
 }
 

sipa/static/css/usersuite_index.css

@@ -1,9 +1,14 @@
-#usersuite-sidebar-nav .nav>li>a {
-    font-size: 20px;
+.toc .node-name--H2 {
+    font-size: 1.5rem;
 }
-#usersuite-sidebar-nav .nav .nav>li>a {
-    font-size: 19px;
+.toc .node-name--H3 {
+    font-size: 1.25rem;
 }
+
+.is-active-link::before {
+    background-color: var(--bs-primary);
+}
+
 h2,h3 {
     padding-top: 70px;
     margin-top: -50px;