Merge branch 'styling' into 'staging'

Styling

See merge request PhilippHofer/rot!15

frontend/scss/app.scss

@@ -8,3 +8,4 @@
 @import 'components/links';
 @import 'components/input';
 @import 'components/alert';
+@import 'components/status';

frontend/scss/components/_input.scss

@@ -1,3 +1,13 @@
 .input {
   @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right .75rem center;
+  background-size: 16px 12px;
+  background-color: white;
+  -webkit-appearance: none; 
+  appearance: none;
+}

frontend/scss/components/_status.scss

@@ -0,0 +1,15 @@
+.status-damage {
+  @apply inline-block w-[12px] h-[12px] rounded-full mr-2 bg-gray-200;
+  
+  &-none {
+    @apply bg-[#15803d];
+  }
+
+  &-light {
+    @apply bg-[#ffae42];
+  }
+
+  &-locked {
+    @apply bg-[#f43f5e];
+  }
+}

frontend/static/js/multiselect-dropdown.js

@@ -3,7 +3,6 @@ style.setAttribute("id","multiselect_dropdown_styles");
 style.innerHTML = `
 .multiselect-dropdown{
   display: inline-block;
-  padding: 2px 5px 0px 5px;
   border-radius: 4px;
   border: solid 1px #ced4da;
   background-color: white;
@@ -12,6 +11,8 @@ style.innerHTML = `
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
+  padding: 0.375rem 0.5rem;
+  line-height: 1.5rem;
 }
 .multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
   margin-right:0.5em; 
@@ -27,20 +28,18 @@ style.innerHTML = `
 .multiselect-dropdown span.optext .optdel {
   float: right;
   margin: 0 -6px 1px 5px;
-  font-size: 0.7em;
+  font-size: 1em;
-  margin-top: 2px;
   cursor: pointer;
-  color: #666;
 }
-.multiselect-dropdown span.optext .optdel:hover { color: #c66;}
+.multiselect-dropdown span.optext .optdel:hover { color:#f43f5e;}
 .multiselect-dropdown span.placeholder{
   color:#ced4da;
 }
 .multiselect-dropdown-list-wrapper{
-  box-shadow: gray 0 3px 8px;
+  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
   z-index: 100;
   padding:2px;
-  border-radius: 4px;
+  border-radius: .375rem;
   border: solid 1px #ced4da;
   display: none;
   margin: -1px;
@@ -52,6 +51,8 @@ style.innerHTML = `
 }
 .multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
   margin-bottom:5px;
+  padding: 0.375rem 0.5rem;
+  line-height: 1.5rem;
 }
 .multiselect-dropdown-list{
   padding:2px;
@@ -63,8 +64,8 @@ style.innerHTML = `
   width: 6px;
 }
 .multiselect-dropdown-list::-webkit-scrollbar-thumb {
-  background-color: #bec4ca;
+  background-color: rgba(226, 232, 240, 0.8);
-  border-radius:3px;
+  border-radius: .375rem;
 }
 
 .multiselect-dropdown-list div{
@@ -78,7 +79,7 @@ style.innerHTML = `
 .multiselect-dropdown-list div.checked{
 }
 .multiselect-dropdown-list div:hover{
-  background-color: #ced4da;
+  background-color: rgba(226, 232, 240, 0.8);
 }
 .multiselect-dropdown span.maxselected {width:100%;}
 .multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}
@@ -91,8 +92,8 @@ function MultiselectDropdown(options){
     height:'15rem',
     placeholder:'Auswählen',
     txtSelected:'ausgewählt',
-    txtAll:'All',
+    txtAll:'Alle',
-    txtRemove: 'Löschen',
+    txtRemove: 'Entfernen',
     txtSearch:'Suchen',
     ...options
   };
