Al final es adaptar estilos (#4)

Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #4

src/lib/form/Form.svelte

@@ -9,9 +9,8 @@
 		subtitle,
 		content,
 		date,
+		weekday,
 		address,
-		organizedBy,
-		colabs,
 		canvas
 	} from '$lib/stores/store';
 
@@ -65,8 +64,13 @@
 
 <form on:submit|preventDefault={handleSubmit}>
 	<div class="form-group">
-		<label for="heading">Antetítulo</label>
-		<input bind:value={$heading} type="text" name="heading" placeholder="Antetítulo" />
+		<label for="heading">Tipo de actividad</label>
+		<input
+			bind:value={$heading}
+			type="text"
+			name="heading"
+			placeholder="Ej: Taller, charla, coloquio, debate, curso"
+		/>
 	</div>
 
 	<div clasS="form-group">
@@ -90,12 +94,17 @@
 			<input bind:value={$date} type="datetime-local" name="date" />
 		</div>
 
+		<div class="form-group">
+			<label for="weekday">Día de la semana</label>
+			<input bind:value={$weekday} type="text" name="weekday" />
+		</div>
+
 		<div class="form-group">
 			<label for="address">Dirección</label>
 			<input bind:value={$address} type="text" name="address" />
 		</div>
 	</div>
-	<div class="form-group">
+	<div class="form-group media">
 		<label for="organizedBy">Organiza:</label>
 		<Organized />
 		<label for="colabs">Colabora:</label>
@@ -106,7 +115,7 @@
 
 <style>
 	.form-group {
-		margin: 2rem 0;
+		margin: 1rem 0;
 	}
 
 	form {
@@ -117,16 +126,16 @@
 	input {
 		display: block;
 		width: 100%;
-		font-size: 1rem;
-		font-family: monospace;
-		padding: 0.5rem;
+		font-size: 0.8rem;
+		font-family: sans-serif;
+		padding: 0.45rem;
 	}
 
 	label {
 		display: block;
-		font-size: 1rem;
+		font-size: 0.8rem;
 		font-family: monospace;
-		margin: 0.5rem 0;
+		margin: 0.25rem 0;
 	}
 
 	#editor {

src/lib/monthName.js

@@ -0,0 +1,45 @@
+/** @return {string} */
+export const getMonthName = (/** @type {string} */ month) => {
+  let res
+  switch (month) {
+    case "01":
+      res = "enero";
+      break;
+    case "02":
+      res = "febrero";
+      break;
+    case "03":
+      res = "marzo";
+      break;
+    case "04":
+      res = "abril";
+      break;
+    case "05":
+      res = "mayo";
+      break;
+    case "06":
+      res = "junio";
+      break;
+    case "07":
+      res = "julio";
+      break;
+    case "08":
+      res = "agosto";
+      break;
+    case "09":
+      res = "septiembre";
+      break;
+    case "10":
+      res = "octubre";
+      break;
+    case "11":
+      res = "noviembre";
+      break;
+    case "12":
+      res = "diciembre";
+      break;
+    default:
+      res = "";
+  }
+  return res;
+}

src/lib/preview/Preview.svelte

@@ -1,9 +1,9 @@
 <script>
-	import html2canvas from 'html2canvas';
 	import {
 		title,
 		subtitle,
 		date,
+		weekday,
 		address,
 		content,
 		heading,
@@ -11,6 +11,7 @@
 		colabs,
 		canvas
 	} from '$lib/stores/store';
+	import { getMonthName } from '$lib/monthName';
 
 	/** @type {Object<string,string>} */ let newdate = {};
 
@@ -22,11 +23,12 @@
 			};
 		}
 		const year = datetime.split('-')[0];
-		const month = datetime.split('-')[1];
+		const monthNumber = datetime.split('-')[1];
 		const day = datetime.split('-')[2].split('T')[0];
 		const time = datetime.split('T')[1];
+		const month = getMonthName(monthNumber);
 		return {
-			date: `${day}/${month}`,
+			date: `${day} de ${month}`,
 			time: time
 		};
 	};
@@ -42,6 +44,7 @@
 		<div class="title">{$title}</div>
 		<div class="subtitle">{$subtitle}</div>
 		<div class="content">{@html $content}</div>
+		<div class="weekday">{$weekday}</div>
 		{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
 		{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
 		<div class="address">{$address}</div>
@@ -141,7 +144,7 @@
 		overflow: hidden;
 		display: flex;
 		justify-content: center;
-		align-items: center;
+		align-items: end;
 		text-align: center;
 	}
 	.subtitle {
@@ -155,7 +158,7 @@
 		height: 2.6rem;
 		overflow: hidden;
 		text-align: center;
-		align-items: center;
+		align-items: start;
 		justify-content: center;
 	}
 
@@ -169,29 +172,48 @@
 		line-height: 1.5rem;
 		height: 9rem;
 		overflow: hidden;
+		align-self: center;
+	}
+
+	.weekday {
+		position: absolute;
+		text-transform: uppercase;
+		top: 605px;
+		left: 22rem;
+		right: 5rem;
+		color: white;
+		max-height: 2rem;
+		font-size: 1.3rem;
+		font-weight: 700;
+		overflow: hidden;
+		text-align: center;
 	}
 
 	.date {
 		position: absolute;
-		top: 600px;
-		left: 23rem;
-		right: 6rem;
-		font-size: 2rem;
+		text-transform: uppercase;
+		top: 630px;
+		left: 22rem;
+		right: 4rem;
+		font-size: 1.1rem;
+		/* font-weight: 700; */
 		color: white;
 		max-height: 2rem;
 		overflow: hidden;
+		text-align: center;
 	}
 
 	.time {
 		position: absolute;
-		top: 640px;
-		left: 23rem;
-		right: 6rem;
+		top: 650px;
+		left: 22rem;
+		right: 5rem;
 		font-size: 1.8rem;
 		color: white;
-		text-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
 		max-height: 2rem;
 		overflow: hidden;
+		text-align: center;
+		font-weight: 700;
 	}
 
 	.address {

src/lib/stores/store.js

@@ -5,6 +5,7 @@ export const heading = writable("");
 export const subtitle = writable("");
 export const content = writable("");
 export const date = writable("");
+export const weekday = writable("");
 export const address = writable("");
 export const organizedBy = writable([]);
 export const colabs = writable([]);

src/routes/about/+page.js

@@ -1,9 +0,0 @@
-import { dev } from '$app/environment';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement...
-export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in prod
-export const prerender = true;

src/routes/about/+page.svelte

@@ -1,34 +0,0 @@
-<svelte:head>
-	<title>About</title>
-	<meta name="description" content="About this app" />
-</svelte:head>
-
-<div class="content">
-	<h1>About this app</h1>
-
-	<p>
-		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-		following into your command line and following the prompts:
-	</p>
-
-	<pre>npm create svelte@latest</pre>
-
-	<p>
-		The page you're looking at is purely static HTML, with no client-side interactivity needed.
-		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
-		the devtools network panel and reloading.
-	</p>
-
-	<p>
-		The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
-		it with JavaScript disabled!
-	</p>
-</div>
-
-<style>
-	.content {
-		width: 100%;
-		max-width: var(--column-width);
-		margin: var(--column-margin-top) auto 0 auto;
-	}
-</style>

src/routes/verde/+page.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>