From a817dbcacd19ec11e8c7b1d05ec92f2b714fd0f6 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Thu, 14 Apr 2022 17:34:19 +0200
Subject: [PATCH 1/5] Remove unnecessary vertical padding

---
 frontend/src/components/layout/ContentCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/layout/ContentCard.vue b/frontend/src/components/layout/ContentCard.vue
index 4084cfda63..57c928b259 100644
--- a/frontend/src/components/layout/ContentCard.vue
+++ b/frontend/src/components/layout/ContentCard.vue
@@ -5,7 +5,7 @@ Displays the content wrapped inside a card.
 <template>
   <v-card :max-width="maxWidth" width="100%"
           :tile="$vuetify.breakpoint.xsOnly"
-          class="mx-auto py-1">
+          class="mx-auto">
     <v-toolbar v-if="back || $vuetify.breakpoint.xsOnly || toolbar" class="ec-content-card__toolbar"
                elevation="0"
                dense>

From 49a82d475ed08d973c2caf135486d3291a5ace44 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Thu, 14 Apr 2022 18:30:34 +0200
Subject: [PATCH 2/5] Change languages for story context

---
 frontend/src/locales/de-CH-scout.json | 16 ++++++++++++++++
 frontend/src/locales/de.json          |  8 ++++----
 frontend/src/locales/en.json          | 11 ++++++++---
 frontend/src/locales/fr-CH-scout.json | 12 ++++++++++++
 frontend/src/locales/fr.json          |  6 +++---
 frontend/src/locales/it-CH-scout.json | 12 ++++++++++++
 frontend/src/locales/it.json          |  8 ++++----
 7 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/frontend/src/locales/de-CH-scout.json b/frontend/src/locales/de-CH-scout.json
index 243c4b827b..9db54b74f7 100644
--- a/frontend/src/locales/de-CH-scout.json
+++ b/frontend/src/locales/de-CH-scout.json
@@ -8,5 +8,21 @@
   },
   "global": {
     "language": "Deutsch (Pfadi)"
+  },
+  "contentNode": {
+    "storycontext": {
+      "add": "Roten Faden hinzufügen",
+      "name": "Roter Faden"
+    }
+  },
+  "views": {
+    "camp": {
+      "navigationCamp": {
+        "story": "RF"
+      },
+      "story": {
+        "title": "Roter Faden"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 09eaa46196..a33d03a413 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -54,8 +54,8 @@
       "name": "Programmabschnitt"
     },
     "storycontext": {
-      "add": "Roten Faden hinzufügen",
-      "name": "Roter Faden"
+      "add": "Geschichte hinzufügen",
+      "name": "Geschichte"
     }
   },
   "components": {
@@ -334,7 +334,7 @@
         "title": "Lagerabschnitt"
       },
       "story": {
-        "title": "Roter Faden"
+        "title": "Geschichte"
       },
       "material": {
         "groupByList": "Nach Materialliste gruppieren"
@@ -371,4 +371,4 @@
       "profile": "Profil"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 63ef01cc6b..88b7b32a59 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -69,7 +69,7 @@
     "storycontext": {
       "add": "Add story context",
       "icon": "mdi-book-open-variant",
-      "name": "Story concept"
+      "name": "Story"
     },
     "material": {
       "icon": "mdi-package-variant",
@@ -224,6 +224,9 @@
       },
       "dialogPeriodCreate": {
         "title": "Create period"
+      },
+      "dialogPeriodEdit": {
+        "moveScheduleEntries": "Move schedule entries"
       }
     },
     "invitation": {
@@ -295,7 +298,9 @@
       "saving": "Saving",
       "submit": "Submit",
       "tryagain": "Try again",
-      "update": "Update"
+      "update": "Update",
+      "close": "Close",
+      "search": "Search"
     },
     "changeLanguage": "Change language",
     "empty": {
@@ -468,4 +473,4 @@
       "profile": "Profile"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/locales/fr-CH-scout.json b/frontend/src/locales/fr-CH-scout.json
index 0889ce92f8..da31cdd47f 100644
--- a/frontend/src/locales/fr-CH-scout.json
+++ b/frontend/src/locales/fr-CH-scout.json
@@ -8,5 +8,17 @@
   },
   "global": {
     "language": "Français (Scout)"
+  },
+  "contentNode": {
+    "storycontext": {
+      "name": "Fil rouge"
+    }
+  },
+  "views": {
+    "camp": {
+      "story": {
+        "title": "Fil rouge"
+      }
+    }
   }
 }
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index b783de262a..aa3db38b90 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -55,7 +55,7 @@
     },
     "storycontext": {
       "add": "Ajouter du fil rouge",
-      "name": "Fil rouge"
+      "name": "Histoire"
     }
   },
   "components": {
@@ -254,7 +254,7 @@
       "story": {
         "editModeOff": "Modification désactivée",
         "editModeOn": "Modification activée",
-        "title": "Action"
+        "title": "Histoire"
       }
     },
     "campCreate": {
@@ -283,4 +283,4 @@
       "profile": "Profil"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/locales/it-CH-scout.json b/frontend/src/locales/it-CH-scout.json
index 7fa1d7e519..73da28ec15 100644
--- a/frontend/src/locales/it-CH-scout.json
+++ b/frontend/src/locales/it-CH-scout.json
@@ -8,5 +8,17 @@
   },
   "global": {
     "language": "Italiano (Scout)"
+  },
+  "contentNode": {
+    "storycontext": {
+      "name": "Filo rosso"
+    }
+  },
+  "views": {
+    "camp": {
+      "story": {
+        "title": "Filo rosso"
+      }
+    }
   }
 }
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index ed45b6a043..3806360e4a 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -55,7 +55,7 @@
     },
     "storycontext": {
       "add": "Aggiungi filo conduttore",
-      "name": "Filo conduttore"
+      "name": "Storia"
     }
   },
   "components": {
@@ -244,7 +244,7 @@
         "campIsLoading": "Il campo sta caricando",
         "material": "Materiale",
         "print": "Stampa",
-        "story": "filo conduttore",
+        "story": "Storia",
         "tasks": "Compiti",
         "team": "Team"
       },
