From 17a0dc410bd577583525b6a2e3a227113edb59b3 Mon Sep 17 00:00:00 2001
From: km0 <luzzanafrancesco@gmail.com>
Date: Sun, 21 May 2023 23:35:35 +0200
Subject: [PATCH] print mode

---
 src/App.vue                   | 32 ++++++++++++++++++++++++++++----
 src/components/AddShot.vue    |  6 +++---
 src/components/SceneEntry.vue | 17 +++++++++++++----
 src/components/ShotEntry.vue  |  3 +--
 src/style.css                 | 18 ++++++++++++++++++
 5 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c428bec..a639ae9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,13 +2,17 @@
 
     <header>
     <h1>Story Baobab</h1>
+    <div class="intro">
+        Drag and drop images and video to sketch a print-friendly storyboard.
+    </div>
     </header>
 
     <main>
         
-
-        <input v-model="title">
-        <button @click="add">New Scene</button>
+    <div class="insert-scene">
+        <input v-model="title" placeholder="Title">
+        <button @click="add">Add Scene</button>
+    </div>
         
         <SceneEntry v-for="scene in scenes" :title="scene"/>
 
@@ -29,16 +33,36 @@ const add = () => {
 
 </script>
 
-<style scoped>
+<style>
 
 header {
     margin: 32px;
 }
 
+header h1 {
+    margin: 0;
+}
+
 main {
     margin: 32px;
 }
 
+.insert-scene {
+    display: inline-flex;
+    gap: 8px;
+    padding: 16px;
+    background-color: #F3F3F3;
+}
+
+@media print {
+
+    header, .insert-scene, .add-shot {
+        display: none
+    }
+
+
+
+}
 
 
 </style>
diff --git a/src/components/AddShot.vue b/src/components/AddShot.vue
index 314a2a4..e3e47b5 100644
--- a/src/components/AddShot.vue
+++ b/src/components/AddShot.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="add-scene">
+    <div class="add-shot">
         <FileLoader class="cover" @upload="getImg" @filename="setTitle" :key="key"></FileLoader>
         <div class="meta">
             <input v-model="title" placeholder="Title">
@@ -44,14 +44,14 @@
 </script>
 <style>
 
-.add-scene {
+.add-shot{
     position: relative;
     display: inline-flex;
     flex-direction: column;
     gap: 8px;
 }
 
-.add-scene .cover {
+.add-shot .cover {
     width: 320px;
     height: 180px;
     object-fit: cover;
diff --git a/src/components/SceneEntry.vue b/src/components/SceneEntry.vue
index 7d4a511..9264d89 100644
--- a/src/components/SceneEntry.vue
+++ b/src/components/SceneEntry.vue
@@ -1,11 +1,7 @@
 <template>
-
     <section class="scene">
 
-
     <h2>{{title}}</h2>
-
-    
     
     <draggable
         tag="transition-group"
@@ -96,6 +92,19 @@ const remove = (index) => {
 
 .scene h2 {
     margin-block: 32px;
+    }
+
+@media print {
+
+
+    .shots {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+
+
+
 }
 
 </style>
diff --git a/src/components/ShotEntry.vue b/src/components/ShotEntry.vue
index 379fa60..6e89633 100644
--- a/src/components/ShotEntry.vue
+++ b/src/components/ShotEntry.vue
@@ -4,7 +4,7 @@
         <img :src="img">
         <div class="meta">
             <span class="order">{{order}}</span>
-            <h3 class="title">{{title}}</h3>
+            <h3 class="title" >{{title}}</h3>
             <p class="description">{{description}}</p>
         </div>
     </div>
@@ -13,7 +13,6 @@
 </template>
 <script setup>
 
-
     const props = defineProps(['title', 'description', 'img', 'order'])
     const emit = defineEmits(['remove'])
 
diff --git a/src/style.css b/src/style.css
index 4574585..dac2ea1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -10,4 +10,22 @@ body {
     font-family: sans-serif;
     font-size: 16px;
     line-height: 1.6;
+    color: #393939;
 }
+
+button, input {
+    background-color: #ffffff;
+    border: 1px solid currentColor;
+    padding: 4px 8px;
+}
+
+button {
+    cursor: pointer;
+}
+
+button:hover {
+    color: #ffffff;
+    background-color: #393939;
+}
+
+