Implement paper and widescreen display size for activity

frontend/src/components/activity/ScheduleEntry.vue

@@ -4,9 +4,11 @@ Displays a single scheduleEntry
 
 <template>
   <content-card
+    class="ec-schedule-entry"
     toolbar
     back
     :loaded="!scheduleEntry()._meta.loading && !activity.camp()._meta.loading"
+    :max-width="isPaperDisplaySize ? '944px' : ''"
   >
     <template #title>
       <v-toolbar-title class="font-weight-bold">
@@ -91,6 +93,32 @@ Displays a single scheduleEntry
         <template v-else>{{ $tc('global.button.back') }}</template>
       </v-btn>
 
+      <v-tooltip bottom>
+        <template #activator="{ on }">
+          <v-btn
+            text
+            icon
+            class="d-none d-md-block"
+            :aria-label="
+              isPaperDisplaySize
+                ? $tc('components.activity.scheduleEntry.switchToFullSize')
+                : $tc('components.activity.scheduleEntry.switchToPaperSize')
+            "
+            @click="toggleDisplaySize"
+            v-on="on"
+          >
+            <v-icon v-if="isPaperDisplaySize" class="resize-icon"
+              >$vuetify.icons.bigScreen</v-icon
+            >
+            <v-icon v-else class="resize-icon">$vuetify.icons.paperSize</v-icon>
+          </v-btn>
+        </template>
+        {{
+          isPaperDisplaySize
+            ? $tc('components.activity.scheduleEntry.switchToFullSize')
+            : $tc('components.activity.scheduleEntry.switchToPaperSize')
+        }}
+      </v-tooltip>
       <!-- hamburger menu -->
       <v-menu v-if="!layoutMode" offset-y>
         <template #activator="{ on, attrs }">
@@ -268,6 +296,7 @@ export default {
       editActivityTitle: false,
       categoryChangeState: null,
       loading: true,
+      isPaperDisplaySize: true,
     }
   },
   computed: {
@@ -316,6 +345,8 @@ export default {
 
   // reload data every time user navigates to Activity view
   async mounted() {
+    this.isPaperDisplaySize =
+      localStorage.getItem('activityIsPaperDisplaySize') !== 'false'
     this.loading = true
     await this.scheduleEntry().activity()._meta.load // wait if activity is being loaded as part of a collection
     this.loading = false
@@ -352,6 +383,10 @@ export default {
       // redirect to Picasso
       this.$router.push(periodRoute(this.scheduleEntry().period()))
     },
+    toggleDisplaySize() {
+      this.isPaperDisplaySize = !this.isPaperDisplaySize
+      localStorage.setItem('activityIsPaperDisplaySize', this.isPaperDisplaySize)
+    },
   },
 }
 </script>
@@ -366,4 +401,13 @@ export default {
 .e-category-chip-save-icon {
   font-size: 18px;
 }
+
+.ec-schedule-entry {
+  transition: max-width 0.7s ease;
+}
+
+.resize-icon,
+.resize-icon :deep(svg) {
+  width: 28px !important;
+}
 </style>

frontend/src/locales/de.json

@@ -23,7 +23,9 @@
       "scheduleEntry": {
         "backToContents": "Zurück zum Bearbeiten des Inhalts",
         "changeLayout": "Layout ändern",
-        "deleteWarning": "Möchtest du diese Aktivität wirklich löschen? Der komplette Inhalt dieser Aktivität wird gelöscht."
+        "deleteWarning": "Möchtest du diese Aktivität wirklich löschen? Der komplette Inhalt dieser Aktivität wird gelöscht.",
+        "switchToFullSize": "Zum Breitformat umschalten",
+        "switchToPaperSize": "Zum Papierformat umschalten"
       }
     },
     "camp": {

frontend/src/locales/en.json

@@ -23,7 +23,9 @@
       "scheduleEntry": {
         "backToContents": "Back to editing content",
         "changeLayout": "Change layout",
-        "deleteWarning": "Do you really want to delete this activity? All content of this activity will be removed."
+        "deleteWarning": "Do you really want to delete this activity? All content of this activity will be removed.",
+        "switchToFullSize": "Switch to full size",
+        "switchToPaperSize": "Switch to paper size"
       }
     },
     "camp": {

frontend/src/locales/fr.json

@@ -23,7 +23,9 @@
       "scheduleEntry": {
         "backToContents": "Retour à l'édition du contenu",
         "changeLayout": "Changer la mise en page",
-        "deleteWarning": "Veux-tu vraiment supprimer cette activité ? Tout le contenu de cette activité sera supprimé."
+        "deleteWarning": "Veux-tu vraiment supprimer cette activité ? Tout le contenu de cette activité sera supprimé.",
+        "switchToFullSize": "Passer au format large",
+        "switchToPaperSize": "Passer au format papier"
       }
     },
     "camp": {

frontend/src/locales/it.json

@@ -23,7 +23,9 @@
       "scheduleEntry": {
         "backToContents": "Torna alla modifica dei contenuti",
         "changeLayout": "Cambia il layout",
-        "deleteWarning": "Vuoi davvero cancellare questa attività? Tutti i contenuti di questa attività saranno rimossi."
+        "deleteWarning": "Vuoi davvero cancellare questa attività? Tutti i contenuti di questa attività saranno rimossi.",
+        "switchToFullSize": "Passare al formato largo",
+        "switchToPaperSize": "Passare al formato carta"
       }
     },
     "camp": {

frontend/src/plugins/vuetify.js

@@ -8,6 +8,8 @@ import eCampLogo from '@/assets/eCampLogo.svg'
 import CeviLogo from '@/assets/CeviLogo.svg'
 import JublaLogo from '@/assets/JublaLogo.svg'
 import TentDay from '@/assets/tents/TentDay.svg'
+import PaperSize from '@/assets/icons/PaperSize.svg'
+import BigScreen from '@/assets/icons/BigScreen.svg'
 import i18n from '@/plugins/i18n'
 import colors from 'vuetify/lib/util/colors'
 
@@ -27,6 +29,8 @@ class VuetifyLoaderPlugin {
           cevi: { component: CeviLogo },
           jubla: { component: JublaLogo },
           tentDay: { component: TentDay },
+          paperSize: { component: PaperSize },
+          bigScreen: { component: BigScreen },
         },
       },
       theme: {