@@ -254,7 +254,7 @@
       "story": {
         "editModeOff": "Modifica disattivata",
         "editModeOn": "Modifica in corso",
-        "title": "Azione"
+        "title": "Storia"
       }
     },
     "campCreate": {
@@ -283,4 +283,4 @@
       "profile": "Profilo"
     }
   }
-}
\ No newline at end of file
+}

From 6a4497dd0105bfff2bb8eaaff1b7bce4e5a05aa4 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Thu, 14 Apr 2022 18:31:34 +0200
Subject: [PATCH 3/5] Add some defaults for better readability

---
 .../components/form/tiptap/TiptapEditor.vue   |  5 ++++-
 frontend/src/scss/global.scss                 | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/form/tiptap/TiptapEditor.vue b/frontend/src/components/form/tiptap/TiptapEditor.vue
index a8fb6203d9..5e7c4b552e 100644
--- a/frontend/src/components/form/tiptap/TiptapEditor.vue
+++ b/frontend/src/components/form/tiptap/TiptapEditor.vue
@@ -189,9 +189,12 @@ div.editor >>> .editor__content .ProseMirror {
   box-shadow: none !important;
   outline: none;
   color: rgba(0, 0, 0, 0.87);
-  line-height: normal !important;
+  line-height: 1.5;
 }
 
