From 4ffcdb3a23cf894cf4247065f32e056822cb2124 Mon Sep 17 00:00:00 2001 From: Borja Robert Date: Mon, 26 Sep 2022 15:02:22 +0200 Subject: [PATCH 1/3] =?UTF-8?q?cambio=20cosas=20menores=20en=20organized?= =?UTF-8?q?=20para=20que=20muestre=20bien=20las=20im=C3=A1genes=20subidas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/form/Organized.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/form/Organized.svelte b/src/lib/form/Organized.svelte index 66c2412..dd6bae6 100644 --- a/src/lib/form/Organized.svelte +++ b/src/lib/form/Organized.svelte @@ -65,7 +65,7 @@ diff --git a/src/lib/form/Organized.svelte b/src/lib/form/Organized.svelte index dd6bae6..683c77e 100644 --- a/src/lib/form/Organized.svelte +++ b/src/lib/form/Organized.svelte @@ -11,9 +11,9 @@ canvas } from '$lib/stores/store'; - let fileinput, avatar; + /** @type {HTMLInputElement} */ let fileinput; - const onFileSelected = (e) => { + const onFileSelected = (/** @type {Event} */ e) => { let image = e.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(image); @@ -22,7 +22,7 @@ }; }; - const removeOrganizer = (index) => { + const removeOrganizer = (/** @type {number} */ index) => { if (index > -1) { $organizedBy.splice(index, 1); $organizedBy = $organizedBy; @@ -89,10 +89,13 @@ .remove { position: absolute; - top: 0px; - right: 0.25rem; + top: -4px; + right: -0.25rem; color: red; cursor: pointer; + background-color: white; + padding: 0 0.25rem; + /* box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); */ } input { display: block; diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte index 211f654..6dd5c4f 100644 --- a/src/lib/preview/Preview.svelte +++ b/src/lib/preview/Preview.svelte @@ -11,9 +11,9 @@ canvas } from '$lib/stores/store'; - let newdate = ''; + /** @type {Object} */ let newdate = {}; - const convertDateTime = (datetime) => { + const convertDateTime = (/** @type {string | undefined} */ datetime) => { if (datetime == undefined) { return { date: '', @@ -41,15 +41,15 @@
{$title}
{$subtitle}
{@html $content}
- {#if newdate}
{newdate.date}
{/if} - {#if newdate}
{newdate.time}
{/if} + {#if newdate.date}
{newdate.date}
{/if} + {#if newdate.time}
{newdate.time}
{/if}
{$address}
{#if $organizedBy[0]}
Organiza:
{#each $organizedBy as organization, i}
- + {organization.text}
{organization.text}
{/each} -- 2.38.5 From f7a493f4b8bc4792fa31146555fb60bc39366749 Mon Sep 17 00:00:00 2001 From: Borja Robert Date: Tue, 27 Sep 2022 10:56:58 +0200 Subject: [PATCH 3/3] =?UTF-8?q?a=C3=B1ade=20colabora=20y=20hace=20que=20la?= =?UTF-8?q?=20exportaci=C3=B3n=20se=20vea=20bien=20en=20chrome?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/form/Colabs.svelte | 110 +++++++++++++++++++++++++++++++++ src/lib/form/Form.svelte | 7 ++- src/lib/form/Organized.svelte | 3 +- src/lib/preview/Preview.svelte | 79 +++++++++++++++++++++-- src/lib/stores/store.js | 2 +- src/routes/todos/+page.svelte | 1 - 6 files changed, 192 insertions(+), 10 deletions(-) create mode 100644 src/lib/form/Colabs.svelte diff --git a/src/lib/form/Colabs.svelte b/src/lib/form/Colabs.svelte new file mode 100644 index 0000000..e1ed355 --- /dev/null +++ b/src/lib/form/Colabs.svelte @@ -0,0 +1,110 @@ + + +
+ {#if $colabs[0]} + {#each $colabs as organization, i} +
+
{ + removecolabs(i); + }} + > + x +
+ + +
+ {/each} + {/if} +
+ + + onFileSelected(e)} + bind:this={fileinput} +/> + + diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte index f619e73..16d5110 100644 --- a/src/lib/form/Form.svelte +++ b/src/lib/form/Form.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; import html2canvas from 'html2canvas'; import Organized from '$lib/form/Organized.svelte'; + import Colabs from './Colabs.svelte'; import { title, heading, @@ -10,7 +11,7 @@ date, address, organizedBy, - collabs, + colabs, canvas } from '$lib/stores/store'; @@ -33,7 +34,7 @@ const downloadCanvas = async () => { if ($canvas !== undefined) { - const res = await html2canvas($canvas); + const res = await html2canvas($canvas, { backgroundColor: '#fffffff' }); const image = await res.toDataURL('image/png'); const link = document.createElement('a'); link.download = 'cartel.png'; @@ -97,6 +98,8 @@
+ +
diff --git a/src/lib/form/Organized.svelte b/src/lib/form/Organized.svelte index 683c77e..896acc5 100644 --- a/src/lib/form/Organized.svelte +++ b/src/lib/form/Organized.svelte @@ -7,7 +7,7 @@ date, address, organizedBy, - collabs, + colabs, canvas } from '$lib/stores/store'; @@ -95,7 +95,6 @@ cursor: pointer; background-color: white; padding: 0 0.25rem; - /* box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); */ } input { display: block; diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte index 6dd5c4f..4176e35 100644 --- a/src/lib/preview/Preview.svelte +++ b/src/lib/preview/Preview.svelte @@ -8,6 +8,7 @@ content, heading, organizedBy, + colabs, canvas } from '$lib/stores/store'; @@ -44,7 +45,29 @@ {#if newdate.date}
{newdate.date}
{/if} {#if newdate.time}
{newdate.time}
{/if}
{$address}
- {#if $organizedBy[0]} + {#if $organizedBy[0] && $colabs[0]} +
+
Organiza:
+
Colabora:
+
+ {#each $organizedBy as organization, i} +
+ {organization.text} +
{organization.text}
+
+ {/each} +
+
+ {#each $colabs as organization, i} +
+ {organization.text} +
{organization.text}
+
+ {/each} +
+
+ {/if} + {#if $organizedBy[0] && !$colabs[0]}
Organiza:
{#each $organizedBy as organization, i} @@ -55,6 +78,17 @@ {/each}
{/if} + {#if $colabs[0] && !$organizedBy[0]} +
Colabora:
+
+ {#each $colabs as organization, i} +
+ {organization.text} +
{organization.text}
+
+ {/each} +
+ {/if}
@@ -77,8 +111,7 @@ background-size: contain; position: relative; padding: 1rem; - box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); - border-radius: 0.5rem; + /* border-radius: 0.5rem; */ } .heading { @@ -204,7 +237,7 @@ max-width: 100%; */ } .organization img { - max-height: 64px; + max-height: 48px; max-width: 100px; margin: 0 auto; opacity: 75%; @@ -216,4 +249,42 @@ font-family: monospace; color: #666; } + + .orgcolab { + position: absolute; + top: 710px; + height: 7rem; + overflow: hidden; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr; + grid-gap: 0.25rem; + justify-content: start; + align-items: center; + width: 100%; + } + + .org { + grid-row: 1/2; + grid-column: 1/2; + font-size: 0.8rem; + } + + .colab { + font-size: 0.8rem; + grid-row: 1/2; + grid-column: 2/3; + } + + .orgmixed { + grid-row: 2/3; + grid-column: 1/2; + display: flex; + } + + .colabmixed { + grid-row: 2/3; + grid-column: 2/3; + display: flex; + } diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js index 0b73f46..cb3a652 100644 --- a/src/lib/stores/store.js +++ b/src/lib/stores/store.js @@ -7,5 +7,5 @@ export const content = writable(""); export const date = writable(""); export const address = writable(""); export const organizedBy = writable([]); -export const collabs = writable([]); +export const colabs = writable([]); export const canvas = writable(); diff --git a/src/routes/todos/+page.svelte b/src/routes/todos/+page.svelte index adcbe22..992427a 100644 --- a/src/routes/todos/+page.svelte +++ b/src/routes/todos/+page.svelte @@ -89,7 +89,6 @@ } input:focus-visible { - box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1); border: 1px solid #ff3e00 !important; outline: none; } -- 2.38.5