templates/trip/list.html

@@ -8,42 +8,71 @@
 
  <link rel="stylesheet" href="{{ url_for("static", filename="leaflet/leaflet.css") }}">
 
+{% set conference_column_count = 8 %}
+{% set accommodation_column_count = 8 %}
+{% set travel_column_count = 10 %}
 <style>
-  body, html {
+.conferences {
-      height: 100%;
+  display: grid;
-      margin: 0;
+  grid-template-columns: repeat({{ conference_column_count }}, auto); /* 7 columns for each piece of information */
-  }
+  gap: 10px;
-  .container-fluid {
+  justify-content: start;
-      height: calc(100% - 56px); /* Subtracting the height of the navbar */
+}
-  }
+
-  .text-content {
+.accommodation {
-      overflow-y: scroll;
+  display: grid;
-      height: 100%;
+  grid-template-columns: repeat({{ accommodation_column_count }}, auto);
-  }
+  gap: 10px;
-  .map-container {
+  justify-content: start;
-      position: sticky;
+}
-      top: 56px; /* Adjust to be below the navbar */
+
-      height: calc(100vh - 56px); /* Subtracting the height of the navbar */
+.travel {
-  }
+  display: grid;
-  #map {
+  grid-template-columns: repeat({{ travel_column_count }}, auto);
-      height: 100%;
+  gap: 10px;
-  }
+  justify-content: start;
+}
+
+.grid-item {
+  /* Additional styling for grid items can go here */
+}
+
+        body, html {
+            height: 100%;
+            margin: 0;
+        }
+        .container-fluid {
+            height: calc(100% - 56px); /* Subtracting the height of the navbar */
+        }
+        .text-content {
+            overflow-y: scroll;
+            height: 100%;
+        }
+        .map-container {
+            position: sticky;
+            top: 56px; /* Adjust to be below the navbar */
+            height: calc(100vh - 56px); /* Subtracting the height of the navbar */
+        }
+        #map {
+            height: 100%;
+        }
+
+        @media (max-width: 767.98px) {
+            .container-fluid {
+                display: block;
+                height: auto;
+            }
+            .map-container {
+                position: relative;
+                top: 0;
+                height: 50vh; /* Adjust as needed */
+            }
+            .text-content {
+                height: auto;
+                overflow-y: auto;
+            }
+        }
 
-  @media (max-width: 767.98px) {
-      .container-fluid {
-          display: block;
-          height: auto;
-      }
-      .map-container {
-          position: relative;
-          top: 0;
-          height: 50vh; /* Adjust as needed */
-      }
-      .text-content {
-          height: auto;
-          overflow-y: auto;
-      }
-  }
 </style>
 {% endblock %}
 
@@ -87,8 +116,40 @@
           {% endfor %}
         {% endif %}
 
-        {{ conference_list(trip) }}
+        {% for item in trip.conferences %}
+          {% set country = get_country(item.country) if item.country else None %}
+          <div class="card my-1">
+            <div class="card-body">
+              <h5 class="card-title">
+                <a href="{{ item.url }}">{{ item.name }}</a>
+                <small class="text-muted">
+                  {{ display_date_no_year(item.start) }} to {{ display_date_no_year(item.end) }}
+                </small>
+              </h5>
+              <p class="card-text">
+                Topic: {{ item.topic }}
+                | Venue: {{ item.venue }}
+                | Location: {{ item.location }}
+                {% if country %}
+                  {{ country.flag }}
+                {% elif item.online %}
+                  💻 Online
+                {% else %}
+                  <span class="text-bg-danger p-2">
+                    country code <strong>{{ item.country }}</strong> not found
+                  </span>
+                {% endif %}
+                {% if item.free %}
+                  | <span class="badge bg-success text-nowrap">free to attend</span>
+                {% elif item.price and item.currency %}
+                  | <span class="badge bg-info text-nowrap">price: {{ item.price }} {{ item.currency }}</span>
+                {% endif %}
+              </p>
+            </div>
+          </div>
+        {% endfor %}
 
+        {% set date_heading = None %}
         {% for day, elements in trip.elements_grouped_by_day() %}
             <h4>{{ display_date_no_year(day) }}</h4>
             {% set accommodation_label = {"check-in": "check-in from", "check-out": "check-out by"} %}
@@ -115,43 +176,6 @@
   {% endif %}
 {% endmacro %}
 
-{% macro conference_list(trip) %}
-  {% for item in trip.conferences %}
-    {% set country = get_country(item.country) if item.country else None %}
-    <div class="card my-1">
-      <div class="card-body">
-        <h5 class="card-title">
-          <a href="{{ item.url }}">{{ item.name }}</a>
-          <small class="text-muted">
-            {{ display_date_no_year(item.start) }} to {{ display_date_no_year(item.end) }}
-          </small>
-        </h5>
-        <p class="card-text">
-          Topic: {{ item.topic }}
-          | Venue: {{ item.venue }}
-          | Location: {{ item.location }}
-          {% if country %}
-            {{ country.flag }}
-          {% elif item.online %}
-            💻 Online
-          {% else %}
-            <span class="text-bg-danger p-2">
-              country code <strong>{{ item.country }}</strong> not found
-            </span>
-          {% endif %}
-          {% if item.free %}
-            | <span class="badge bg-success text-nowrap">free to attend</span>
-          {% elif item.price and item.currency %}
-            | <span class="badge bg-info text-nowrap">price: {{ item.price }} {{ item.currency }}</span>
-          {% endif %}
-        </p>
-      </div>
-    </div>
-  {% endfor %}
-
-
-{% endmacro %}
-
 
 {% block content %}
 <div class="container-fluid d-flex flex-column flex-md-row">