+div.editor >>> .editor__content .ProseMirror p {
+  letter-spacing: -0.011em;
+}
 div.editor >>> .editor__content .ProseMirror p,
 div.editor >>> .editor__content .ProseMirror ol,
 div.editor >>> .editor__content .ProseMirror ul {
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 2c25cb7f84..77c0ee8bdf 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -39,10 +39,23 @@ body {font-feature-settings: "ss03", "calt", "rlig", "kern", "cv05", "cv07", "cv
 .w-100 {
 	width: 100%;
 }
-.v-application ul.v-list {
-	padding-left: 0;
-}
+.v-application {
+	ul.v-list {
+		padding-left: 0;
+	}
+
+	.e-title-link {
+		color: #000;
+		text-decoration-color: #1976d2;
 
+		&:hover {
+			text-decoration-thickness: 2px;
+		}
+	}
+}
+.tabular-nums {
+	font-variant-numeric: tabular-nums;
+}
 .e-form-container + .e-form-container {
 	margin-top: 12px;
 }

From 75031ef78c9e04d3b720a95e94a8fad40eb42607 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Thu, 14 Apr 2022 18:37:21 +0200
Subject: [PATCH 4/5] Improve styling of story overview

---
 .../src/components/story/CategoryChip.vue     | 30 +++++++++
 frontend/src/components/story/StoryDay.vue    | 62 +++++++++----------
 frontend/src/components/story/StoryPeriod.vue |  6 +-
 3 files changed, 63 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/story/CategoryChip.vue

diff --git a/frontend/src/components/story/CategoryChip.vue b/frontend/src/components/story/CategoryChip.vue
new file mode 100644
index 0000000000..457c4ad187
--- /dev/null
+++ b/frontend/src/components/story/CategoryChip.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-chip v-if="!category()._meta.loading"
+          :color="category().color"
+          class="e-category-chip tabular-nums"
+          dark
+          small>
+    {{ category().short }}
+  </v-chip>
+</template>
+<script>
+export default {
+  name: 'CategoryChip',
+  props: {
+    category: {
+      type: Function,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.e-category-chip {
+  height: 20px;
+  padding-left: 7px;
+  padding-right: 7px;
+  min-width: 28px;
+  justify-content: center;
+}
+</style>
diff --git a/frontend/src/components/story/StoryDay.vue b/frontend/src/components/story/StoryDay.vue
index ae5f5b5f53..9d0146eee3 100644
--- a/frontend/src/components/story/StoryDay.vue
+++ b/frontend/src/components/story/StoryDay.vue
@@ -1,52 +1,46 @@
 <template>
-  <v-expansion-panel-content class="e-story-day">
+  <div class="e-story-day contents">
     <h3 class="body-2 grey--text text--darken-2 e-story-day-title">
       {{ dateLong(day.start) }}
     </h3>
     <template v-if="entriesWithStory.length">
       <template v-for="{ scheduleEntry, storyChapters } in entriesWithStory">
         <div v-for="chapter in storyChapters" :key="chapter._meta.uri">
-          <h4 class="mt-1 mb-2">
-            <div class="d-flex">
-              {{ scheduleEntry.number }}
-              <v-chip v-if="!scheduleEntry.activity().category()._meta.loading"
-                      small
-                      dark
-                      class="mx-1"
-                      :color="scheduleEntry.activity().category().color">
-                {{ scheduleEntry.activity().category().short }}
-              </v-chip>
-              {{ scheduleEntry.activity().title }}
+          <h4 class="mt-2 mt-sm-3">
+            <span class="d-inline-flex align-center">
+              <span class="tabular-nums">{{ scheduleEntry.number }}</span>
+              <CategoryChip :category="scheduleEntry.activity().category" class="mx-1" />
+            </span>
+            <router-link
+              :to="{ name: 'activity', params: { campId: day.period().camp().id, scheduleEntryId: scheduleEntry.id } }"
+              class="e-title-link">
+              <span>{{ scheduleEntry.activity().title }}</span>
               <template v-if="chapter.instanceName">
                 - {{ chapter.instanceName }}
               </template>
-              <v-spacer />
-              <router-link :to="{ name: 'activity', params: { campId: day.period().camp().id, scheduleEntryId: scheduleEntry.id } }">
-                <v-icon small>mdi-open-in-new</v-icon>
-              </router-link>
-            </div>
+            </router-link>
           </h4>
-          <api-form v-show="editing"
-                    :entity="chapter">
-            <api-textarea
-              fieldname="text"
-              label=""
-              auto-grow
-              :outlined="false"
-              :solo="false"
-              dense />
+          <api-form v-show="editing" :entity="chapter">
+            <api-textarea :outlined="false"
+                          :solo="false"
+                          auto-grow
+                          dense
+                          fieldname="text"
+                          aria-label="Erfassen"
+                          label="" />
           </api-form>
           <tiptap-editor v-show="!editing"
-                         :value="chapter.text"
+                         :class="{'readonly': !editing}"
                          :editable="false"
-                         class="mt-1 v-input" />
+                         :value="chapter.text"
+                         class="v-input mb-1" />
         </div>
       </template>
     </template>
-    <div v-else class="grey--text">
+    <p v-else>
       {{ $tc('components.story.storyDay.noStory') }}
-    </div>
-  </v-expansion-panel-content>
+    </p>
+  </div>
 </template>
 <script>
 import { sortBy } from 'lodash'
@@ -89,7 +83,11 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.readonly ::v-deep .ProseMirror-trailingBreak {
+  display: none;
+}
+
 .e-story-day + .e-story-day .e-story-day-title {
   border-top: 1px solid #eee;
   padding-top: 5px;
diff --git a/frontend/src/components/story/StoryPeriod.vue b/frontend/src/components/story/StoryPeriod.vue
index 7cdd2c1d4b..46b8f30d04 100644
--- a/frontend/src/components/story/StoryPeriod.vue
+++ b/frontend/src/components/story/StoryPeriod.vue
@@ -3,9 +3,9 @@
     <v-expansion-panel-header>
       <h3>{{ period.description }}</h3>
     </v-expansion-panel-header>
-    <story-day v-for="day in period.days().items" :key="day._meta.self"
-               :day="day"
-               :editing="editing" />
+    <v-expansion-panel-content v-for="day in period.days().items" :key="day._meta.self" class="e-story-day">
+      <story-day :day="day" :editing="editing" />
+    </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
 <script>

From b9064dcd5a181115f3535cf076c40f0a17bbcc0e Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Thu, 14 Apr 2022 18:40:12 +0200
Subject: [PATCH 5/5] Improve loading of story overview

Don't show an accordion if there is only one period
---
 frontend/src/components/story/StoryDay.vue | 29 +++++++++++++++++-----
 frontend/src/views/camp/Story.vue          | 25 +++++++++++++------
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/story/StoryDay.vue b/frontend/src/components/story/StoryDay.vue
index 9d0146eee3..41dad3157b 100644
--- a/frontend/src/components/story/StoryDay.vue
+++ b/frontend/src/components/story/StoryDay.vue
@@ -3,7 +3,10 @@
     <h3 class="body-2 grey--text text--darken-2 e-story-day-title">
       {{ dateLong(day.start) }}
     </h3>
-    <template v-if="entriesWithStory.length">
+    <template v-if="loading">
+      <v-skeleton-loader class="mt-2 mt-sm-3" type="list-item-three-line" />
+    </template>
+    <template v-else-if="entriesWithStory.length">
       <template v-for="{ scheduleEntry, storyChapters } in entriesWithStory">
         <div v-for="chapter in storyChapters" :key="chapter._meta.uri">
           <h4 class="mt-2 mt-sm-3">
@@ -48,27 +51,36 @@ import ApiForm from '@/components/form/api/ApiForm.vue'
 import ApiTextarea from '@/components/form/api/ApiTextarea.vue'
 import TiptapEditor from '@/components/form/tiptap/TiptapEditor.vue'
 import { dateLong } from '@/common/helpers/dateHelperUTCFormatted.js'
+import CategoryChip from '@/components/story/CategoryChip.vue'
 
 export default {
   name: 'StoryDay',
-  components: { TiptapEditor, ApiForm, ApiTextarea },
+  components: {
+    CategoryChip,
+    TiptapEditor,
+    ApiForm,
+    ApiTextarea
+  },
   props: {
     day: { type: Object, required: true },
     editing: { type: Boolean, default: false }
   },
   computed: {
+    loading () {
+      return this.day.scheduleEntries()._meta.loading || this.sortedScheduleEntries.some(entry => entry.activity().contentNodes()._meta.loading)
+    },
     sortedScheduleEntries () {
       return sortBy(this.day.scheduleEntries().items, scheduleEntry => scheduleEntry.start)
     },
     entries () {
-      return this.sortedScheduleEntries.map(scheduleEntry => {
-        return {
+      return this.sortedScheduleEntries.map(scheduleEntry =>
+        ({
           scheduleEntry: scheduleEntry,
           storyChapters: (scheduleEntry.activity().contentNodes() || { items: [] })
             .items
             .filter(contentNode => contentNode.contentTypeName === 'Storycontext')
-        }
-      })
+        })
+      )
     },
     entriesWithStory () {
       return this.entries.filter(({ storyChapters }) => storyChapters.length)
@@ -92,4 +104,9 @@ export default {
   border-top: 1px solid #eee;
   padding-top: 5px;
 }
+
+::v-deep .v-skeleton-loader__list-item-three-line {
+  padding: 0;
+  height: auto;
+}
 </style>
diff --git a/frontend/src/views/camp/Story.vue b/frontend/src/views/camp/Story.vue
index ac214aa87c..e27c7f36ac 100644
--- a/frontend/src/views/camp/Story.vue
+++ b/frontend/src/views/camp/Story.vue
@@ -6,16 +6,16 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
   <content-card :title="$tc('views.camp.story.title')" toolbar>
     <template #title-actions>
       <template v-if="$vuetify.breakpoint.smAndUp">
-        <e-switch v-model="editing" :label="$tc('global.button.editable')"
+        <e-switch v-model="editing" :disabled="!isContributor"
+                  :label="$tc('global.button.editable')"
                   class="ec-story-editable ml-auto"
-                  :disabled="!isContributor"
                   @click="$event.preventDefault()" />
       </template>
       <v-menu v-else offset-y>
         <template #activator="{ on, attrs }">
           <v-btn
-            text icon
             class="ml-auto"
+            text icon
             v-bind="attrs"
             v-on="on">
             <v-icon>mdi-dots-vertical</v-icon>
@@ -38,18 +38,25 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
         </v-list>
       </v-menu>
     </template>
-    <v-expansion-panels v-model="openPeriods" multiple
-                        flat accordion>
+    <v-expansion-panels v-if="camp().periods().items.length > 1" v-model="openPeriods"
+                        accordion
+                        flat multiple>
       <story-period v-for="period in camp().periods().items"
                     :key="period._meta.self"
-                    :period="period"
-                    :editing="editing" />
+                    :editing="editing"
+                    :period="period" />
     </v-expansion-panels>
+    <div v-else-if="camp().periods().items.length === 1" class="px-4">
+      <story-day v-for="day in camp().periods().items[0].days().items" :key="day._meta.self"
+                 :day="day"
+                 :editing="editing"
+                 class="my-4" />
+    </div>
     <v-card-actions v-if="$vuetify.breakpoint.smAndUp">
       <v-btn
+        :href="previewUrl"
         class="ml-auto"
         color="primary"
-        :href="previewUrl"
         target="_blank">
         <v-icon left>mdi-printer</v-icon>
         {{ $tc('views.camp.print.title') }}
@@ -62,12 +69,14 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
 import ContentCard from '@/components/layout/ContentCard.vue'
 import StoryPeriod from '@/components/story/StoryPeriod.vue'
 import { campRoleMixin } from '@/mixins/campRoleMixin'
+import StoryDay from '@/components/story/StoryDay.vue'
 
 const PRINT_SERVER = window.environment.PRINT_SERVER
 
 export default {
   name: 'Story',
   components: {
+    StoryDay,
     StoryPeriod,
     ContentCard
   },