From a5c248932acdb63ac5aaad7a24069f8d07cfd8ff Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 16 Jul 2024 15:44:37 -0400
Subject: [PATCH] fixed card layout

---
 README.md                                     | 31 ++++++++++++++++++-
 .../src/lib/components/AdventureCard.svelte   | 22 +++++++------
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 704cda8..a4c61ed 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ _**⚠️ AdventureLog is in early development and is not recommended for produc
 
 # Docker 🐋
 
-Docker is the perffered way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
+Docker is the preferred way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
 **Note**: This guide mainly focuses on installation with a linux based host machine, but the steps are similar for other operating systems.
 
 ## Prerequisites
@@ -53,6 +53,35 @@ Here is a summary of the configuration options available in the `docker-compose.
 | `PUBLIC_URL`            | Yes      | This is the publically accessible url to the **nginx** container. You should be able to acess nginx from this url where you access your app. | http://127.0.0.1:81  |
 | `CSRF_TRUSTED_ORIGINS`  | Yes      | Need to be changed to the orgins where you use your backend server and frontend. These values are comma seperated.                           | Needs to be changed. |
 
+### Proxy Container (nginx) Configuration
+
+In order to use media files in a production environment, you need to configure the `nginx` container to serve the media files. The container is already in the docker compose file but you need to do a few things to make it work.
+
+1. Create a directory called `proxy` in the same directory as the `docker-compose.yml` file.
+2. Create a file called `nginx.conf` in the `proxy` directory.
+3. Add the following configuration to the `nginx.conf` file:
+
+```nginx
+server {
+    listen 80;
+    server_name localhost;
+
+    location /media/ {
+        alias /app/media/;
+    }
+}
+```
+
+## Running the Containers
+
+To start the containers, run the following command:
+
+```bash
+docker compose up -d
+```
+
+Enjoy AdventureLog! 🎉
+
 # About AdventureLog
 
 AdventureLog is a Svelte Kit and Django application that utilizes a PostgreSQL database. Users can log the adventures they have experienced, as well as plan future ones. Key features include:
diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index aefb15c..8535a0c 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -125,16 +125,18 @@
 	</figure>
 
 	<div class="card-body">
-		<h2 class="card-title break-words text-wrap">
-			{adventure.name}
-		</h2>
-		<div>
-			{#if adventure.type == 'visited'}
-				<div class="badge badge-primary">Visited</div>
-			{:else}
-				<div class="badge badge-secondary">Planned</div>
-			{/if}
-			<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
+		<div class="flex justify-between">
+			<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
+				{adventure.name}
+			</h2>
+			<div>
+				{#if adventure.type == 'visited'}
+					<div class="badge badge-primary">Visited</div>
+				{:else}
+					<div class="badge badge-secondary">Planned</div>
+				{/if}
+				<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
+			</div>
 		</div>
 		{#if adventure.location && adventure.location !== ''}
 			<div class="inline-flex items-center">