Improve homepage layout

This mostly changes the preview and includes more information and plays a little with the fontsize and general width of the preview.
flofriday · Aug 27, 2023 · 147e250 · 147e250
1 parent 95039c3
commit 147e250
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,22 @@
 # better-tiss-calendar
 
 ![Screenshot](screenshot.png)
-A better tiss calendar
+TISS is the information service of TU Wien which exports a suboptimal calendar 
+of events (like lectures). This project improves the calendar by rewriting the
+events and enriching them with useful information.
 
 [Live Website](https://bettercal.flofriday.dev)
 
 ## Features
 
 - Remove lecture number from the title
-- Use shorthands instead of the long name
+- Use shorthands instead of the long name (optional)
 - Correct address in the location field, not just the room
 - Floor information
 - Links to TISS and TUW-Maps on HTML enabled clients
+- Drop in replacement
+- Easy setup: no login, no account and no rage inducing captchas
+- Self-hosting friendly 
 
 ## How it works
 

diff --git a/app/__init__.py b/app/__init__.py
@@ -44,8 +44,7 @@ def close_connection(exception):
 
 @app.route("/")
 def home():
-    statistic = get_statistics(get_db())
-    return render_template("home.html", statistic=statistic)
+    return render_template("home.html")
 
 
 @app.route("/statistics")

diff --git a/app/static/style.css b/app/static/style.css
@@ -575,6 +575,11 @@ video {
   margin-bottom: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -591,6 +596,22 @@ video {
   margin-top: 0.5rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -619,6 +640,26 @@ video {
   width: 100%;
 }
 
+.w-\[14rem\] {
+  width: 14rem;
+}
+
+.w-\[13rem\] {
+  width: 13rem;
+}
+
+.min-w-\[13rem\] {
+  min-width: 13rem;
+}
+
+.min-w-\[12rem\] {
+  min-width: 12rem;
+}
+
+.min-w-\[11rem\] {
+  min-width: 11rem;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -627,6 +668,10 @@ video {
   max-width: 28rem;
 }
 
+.max-w-\[30rem\] {
+  max-width: 30rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -831,6 +876,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -847,6 +897,10 @@ video {
   line-height: 1.375;
 }
 
+.leading-5 {
+  line-height: 1.25rem;
+}
+
 .text-blue-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));

diff --git a/app/templates/home.html b/app/templates/home.html
@@ -25,34 +25,38 @@
 
 <body class="h-screen">
     <div class="h-full flex flex-col justify-between">
-        <main class="container w-full max-w-md mx-auto px-4 text-center">
+        <main class="container w-full max-w-[30rem] mx-auto px-4 text-center">
             <h1 class="text-6xl font-bold pt-12 pb-6 leading-snug">
                 Better TISS Calendar
             </h1>
-            <div class="pb-8 text-neutral-400">
-                We can't fix the room reservation problem, but there is still a
-                lot to improve.
-                Used by {{statistic.monthly_users}} students.
-            </div>
             <div class="flex flex-row justify-around mb-12">
                 <div class="my-auto w-[12rem] h-full border border-[color:#666] rounded-2xl text-start p-3">
                     <div lang="de" class="text-lg font-bold">183.579 VU Technische Grundlagen der
                         Informatik</div>
-                    <div lang="de" class="my-1 text-sm">GM 1 Audi. Max.- ARCH-INF</div>
-                    <div lang="de" class="my-1 text-sm">Vorlesung</div>
+                    <div lang="de" class="my-2 text-sm">GM 1 Audi. Max.- ARCH-INF</div>
+                    <div lang="de" class="my-1 text-xs">Vorlesung</div>
                 </div>
                 <span aria-hidden="true" class="my-auto text-5xl px-2 whitespace-nowrap">➔</span>
                 <div class="w-[12rem] h-full rounded-2xl p-[1px] bg-gradient-to-r from-pink-500 to-yellow-500">
                     <div class="w-full h-full bg-black rounded-2xl text-start p-3">
                         <div lang="de" id="preview-title" class="text-lg font-bold">TGI VU</div>
-                        <div lang="de" class="my-1 text-sm">Getreidemarkt 9</div>
+                        <div lang="de" class="my-2 text-sm">Getreidemarkt 9</div>
                         <div class="my-1 text-sm">
-                            <div id="preview-lecturename">
+                            <div id="preview-lecturename" class="mb-1">
                                 <strong lang="de">Technische Grundlagen der
-                                    Informatik</strong><br>
+                                    Informatik</strong>
+                            </div>
+                            <div class="mb-1">
+                                Details: <span lang="de" class="text-blue-400">TISS</span>, <span lang="de"
+                                    class="text-blue-400">TUW-Maps</span>
+                            </div>
+                            <div class="mb-1">
+                                Room: <span lang="de" class="text-blue-400">GM 1 Audi. Max.-
+                                    ARCH-INF</span>
+                            </div>
+                            <div>
+                                Floor: <span lang="de"> Erdgeschoss</span>
                             </div>
-                            Room: <span lang="de" class="text-blue-400">GM 1 Audi. Max.- ARCH-INF</span><br>
-                            Floor: <span lang="de"> Erdgeschoss</span><br>
                             <br>
                             <span lang="de">Vorlesung</span>
                         </div>

diff --git a/tests/test_request.py b/tests/test_request.py
@@ -234,9 +234,11 @@ def test_icalendar_noshorthands_de_success(client: FlaskClient, mocker):
     assert "PS VU" not in summaries
     assert "SEPS SE" not in summaries
 
-    # Correct language
+    # No full lecture name in description if already in title
     assert not any(["Programmiersprachen" in d for d in descriptions])
     assert not any(["Programming Languages" in d for d in descriptions])
+
+    # Correct language
     assert all(["Raum:" in d for d in descriptions])
     assert not any(["Room:" in d for d in descriptions])
     assert any(["Stock:" in d for d in descriptions])