@@ -186,7 +187,7 @@ function MultiselectDropdown(options){
           sels.map(x=>{
             var c=newEl('span',{class:'optext',text:x.text, srcOption: x});
             if((el.attributes['multiselect-hide-x']?.value !== 'true'))
-              c.appendChild(newEl('span',{class:'optdel',text:'🗙',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
+              c.appendChild(newEl('span',{class:'optdel',text:'x',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
 
             div.appendChild(c);
           });

frontend/vite.config.js.timestamp-1690738535795.mjs

@@ -0,0 +1,41 @@
+// vite.config.js
+import { defineConfig } from "file:///Users/mariebirner/PrivateDev/rot/frontend/node_modules/vite/dist/node/index.js";
+import { viteStaticCopy } from "file:///Users/mariebirner/PrivateDev/rot/frontend/node_modules/vite-plugin-static-copy/dist/index.js";
+var vite_config_default = defineConfig({
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        {
+          src: "./static/[!.]*",
+          dest: "./"
+        }
+      ]
+    })
+  ],
+  publicDir: false,
+  // disable copy `public/` to outDir
+  build: {
+    rollupOptions: {
+      input: {
+        main: "./main.ts"
+        // Example for more entry points
+        // test: './src/test.ts',
+      },
+      output: {
+        entryFileNames: "[name].js",
+        assetFileNames: "[name].css"
+      }
+    },
+    manifest: true,
+    // generate manifest.json in outDir
+    outDir: "../static/"
+  },
+  css: {
+    devSourcemap: true
+    // disabled by default because of performance reasons
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWFyaWViaXJuZXIvUHJpdmF0ZURldi9yb3QvZnJvbnRlbmRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9tYXJpZWJpcm5lci9Qcml2YXRlRGV2L3JvdC9mcm9udGVuZC92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvbWFyaWViaXJuZXIvUHJpdmF0ZURldi9yb3QvZnJvbnRlbmQvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB7IHZpdGVTdGF0aWNDb3B5IH0gZnJvbSAndml0ZS1wbHVnaW4tc3RhdGljLWNvcHknXG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICB2aXRlU3RhdGljQ29weSh7XG4gICAgICB0YXJnZXRzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBzcmM6ICcuL3N0YXRpYy9bIS5dKicsXG4gICAgICAgICAgZGVzdDogJy4vJyxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSlcbiAgXSxcbiAgcHVibGljRGlyOiBmYWxzZSwgLy8gZGlzYWJsZSBjb3B5IGBwdWJsaWMvYCB0byBvdXREaXJcbiAgYnVpbGQ6IHtcbiAgICByb2xsdXBPcHRpb25zOiB7XG4gICAgICBpbnB1dDoge1xuICAgICAgICBtYWluOiAnLi9tYWluLnRzJyxcbiAgICAgICAgLy8gRXhhbXBsZSBmb3IgbW9yZSBlbnRyeSBwb2ludHNcbiAgICAgICAgLy8gdGVzdDogJy4vc3JjL3Rlc3QudHMnLFxuICAgICAgfSxcbiAgICAgIG91dHB1dDoge1xuICAgICAgICBlbnRyeUZpbGVOYW1lczogJ1tuYW1lXS5qcycsXG4gICAgICAgIGFzc2V0RmlsZU5hbWVzOiAnW25hbWVdLmNzcycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgbWFuaWZlc3Q6IHRydWUsIC8vIGdlbmVyYXRlIG1hbmlmZXN0Lmpzb24gaW4gb3V0RGlyXG4gICAgb3V0RGlyOiAnLi4vc3RhdGljLycsXG4gIH0sXG4gIGNzczoge1xuICAgIGRldlNvdXJjZW1hcDogdHJ1ZSwgLy8gZGlzYWJsZWQgYnkgZGVmYXVsdCBiZWNhdXNlIG9mIHBlcmZvcm1hbmNlIHJlYXNvbnNcbiAgfSxcbn0pIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFnVCxTQUFTLG9CQUFvQjtBQUM3VSxTQUFTLHNCQUFzQjtBQUUvQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxlQUFlO0FBQUEsTUFDYixTQUFTO0FBQUEsUUFDUDtBQUFBLFVBQ0UsS0FBSztBQUFBLFVBQ0wsTUFBTTtBQUFBLFFBQ1I7QUFBQSxNQUNGO0FBQUEsSUFDRixDQUFDO0FBQUEsRUFDSDtBQUFBLEVBQ0EsV0FBVztBQUFBO0FBQUEsRUFDWCxPQUFPO0FBQUEsSUFDTCxlQUFlO0FBQUEsTUFDYixPQUFPO0FBQUEsUUFDTCxNQUFNO0FBQUE7QUFBQTtBQUFBLE1BR1I7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGdCQUFnQjtBQUFBLFFBQ2hCLGdCQUFnQjtBQUFBLE1BQ2xCO0FBQUEsSUFDRjtBQUFBLElBQ0EsVUFBVTtBQUFBO0FBQUEsSUFDVixRQUFRO0FBQUEsRUFDVjtBQUFBLEVBQ0EsS0FBSztBQUFBLElBQ0gsY0FBYztBQUFBO0FBQUEsRUFDaEI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=

seeds.sql

@@ -21,6 +21,7 @@ INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Haichenbach', 1, 1
 INSERT INTO "boat" (name, amount_seats, location_id, owner) VALUES ('private_boat_from_rower', 1, 1, 2);
 INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Joe', 2, 1);
 INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Kaputtes Boot :-(', 7, 1);
+INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Sehr kaputtes Boot :-((', 7, 1);
 INSERT INTO "logbook_type" (name) VALUES ('Wanderfahrt');
 INSERT INTO "logbook_type" (name) VALUES ('Regatta');
 INSERT INTO "logbook" (boat_id, shipmaster, shipmaster_only_steering, departure) VALUES (2, 2, false, '2142-12-24 10:00');
@@ -28,3 +29,4 @@ INSERT INTO "logbook" (boat_id, shipmaster, shipmaster_only_steering, departure,
 INSERT INTO "logbook" (boat_id, shipmaster, shipmaster_only_steering, departure, arrival, destination, distance_in_km) VALUES (3, 4, false, '2142-12-24 10:00', '2142-12-24 11:30', 'Ottensheim + Regattastrecke', 29);
 INSERT INTO "rower" (logbook_id, rower_id) VALUES(3,3);
 INSERT INTO "boat_damage" (boat_id, desc, user_id_created, created_at) VALUES(4,'Dolle bei Position 2 fehlt', 5, '2142-12-24 15:02');
+INSERT INTO "boat_damage" (boat_id, desc, user_id_created, created_at, lock_boat) VALUES(5, 'TOHT', 5, '2142-12-24 15:02', 1);

src/model/boat.rs

@@ -1,5 +1,5 @@
+use rocket::serde::{Deserialize, Serialize};
 use rocket::FromForm;
-use serde::{Deserialize, Serialize};
 use sqlx::{FromRow, SqlitePool};
 
 #[derive(FromRow, Debug, Serialize, Deserialize)]
@@ -19,6 +19,22 @@ pub struct Boat {
     external: bool,
 }
 
+#[derive(Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum BoatDamage {
+    None,
+    Light,
+    Locked,
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct BoatWithDetails {
+    #[serde(flatten)]
+    boat: Boat,
+    damage: BoatDamage,
+    on_water: bool,
+}
+
 #[derive(FromForm)]
 pub struct BoatToAdd<'r> {
     pub name: &'r str,
@@ -64,6 +80,10 @@ impl Boat {
         sqlx::query!("SELECT * FROM boat_damage WHERE boat_id=? AND lock_boat=true AND user_id_verified is null", self.id).fetch_optional(db).await.unwrap().is_some()
     }
 
+    pub async fn has_minor_damage(&self, db: &SqlitePool) -> bool {
+        sqlx::query!("SELECT * FROM boat_damage WHERE boat_id=? AND lock_boat=false AND user_id_verified is null", self.id).fetch_optional(db).await.unwrap().is_some()
+    }
+
     pub async fn on_water(&self, db: &SqlitePool) -> bool {
         sqlx::query!(
             "SELECT * FROM logbook WHERE boat_id=? AND arrival is null",
@@ -75,8 +95,8 @@ impl Boat {
         .is_some()
     }
 
-    pub async fn all(db: &SqlitePool) -> Vec<Self> {
+    pub async fn all(db: &SqlitePool) -> Vec<BoatWithDetails> {
-        sqlx::query_as!(
+        let boats = sqlx::query_as!(
             Boat,
             "
 SELECT id, name, amount_seats, location_id, owner, year_built, boatbuilder, default_shipmaster_only_steering, skull, external 
@@ -86,7 +106,24 @@ ORDER BY amount_seats DESC
         )
         .fetch_all(db)
         .await
-        .unwrap() //TODO: fixme
+        .unwrap(); //TODO: fixme
+
+        let mut res = Vec::new();
+        for boat in boats {
+            let mut damage = BoatDamage::None;
+            if boat.has_minor_damage(db).await {
+                damage = BoatDamage::Light;
+            }
+            if boat.is_locked(db).await {
+                damage = BoatDamage::Locked;
+            }
+            res.push(BoatWithDetails {
+                damage,
+                on_water: boat.on_water(db).await,
+                boat,
+            })
+        }
+        res
     }
 
     pub async fn create(db: &SqlitePool, boat: BoatToAdd<'_>) -> bool {

src/model/logbook.rs

@@ -1,4 +1,4 @@
-use chrono::NaiveDateTime;
+use chrono::{Local, NaiveDateTime, TimeZone};
 use rocket::FromForm;
 use serde::Serialize;
 use sqlx::{FromRow, Sqlite, SqlitePool, Transaction};
@@ -50,6 +50,8 @@ pub struct LogbookWithBoatAndRowers {
     pub boat: Boat,
     pub shipmaster_user: User,
     pub rowers: Vec<User>,
+    pub departure_timestamp: i64,
+    pub arrival_timestamp: Option<i64>,
 }
 
 pub enum LogbookUpdateError {
@@ -98,11 +100,20 @@ impl Logbook {
 
         let mut ret = Vec::new();
         for log in logs {
+            let date_time_naive =
+                NaiveDateTime::parse_from_str(&log.departure, "%Y-%m-%d %H:%M").unwrap();
+            let date_time = Local
+                .from_local_datetime(&date_time_naive)
+                .single()
+                .unwrap();
+
             ret.push(LogbookWithBoatAndRowers {
                 rowers: Rower::for_log(db, &log).await,
                 boat: Boat::find_by_id(db, log.boat_id as i32).await.unwrap(),
                 shipmaster_user: User::find_by_id(db, log.shipmaster as i32).await.unwrap(),
                 logbook: log,
+                arrival_timestamp: None, //TODO: send arrival timestmap
+                departure_timestamp: date_time.timestamp(),
             });
         }
         ret
@@ -129,6 +140,8 @@ impl Logbook {
                 boat: Boat::find_by_id(db, log.boat_id as i32).await.unwrap(),
                 shipmaster_user: User::find_by_id(db, log.shipmaster as i32).await.unwrap(),
                 logbook: log,
+                arrival_timestamp: None,
+                departure_timestamp: 0,
             });
         }
         ret
@@ -146,7 +159,10 @@ impl Logbook {
         if boat.on_water(db).await {
             return Err(LogbookCreateError::BoatAlreadyOnWater);
         }
-        if (User::find_by_id(db, log.shipmaster as i32).await.unwrap()).on_water(db).await {
+        if (User::find_by_id(db, log.shipmaster as i32).await.unwrap())
+            .on_water(db)
+            .await
+        {
             return Err(LogbookCreateError::ShipmasterAlreadyOnWater);
         }
 
@@ -200,13 +216,17 @@ impl Logbook {
         .await
         .unwrap();
 
-    result.into_iter().filter_map(|r| {
+        result
-        if let (Some(destination), Some(distance_in_km)) = (r.destination, r.distance_in_km) {
+            .into_iter()
+            .filter_map(|r| {
+                if let (Some(destination), Some(distance_in_km)) = (r.destination, r.distance_in_km)
+                {
                     Some((destination, distance_in_km))
                 } else {
                     None
                 }
-    }).collect()
+            })
+            .collect()
     }
 
     async fn remove_rowers(&self, db: &mut Transaction<'_, Sqlite>) {

templates/includes/forms/log.html.tera

@@ -91,9 +91,20 @@
 	  {% if only_ones %}
 	  	{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
 	{% endif %}
-	  	{% for boat in boats %}
+      {% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
-			<div id="boat-{{ boat.id }}" onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()">{{ boat.name }}</div>
+        <div class="pb-2">
+           <div class="bg-gray-100 text-primary-950 text-center text-sm mb-2">
+              <strong>{{ amount_seats }}x</strong>
+            </div>
+            {% for boat in grouped_boats %}
+                <div id="boat-{{ boat.id }}" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %} class="px-3">
+                  <span class="status-damage status-damage-{{ boat.damage }}"></span>
+                  <span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
+                </div>
             {% endfor %}
+          </div>
+        {% endfor %}
+        
 	<script>
           function updateElementsBasedOnSelectedOption() {
             var selectElement = document.getElementById('boat_id');
@@ -140,19 +151,19 @@
           <div class="flex justify-between">
             <div>
               <strong class="text-primary-900">
-                xx:xx Uhr 
+                {{ log.departure_timestamp | date(format="%H:%M") }} Uhr 
               </strong> 
               <small class="text-gray-600">({{ log.boat.name }})</small>
             </div>
             
-            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
+            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
               Details
             </a>
           </div>
         
           <div>
             {% if allowed_to_close and state == "on_water" %}
-            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
+            <a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
               Beenden
             </a>
             {% endif %}
@@ -244,6 +255,8 @@
     </div>
 
     <div class="relative">
+      {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
+      <span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
     </div>
   
     {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}

templates/kiosk.html.tera

@@ -13,20 +13,20 @@
   {% endif %}
 
   <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
-    <div class="bg-white rounded-md hidden md:block">
+    <div class="bg-white rounded-md hidden md:block shadow">
       <h2 class="h2">Boote</h2>
       
-      <div class="p-3">
+      <div>
         {{ log::show_boats(only_ones=false) }}
       </div>
     </div>
-    <div class="md:col-span-3 bg-white rounded-md">
+    <div class="md:col-span-3 bg-white rounded-md shadow">
       <h2 class="h2">Neue Ausfahrt</h2>
       <div class="p-3">
         {{ log::new(only_ones=false, allow_any_shipmaster=true, shipmaster=-1) }}
       </div>
     </div>
-    <div class="bg-white rounded-md">
+    <div class="bg-white rounded-md shadow">
       <h2 class="h2">Am Wasser</h2>
 
       <div>

templates/log.html.tera

@@ -12,20 +12,20 @@
 		<h1 class="h1">Logbuch</h1>
 
   <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
-    <div class="bg-white rounded-md hidden md:block">
+    <div class="bg-white rounded-md hidden md:block shadow">
       <h2 class="h2">Boote</h2>
       
-      <div class="p-3">
+      <div>
         {{ log::show_boats(only_ones=false) }}
       </div>
     </div>
-    <div class="md:col-span-3 bg-white rounded-md">
+    <div class="md:col-span-3 bg-white rounded-md shadow">
       <h2 class="h2">Neue Ausfahrt</h2>
       <div class="p-3">
         {{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }}
       </div>
     </div>
-    <div class="bg-white rounded-md">
+    <div class="bg-white rounded-md shadow">
       <h2 class="h2">Am Wasser</h2>
 
       {% for log in on_water %}