Merge pull request #2590 from manuelmeister/feature/story-design

Improve story design
ecamp · Apr 26, 2022 · aa479e0 · aa479e0
2 parents 0ecd428 + b9064dc
commit aa479e0
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 68 deletions.
diff --git 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/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>

diff --git a/frontend/src/components/story/CategoryChip.vue 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
@@ -1,80 +1,86 @@
 <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-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-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'
 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)
@@ -89,9 +95,18 @@ 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;
 }
+
+::v-deep .v-skeleton-loader__list-item-three-line {
+  padding: 0;
+  height: auto;
+}
 </style>
diff --git 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>

diff --git 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"
+      }
+    }
   }
 }
diff --git 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"
     }
   }
-}
+}
diff --git 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"
     }
   }
-}
+}
diff --git 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
@@ -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"
     }
   }
-}
+}
diff --git 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
@@ -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"
     }
   }
-}
+}