From 0265cf17ecccb5bbfa4c2bc0ba6ffcb16e421a11 Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
Date: Sat, 10 Sep 2022 13:16:55 +0200
Subject: [PATCH 01/29] feat(frontend): on picasso, display avatars of users
 responsible for activities

---
 .../components/program/picasso/Picasso.vue    | 15 ++++++
 .../picasso/ScheduleEntryResponsibles.vue     | 47 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index fcb26d8304..8b55cd0ad0 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -11,6 +11,7 @@ Listing all given activity schedule entries in a calendar view.
       :class="editable ? 'ec-picasso-editable' : 'ec-picasso'"
       :events="events"
       :event-name="getActivityName"
+      event-overlap-mode="column"
       :event-color="getActivityColor"
       event-start="startTimestamp"
       event-end="endTimestamp"
@@ -90,6 +91,12 @@ Listing all given activity schedule entries in a calendar view.
             <h4 class="v-event-title" :style="{ color: getActivityTextColor(event) }">
               {{ getActivityName(event) }}
             </h4>
+
+            <schedule-entry-responsibles
+              :schedule-entry="event"
+              :avatar-size="20"
+              class="d-flex justify-end flex-wrap mt-2"
+            />
           </div>
         </router-link>
 
@@ -99,6 +106,12 @@ Listing all given activity schedule entries in a calendar view.
             {{ getActivityName(event) }}
           </h4>
 
+          <schedule-entry-responsibles
+            :schedule-entry="event"
+            :avatar-size="20"
+            class="d-flex justify-end flex-wrap mt-2"
+          />
+
           <!-- resize handle -->
           <div
             v-if="editable && timed"
@@ -135,12 +148,14 @@ import DialogActivityEdit from '../DialogActivityEdit.vue'
 import DayResponsibles from './DayResponsibles.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import Vue from 'vue'
+import ScheduleEntryResponsibles from './ScheduleEntryResponsibles.vue'
 
 export default {
   name: 'Picasso',
   components: {
     DialogActivityEdit,
     DayResponsibles,
+    ScheduleEntryResponsibles,
   },
   props: {
     // period for which to show picasso
diff --git a/frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue b/frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue
new file mode 100644
index 0000000000..9f79878a14
--- /dev/null
+++ b/frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue
@@ -0,0 +1,47 @@
+<!--
+Displays responsibles of a scheduleEntry as avatars
+-->
+<template>
+  <div>
+    <user-avatar
+      v-for="ar in sortActivityResponsibles(
+        scheduleEntry.activity().activityResponsibles().items
+      )"
+      :key="ar._meta.self"
+      :camp-collaboration="ar.campCollaboration()"
+      :size="avatarSize"
+      style="margin: 2px"
+    />
+  </div>
+</template>
+
+<script>
+import UserAvatar from '@/components/user/UserAvatar.vue'
+import { sortBy } from 'lodash'
+import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+
+export default {
+  name: 'ScheduleEntryResponsibles',
+  components: {
+    UserAvatar,
+  },
+  props: {
+    scheduleEntry: {
+      type: Object,
+      required: true,
+    },
+    avatarSize: {
+      type: Number,
+      required: false,
+      default: 24,
+    },
+  },
+  methods: {
+    sortActivityResponsibles(activityResponsibles) {
+      return sortBy(activityResponsibles, (activityResponsible) =>
+        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
+      )
+    },
+  },
+}
+</script>

From 193ef9e763fc2dd76fe02a776cdb8870e1e65bc7 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 18 Nov 2022 18:32:39 +0100
Subject: [PATCH 02/29] Fix console error null dayResponsibles

---
 .../src/components/program/picasso/DayResponsibles.vue     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/program/picasso/DayResponsibles.vue b/frontend/src/components/program/picasso/DayResponsibles.vue
index 39be01eff3..167acb6fd8 100644
--- a/frontend/src/components/program/picasso/DayResponsibles.vue
+++ b/frontend/src/components/program/picasso/DayResponsibles.vue
@@ -81,10 +81,13 @@ export default {
         })
     },
     currentCampCollaborationIRIs() {
-      return this.dayResponsibles.items.map((item) => item.campCollaboration()._meta.self)
+      return (
+        this.dayResponsibles?.items.map((item) => item.campCollaboration()._meta.self) ??
+        []
+      )
     },
     dayResponsibles() {
-      return this.day.dayResponsibles()
+      return this.day?.dayResponsibles()
     },
     campCollaborations() {
       return this.period.camp().campCollaborations()

From fbd354d7db4d4c0676584318378986b9c90c2a7e Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 19 Nov 2022 01:11:33 +0100
Subject: [PATCH 03/29] Add drag and drop locked reminder for picasso view

---
 frontend/src/components/generic/LockIcon.vue  | 41 +++++++-
 .../components/program/picasso/Picasso.vue    | 21 +++--
 .../program/picasso/useClickDetector.js       |  7 +-
 .../program/picasso/useDragAndDropMove.js     | 13 ++-
 .../program/picasso/useDragAndDropNew.js      | 12 +--
 .../program/picasso/useDragAndDropReminder.js | 93 +++++++++++++++++++
 .../program/picasso/useDragAndDropResize.js   | 16 ++--
 frontend/src/helpers/vCalendarDragAndDrop.js  | 13 ++-
 frontend/src/locales/de.json                  |  7 +-
 frontend/src/locales/en.json                  |  7 +-
 frontend/src/views/camp/CampProgram.vue       | 18 ++++
 11 files changed, 210 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/program/picasso/useDragAndDropReminder.js

diff --git a/frontend/src/components/generic/LockIcon.vue b/frontend/src/components/generic/LockIcon.vue
index d14881de9c..e81845aef8 100644
--- a/frontend/src/components/generic/LockIcon.vue
+++ b/frontend/src/components/generic/LockIcon.vue
@@ -4,7 +4,14 @@
       <v-icon v-if="value" small v-on="{ dblclick: iconDblClick, ...on }">
         mdi-lock-open-variant
       </v-icon>
-      <v-icon v-else small color="grey" v-on="{ dblclick: iconDblClick, ...on }">
+      <v-icon
+        v-else
+        small
+        color="grey"
+        :title="$tc('components.generic.lockIcon.doubleClickToUnlock')"
+        :class="{ 'e-shake-lock': shake }"
+        v-on="{ dblclick: iconDblClick, ...on }"
+      >
         mdi-lock
       </v-icon>
     </template>
@@ -30,6 +37,10 @@ export default {
       required: false,
       default: false,
     },
+    shake: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     iconDblClick() {
@@ -43,4 +54,32 @@ export default {
 .v-icon {
   cursor: pointer;
 }
+
+.e-shake-lock {
+  animation: horizontal-shaking 0.5s linear 1;
+}
+
+@keyframes horizontal-shaking {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(5px);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  45% {
+    transform: translateX(4px);
+  }
+  65% {
+    transform: translateX(-4px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 8b55cd0ad0..5e29ebca39 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -129,11 +129,12 @@ Listing all given activity schedule entries in a calendar view.
   </div>
 </template>
 <script>
-import { toRefs, ref, watch, reactive } from 'vue'
-import useDragAndDropMove from './useDragAndDropMove.js'
-import useDragAndDropResize from './useDragAndDropResize.js'
-import useDragAndDropNew from './useDragAndDropNew.js'
-import useClickDetector from './useClickDetector.js'
+import Vue, { reactive, ref, toRefs, watch } from 'vue'
+import { useDragAndDropMove } from './useDragAndDropMove.js'
+import { useDragAndDropResize } from './useDragAndDropResize.js'
+import { useDragAndDropNew } from './useDragAndDropNew.js'
+import { useDragAndDropReminder } from './useDragAndDropReminder.js'
+import { useClickDetector } from './useClickDetector.js'
 import { isCssColor } from 'vuetify/lib/util/colorUtils'
 import { apiStore as api } from '@/plugins/store'
 import { scheduleEntryRoute } from '@/router.js'
@@ -146,6 +147,7 @@ import {
 
 import DialogActivityEdit from '../DialogActivityEdit.vue'
 import DayResponsibles from './DayResponsibles.vue'
+import { ONE_DAY } from '@/helpers/vCalendarDragAndDrop.js'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import Vue from 'vue'
 import ScheduleEntryResponsibles from './ScheduleEntryResponsibles.vue'
@@ -207,6 +209,7 @@ export default {
   // emitted events
   emits: [
     'newEntry', // triggered once when a new entry was created via drag & drop (parameters: startTimestamp, endTimestamp)
+    'unlockReminder', // triggered when we think someone is trying to create/move in non-editable mode
   ],
 
   // composition API setup
@@ -254,13 +257,17 @@ export default {
       }
     }
 
+    const showReminder = (move) => {
+      emit('unlockReminder', move)
+    }
+
     // open edit dialog
     const onClick = (scheduleEntry) => {
       refs[`editDialog-${scheduleEntry.id}`].open()
     }
 
     const calenderStartTimestamp = utcStringToTimestamp(props.start)
-    const calendarEndTimestamp = utcStringToTimestamp(props.end) + 24 * 60 * 60 * 1000
+    const calendarEndTimestamp = utcStringToTimestamp(props.end) + ONE_DAY
 
     const dragAndDropMove = useDragAndDropMove(
       editable,
@@ -276,6 +283,7 @@ export default {
       calendarEndTimestamp
     )
     const dragAndDropNew = useDragAndDropNew(editable, createEntry)
+    const dragAndDropReminder = useDragAndDropReminder(editable, showReminder)
     const clickDetector = useClickDetector(editable, 5, onClick)
 
     // merge mouseleave handlers
@@ -292,6 +300,7 @@ export default {
       dragAndDropMove.vCalendarListeners,
       dragAndDropResize.vCalendarListeners,
       dragAndDropNew.vCalendarListeners,
+      dragAndDropReminder.vCalendarListeners,
       clickDetector.vCalendarListeners,
     ])
 
diff --git a/frontend/src/components/program/picasso/useClickDetector.js b/frontend/src/components/program/picasso/useClickDetector.js
index dd5463d274..c42d5da996 100644
--- a/frontend/src/components/program/picasso/useClickDetector.js
+++ b/frontend/src/components/program/picasso/useClickDetector.js
@@ -1,10 +1,11 @@
 /**
  *
- * @param ref(bool) enabled   false disables click detection
- * @param int threshold       max. mouse movement to still detect as a click
+ * @param enabled {Ref<boolean>}          false disables click detection
+ * @param threshold {number}              max. mouse movement to still detect as a click
+ * @param onClick {(event:Event) => void} run function on click
  * @returns
  */
-export default function useClickDetector(enabled = true, threshold = 5, onClick = null) {
+export function useClickDetector(enabled, threshold = 5, onClick = null) {
   /**
    * internal data (not exposed)
    */
diff --git a/frontend/src/components/program/picasso/useDragAndDropMove.js b/frontend/src/components/program/picasso/useDragAndDropMove.js
index a97d02a126..28bf7c4063 100644
--- a/frontend/src/components/program/picasso/useDragAndDropMove.js
+++ b/frontend/src/components/program/picasso/useDragAndDropMove.js
@@ -1,15 +1,14 @@
 import { toTime, roundTimeDown } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
- *
- * @param ref(bool) enabled   drag & drop is disabled if enabled=false
- * @param int threshold       min. mouse movement needed to detect drag & drop
- * @param update function     callback for update actions
- * @param minTimestamp        minimum allowed start timestamp (calendar start)
- * @param maxTimestamp        maximum allowed end timestamp (calender end)
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param threshold {number}     min. mouse movement needed to detect drag & drop
+ * @param update {(scheduleEntry: object, startTime: number, endTime: number) => void} callback for update actions
+ * @param minTimestamp {number}  minimum allowed start timestamp (calendar start)
+ * @param maxTimestamp {number}  maximum allowed end timestamp (calendar end)
  * @returns
  */
-export default function useDragAndDrop(
+export function useDragAndDropMove(
   enabled,
   threshold,
   update,
diff --git a/frontend/src/components/program/picasso/useDragAndDropNew.js b/frontend/src/components/program/picasso/useDragAndDropNew.js
index de9c400b05..e102cc9514 100644
--- a/frontend/src/components/program/picasso/useDragAndDropNew.js
+++ b/frontend/src/components/program/picasso/useDragAndDropNew.js
@@ -1,12 +1,12 @@
-import { toTime, roundTimeUp, roundTimeDown } from '@/helpers/vCalendarDragAndDrop.js'
+import { toTime, roundTimeDown, minMaxTime } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
  *
- * @param ref(bool) enabled   drag & drop is disabled if enabled=false
- * @param int threshold       min. mouse movement needed to detect drag & drop
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param createEntry {(startTime:number, endTime:number, finished:boolean) => void}
  * @returns
  */
-export default function useDragAndDrop(enabled, createEntry) {
+export function useDragAndDropNew(enabled, createEntry) {
   /**
    * internal data (not exposed)
    */
@@ -40,9 +40,7 @@ export default function useDragAndDrop(enabled, createEntry) {
 
   // resize placeholder entry
   const resizeEntry = (entry, mouse) => {
-    const mouseRounded = roundTimeUp(mouse)
-    const min = Math.min(mouseRounded, roundTimeDown(mouseStartTimestamp))
-    const max = Math.max(mouseRounded, roundTimeDown(mouseStartTimestamp))
+    const { min, max } = minMaxTime(mouse, mouseStartTimestamp)
 
     entry.startTimestamp = min
     entry.endTimestamp = max
diff --git a/frontend/src/components/program/picasso/useDragAndDropReminder.js b/frontend/src/components/program/picasso/useDragAndDropReminder.js
new file mode 100644
index 0000000000..ae1851f1ba
--- /dev/null
+++ b/frontend/src/components/program/picasso/useDragAndDropReminder.js
@@ -0,0 +1,93 @@
+import { toTime, minMaxTime, ONE_HOUR } from '@/helpers/vCalendarDragAndDrop.js'
+
+/**
+ *
+ * @param enabled {Ref<boolean>} enabled   drag & drop is disabled if enabled=false
+ * @param showReminder {(move?: boolean) => void} threshold       min. mouse movement needed to detect drag & drop
+ * @returns
+ */
+export function useDragAndDropReminder(enabled, showReminder) {
+  /**
+   * internal data (not exposed)
+   */
+
+  // temporary placeholder for new schedule entry, when created via drag & drop
+  let mouseStartTimestamp = null
+
+  // true if mousedown event was detected on an entry/event
+  let entryWasClicked = false
+
+  /**
+   * internal methods
+   */
+
+  const clear = () => {
+    mouseStartTimestamp = null
+    entryWasClicked = false
+  }
+
+  /**
+   * exposed methods
+   */
+
+  // triggered with MouseDown event on a calendar entry
+  const entryMouseDown = ({ event: entry, timed, nativeEvent }) => {
+    if (enabled.value) {
+      return
+    }
+
+    // cancel drag & drop if button is not left button
+    if (nativeEvent.button !== 0) {
+      return
+    }
+
+    if (entry && timed) {
+      entryWasClicked = true
+    }
+  }
+
+  // triggered with MouseDown event anywhere on the calendar (independent of clicking on entry or not)
+  const timeMouseDown = (tms, nativeEvent) => {
+    if (enabled.value) {
+      return
+    }
+
+    // cancel drag & drop if button is not left button
+    if (nativeEvent.button !== 0) {
+      return
+    }
+
+    mouseStartTimestamp = toTime(tms)
+  }
+
+  // triggered when mouse is being moved in calendar (independent whether drag & drop is ongoing or not)
+  const timeMouseMove = (tms) => {
+    if (enabled.value || mouseStartTimestamp == null) {
+      return
+    }
+
+    const { min, max } = minMaxTime(mouseStartTimestamp, toTime(tms))
+
+    if (max - min >= ONE_HOUR) {
+      showReminder(entryWasClicked)
+    }
+  }
+
+  // triggered with MouseUp Event anywhere in the calendar
+  const timeMouseUp = () => {
+    if (enabled.value) {
+      return
+    }
+
+    clear()
+  }
+
+  return {
+    vCalendarListeners: {
+      'mousedown:event': entryMouseDown,
+      'mousedown:time': timeMouseDown,
+      'mousemove:time': timeMouseMove,
+      'mouseup:time': timeMouseUp,
+    },
+  }
+}
diff --git a/frontend/src/components/program/picasso/useDragAndDropResize.js b/frontend/src/components/program/picasso/useDragAndDropResize.js
index 2abca2d648..9f4e319f7d 100644
--- a/frontend/src/components/program/picasso/useDragAndDropResize.js
+++ b/frontend/src/components/program/picasso/useDragAndDropResize.js
@@ -1,14 +1,14 @@
-import { toTime, roundTimeUp, roundTimeDown } from '@/helpers/vCalendarDragAndDrop.js'
+import { toTime, minMaxTime } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
  *
- * @param ref(bool) enabled   drag & drop is disabled if enabled=false
- * @param int threshold       min. mouse movement needed to detect drag & drop
- * @param minTimestamp        minimum allowed start timestamp (calendar start)
- * @param maxTimestamp        maximum allowed end timestamp (calender end)
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param update {(scheduleEntry: object, startTime: number, endTime: number) => void} callback for update actions
+ * @param minTimestamp {number}  minimum allowed start timestamp (calendar start)
+ * @param maxTimestamp {number}  maximum allowed end timestamp (calendar end)
  * @returns
  */
-export default function useDragAndDrop(enabled, update, minTimestamp, maxTimestamp) {
+export function useDragAndDropResize(enabled, update, minTimestamp, maxTimestamp) {
   /**
    * internal data (not exposed)
    */
@@ -28,9 +28,7 @@ export default function useDragAndDrop(enabled, update, minTimestamp, maxTimesta
 
   // resize an entry (existing or new placeholder)
   const resizeEntry = (entry, mouse) => {
-    const mouseRounded = roundTimeUp(mouse)
-    const newStart = Math.min(mouseRounded, roundTimeDown(originalStartTimestamp))
-    const newEnd = Math.max(mouseRounded, roundTimeDown(originalStartTimestamp))
+    const { min: newStart, max: newEnd } = minMaxTime(originalStartTimestamp, mouse)
 
     if (newStart >= minTimestamp && newEnd <= maxTimestamp && newEnd - newStart > 0) {
       // TODO review: Here we're changing the store value directly.
diff --git a/frontend/src/helpers/vCalendarDragAndDrop.js b/frontend/src/helpers/vCalendarDragAndDrop.js
index c8f1864d8f..9763d4c365 100644
--- a/frontend/src/helpers/vCalendarDragAndDrop.js
+++ b/frontend/src/helpers/vCalendarDragAndDrop.js
@@ -21,4 +21,15 @@ const roundTimeUp = (time) => {
   return time + (roundDownTime - (time % roundDownTime))
 }
 
-export { toTime, roundTimeDown, roundTimeUp }
+const minMaxTime = (start, end) => {
+  const startCeil = roundTimeUp(end)
+  return {
+    min: Math.min(startCeil, roundTimeDown(start)),
+    max: Math.max(startCeil, roundTimeDown(start)),
+  }
+}
+
+const ONE_HOUR = 60 * 60 * 1000
+const ONE_DAY = 24 * 60 * 60 * 1000
+
+export { toTime, roundTimeDown, roundTimeUp, minMaxTime, ONE_HOUR, ONE_DAY }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index da0e9ca572..1664c91fbb 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -116,7 +116,8 @@
     },
     "generic": {
       "lockIcon": {
-        "guestsCannotEdit": "Gäste haben keinen Bearbeitungszugriff"
+        "guestsCannotEdit": "Gäste haben keinen Bearbeitungszugriff",
+        "doubleClickToUnlock": "Doppelklick um zu Entsperren"
       }
     },
     "layout": {
@@ -456,6 +457,8 @@
       },
       "campProgram": {
         "guestsCannotEdit": "Gäste können das Grobprogramm nicht bearbeiten",
+        "reminderLockedCreate": "Ziehen zum Erstellen ist nur im entsperrten Modus möglich.",
+        "reminderLockedMove": "Ziehen zum Verschieben ist nur im entsperrten Modus möglich.",
         "title": "Grobprogramm"
       },
       "print": {
@@ -484,4 +487,4 @@
       "profile": "Profil"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index a53b96ce99..dc502d8e70 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -116,7 +116,8 @@
     },
     "generic": {
       "lockIcon": {
-        "guestsCannotEdit": "Guests have no permission to edit"
+        "guestsCannotEdit": "Guests have no permission to edit",
+        "doubleClickToUnlock": "Double click to unlock"
       }
     },
     "layout": {
@@ -453,6 +454,8 @@
       },
       "campProgram": {
         "guestsCannotEdit": "A guest cannot edit the picasso",
+        "reminderLockedCreate": "Drag to create is only possible in unlocked mode.",
+        "reminderLockedMove": "Drag to move is only possible in unlocked mode.",
         "title": "Picasso"
       },
       "print": {
@@ -481,4 +484,4 @@
       "profile": "Profile"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
index b3e80909ad..eec81dd105 100644
--- a/frontend/src/views/camp/CampProgram.vue
+++ b/frontend/src/views/camp/CampProgram.vue
@@ -9,6 +9,7 @@ Show all activity schedule entries of a single period.
       <v-spacer />
       <LockIcon
         v-model="editMode"
+        :shake="showReminder"
         :hide-tooltip="isContributor"
         :message="$tc('views.camp.campProgram.guestsCannotEdit')"
         @dblclick="editMode = !editMode"
@@ -44,10 +45,19 @@ Show all activity schedule entries of a single period.
             :end="period().end"
             :editable="editMode"
             @newEntry="slotProps.on.newEntry"
+            @unlockReminder="showUnlockReminder"
           />
         </template>
       </template>
     </schedule-entries>
+    <v-snackbar v-model="showReminder" light>
+      <v-icon>mdi-lock</v-icon>
+      {{
+        reminderType === 'create'
+          ? $tc('views.camp.campProgram.reminderLockedCreate')
+          : $tc('views.camp.campProgram.reminderLockedMove')
+      }}
+    </v-snackbar>
   </content-card>
 </template>
 <script>
@@ -80,6 +90,8 @@ export default {
   data() {
     return {
       editMode: false,
+      showReminder: false,
+      reminderType: null,
     }
   },
   computed: {
@@ -103,5 +115,11 @@ export default {
       }
     },
   },
+  methods: {
+    showUnlockReminder(move) {
+      this.reminderType = move ? 'move' : 'create'
+      this.showReminder = true
+    },
+  },
 }
 </script>

From 28962b2bd477d6e8c7caca308772c3fbb4a0ba04 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 19 Nov 2022 01:13:25 +0100
Subject: [PATCH 04/29] Improve user avatar style

---
 common/helpers/interpolation.js               | 39 +++++++++++++++++++
 .../activity/ActivityResponsibles.vue         | 29 +++++++++++++-
 .../src/components/dashboard/ActivityRow.vue  |  4 +-
 .../src/components/dashboard/AvatarRow.vue    | 20 ++++++----
 .../program/picasso/DayResponsibles.vue       | 14 ++++++-
 frontend/src/components/user/UserAvatar.vue   |  5 ++-
 frontend/src/views/camp/Dashboard.vue         | 13 ++++---
 7 files changed, 105 insertions(+), 19 deletions(-)
 create mode 100644 common/helpers/interpolation.js

diff --git a/common/helpers/interpolation.js b/common/helpers/interpolation.js
new file mode 100644
index 0000000000..5ea4f7bb09
--- /dev/null
+++ b/common/helpers/interpolation.js
@@ -0,0 +1,39 @@
+/**
+ * Curve fitting
+ * @param x
+ * @param y
+ * @param a
+ * @returns {number}
+ */
+export const lerp = (x, y, a) => x * (1 - a) + y * a
+
+/**
+ * Clamps value between min and max
+ * @param a
+ * @param min
+ * @param max
+ * @returns {number}
+ */
+export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a))
+
+/**
+ * Inverse curve fitting function
+ * @param x
+ * @param y
+ * @param a
+ * @returns {number}
+ */
+export const invlerp = (x, y, a) => clamp((a - x) / (y - x))
+
+/**
+ * Maps input to output range
+ * @param inputStart
+ * @param inputEnd
+ * @param outputStart
+ * @param outputEnd
+ * @param input
+ * @returns number
+ */
+export function range(inputStart, inputEnd, outputStart, outputEnd, input) {
+  return lerp(outputStart, outputEnd, invlerp(inputStart, inputEnd, input))
+}
diff --git a/frontend/src/components/activity/ActivityResponsibles.vue b/frontend/src/components/activity/ActivityResponsibles.vue
index 93f0194726..46adae7df9 100644
--- a/frontend/src/components/activity/ActivityResponsibles.vue
+++ b/frontend/src/components/activity/ActivityResponsibles.vue
@@ -14,16 +14,31 @@
     small-chips
     v-bind="$attrs"
     @input="onInput"
-  />
+  >
+    <template #selection="{ item }">
+      <v-chip :key="item.value" small class="mx-0">
+        <UserAvatar
+          :user="item.info.user && item.info.user()"
+          :camp-collaboration="item.info.campCollaboration"
+          left
+          size="20"
+          class="ml-n3"
+        />
+        <span>{{ item.text }}</span>
+      </v-chip>
+    </template>
+  </e-select>
 </template>
 
 <script>
 import { serverErrorToString } from '@/helpers/serverError.js'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { isEqual, sortBy } from 'lodash'
+import UserAvatar from '@/components/user/UserAvatar.vue'
 
 export default {
   name: 'ActivityResponsibles',
+  components: { UserAvatar },
   props: {
     activity: {
       type: Object,
@@ -57,6 +72,7 @@ export default {
           // following structure is defined by vuetify v-select items property
           return {
             value: value._meta.self,
+            info: value,
             text: campCollaborationDisplayName(value, this.$tc.bind(this)),
           }
         })
@@ -159,3 +175,14 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep(.v-select__selections) {
+  gap: 4px;
+  padding-top: 8px !important;
+
+  & input {
+    padding: 0;
+  }
+}
+</style>
diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 4a07ebc604..09e2f4a594 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -17,14 +17,14 @@
     <td style="width: 100%" class="contentrow">
       <router-link
         :to="routerLink"
-        class="text-decoration-none text-decoration-hover-underline black--text"
+        class="text-decoration-none text-decoration-hover-underline black--text font-weight-medium d-block"
       >
         {{ title }}<br />
       </router-link>
       <span class="e-subtitle">{{ location }}</span>
     </td>
     <td class="contentrow avatarrow overflow-visible">
-      <AvatarRow :camp-collaborations="collaborators" size="28" class="ml-auto" />
+      <AvatarRow :camp-collaborations="collaborators" max-size="28" class="ml-auto" />
     </td>
   </tr>
 </template>
diff --git a/frontend/src/components/dashboard/AvatarRow.vue b/frontend/src/components/dashboard/AvatarRow.vue
index db92f4ac60..54909a5a23 100644
--- a/frontend/src/components/dashboard/AvatarRow.vue
+++ b/frontend/src/components/dashboard/AvatarRow.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="avatarrow" :style="avatarrow">
+  <div ref="row" class="avatarrow" :style="avatarrow">
     <div
       v-for="campCollaboration in campCollaborations"
       :key="campCollaboration && campCollaboration._meta.self"
       class="avataritem"
     >
-      <UserAvatar :size="Number(size)" :camp-collaboration="campCollaboration" />
+      <UserAvatar :size="size" :camp-collaboration="campCollaboration" />
     </div>
   </div>
 </template>
@@ -18,14 +18,17 @@ export default {
   components: { UserAvatar },
   props: {
     campCollaborations: { type: Array, default: () => [] },
-    size: { type: [Number, String], default: 20 },
+    maxSize: { type: [Number, String], default: 20 },
   },
+  data: () => ({
+    maxHeight: 1000,
+  }),
   computed: {
+    size() {
+      return Number(this.maxSize) < this.maxHeight ? Number(this.maxSize) : this.maxHeight
+    },
     maxWidth() {
-      return (
-        (this.campCollaborations?.length - 1) * (Number(this.size) * 0.25) +
-        Number(this.size)
-      )
+      return this.campCollaborations?.length * (this.size * 0.5) + this.size
     },
     avatarrow() {
       return {
@@ -34,6 +37,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.maxHeight = this.$el.clientHeight
+  },
 }
 </script>
 
diff --git a/frontend/src/components/program/picasso/DayResponsibles.vue b/frontend/src/components/program/picasso/DayResponsibles.vue
index 167acb6fd8..0a1679650d 100644
--- a/frontend/src/components/program/picasso/DayResponsibles.vue
+++ b/frontend/src/components/program/picasso/DayResponsibles.vue
@@ -21,7 +21,7 @@
     persistent-placeholder
     v-bind="$attrs"
     :readonly="readonly"
-    :class="{ 'ec-day-responsible--readonly': readonly }"
+    :class="{ 'e-day-responsible--readonly': readonly }"
     @input="onInput"
   >
     <template #prepend-item>
@@ -173,7 +173,17 @@ export default {
   padding-top: 0;
 }
 
-.ec-day-responsible--readonly:deep(.v-input__append-inner) {
+.e-day-responsible--readonly {
+  &:deep(.v-input__append-inner) {
+    display: none;
+  }
+
+  &:deep(.v-select__selections) {
+    justify-content: center;
+  }
+}
+
+:deep(.v-select__selections) input {
   display: none;
 }
 </style>
diff --git a/frontend/src/components/user/UserAvatar.vue b/frontend/src/components/user/UserAvatar.vue
index 8b2259f75d..744da60482 100644
--- a/frontend/src/components/user/UserAvatar.vue
+++ b/frontend/src/components/user/UserAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :size="size" :color="color">
+  <v-avatar :size="size" :color="color" v-bind="$attrs">
     <span class="d-sr-only">{{ displayName }}</span>
     <span aria-hidden="true" :style="style">{{ initials }}</span>
   </v-avatar>
@@ -12,6 +12,7 @@ import {
   campCollaborationColor,
   defaultColor,
 } from '@/common/helpers/colors.js'
+import { range } from '@/common/helpers/interpolation.js'
 import userInitials from '@/common/helpers/userInitials.js'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import userDisplayName from '@/common/helpers/userDisplayName.js'
@@ -54,7 +55,7 @@ export default {
     style() {
       return {
         color: contrastColor(this.color),
-        fontSize: Number(this.size) / 2.4 + 'px',
+        fontSize: Number(this.size) / range(16, 32, 2, 2.4, this.size) + 'px',
         fontWeight: Number(this.size) > 44 ? 450 : Number(this.size) > 24 ? 500 : 600,
         letterSpacing: Number(this.size) < 24 ? '.05em' : 0,
         marginRight: Number(this.size) < 24 ? '-.125em' : 0,
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index b6cdab63c5..aa98abc587 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -19,11 +19,12 @@
             :label="$tc('views.camp.dashboard.responsible')"
           >
             <template #item="{ item }">
-              <UserAvatar
-                :camp-collaboration="campCollaborations[item.value]"
-                size="18"
-                class="mr-1"
-              />
+              <TextAlignBaseline class="mr-1">
+                <UserAvatar
+                  :camp-collaboration="campCollaborations[item.value]"
+                  size="20"
+                />
+              </TextAlignBaseline>
               {{ item.text }}
             </template>
           </SelectFilter>
@@ -182,6 +183,7 @@ import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 import { keyBy, groupBy, mapValues } from 'lodash'
 import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
 import { dateLong } from '../../common/helpers/dateHelperUTCFormatted.js'
+import TextAlignBaseline from '@/components/layout/TextAlignBaseline.vue'
 
 function filterEquals(arr1, arr2) {
   return JSON.stringify(arr1) === JSON.stringify(arr2)
@@ -190,6 +192,7 @@ function filterEquals(arr1, arr2) {
 export default {
   name: 'Dashboard',
   components: {
+    TextAlignBaseline,
     FilterDivider,
     ActivityRow,
     SelectFilter,

From 9dd92538e6ee6f174ddf4a7384db56b1efaf3d8b Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 19 Nov 2022 01:14:12 +0100
Subject: [PATCH 05/29] Extract picasso entry

---
 .../components/program/picasso/Picasso.vue    | 255 ++++--------------
 .../program/picasso/PicassoEntry.vue          | 214 +++++++++++++++
 frontend/src/scss/global.scss                 |   8 +
 3 files changed, 268 insertions(+), 209 deletions(-)
 create mode 100644 frontend/src/components/program/picasso/PicassoEntry.vue

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 5e29ebca39..f92a1424f8 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -8,11 +8,12 @@ Listing all given activity schedule entries in a calendar view.
       ref="calendar"
       v-model="value"
       v-resize="resize"
-      :class="editable ? 'ec-picasso-editable' : 'ec-picasso'"
+      :class="['e-picasso', editable && 'e-picasso--editable']"
       :events="events"
       :event-name="getActivityName"
       event-overlap-mode="column"
       :event-color="getActivityColor"
+      :event-text-color="getActivityTextColor"
       event-start="startTimestamp"
       event-end="endTimestamp"
       :interval-height="computedIntervalHeight"
@@ -39,7 +40,7 @@ Listing all given activity schedule entries in a calendar view.
     >
       <!-- day header -->
       <template #day-label-header="{ date }">
-        <div class="ec-daily_head-day-label">
+        <div class="e-picasso-daily_head-day-label">
           <span v-if="widthPluralization > 0" class="d-block">
             {{ $date.utc(date).format('dddd') }}
           </span>
@@ -59,66 +60,15 @@ Listing all given activity schedule entries in a calendar view.
 
       <!-- template for single scheduleEntry -->
       <template #event="{ event, timed }">
-        <!-- edit button & dialog -->
-        <dialog-activity-edit
-          v-if="editable && !event.tmpEvent"
-          :ref="`editDialog-${event.id}`"
+        <PicassoEntry
+          :activity-name="getActivityName(event)"
+          :timed="timed"
           :schedule-entry="event"
-          @activityUpdated="reloadScheduleEntries()"
-          @error="reloadScheduleEntries()"
-        >
-          <template #activator="{ on }">
-            <v-btn
-              absolute
-              top
-              right
-              x-small
-              dark
-              text
-              class="ec-event--btn rounded-sm"
-              @click.prevent="on.click"
-              @mousedown.stop=""
-              @mouseup.stop=""
-            >
-              <v-icon x-small>mdi-pencil</v-icon>
-            </v-btn>
-          </template>
-        </dialog-activity-edit>
-
-        <!-- readonly mode: complete div is a HTML link -->
-        <router-link v-if="!editable && !event.tmpEvent" :to="scheduleEntryRoute(event)">
-          <div class="readonlyEntry">
-            <h4 class="v-event-title" :style="{ color: getActivityTextColor(event) }">
-              {{ getActivityName(event) }}
-            </h4>
-
-            <schedule-entry-responsibles
-              :schedule-entry="event"
-              :avatar-size="20"
-              class="d-flex justify-end flex-wrap mt-2"
-            />
-          </div>
-        </router-link>
-
-        <!-- edit mode: normal div with drag & drop -->
-        <div v-if="editable" class="editableEntry">
-          <h4 class="v-event-title" :style="{ color: getActivityTextColor(event) }">
-            {{ getActivityName(event) }}
-          </h4>
-
-          <schedule-entry-responsibles
-            :schedule-entry="event"
-            :avatar-size="20"
-            class="d-flex justify-end flex-wrap mt-2"
-          />
-
-          <!-- resize handle -->
-          <div
-            v-if="editable && timed"
-            class="v-event-drag-bottom"
-            @mousedown.stop="startResize(event)"
-          />
-        </div>
+          :schedule-entry-route="picassoScheduleEntryRoute(event)"
+          :editable="editable"
+          @startResize="startResize(event)"
+          @finishEdit="reloadScheduleEntries"
+        />
       </template>
     </v-calendar>
 
@@ -144,20 +94,16 @@ import {
   timestampToUtcString,
   utcStringToTimestamp,
 } from '@/common/helpers/dateHelperVCalendar.js'
-
-import DialogActivityEdit from '../DialogActivityEdit.vue'
 import DayResponsibles from './DayResponsibles.vue'
 import { ONE_DAY } from '@/helpers/vCalendarDragAndDrop.js'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
-import Vue from 'vue'
-import ScheduleEntryResponsibles from './ScheduleEntryResponsibles.vue'
+import PicassoEntry from './PicassoEntry.vue'
 
 export default {
   name: 'Picasso',
   components: {
-    DialogActivityEdit,
+    PicassoEntry,
     DayResponsibles,
-    ScheduleEntryResponsibles,
   },
   props: {
     // period for which to show picasso
@@ -460,15 +406,16 @@ export default {
     weekdayFormat() {
       return ''
     },
-
-    scheduleEntryRoute,
+    picassoScheduleEntryRoute(scheduleEntry) {
+      if (scheduleEntry.tmpEvent) return {}
+      return scheduleEntryRoute(scheduleEntry)
+    },
   },
 }
 </script>
 
 <style scoped lang="scss">
-.ec-picasso,
-.ec-picasso-editable {
+.e-picasso {
   border: none;
   overflow: auto;
 
@@ -502,117 +449,45 @@ export default {
       line-height: 1.15;
       user-select: none;
       -webkit-user-select: none;
-
-      // full size div within v-calendar event
-      div.readonlyEntry,
-      div.editableEntry {
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        padding: 1px;
-        overflow: hidden;
-
-        @media #{map-get($display-breakpoints, 'sm-and-up')} {
-          padding: 3px;
-        }
-      }
+      border-color: white !important;
     }
-  }
-}
-
-/**
- * entry styling in edit mode
- */
-.editableEntry {
-  cursor: move; /* fallback if grab cursor is unsupported */
-  cursor: grab;
-  cursor: -moz-grab;
-  cursor: -webkit-grab;
-  border: 1px black dashed;
-  border-radius: 4px;
-
-  &:active {
-    cursor: move;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-  }
-}
 
-.ec-picasso-editable {
-  :deep(.v-event-timed) {
-    transition: transform 0.1s; /* Animation */
-  }
-
-  :deep(.v-event-timed:hover) {
-    z-index: 999;
-    transform: scale(
-      1.02
-    ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
-  }
-}
-
-.ec-picasso-editable:deep,
-.ec-picasso:deep {
-  .v-calendar-daily__day-container {
-    width: initial;
-  }
+    .v-calendar-daily__day-container {
+      width: initial;
+    }
 
-  .v-calendar-daily__head,
-  .v-calendar-daily__intervals-body {
-    position: sticky;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(4px);
-  }
+    .v-calendar-daily__head,
+    .v-calendar-daily__intervals-body {
+      position: sticky;
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(4px);
+    }
 
-  .v-calendar-daily__head {
-    top: 0;
-    z-index: 2;
-    min-width: fit-content;
-    overflow: hidden;
-  }
+    .v-calendar-daily__head {
+      top: 0;
+      z-index: 2;
+      min-width: fit-content;
+      overflow: hidden;
+    }
 
-  .v-calendar-daily__pane,
-  .v-calendar-daily__body {
-    overflow: visible;
-  }
+    .v-calendar-daily__pane,
+    .v-calendar-daily__body {
+      overflow: visible;
+    }
 
-  .v-calendar-daily__intervals-body {
-    left: 0;
-    z-index: 1;
-  }
+    .v-calendar-daily__intervals-body {
+      left: 0;
+      z-index: 1;
+    }
 
-  .v-calendar-daily__scroll-area {
-    overflow-y: visible;
+    .v-calendar-daily__scroll-area {
+      overflow-y: visible;
+    }
   }
 }
 
-// entry edit button
-.ec-event--btn {
-  padding: 0 !important;
-  min-width: 20px !important;
-  top: 0 !important;
-  right: 0 !important;
-  display: block;
-}
-
-// event title text
-.v-event-title {
-  hyphens: auto;
-  hyphenate-limit-chars: 6 3 3;
-  hyphenate-limit-lines: 2;
-  hyphenate-limit-last: always;
-  hyphenate-limit-zone: 8%;
-}
-
-.readonlyEntry .v-event-title {
-  color: white;
-  text-decoration: none;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-}
-
 // day title
-.ec-daily_head-day-label {
+.e-picasso-daily_head-day-label {
   font-size: 11px;
   font-feature-settings: 'tnum';
   letter-spacing: -0.1px;
@@ -652,7 +527,6 @@ export default {
     padding: 4px 2px;
     width: 100%;
     min-width: initial;
-    justify-content: center;
 
     .v-chip {
       margin: 0;
@@ -667,41 +541,4 @@ export default {
     }
   }
 }
-
-// temporary placeholder (crate new event)
-:deep(.v-event-timed.v-event--temporary) {
-  border-style: dashed !important;
-  opacity: 0.8;
-}
-
-// resize handle
-.v-event-drag-bottom {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 4px;
-  height: 4px;
-  cursor: ns-resize;
-
-  &::after {
-    display: none;
-    position: absolute;
-    left: 50%;
-    height: 4px;
-    border-top: 1px solid white;
-    border-bottom: 1px solid white;
-    width: 16px;
-    margin-left: -8px;
-    opacity: 0.8;
-    content: '';
-  }
-}
-
-@media #{map-get($display-breakpoints, 'sm-and-up')} {
-  .v-event-timed {
-    &:hover .v-event-drag-bottom::after {
-      display: block; // resize handle not visible on mobile
-    }
-  }
-}
 </style>
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
new file mode 100644
index 0000000000..86cc8f3c2f
--- /dev/null
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -0,0 +1,214 @@
+<template>
+  <div
+    v-if="editable"
+    class="e-picasso-entry e-picasso-entry--editable"
+    :class="{
+      'e-picasso-entry--temporary': scheduleEntry.tmpEvent,
+    }"
+  >
+    <!-- edit button & dialog -->
+    <dialog-activity-edit
+      v-if="editable && !scheduleEntry.tmpEvent"
+      :ref="`editDialog-${scheduleEntry.id}`"
+      :schedule-entry="scheduleEntry"
+      @activityUpdated="$emit('finishEdit')"
+      @error="$emit('finishEdit')"
+    >
+      <template #activator="{ on }">
+        <v-btn
+          x-small
+          text
+          color="currentColor"
+          class="e-picasso-entry__quickedit rounded-sm pr-0"
+          @click.prevent="on.click"
+          @mousedown.stop=""
+          @mouseup.stop=""
+        >
+          <v-icon x-small color="currentColor">mdi-pencil</v-icon>
+        </v-btn>
+      </template>
+    </dialog-activity-edit>
+
+    <!-- readonly mode: complete div is a HTML link -->
+
+    <!-- edit mode: normal div with drag & drop -->
+    <template v-if="editable">
+      <h4 class="e-picasso-entry__title">
+        {{ activityName }}
+      </h4>
+      <template v-if="campCollaboration">
+        <br />
+        <small>{{ campCollaboration }}</small>
+      </template>
+      <template v-if="$vuetify.breakpoint.lgAndUp && location">
+        <br />
+        <small>{{ location }}</small>
+      </template>
+
+      <!-- resize handle -->
+      <div
+        v-if="editable && timed"
+        class="e-picasso-entry__drag-bottom"
+        @mousedown.stop="$emit('startResize')"
+      />
+    </template>
+  </div>
+  <router-link
+    v-else
+    class="e-picasso-entry e-piasso-entry--link"
+    :to="scheduleEntryRoute"
+  >
+    <h4 class="e-picasso-entry__title">
+      {{ activityName }}
+    </h4>
+    <template v-if="campCollaboration">
+      <br />
+      <small>{{ campCollaboration }}</small>
+    </template>
+    <template v-if="$vuetify.breakpoint.lgAndUp && location">
+      <br />
+      <small>{{ location }}</small>
+    </template>
+  </router-link>
+</template>
+<script>
+import DialogActivityEdit from '../DialogActivityEdit.vue'
+import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+
+export default {
+  name: 'PicassoEntry',
+  components: { DialogActivityEdit },
+  props: {
+    editable: { type: Boolean, required: true },
+    scheduleEntry: { type: Object, required: true },
+    timed: { type: Boolean, required: true },
+    activityName: { type: String, required: true },
+    scheduleEntryRoute: { type: Object, required: true },
+  },
+  emits: ['startResize', 'finishEdit'],
+  computed: {
+    activityResponsibles() {
+      if (this.scheduleEntry.tmpEvent) return []
+      return this.scheduleEntry.activity().activityResponsibles().items
+    },
+    campCollaboration() {
+      if (this.activityResponsibles.length === 0) return ''
+      return `[${this.activityResponsibles
+        .map((item) => campCollaborationDisplayName(item.campCollaboration()))
+        .join(', ')}]`
+    },
+    location() {
+      if (this.scheduleEntry.tmpEvent) return ''
+      return this.scheduleEntry.activity().location
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.e-picasso-entry {
+  display: block;
+  height: 100%;
+  padding: 2px;
+  overflow: hidden;
+  border-width: 1px;
+  border-color: transparent;
+  border-style: solid;
+  border-radius: 3px;
+}
+
+@media #{map-get($display-breakpoints, 'sm-and-up')} {
+  .e-picasso-entry {
+    font-size: 12px;
+  }
+}
+
+.e-picasso-entry--editable {
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  border-color: black;
+  border-style: dashed;
+  transition: transform 0.1s;
+
+  &:hover {
+    z-index: 999;
+    transform: scale(
+      1.02
+    ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
+  }
+
+  &:active {
+    cursor: move;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+  }
+}
+
+.e-piasso-entry--link {
+  color: currentColor;
+  text-decoration-color: transparent;
+  transition: text-decoration 0.1s ease;
+}
+
+.e-picasso-entry__quickedit {
+  display: none;
+  float: right;
+  max-height: calc(100% + 4px);
+  padding: 0 !important;
+  min-width: 20px !important;
+  margin: -2px -2px;
+  border-radius: 0 3px 0 4px !important;
+  z-index: 100;
+}
+
+.e-picasso-entry:hover .e-picasso-entry__quickedit {
+  display: inline-block;
+}
+
+// event title text
+.e-picasso-entry__title {
+  display: inline;
+  hyphens: auto;
+  hyphenate-limit-chars: 6 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 8%;
+}
+
+// resize handle
+.e-picasso-entry__drag-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 8px;
+  max-height: 40%;
+  cursor: ns-resize;
+
+  &::after {
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    height: 4px;
+    border-top: 1px solid currentColor;
+    border-bottom: 1px solid currentColor;
+    width: 16px;
+    margin-left: -8px;
+    opacity: 0.8;
+    content: '';
+  }
+}
+
+.e-picasso-entry small {
+  opacity: 0.7;
+}
+
+@media #{map-get($display-breakpoints, 'sm-and-up')} {
+  .e-picasso-entry:hover .e-picasso-entry__drag-bottom::after {
+    display: block; // resize handle not visible on mobile
+  }
+}
+</style>
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 37b11af379..848d9127c4 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -98,3 +98,11 @@ body {
 .d-flow-root {
   display: flow-root;
 }
+
+.d-contents {
+  display: contents;
+}
+
+.currentColor--text {
+  color: currentColor !important;
+}

From 05774b9bb04ad8c1fe4ebd82cec767eb3a94172c Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 20 Nov 2022 13:24:35 +0100
Subject: [PATCH 06/29] Optimize styling of link hover and small detail

---
 frontend/src/components/program/picasso/PicassoEntry.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 86cc8f3c2f..f1e65b6d4e 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -150,6 +150,10 @@ export default {
   color: currentColor;
   text-decoration-color: transparent;
   transition: text-decoration 0.1s ease;
+
+  &:hover {
+    text-decoration-color: currentColor;
+  }
 }
 
 .e-picasso-entry__quickedit {
@@ -204,6 +208,7 @@ export default {
 
 .e-picasso-entry small {
   opacity: 0.7;
+  font-size: 11px;
 }
 
 @media #{map-get($display-breakpoints, 'sm-and-up')} {

From a3ba136ed371762fbc7ed95322890f202b4e0c23 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 20 Nov 2022 13:48:58 +0100
Subject: [PATCH 07/29] Move locked reminder up

---
 frontend/src/views/camp/CampProgram.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
index eec81dd105..d1f0059568 100644
--- a/frontend/src/views/camp/CampProgram.vue
+++ b/frontend/src/views/camp/CampProgram.vue
@@ -50,7 +50,7 @@ Show all activity schedule entries of a single period.
         </template>
       </template>
     </schedule-entries>
-    <v-snackbar v-model="showReminder" light>
+    <v-snackbar v-model="showReminder" light class="mb-12">
       <v-icon>mdi-lock</v-icon>
       {{
         reminderType === 'create'

From 2e75b440ca3b3dbbd123052452fd508553585aa0 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 22 Nov 2022 15:42:00 +0100
Subject: [PATCH 08/29] Move activity name calculation to picasso entry

---
 .../components/program/picasso/Picasso.vue    | 23 -------------------
 .../program/picasso/PicassoEntry.vue          | 21 ++++++++++++++++-
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index f92a1424f8..6579760bb4 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -10,7 +10,6 @@ Listing all given activity schedule entries in a calendar view.
       v-resize="resize"
       :class="['e-picasso', editable && 'e-picasso--editable']"
       :events="events"
-      :event-name="getActivityName"
       event-overlap-mode="column"
       :event-color="getActivityColor"
       :event-text-color="getActivityTextColor"
@@ -61,7 +60,6 @@ Listing all given activity schedule entries in a calendar view.
       <!-- template for single scheduleEntry -->
       <template #event="{ event, timed }">
         <PicassoEntry
-          :activity-name="getActivityName(event)"
           :timed="timed"
           :schedule-entry="event"
           :schedule-entry-route="picassoScheduleEntryRoute(event)"
@@ -346,19 +344,6 @@ export default {
         80
       )
     },
-    getActivityName(scheduleEntry, _) {
-      if (scheduleEntry.tmpEvent) return this.$tc('entity.activity.new')
-
-      if (this.isActivityLoading(scheduleEntry)) return this.$tc('global.loading')
-
-      return (
-        (scheduleEntry.number ? scheduleEntry.number + ' ' : '') +
-        (scheduleEntry.activity().category().short
-          ? scheduleEntry.activity().category().short + ': '
-          : '') +
-        scheduleEntry.activity().title
-      )
-    },
     getActivityTextColor(scheduleEntry) {
       if (scheduleEntry.tmpEvent) return '#000'
       if (this.isCategoryLoading(scheduleEntry)) return '#000'
@@ -374,14 +359,6 @@ export default {
       const color = scheduleEntry.activity().category().color
       return isCssColor(color) ? color : color + ' elevation-4 v-event--temporary'
     },
-    isActivityLoading(scheduleEntry) {
-      return (
-        !scheduleEntry.tmpEvent &&
-        (this.activitiesLoading ||
-          this.categoriesLoading ||
-          scheduleEntry.activity()._meta.loading)
-      )
-    },
     isCategoryLoading(scheduleEntry) {
       return (
         !scheduleEntry.tmpEvent &&
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index f1e65b6d4e..0f4d2eff54 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -82,11 +82,23 @@ export default {
     editable: { type: Boolean, required: true },
     scheduleEntry: { type: Object, required: true },
     timed: { type: Boolean, required: true },
-    activityName: { type: String, required: true },
     scheduleEntryRoute: { type: Object, required: true },
   },
   emits: ['startResize', 'finishEdit'],
   computed: {
+    activityName() {
+      if (this.scheduleEntry.tmpEvent) return this.$tc('entity.activity.new')
+
+      if (this.activityLoading) return this.$tc('global.loading')
+
+      return (
+        (this.scheduleEntry.number ? this.scheduleEntry.number + ' ' : '') +
+        (this.scheduleEntry.activity().category().short
+          ? this.scheduleEntry.activity().category().short + ': '
+          : '') +
+        this.scheduleEntry.activity().title
+      )
+    },
     activityResponsibles() {
       if (this.scheduleEntry.tmpEvent) return []
       return this.scheduleEntry.activity().activityResponsibles().items
@@ -101,6 +113,13 @@ export default {
       if (this.scheduleEntry.tmpEvent) return ''
       return this.scheduleEntry.activity().location
     },
+    activityLoading() {
+      return (
+        !this.scheduleEntry.tmpEvent &&
+        (this.scheduleEntry.activity()._meta.loading ||
+          this.scheduleEntry.activity().category()._meta.loading)
+      )
+    },
   },
 }
 </script>

From f4b42165ebfe06c3aa76459e91112372f088a60e Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 22 Nov 2022 15:46:01 +0100
Subject: [PATCH 09/29] Move schedule entry route calculation to picasso entry

---
 frontend/src/components/program/picasso/Picasso.vue      | 6 ------
 frontend/src/components/program/picasso/PicassoEntry.vue | 6 +++++-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 6579760bb4..cc79a5fe1b 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -62,7 +62,6 @@ Listing all given activity schedule entries in a calendar view.
         <PicassoEntry
           :timed="timed"
           :schedule-entry="event"
-          :schedule-entry-route="picassoScheduleEntryRoute(event)"
           :editable="editable"
           @startResize="startResize(event)"
           @finishEdit="reloadScheduleEntries"
@@ -85,7 +84,6 @@ import { useDragAndDropReminder } from './useDragAndDropReminder.js'
 import { useClickDetector } from './useClickDetector.js'
 import { isCssColor } from 'vuetify/lib/util/colorUtils'
 import { apiStore as api } from '@/plugins/store'
-import { scheduleEntryRoute } from '@/router.js'
 import mergeListeners from '@/helpers/mergeListeners.js'
 import { contrastColor } from '@/common/helpers/colors.js'
 import {
@@ -383,10 +381,6 @@ export default {
     weekdayFormat() {
       return ''
     },
-    picassoScheduleEntryRoute(scheduleEntry) {
-      if (scheduleEntry.tmpEvent) return {}
-      return scheduleEntryRoute(scheduleEntry)
-    },
   },
 }
 </script>
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 0f4d2eff54..6e760adef4 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -74,6 +74,7 @@
 <script>
 import DialogActivityEdit from '../DialogActivityEdit.vue'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+import { scheduleEntryRoute } from '../../../router.js'
 
 export default {
   name: 'PicassoEntry',
@@ -82,7 +83,6 @@ export default {
     editable: { type: Boolean, required: true },
     scheduleEntry: { type: Object, required: true },
     timed: { type: Boolean, required: true },
-    scheduleEntryRoute: { type: Object, required: true },
   },
   emits: ['startResize', 'finishEdit'],
   computed: {
@@ -120,6 +120,10 @@ export default {
           this.scheduleEntry.activity().category()._meta.loading)
       )
     },
+    scheduleEntryRoute() {
+      if (this.scheduleEntry.tmpEvent) return {}
+      return scheduleEntryRoute(this.scheduleEntry)
+    },
   },
 }
 </script>

From 01b117630c7dffdc790774f23f87ebbe8da58889 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 22 Nov 2022 16:03:05 +0100
Subject: [PATCH 10/29] Refactor often reused entities

---
 .../program/picasso/PicassoEntry.vue          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 6e760adef4..903efaca98 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -86,6 +86,12 @@ export default {
   },
   emits: ['startResize', 'finishEdit'],
   computed: {
+    activity() {
+      return this.scheduleEntry.activity()
+    },
+    category() {
+      return this.activity.category()
+    },
     activityName() {
       if (this.scheduleEntry.tmpEvent) return this.$tc('entity.activity.new')
 
@@ -93,15 +99,13 @@ export default {
 
       return (
         (this.scheduleEntry.number ? this.scheduleEntry.number + ' ' : '') +
-        (this.scheduleEntry.activity().category().short
-          ? this.scheduleEntry.activity().category().short + ': '
-          : '') +
-        this.scheduleEntry.activity().title
+        (this.category.short ? this.category.short + ': ' : '') +
+        this.activity.title
       )
     },
     activityResponsibles() {
       if (this.scheduleEntry.tmpEvent) return []
-      return this.scheduleEntry.activity().activityResponsibles().items
+      return this.activity.activityResponsibles().items
     },
     campCollaboration() {
       if (this.activityResponsibles.length === 0) return ''
@@ -111,13 +115,12 @@ export default {
     },
     location() {
       if (this.scheduleEntry.tmpEvent) return ''
-      return this.scheduleEntry.activity().location
+      return this.activity.location
     },
     activityLoading() {
       return (
         !this.scheduleEntry.tmpEvent &&
-        (this.scheduleEntry.activity()._meta.loading ||
-          this.scheduleEntry.activity().category()._meta.loading)
+        (this.activity._meta.loading || this.category._meta.loading)
       )
     },
     scheduleEntryRoute() {

From ccf9b8679aef444876d2a9c2c789904bc97d1b36 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 22 Nov 2022 16:51:40 +0100
Subject: [PATCH 11/29] Move even more schedule entry specific logic to
 PicassoEntry

---
 .../components/program/picasso/Picasso.vue    | 28 -------------------
 .../program/picasso/PicassoEntry.vue          | 23 ++++++++++++++-
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index cc79a5fe1b..f3e5d8b72a 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -11,8 +11,6 @@ Listing all given activity schedule entries in a calendar view.
       :class="['e-picasso', editable && 'e-picasso--editable']"
       :events="events"
       event-overlap-mode="column"
-      :event-color="getActivityColor"
-      :event-text-color="getActivityTextColor"
       event-start="startTimestamp"
       event-end="endTimestamp"
       :interval-height="computedIntervalHeight"
@@ -82,10 +80,8 @@ import { useDragAndDropResize } from './useDragAndDropResize.js'
 import { useDragAndDropNew } from './useDragAndDropNew.js'
 import { useDragAndDropReminder } from './useDragAndDropReminder.js'
 import { useClickDetector } from './useClickDetector.js'
-import { isCssColor } from 'vuetify/lib/util/colorUtils'
 import { apiStore as api } from '@/plugins/store'
 import mergeListeners from '@/helpers/mergeListeners.js'
-import { contrastColor } from '@/common/helpers/colors.js'
 import {
   timestampToUtcString,
   utcStringToTimestamp,
@@ -342,30 +338,6 @@ export default {
         80
       )
     },
-    getActivityTextColor(scheduleEntry) {
-      if (scheduleEntry.tmpEvent) return '#000'
-      if (this.isCategoryLoading(scheduleEntry)) return '#000'
-
-      const category = scheduleEntry.activity().category()
-      return contrastColor(category.color)
-    },
-    getActivityColor(scheduleEntry, _) {
-      if (scheduleEntry.tmpEvent) return 'grey elevation-4 v-event--temporary'
-
-      if (this.isCategoryLoading(scheduleEntry)) return 'grey lighten-1'
-
-      const color = scheduleEntry.activity().category().color
-      return isCssColor(color) ? color : color + ' elevation-4 v-event--temporary'
-    },
-    isCategoryLoading(scheduleEntry) {
-      return (
-        !scheduleEntry.tmpEvent &&
-        (this.categoriesLoading ||
-          this.activitiesLoading ||
-          scheduleEntry.activity()._meta.loading ||
-          scheduleEntry.activity().category()._meta.loading)
-      )
-    },
     intervalFormat(time) {
       return this.$date
         .utc(time.date + ' ' + time.time)
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 903efaca98..0452d2f002 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -3,8 +3,9 @@
     v-if="editable"
     class="e-picasso-entry e-picasso-entry--editable"
     :class="{
-      'e-picasso-entry--temporary': scheduleEntry.tmpEvent,
+      'e-picasso-entry--temporary elevation-4 v-event--temporary': scheduleEntry.tmpEvent,
     }"
+    :style="colorStyles"
   >
     <!-- edit button & dialog -->
     <dialog-activity-edit
@@ -57,6 +58,7 @@
     v-else
     class="e-picasso-entry e-piasso-entry--link"
     :to="scheduleEntryRoute"
+    :style="colorStyles"
   >
     <h4 class="e-picasso-entry__title">
       {{ activityName }}
@@ -75,6 +77,7 @@
 import DialogActivityEdit from '../DialogActivityEdit.vue'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { scheduleEntryRoute } from '../../../router.js'
+import { contrastColor } from '../../../../../common/helpers/colors.js'
 
 export default {
   name: 'PicassoEntry',
@@ -123,6 +126,24 @@ export default {
         (this.activity._meta.loading || this.category._meta.loading)
       )
     },
+    activityColor() {
+      if (this.scheduleEntry.tmpEvent) return '#9e9e9e'
+      if (this.category._meta.loading) return '#bdbdbd'
+
+      return this.category.color
+    },
+    activityTextColor() {
+      if (this.scheduleEntry.tmpEvent) return '#000'
+      if (this.category._meta.loading) return '#000'
+
+      return contrastColor(this.category.color)
+    },
+    colorStyles() {
+      return {
+        color: this.activityTextColor,
+        backgroundColor: this.activityColor,
+      }
+    },
     scheduleEntryRoute() {
       if (this.scheduleEntry.tmpEvent) return {}
       return scheduleEntryRoute(this.scheduleEntry)

From 634fe8609ce0b4db13c52ceb032c756c7c91ffd6 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 22 Nov 2022 17:26:23 +0100
Subject: [PATCH 12/29] Move useClickDetector usage to PicassoEntry to fix
 clicking entries in edit mode

---
 .../components/program/picasso/Picasso.vue    | 10 +--------
 .../program/picasso/PicassoEntry.vue          | 16 +++++++++++++-
 .../program/picasso/useClickDetector.js       | 22 +++++++++----------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index f3e5d8b72a..0610aeef4f 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -79,7 +79,6 @@ import { useDragAndDropMove } from './useDragAndDropMove.js'
 import { useDragAndDropResize } from './useDragAndDropResize.js'
 import { useDragAndDropNew } from './useDragAndDropNew.js'
 import { useDragAndDropReminder } from './useDragAndDropReminder.js'
-import { useClickDetector } from './useClickDetector.js'
 import { apiStore as api } from '@/plugins/store'
 import mergeListeners from '@/helpers/mergeListeners.js'
 import {
@@ -151,7 +150,7 @@ export default {
   ],
 
   // composition API setup
-  setup(props, { emit, refs }) {
+  setup(props, { emit }) {
     const { editable, scheduleEntries } = toRefs(props)
 
     const isSaving = ref(false)
@@ -199,11 +198,6 @@ export default {
       emit('unlockReminder', move)
     }
 
-    // open edit dialog
-    const onClick = (scheduleEntry) => {
-      refs[`editDialog-${scheduleEntry.id}`].open()
-    }
-
     const calenderStartTimestamp = utcStringToTimestamp(props.start)
     const calendarEndTimestamp = utcStringToTimestamp(props.end) + ONE_DAY
 
@@ -222,7 +216,6 @@ export default {
     )
     const dragAndDropNew = useDragAndDropNew(editable, createEntry)
     const dragAndDropReminder = useDragAndDropReminder(editable, showReminder)
-    const clickDetector = useClickDetector(editable, 5, onClick)
 
     // merge mouseleave handlers
     // this is needed, because .native modifiers doesn't work with v-on property
@@ -239,7 +232,6 @@ export default {
       dragAndDropResize.vCalendarListeners,
       dragAndDropNew.vCalendarListeners,
       dragAndDropReminder.vCalendarListeners,
-      clickDetector.vCalendarListeners,
     ])
 
     // make events a reactive array + load event array from schedule entries
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 0452d2f002..ddd8c53b38 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -6,11 +6,12 @@
       'e-picasso-entry--temporary elevation-4 v-event--temporary': scheduleEntry.tmpEvent,
     }"
     :style="colorStyles"
+    v-on="listeners"
   >
     <!-- edit button & dialog -->
     <dialog-activity-edit
       v-if="editable && !scheduleEntry.tmpEvent"
-      :ref="`editDialog-${scheduleEntry.id}`"
+      ref="editDialog"
       :schedule-entry="scheduleEntry"
       @activityUpdated="$emit('finishEdit')"
       @error="$emit('finishEdit')"
@@ -74,10 +75,12 @@
   </router-link>
 </template>
 <script>
+import { ref, toRefs } from 'vue'
 import DialogActivityEdit from '../DialogActivityEdit.vue'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { scheduleEntryRoute } from '../../../router.js'
 import { contrastColor } from '../../../../../common/helpers/colors.js'
+import { useClickDetector } from './useClickDetector.js'
 
 export default {
   name: 'PicassoEntry',
@@ -88,6 +91,17 @@ export default {
     timed: { type: Boolean, required: true },
   },
   emits: ['startResize', 'finishEdit'],
+  setup(props) {
+    const { editable } = toRefs(props)
+    const editDialog = ref(null)
+
+    // open edit dialog when clicking, but only if it wasn't a drag motion
+    const { listeners } = useClickDetector(editable, 5, () => {
+      editDialog.value.open()
+    })
+
+    return { listeners, editDialog }
+  },
   computed: {
     activity() {
       return this.scheduleEntry.activity()
diff --git a/frontend/src/components/program/picasso/useClickDetector.js b/frontend/src/components/program/picasso/useClickDetector.js
index c42d5da996..ec25a21f00 100644
--- a/frontend/src/components/program/picasso/useClickDetector.js
+++ b/frontend/src/components/program/picasso/useClickDetector.js
@@ -1,8 +1,8 @@
 /**
  *
- * @param enabled {Ref<boolean>}          false disables click detection
- * @param threshold {number}              max. mouse movement to still detect as a click
- * @param onClick {(event:Event) => void} run function on click
+ * @param enabled {Ref<boolean>} false disables click detection
+ * @param threshold {number}     max. mouse movement to still detect as a click
+ * @param onClick {() => void}   run function on click
  * @returns
  */
 export function useClickDetector(enabled, threshold = 5, onClick = null) {
@@ -33,7 +33,7 @@ export function useClickDetector(enabled, threshold = 5, onClick = null) {
   /**
    * exposed methods
    */
-  const entryMouseDown = ({ nativeEvent }) => {
+  const entryMouseDown = (nativeEvent) => {
     if (!enabled.value) {
       return
     }
@@ -42,7 +42,7 @@ export function useClickDetector(enabled, threshold = 5, onClick = null) {
     startY = nativeEvent.y
   }
 
-  const entryMouseMove = ({ nativeEvent }) => {
+  const entryMouseMove = (nativeEvent) => {
     if (startX === null) {
       return
     }
@@ -53,7 +53,7 @@ export function useClickDetector(enabled, threshold = 5, onClick = null) {
     }
   }
 
-  const entryMouseUp = ({ event, nativeEvent }) => {
+  const entryMouseUp = (nativeEvent) => {
     if (startX === null) {
       return
     }
@@ -76,7 +76,7 @@ export function useClickDetector(enabled, threshold = 5, onClick = null) {
 
       // onClick callback
       if (onClick !== null) {
-        onClick(event)
+        onClick()
       }
     }
 
@@ -84,10 +84,10 @@ export function useClickDetector(enabled, threshold = 5, onClick = null) {
   }
 
   return {
-    vCalendarListeners: {
-      'mousedown:event': entryMouseDown,
-      'mousemove:event': entryMouseMove,
-      'mouseup:event': entryMouseUp,
+    listeners: {
+      mousedown: entryMouseDown,
+      mousemove: entryMouseMove,
+      mouseup: entryMouseUp,
     },
   }
 }

From f095eaf009e176cf8710d915cc8112e63c4e98ec Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Tue, 22 Nov 2022 22:09:03 +0100
Subject: [PATCH 13/29] Fix native mouseleave not clearing

---
 .../src/components/program/picasso/useDragAndDropReminder.js     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/program/picasso/useDragAndDropReminder.js b/frontend/src/components/program/picasso/useDragAndDropReminder.js
index ae1851f1ba..ac0c393631 100644
--- a/frontend/src/components/program/picasso/useDragAndDropReminder.js
+++ b/frontend/src/components/program/picasso/useDragAndDropReminder.js
@@ -89,5 +89,6 @@ export function useDragAndDropReminder(enabled, showReminder) {
       'mousemove:time': timeMouseMove,
       'mouseup:time': timeMouseUp,
     },
+    nativeMouseLeave: clear,
   }
 }

From 357d4dbcc8cedb9afa85aae10c97162f2f37e91c Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Tue, 22 Nov 2022 22:09:34 +0100
Subject: [PATCH 14/29] Move AvatarRow outside of dashboard

---
 frontend/src/components/dashboard/ActivityRow.vue            | 2 +-
 frontend/src/components/{dashboard => generic}/AvatarRow.vue | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/components/{dashboard => generic}/AvatarRow.vue (100%)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 09e2f4a594..c9bf4af7fa 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import AvatarRow from './AvatarRow.vue'
+import AvatarRow from '@/components/generic/AvatarRow.vue'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
 import {
   hourShort,
diff --git a/frontend/src/components/dashboard/AvatarRow.vue b/frontend/src/components/generic/AvatarRow.vue
similarity index 100%
rename from frontend/src/components/dashboard/AvatarRow.vue
rename to frontend/src/components/generic/AvatarRow.vue

From 36977ec673564d187d8ac3bc34955168b03fc776 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Tue, 22 Nov 2022 23:47:44 +0100
Subject: [PATCH 15/29] Implement avatars back into picasso with query flag
 "showAvatars"

---
 .../helpers/__tests__/interpolation.spec.js   | 65 +++++++++++++++++++
 frontend/src/components/generic/AvatarRow.vue |  2 +-
 .../components/program/picasso/Picasso.vue    |  7 +-
 .../program/picasso/PicassoEntry.vue          | 53 +++++++++++----
 frontend/src/components/user/UserAvatar.vue   | 12 +++-
 5 files changed, 122 insertions(+), 17 deletions(-)
 create mode 100644 common/helpers/__tests__/interpolation.spec.js

diff --git a/common/helpers/__tests__/interpolation.spec.js b/common/helpers/__tests__/interpolation.spec.js
new file mode 100644
index 0000000000..71a20bc76c
--- /dev/null
+++ b/common/helpers/__tests__/interpolation.spec.js
@@ -0,0 +1,65 @@
+import { lerp, clamp, invlerp, range } from '../interpolation.js'
+
+describe('lerp', () => {
+  it.each([
+    [[0, 50, 0.5], 25],
+    [[1, 3, 0.5], 2],
+    [[0, 5, 0.2], 1],
+    [[2, 7, 1], 7],
+    [[8, 4, 0.5], 6],
+    [[5, 4, 1], 4],
+    [[3, 7, 2], 11],
+    [[2, 3, 3], 5],
+    [[-8, -4, 0.5], -6],
+    [[-2, -4, 0.25], -2.5],
+    [[0, 10, 0.1], 1],
+    [[10, 50, 1], 50],
+  ])('maps %p to %p', (input, expected) => {
+    expect(lerp(...input)).toEqual(expected)
+  })
+})
+
+describe('clamp', () => {
+  it.each([
+    [[0.5, 0, 50], 0.5],
+    [[3, 0, 5], 3],
+    [[2, -5, 10], 2],
+    [[8, 1, 3], 3],
+    [[5, -1, 2], 2],
+    [[3, 5, 10], 5],
+    [[1, 2, 3], 2],
+    [[11, 0, 10], 10],
+    [[1, 10, 50], 10],
+  ])('maps %p to %p', (input, expected) => {
+    expect(clamp(...input)).toEqual(expected)
+  })
+})
+
+describe('invlerp', () => {
+  it.each([
+    [[0, 2, 1], 0.5],
+    [[-10, 0, -5], 0.5],
+    [[-10, 10, 8], 0.9],
+    [[3, 7, 5], 0.5],
+    [[-1, 1, 10], 1],
+    [[99, 101, 42], 0],
+    [[-100, 100, -100], 0],
+  ])('maps %p to %p', (input, expected) => {
+    expect(invlerp(...input)).toEqual(expected)
+  })
+})
+
+describe('range', () => {
+  it.each([
+    [[0, 1, 10, 20, 0.5], 15],
+    [[10, 0, 20, 40, 7.5], 25],
+    [[-10, 10, 8, 96, 5], 74],
+    [[16, 32, 8, 14, 24], 11],
+    [[-100, 100, 0, 100, 0], 50],
+    [[-100, 100, 0, 100, 50], 75],
+    [[42, 42, 0, 100, 42], NaN],
+    [[1337, 50, 0, 100, 42], 100],
+  ])('maps %p to %p', (input, expected) => {
+    expect(range(...input)).toEqual(expected)
+  })
+})
diff --git a/frontend/src/components/generic/AvatarRow.vue b/frontend/src/components/generic/AvatarRow.vue
index 54909a5a23..ae3cbe1c80 100644
--- a/frontend/src/components/generic/AvatarRow.vue
+++ b/frontend/src/components/generic/AvatarRow.vue
@@ -25,7 +25,7 @@ export default {
   }),
   computed: {
     size() {
-      return Number(this.maxSize) < this.maxHeight ? Number(this.maxSize) : this.maxHeight
+      return Math.min(Number(this.maxSize), this.maxHeight)
     },
     maxWidth() {
       return this.campCollaborations?.length * (this.size * 0.5) + this.size
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 0610aeef4f..4c79625f46 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -56,9 +56,9 @@ Listing all given activity schedule entries in a calendar view.
       </template>
 
       <!-- template for single scheduleEntry -->
-      <template #event="{ event, timed }">
+      <template #event="{ event }">
         <PicassoEntry
-          :timed="timed"
+          :show-avatars="showAvatars"
           :schedule-entry="event"
           :editable="editable"
           @startResize="startResize(event)"
@@ -155,6 +155,8 @@ export default {
 
     const isSaving = ref(false)
 
+    const showAvatars = new URLSearchParams(document.location.search).has('showAvatars')
+
     // callback used to save entry to API
     const updateEntry = (scheduleEntry, startTimestamp, endTimestamp) => {
       const patchData = {
@@ -260,6 +262,7 @@ export default {
     }
 
     return {
+      showAvatars,
       vCalendarListeners,
       startResize: dragAndDropResize.startResize,
       onMouseleave,
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index ddd8c53b38..02c12a099d 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -38,9 +38,9 @@
       <h4 class="e-picasso-entry__title">
         {{ activityName }}
       </h4>
-      <template v-if="campCollaboration">
+      <template v-if="campCollaborations">
         <br />
-        <small>{{ campCollaboration }}</small>
+        <small>{{ campCollaborationText }}</small>
       </template>
       <template v-if="$vuetify.breakpoint.lgAndUp && location">
         <br />
@@ -64,11 +64,14 @@
     <h4 class="e-picasso-entry__title">
       {{ activityName }}
     </h4>
-    <template v-if="campCollaboration">
-      <br />
-      <small>{{ campCollaboration }}</small>
+    <template v-if="campCollaborationText">
+      <template v-if="clientWidth < 200 || !showAvatars">
+        <br />
+        <small>{{ campCollaborationText }}</small>
+      </template>
+      <AvatarRow v-else :camp-collaborations="campCollaborations" />
     </template>
-    <template v-if="$vuetify.breakpoint.lgAndUp && location">
+    <template v-if="location">
       <br />
       <small>{{ location }}</small>
     </template>
@@ -81,14 +84,15 @@ import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisp
 import { scheduleEntryRoute } from '../../../router.js'
 import { contrastColor } from '../../../../../common/helpers/colors.js'
 import { useClickDetector } from './useClickDetector.js'
+import AvatarRow from '@/components/generic/AvatarRow.vue'
 
 export default {
   name: 'PicassoEntry',
-  components: { DialogActivityEdit },
+  components: { AvatarRow, DialogActivityEdit },
   props: {
     editable: { type: Boolean, required: true },
     scheduleEntry: { type: Object, required: true },
-    timed: { type: Boolean, required: true },
+    showAvatars: Boolean,
   },
   emits: ['startResize', 'finishEdit'],
   setup(props) {
@@ -102,6 +106,9 @@ export default {
 
     return { listeners, editDialog }
   },
+  data: () => ({
+    clientWidth: 0,
+  }),
   computed: {
     activity() {
       return this.scheduleEntry.activity()
@@ -124,10 +131,13 @@ export default {
       if (this.scheduleEntry.tmpEvent) return []
       return this.activity.activityResponsibles().items
     },
-    campCollaboration() {
-      if (this.activityResponsibles.length === 0) return ''
-      return `[${this.activityResponsibles
-        .map((item) => campCollaborationDisplayName(item.campCollaboration()))
+    campCollaborations() {
+      return this.activityResponsibles.map((item) => item.campCollaboration())
+    },
+    campCollaborationText() {
+      if (this.campCollaborations.length === 0) return ''
+      return `[${this.campCollaborations
+        .map((item) => campCollaborationDisplayName(item))
         .join(', ')}]`
     },
     location() {
@@ -163,6 +173,18 @@ export default {
       return scheduleEntryRoute(this.scheduleEntry)
     },
   },
+  mounted() {
+    this.clientWidth = this.$el.clientWidth
+    window.addEventListener('resize', this.onResize)
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.onResize)
+  },
+  methods: {
+    onResize() {
+      this.clientWidth = this.$el.clientWidth
+    },
+  },
 }
 </script>
 
@@ -277,4 +299,11 @@ export default {
     display: block; // resize handle not visible on mobile
   }
 }
+
+:deep .avatarrow {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  max-height: calc(100% - 4px);
+}
 </style>
diff --git a/frontend/src/components/user/UserAvatar.vue b/frontend/src/components/user/UserAvatar.vue
index 744da60482..246cf2df0f 100644
--- a/frontend/src/components/user/UserAvatar.vue
+++ b/frontend/src/components/user/UserAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :size="size" :color="color" v-bind="$attrs">
+  <v-avatar :size="size" :color="color" :title="displayName" v-bind="$attrs">
     <span class="d-sr-only">{{ displayName }}</span>
     <span aria-hidden="true" :style="style">{{ initials }}</span>
   </v-avatar>
@@ -52,10 +52,18 @@ export default {
         ? userDisplayName(this.user)
         : campCollaborationDisplayName(this.campCollaboration, this.$tc.bind(this))
     },
+    /**
+     * Font size of small avatars should be half the size,
+     * bigger avatars should have more visual padding
+     */
+    fontSize() {
+      const ratio = range(16, 32, 2, 2.3, Number(this.size))
+      return Number(this.size) / ratio
+    },
     style() {
       return {
         color: contrastColor(this.color),
-        fontSize: Number(this.size) / range(16, 32, 2, 2.4, this.size) + 'px',
+        fontSize: `${this.fontSize}px`,
         fontWeight: Number(this.size) > 44 ? 450 : Number(this.size) > 24 ? 500 : 600,
         letterSpacing: Number(this.size) < 24 ? '.05em' : 0,
         marginRight: Number(this.size) < 24 ? '-.125em' : 0,

From f3951132aec141ee15208e9376fc7b72bdab8a8c Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Wed, 23 Nov 2022 00:38:26 +0100
Subject: [PATCH 16/29] Implement tests to define a contract for how these
 functions work

---
 .../__tests__/vCalendarDragAndDrop.spec.js    | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js

diff --git a/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js b/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
new file mode 100644
index 0000000000..9b3037a9fc
--- /dev/null
+++ b/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
@@ -0,0 +1,100 @@
+import {
+  toTime,
+  roundTimeDown,
+  roundTimeUp,
+  minMaxTime,
+} from '@/helpers/vCalendarDragAndDrop.js'
+
+describe('toTime', () => {
+  it.each([
+    [
+      {
+        date: '2023-05-08',
+        time: '14:13',
+        year: 2023,
+        month: 5,
+        day: 8,
+        weekday: 1,
+        hour: 14,
+        minute: 13,
+        hasDay: true,
+        hasTime: true,
+        past: false,
+        present: false,
+        future: true,
+      },
+      1683547980000,
+    ],
+    [
+      {
+        date: '2023-05-07',
+        time: '10:20',
+        year: 2023,
+        month: 5,
+        day: 7,
+        weekday: 0,
+        hour: 10,
+        minute: 20,
+        hasDay: true,
+        hasTime: true,
+        past: false,
+        present: false,
+        future: true,
+      },
+      1683447600000,
+    ],
+    [
+      {
+        date: '2022-04-05',
+        time: '22:22',
+        year: 2022,
+        month: 4,
+        day: 5,
+        weekday: 5,
+        hour: 22,
+        minute: 22,
+        hasDay: true,
+        hasTime: true,
+        past: false,
+        present: false,
+        future: true,
+      },
+      1649190120000,
+    ],
+  ])('maps %p to %p', (input, expected) => {
+    expect(toTime(input)).toEqual(expected)
+  })
+})
+
+describe('roundTimeDown', () => {
+  it.each([
+    [1649190120000, 1649189700000],
+    [1683447600000, 1683447300000],
+    [1683543980000, 1683543600000],
+    [1683547980999, 1683547200000],
+  ])('maps %p to %p', (input, expected) => {
+    expect(roundTimeDown(input)).toEqual(expected)
+  })
+})
+
+describe('roundTimeUp', () => {
+  it.each([
+    [1649190120000, 1649190600000],
+    [1683447600000, 1683448200000],
+    [1683543980000, 1683544500000],
+    [1683547980999, 1683548100000],
+  ])('maps %p to %p', (input, expected) => {
+    expect(roundTimeUp(input)).toEqual(expected)
+  })
+})
+
+describe('minMaxTime', () => {
+  it.each([
+    [[1649190120000, 1639190120000], { min: 1639190700000, max: 1649189700000 }],
+    [[1683447600000, 1683427600000], { min: 1683428400000, max: 1683447300000 }],
+    [[1683543980000, 1683546980000], { min: 1683543600000, max: 1683547200000 }],
+    [[1683547980999, 1683597980999], { min: 1683547200000, max: 1683598500000 }],
+  ])('maps %p to %p', (input, expected) => {
+    expect(minMaxTime(...input)).toEqual(expected)
+  })
+})

From f9fcb616a48093d55636a177c86763efc428c85b Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Wed, 23 Nov 2022 00:39:31 +0100
Subject: [PATCH 17/29] Fix typo

---
 frontend/src/locales/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 1664c91fbb..43f45b8ac7 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -117,7 +117,7 @@
     "generic": {
       "lockIcon": {
         "guestsCannotEdit": "Gäste haben keinen Bearbeitungszugriff",
-        "doubleClickToUnlock": "Doppelklick um zu Entsperren"
+        "doubleClickToUnlock": "Doppelklick um zu entsperren"
       }
     },
     "layout": {

From d26c8cb5c2cfe3147a2c64be24b63dddcff359d9 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Wed, 23 Nov 2022 00:41:04 +0100
Subject: [PATCH 18/29] Fix param description

---
 .../src/components/program/picasso/useDragAndDropReminder.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/program/picasso/useDragAndDropReminder.js b/frontend/src/components/program/picasso/useDragAndDropReminder.js
index ac0c393631..fe57aba1a8 100644
--- a/frontend/src/components/program/picasso/useDragAndDropReminder.js
+++ b/frontend/src/components/program/picasso/useDragAndDropReminder.js
@@ -2,8 +2,8 @@ import { toTime, minMaxTime, ONE_HOUR } from '@/helpers/vCalendarDragAndDrop.js'
 
 /**
  *
- * @param enabled {Ref<boolean>} enabled   drag & drop is disabled if enabled=false
- * @param showReminder {(move?: boolean) => void} threshold       min. mouse movement needed to detect drag & drop
+ * @param enabled {Ref<boolean>} drag & drop is disabled if enabled=false
+ * @param showReminder {(move?: boolean) => void} function to show the reminder
  * @returns
  */
 export function useDragAndDropReminder(enabled, showReminder) {

From 63d9721f43b0a971131a4d76170ac7b80847dfce Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Wed, 23 Nov 2022 00:41:31 +0100
Subject: [PATCH 19/29] Remove unused (replaced by AvatarRow) component

---
 .../picasso/ScheduleEntryResponsibles.vue     | 47 -------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue

diff --git a/frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue b/frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue
deleted file mode 100644
index 9f79878a14..0000000000
--- a/frontend/src/components/program/picasso/ScheduleEntryResponsibles.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<!--
-Displays responsibles of a scheduleEntry as avatars
--->
-<template>
-  <div>
-    <user-avatar
-      v-for="ar in sortActivityResponsibles(
-        scheduleEntry.activity().activityResponsibles().items
-      )"
-      :key="ar._meta.self"
-      :camp-collaboration="ar.campCollaboration()"
-      :size="avatarSize"
-      style="margin: 2px"
-    />
-  </div>
-</template>
-
-<script>
-import UserAvatar from '@/components/user/UserAvatar.vue'
-import { sortBy } from 'lodash'
-import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
-
-export default {
-  name: 'ScheduleEntryResponsibles',
-  components: {
-    UserAvatar,
-  },
-  props: {
-    scheduleEntry: {
-      type: Object,
-      required: true,
-    },
-    avatarSize: {
-      type: Number,
-      required: false,
-      default: 24,
-    },
-  },
-  methods: {
-    sortActivityResponsibles(activityResponsibles) {
-      return sortBy(activityResponsibles, (activityResponsible) =>
-        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
-      )
-    },
-  },
-}
-</script>

From 3c513b1238c1c58e9704b8e5faf05987fdd60a51 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 27 Nov 2022 13:34:43 +0100
Subject: [PATCH 20/29] Remove unused display property helper

---
 frontend/src/scss/global.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index 848d9127c4..745d455826 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -99,10 +99,6 @@ body {
   display: flow-root;
 }
 
-.d-contents {
-  display: contents;
-}
-
 .currentColor--text {
   color: currentColor !important;
 }

From 5183cc650bd9955b9fbfd04e5113991022aaaefb Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 27 Nov 2022 13:39:52 +0100
Subject: [PATCH 21/29] Use better naming for ActivityResponsibles select

---
 frontend/src/components/activity/ActivityResponsibles.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/activity/ActivityResponsibles.vue b/frontend/src/components/activity/ActivityResponsibles.vue
index 46adae7df9..8a297b2f0f 100644
--- a/frontend/src/components/activity/ActivityResponsibles.vue
+++ b/frontend/src/components/activity/ActivityResponsibles.vue
@@ -18,8 +18,7 @@
     <template #selection="{ item }">
       <v-chip :key="item.value" small class="mx-0">
         <UserAvatar
-          :user="item.info.user && item.info.user()"
-          :camp-collaboration="item.info.campCollaboration"
+          :camp-collaboration="item.campCollaboration"
           left
           size="20"
           class="ml-n3"
@@ -72,7 +71,7 @@ export default {
           // following structure is defined by vuetify v-select items property
           return {
             value: value._meta.self,
-            info: value,
+            campCollaboration: value,
             text: campCollaborationDisplayName(value, this.$tc.bind(this)),
           }
         })

From 3d27d8033413bff0c40255091aba564fc22838af Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 27 Nov 2022 14:35:15 +0100
Subject: [PATCH 22/29] Add screenreader text in PicassoEntry

---
 .../program/picasso/PicassoEntry.vue          | 34 +++++++++++++++----
 frontend/src/locales/de.json                  | 16 +++++----
 frontend/src/locales/en.json                  | 26 ++++++++------
 frontend/src/locales/fr.json                  | 18 ++++++----
 frontend/src/locales/it.json                  | 16 ++++++---
 5 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 02c12a099d..d851b7a190 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -40,16 +40,26 @@
       </h4>
       <template v-if="campCollaborations">
         <br />
-        <small>{{ campCollaborationText }}</small>
+        <small
+          ><span class="d-sr-only">{{
+            $tc('components.program.picasso.picassoEntry.responsible')
+          }}</span
+          >{{ campCollaborationText }}</small
+        >
       </template>
       <template v-if="$vuetify.breakpoint.lgAndUp && location">
         <br />
-        <small>{{ location }}</small>
+        <small
+          ><span class="d-sr-only">{{
+            $tc('components.program.picasso.picassoEntry.location')
+          }}</span
+          >{{ location }}</small
+        >
       </template>
 
       <!-- resize handle -->
       <div
-        v-if="editable && timed"
+        v-if="editable"
         class="e-picasso-entry__drag-bottom"
         @mousedown.stop="$emit('startResize')"
       />
@@ -67,13 +77,23 @@
     <template v-if="campCollaborationText">
       <template v-if="clientWidth < 200 || !showAvatars">
         <br />
-        <small>{{ campCollaborationText }}</small>
+        <small
+          ><span class="d-sr-only">{{
+            $tc('components.program.picasso.picassoEntry.responsible')
+          }}</span
+          >{{ campCollaborationText }}</small
+        >
       </template>
       <AvatarRow v-else :camp-collaborations="campCollaborations" />
     </template>
     <template v-if="location">
       <br />
-      <small>{{ location }}</small>
+      <small
+        ><span class="d-sr-only">{{
+          $tc('components.program.picasso.picassoEntry.location')
+        }}</span
+        >{{ location }}</small
+      >
     </template>
   </router-link>
 </template>
@@ -81,8 +101,8 @@
 import { ref, toRefs } from 'vue'
 import DialogActivityEdit from '../DialogActivityEdit.vue'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
-import { scheduleEntryRoute } from '../../../router.js'
-import { contrastColor } from '../../../../../common/helpers/colors.js'
+import { scheduleEntryRoute } from '@/router.js'
+import { contrastColor } from '@/common/helpers/colors.js'
 import { useClickDetector } from './useClickDetector.js'
 import AvatarRow from '@/components/generic/AvatarRow.vue'
 
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 43f45b8ac7..ff03b49ca1 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -220,6 +220,10 @@
           "datetime": {
             "date": "dd. D.MM | D. MMM | DD. MMM YYYY"
           }
+        },
+        "picassoEntry": {
+          "location": "Ort:",
+          "responsible": "Verantwortlich: "
         }
       }
     },
@@ -368,6 +372,12 @@
         "collaborators": "Team verwalten",
         "title": "Admin"
       },
+      "campProgram": {
+        "guestsCannotEdit": "Gäste können das Grobprogramm nicht bearbeiten",
+        "reminderLockedCreate": "Ziehen zum Erstellen ist nur im entsperrten Modus möglich.",
+        "reminderLockedMove": "Ziehen zum Verschieben ist nur im entsperrten Modus möglich.",
+        "title": "Grobprogramm"
+      },
       "collaborators": {
         "email": "E-Mail-Adresse",
         "inactiveCollaborators": "Inaktiv",
@@ -455,12 +465,6 @@
           }
         }
       },
-      "campProgram": {
-        "guestsCannotEdit": "Gäste können das Grobprogramm nicht bearbeiten",
-        "reminderLockedCreate": "Ziehen zum Erstellen ist nur im entsperrten Modus möglich.",
-        "reminderLockedMove": "Ziehen zum Verschieben ist nur im entsperrten Modus möglich.",
-        "title": "Grobprogramm"
-      },
       "print": {
         "title": "Lager drucken"
       },
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index dc502d8e70..5688e4964a 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -79,11 +79,11 @@
       "dialogMaterialListCreate": {
         "title": "Create material list"
       },
-      "dialogPeriodEdit": {
-        "moveScheduleEntries": "Move schedule entries"
-      },
       "dialogPeriodCreate": {
         "title": "Create period"
+      },
+      "dialogPeriodEdit": {
+        "moveScheduleEntries": "Move schedule entries"
       }
     },
     "collaborator": {
@@ -116,8 +116,8 @@
     },
     "generic": {
       "lockIcon": {
-        "guestsCannotEdit": "Guests have no permission to edit",
-        "doubleClickToUnlock": "Double click to unlock"
+        "doubleClickToUnlock": "Double click to unlock",
+        "guestsCannotEdit": "Guests have no permission to edit"
       }
     },
     "layout": {
@@ -217,6 +217,10 @@
           "datetime": {
             "date": "dd. D.MM | D. MMM | DD. MMM YYYY"
           }
+        },
+        "picassoEntry": {
+          "location": "Location:",
+          "responsible": "Responsible: "
         }
       }
     },
@@ -365,6 +369,12 @@
         "collaborators": "Manage Team",
         "title": "Admin"
       },
+      "campProgram": {
+        "guestsCannotEdit": "A guest cannot edit the picasso",
+        "reminderLockedCreate": "Drag to create is only possible in unlocked mode.",
+        "reminderLockedMove": "Drag to move is only possible in unlocked mode.",
+        "title": "Picasso"
+      },
       "collaborators": {
         "email": "Email address",
         "inactiveCollaborators": "Inactive",
@@ -452,12 +462,6 @@
           }
         }
       },
-      "campProgram": {
-        "guestsCannotEdit": "A guest cannot edit the picasso",
-        "reminderLockedCreate": "Drag to create is only possible in unlocked mode.",
-        "reminderLockedMove": "Drag to move is only possible in unlocked mode.",
-        "title": "Picasso"
-      },
       "print": {
         "title": "Print camp"
       },
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index 57c43b9076..ed252c87f1 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -57,6 +57,12 @@
       },
       "formScheduleEntryList": {
         "name": "Prévu"
+      },
+      "picasso": {
+        "picassoEntry": {
+          "location": "Location:",
+          "responsible": "Responsabile:"
+        }
       }
     },
     "toast": {
@@ -89,8 +95,8 @@
       "content": "Contenu",
       "create": "Créer",
       "delete": "Effacer",
-      "login": "Se connecter",
       "edit": "Éditer",
+      "login": "Se connecter",
       "ok": "D'accord",
       "open": "Ouvrir",
       "save": "Sauvegarder",
@@ -121,19 +127,19 @@
         "beta": {
           "notice": "Voici le site du nouveau eCamp.<br>IMPORTANT : Ce site est en construction. Cela signifie que toutes les données sont publiques et seront supprimées périodiquement !"
         },
+        "email": "Courriel",
         "loginCallback": {
           "loginInProgress": "Vous serez connecté"
         },
         "or": "ou",
         "password": "Mot de passe",
         "provider": {
+          "cevidb": "Connectez-vous avec CeviDB",
           "ecamp": "Connectez-vous avec eCamp",
           "google": "Connectez-vous avec Google",
-          "midata": "Connectez-vous avec MiData",
-          "cevidb": "Connectez-vous avec CeviDB"
+          "midata": "Connectez-vous avec MiData"
         },
-        "registernow": "Inscrivez-vous maintenant",
-        "email": "Courriel"
+        "registernow": "Inscrivez-vous maintenant"
       },
       "register": {
         "acceptTermsOfUse": "Accepter les conditions d'utilisation",
@@ -205,4 +211,4 @@
       "profile": "Profil"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index 11f0faaf48..97a6e5ad45 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -57,6 +57,12 @@
       },
       "formScheduleEntryList": {
         "name": "Programmato"
+      },
+      "picasso": {
+        "picassoEntry": {
+          "location": "Luogo:",
+          "responsible": "Responsable:"
+        }
       }
     },
     "toast": {
@@ -121,19 +127,19 @@
         "beta": {
           "notice": "Questo è il sito del nuovo eCamp.<br>IMPORTANTE: Questo sito è in costruzione. Ciò significa che tutti i dati sono pubblici e verranno periodicamente cancellati!"
         },
+        "email": "Indirizzo e-mail",
         "loginCallback": {
           "loginInProgress": "Sarai loggato"
         },
         "or": "oppure",
         "password": "Parola d'ordine",
         "provider": {
+          "cevidb": "Accedi con CeviDB",
           "ecamp": "Accedi con eCamp",
           "google": "Accedi con Google",
-          "midata": "Accedi con MiData",
-          "cevidb": "Accedi con CeviDB"
+          "midata": "Accedi con MiData"
         },
-        "registernow": "Iscriviti ora",
-        "email": "Indirizzo e-mail"
+        "registernow": "Iscriviti ora"
       },
       "register": {
         "acceptTermsOfUse": "Accettare le condizioni di utilizzo",
@@ -205,4 +211,4 @@
       "profile": "Profilo"
     }
   }
-}
\ No newline at end of file
+}

From 53aeb779b0d53146caa75152d7e0b815839ef206 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 27 Nov 2022 14:49:45 +0100
Subject: [PATCH 23/29] Move reminderText into its own variable

---
 frontend/src/views/camp/CampProgram.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
index d1f0059568..94398f7c69 100644
--- a/frontend/src/views/camp/CampProgram.vue
+++ b/frontend/src/views/camp/CampProgram.vue
@@ -52,11 +52,7 @@ Show all activity schedule entries of a single period.
     </schedule-entries>
     <v-snackbar v-model="showReminder" light class="mb-12">
       <v-icon>mdi-lock</v-icon>
-      {{
-        reminderType === 'create'
-          ? $tc('views.camp.campProgram.reminderLockedCreate')
-          : $tc('views.camp.campProgram.reminderLockedMove')
-      }}
+      {{ reminderText }}
     </v-snackbar>
   </content-card>
 </template>
@@ -91,7 +87,7 @@ export default {
     return {
       editMode: false,
       showReminder: false,
-      reminderType: null,
+      reminderText: null,
     }
   },
   computed: {
@@ -117,7 +113,9 @@ export default {
   },
   methods: {
     showUnlockReminder(move) {
-      this.reminderType = move ? 'move' : 'create'
+      this.reminderText = move
+        ? this.$tc('views.camp.campProgram.reminderLockedMove')
+        : this.$tc('views.camp.campProgram.reminderLockedCreate')
       this.showReminder = true
     },
   },

From 60a7ec1968fb5b508fc77e13a54ac7d03327a24a Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 27 Nov 2022 14:52:28 +0100
Subject: [PATCH 24/29] Fix vCalendarDragAndDrop test

---
 frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js b/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
index 9b3037a9fc..525cfcef46 100644
--- a/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
+++ b/frontend/src/helpers/__tests__/vCalendarDragAndDrop.spec.js
@@ -23,7 +23,7 @@ describe('toTime', () => {
         present: false,
         future: true,
       },
-      1683547980000,
+      1683555180000,
     ],
     [
       {
@@ -41,7 +41,7 @@ describe('toTime', () => {
         present: false,
         future: true,
       },
-      1683447600000,
+      1683454800000,
     ],
     [
       {
@@ -59,7 +59,7 @@ describe('toTime', () => {
         present: false,
         future: true,
       },
-      1649190120000,
+      1649197320000,
     ],
   ])('maps %p to %p', (input, expected) => {
     expect(toTime(input)).toEqual(expected)

From e77b5267d62e7b17c62d97cddc12ffbb83c5876b Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Dec 2022 15:29:07 +0100
Subject: [PATCH 25/29] Optimize dense display of picasso entry

---
 .../src/components/dashboard/ActivityRow.vue  |   3 +-
 frontend/src/components/generic/AvatarRow.vue |  29 +++--
 .../components/program/picasso/Picasso.vue    |  53 +++++---
 .../program/picasso/PicassoEntry.vue          | 123 ++++++++++++------
 frontend/src/helpers/vCalendarDragAndDrop.js  |   4 +-
 frontend/src/locales/de.json                  |   3 +-
 frontend/src/locales/en.json                  |   3 +-
 7 files changed, 138 insertions(+), 80 deletions(-)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index fe609d022a..9095134c73 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -97,10 +97,9 @@ tr + tr :is(td, th) {
 }
 
 .contentrow {
-  max-width: 100px;
+  max-width: 64px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .avatarrow {
diff --git a/frontend/src/components/generic/AvatarRow.vue b/frontend/src/components/generic/AvatarRow.vue
index ae3cbe1c80..6a875b9d2c 100644
--- a/frontend/src/components/generic/AvatarRow.vue
+++ b/frontend/src/components/generic/AvatarRow.vue
@@ -1,9 +1,9 @@
 <template>
-  <div ref="row" class="avatarrow" :style="avatarrow">
+  <div class="e-avatarrow" :class="{ 'e-avatarrow--narrow': narrow }" :style="styles">
     <div
       v-for="campCollaboration in campCollaborations"
       :key="campCollaboration && campCollaboration._meta.self"
-      class="avataritem"
+      class="e-avataritem"
     >
       <UserAvatar :size="size" :camp-collaboration="campCollaboration" />
     </div>
@@ -30,7 +30,10 @@ export default {
     maxWidth() {
       return this.campCollaborations?.length * (this.size * 0.5) + this.size
     },
-    avatarrow() {
+    narrow() {
+      return this.campCollaborations?.length > 3
+    },
+    styles() {
       return {
         'max-width': `${this.maxWidth}px`,
         'font-size': `${this.size}px`,
@@ -38,32 +41,36 @@ export default {
     },
   },
   mounted() {
-    this.maxHeight = this.$el.clientHeight
+    this.maxHeight = this.$el.getBoundingClientRect().height
   },
 }
 </script>
 
 <style scoped lang="scss">
-.avatarrow {
+.e-avatarrow {
   display: flex;
   flex-direction: row-reverse;
-  gap: 0.75em;
+  gap: 0.8em;
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    gap: 1.1em;
+  }
+
   padding-left: 0.5em;
   padding-right: 0.5em;
   transition: gap 0.25s ease;
 }
 
-@media #{map-get($display-breakpoints, 'md-and-up')} {
-  .avatarrow {
-    gap: 1.1em;
+.e-avatarrow--narrow {
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    gap: 0.8em;
   }
 }
 
-.avatarrow:hover {
+.e-avatarrow:hover {
   gap: 1.1em;
 }
 
-.avataritem {
+.e-avataritem {
   display: grid;
   width: 0;
   place-content: center;
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 4c79625f46..db8aa54f2c 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -13,6 +13,7 @@ Listing all given activity schedule entries in a calendar view.
       event-overlap-mode="column"
       event-start="startTimestamp"
       event-end="endTimestamp"
+      event-color="transparent"
       :interval-height="computedIntervalHeight"
       interval-width="46"
       :interval-format="intervalFormat"
@@ -38,18 +39,19 @@ Listing all given activity schedule entries in a calendar view.
       <!-- day header -->
       <template #day-label-header="{ date }">
         <div class="e-picasso-daily_head-day-label">
-          <span v-if="widthPluralization > 0" class="d-block">
-            {{ $date.utc(date).format('dddd') }}
-          </span>
           {{
-            $date
-              .utc(date)
-              .format(
-                $tc(
-                  'components.program.picasso.picasso.datetime.date',
-                  widthPluralization
-                )
-              )
+            entryWidth > 140
+              ? $date
+                  .utc(date)
+                  .format($tc('components.program.picasso.picasso.datetime.fullDate'))
+              : $date
+                  .utc(date)
+                  .format(
+                    $tc(
+                      'components.program.picasso.picasso.datetime.smallDate',
+                      widthPluralization
+                    )
+                  )
           }}
         </div>
         <day-responsibles :date="date" :period="period" :readonly="!editable" />
@@ -289,9 +291,9 @@ export default {
   },
   computed: {
     widthPluralization() {
-      if (this.entryWidth < 81) {
+      if (this.entryWidth < 86) {
         return 0
-      } else if (this.entryWidth < 85) {
+      } else if (this.entryWidth < 89) {
         return 1
       } else {
         return 2
@@ -330,7 +332,7 @@ export default {
       this.entryWidth = Math.max(
         (this.$refs.calendar.$el.offsetWidth - widthIntervals) /
           this.$refs.calendar.days.length,
-        80
+        85
       )
     },
     intervalFormat(time) {
@@ -375,19 +377,29 @@ export default {
   }
 
   :deep {
+    .v-event-timed-container {
+      margin-right: 3px;
+      @media #{map-get($display-breakpoints, 'sm-and-up')} {
+        margin-right: 5px;
+      }
+      @media #{map-get($display-breakpoints, 'md-and-up')} {
+        margin-right: 6px;
+      }
+    }
+
     .v-calendar-daily_head-day,
     .v-calendar-daily__day {
       min-width: 80px;
     }
 
     .v-event-timed {
-      padding: 0px;
-      font-size: 11px !important;
+      padding: 0 1px 1px 0;
+      @media #{map-get($display-breakpoints, 'md-and-up')} {
+        padding-bottom: 2px;
+        padding-right: 2px;
+      }
       white-space: normal;
-      line-height: 1.15;
-      user-select: none;
-      -webkit-user-select: none;
-      border-color: white !important;
+      border: none !important;
     }
 
     .v-calendar-daily__day-container {
@@ -406,6 +418,7 @@ export default {
       z-index: 2;
       min-width: fit-content;
       overflow: hidden;
+      box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
     }
 
     .v-calendar-daily__pane,
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index d851b7a190..e1fd137cbc 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- edit mode: normal div with drag & drop -->
   <div
     v-if="editable"
     class="e-picasso-entry e-picasso-entry--editable"
@@ -20,26 +21,33 @@
         <v-btn
           x-small
           text
-          color="currentColor"
           class="e-picasso-entry__quickedit rounded-sm pr-0"
           @click.prevent="on.click"
           @mousedown.stop=""
           @mouseup.stop=""
         >
-          <v-icon x-small color="currentColor">mdi-pencil</v-icon>
+          <v-icon x-small color="white">mdi-pencil</v-icon>
         </v-btn>
       </template>
     </dialog-activity-edit>
 
-    <!-- readonly mode: complete div is a HTML link -->
+    <h4 class="e-picasso-entry__title">
+      {{ activityName }}
+    </h4>
 
-    <!-- edit mode: normal div with drag & drop -->
-    <template v-if="editable">
-      <h4 class="e-picasso-entry__title">
-        {{ activityName }}
-      </h4>
-      <template v-if="campCollaborations">
-        <br />
+    <template v-if="location">
+      <br v-if="!isTinyDuration" />
+      <small
+        ><span class="d-sr-only">{{
+          $tc('components.program.picasso.picassoEntry.location')
+        }}</span>
+        {{ location }}
+      </small>
+    </template>
+    <template v-if="campCollaborationText">
+      <template v-if="clientWidth < 200 || !showAvatars">
+        <span v-if="!isLongDuration && location && campCollaborations"> &middot; </span>
+        <br v-if="isLongDuration" />
         <small
           ><span class="d-sr-only">{{
             $tc('components.program.picasso.picassoEntry.responsible')
@@ -47,24 +55,18 @@
           >{{ campCollaborationText }}</small
         >
       </template>
-      <template v-if="$vuetify.breakpoint.lgAndUp && location">
-        <br />
-        <small
-          ><span class="d-sr-only">{{
-            $tc('components.program.picasso.picassoEntry.location')
-          }}</span
-          >{{ location }}</small
-        >
-      </template>
-
-      <!-- resize handle -->
-      <div
-        v-if="editable"
-        class="e-picasso-entry__drag-bottom"
-        @mousedown.stop="$emit('startResize')"
-      />
+      <AvatarRow v-else :camp-collaborations="campCollaborations" />
     </template>
+
+    <!-- resize handle -->
+    <div
+      v-if="editable"
+      class="e-picasso-entry__drag-bottom"
+      @mousedown.stop="$emit('startResize')"
+    />
   </div>
+
+  <!-- readonly mode: component is a HTML link -->
   <router-link
     v-else
     class="e-picasso-entry e-piasso-entry--link"
@@ -74,9 +76,19 @@
     <h4 class="e-picasso-entry__title">
       {{ activityName }}
     </h4>
+    <template v-if="location">
+      <br v-if="!isTinyDuration" />
+      <small
+        ><span class="d-sr-only">{{
+          $tc('components.program.picasso.picassoEntry.location')
+        }}</span>
+        {{ location }}
+      </small>
+    </template>
     <template v-if="campCollaborationText">
       <template v-if="clientWidth < 200 || !showAvatars">
-        <br />
+        <span v-if="!isLongDuration && location && campCollaborations"> &middot; </span>
+        <br v-if="isLongDuration" />
         <small
           ><span class="d-sr-only">{{
             $tc('components.program.picasso.picassoEntry.responsible')
@@ -86,15 +98,6 @@
       </template>
       <AvatarRow v-else :camp-collaborations="campCollaborations" />
     </template>
-    <template v-if="location">
-      <br />
-      <small
-        ><span class="d-sr-only">{{
-          $tc('components.program.picasso.picassoEntry.location')
-        }}</span
-        >{{ location }}</small
-      >
-    </template>
   </router-link>
 </template>
 <script>
@@ -105,6 +108,7 @@ import { scheduleEntryRoute } from '@/router.js'
 import { contrastColor } from '@/common/helpers/colors.js'
 import { useClickDetector } from './useClickDetector.js'
 import AvatarRow from '@/components/generic/AvatarRow.vue'
+import { ONE_MINUTE } from '@/helpers/vCalendarDragAndDrop.js'
 
 export default {
   name: 'PicassoEntry',
@@ -128,6 +132,8 @@ export default {
   },
   data: () => ({
     clientWidth: 0,
+    scrollHeight: 0,
+    clientHeight: 0,
   }),
   computed: {
     activity() {
@@ -156,9 +162,18 @@ export default {
     },
     campCollaborationText() {
       if (this.campCollaborations.length === 0) return ''
-      return `[${this.campCollaborations
+      return this.campCollaborations
         .map((item) => campCollaborationDisplayName(item))
-        .join(', ')}]`
+        .join(', ')
+    },
+    duration() {
+      return this.scheduleEntry.endTimestamp - this.scheduleEntry.startTimestamp
+    },
+    isTinyDuration() {
+      return this.duration <= 40 * ONE_MINUTE
+    },
+    isLongDuration() {
+      return this.scrollHeight <= this.clientHeight
     },
     location() {
       if (this.scheduleEntry.tmpEvent) return ''
@@ -195,6 +210,8 @@ export default {
   },
   mounted() {
     this.clientWidth = this.$el.clientWidth
+    this.clientHeight = this.$el.clientHeight
+    this.scrollHeight = this.$el.scrollHeight
     window.addEventListener('resize', this.onResize)
   },
   destroyed() {
@@ -203,6 +220,12 @@ export default {
   methods: {
     onResize() {
       this.clientWidth = this.$el.clientWidth
+      this.clientHeight = this.$el.clientHeight
+      this.scrollHeight = this.$el.scrollHeight
+      this.$nextTick(() => {
+        this.clientHeight = this.$el.clientHeight
+        this.scrollHeight = this.$el.scrollHeight
+      })
     },
   },
 }
@@ -212,9 +235,18 @@ export default {
 .e-picasso-entry {
   display: block;
   height: 100%;
-  padding: 2px;
+  padding: 1px;
+  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+    padding: 1px 2px;
+  }
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    padding: 2px 3px;
+    line-height: normal;
+  }
   overflow: hidden;
-  border-width: 1px;
+  overflow-wrap: break-word;
+  position: relative;
+  border-width: 0;
   border-color: transparent;
   border-style: solid;
   border-radius: 3px;
@@ -261,17 +293,22 @@ export default {
 
 .e-picasso-entry__quickedit {
   display: none;
-  float: right;
+  position: absolute;
+  right: 0;
+  top: 0;
   max-height: calc(100% + 4px);
   padding: 0 !important;
   min-width: 20px !important;
-  margin: -2px -2px;
   border-radius: 0 3px 0 4px !important;
   z-index: 100;
 }
 
 .e-picasso-entry:hover .e-picasso-entry__quickedit {
   display: inline-block;
+  background-color: rgba(0, 0, 0, 0.75);
+  &:hover {
+    background-color: black;
+  }
 }
 
 // event title text
@@ -320,7 +357,7 @@ export default {
   }
 }
 
-:deep .avatarrow {
+:deep .e-avatarrow {
   position: absolute;
   bottom: 2px;
   right: 2px;
diff --git a/frontend/src/helpers/vCalendarDragAndDrop.js b/frontend/src/helpers/vCalendarDragAndDrop.js
index 9763d4c365..8dd34d008e 100644
--- a/frontend/src/helpers/vCalendarDragAndDrop.js
+++ b/frontend/src/helpers/vCalendarDragAndDrop.js
@@ -29,7 +29,7 @@ const minMaxTime = (start, end) => {
   }
 }
 
-const ONE_HOUR = 60 * 60 * 1000
+const ONE_MINUTE = 40 * 60 * 1000
 const ONE_DAY = 24 * 60 * 60 * 1000
 
-export { toTime, roundTimeDown, roundTimeUp, minMaxTime, ONE_HOUR, ONE_DAY }
+export { toTime, roundTimeDown, roundTimeUp, minMaxTime, ONE_MINUTE, ONE_DAY }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ff03b49ca1..4f8063cd8f 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -218,7 +218,8 @@
       "picasso": {
         "picasso": {
           "datetime": {
-            "date": "dd. D.MM | D. MMM | DD. MMM YYYY"
+            "fullDate": "dd, DD. MMMM YYYY",
+            "smallDate": "dd, D.MM. | dd, D. MMM | dd, D. MMM YY"
           }
         },
         "picassoEntry": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 5688e4964a..39a0fd1357 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -215,7 +215,8 @@
       "picasso": {
         "picasso": {
           "datetime": {
-            "date": "dd. D.MM | D. MMM | DD. MMM YYYY"
+            "fullDate": "ddd, DD. MMMM YYYY",
+            "smallDate": "dd, D.MM. | dd, D. MMM | ddd, D. MMM YY"
           }
         },
         "picassoEntry": {

From 2aee635fecfd54ad2df58048d31c101cee4c14cd Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Dec 2022 15:32:05 +0100
Subject: [PATCH 26/29] Optimize layout

Stay longer in mobile view, as it more space-saving for the picasso overview
---
 frontend/src/App.vue                          |  2 +-
 .../components/program/ScheduleEntries.vue    |  6 ++---
 .../program/picasso/DayResponsibles.vue       |  3 +++
 .../components/program/picasso/Picasso.vue    | 22 +++++++++++++++++--
 frontend/src/views/NavigationDefault.vue      |  2 +-
 .../views/camp/navigation/NavigationCamp.vue  |  2 +-
 6 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ed9027f5f7..5328f1db8a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,7 +10,7 @@
     </v-main>
 
     <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.smAndUp" app color="grey lighten-5">
+    <v-footer v-if="$vuetify.breakpoint.mdAndUp" app color="grey lighten-5">
       <small
         >eCamp
         <a v-if="version" :href="versionLink" target="_blank">
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
index 546ca3d414..5ff011af82 100644
--- a/frontend/src/components/program/ScheduleEntries.vue
+++ b/frontend/src/components/program/ScheduleEntries.vue
@@ -10,8 +10,8 @@
 
     <v-btn
       v-if="showButton"
-      :fixed="$vuetify.breakpoint.xs"
-      :absolute="!$vuetify.breakpoint.xs"
+      :fixed="$vuetify.breakpoint.mdAndUp"
+      :absolute="!$vuetify.breakpoint.mdAndUp"
       dark
       fab
       style="z-index: 3"
@@ -103,7 +103,7 @@ export default {
 .fab--bottom_nav {
   position: fixed;
   bottom: calc(16px + 56px + env(safe-area-inset-bottom)) !important;
-  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
     bottom: calc(16px + 36px + env(safe-area-inset-bottom)) !important;
   }
 }
diff --git a/frontend/src/components/program/picasso/DayResponsibles.vue b/frontend/src/components/program/picasso/DayResponsibles.vue
index 0a1679650d..c734c58285 100644
--- a/frontend/src/components/program/picasso/DayResponsibles.vue
+++ b/frontend/src/components/program/picasso/DayResponsibles.vue
@@ -181,6 +181,9 @@ export default {
   &:deep(.v-select__selections) {
     justify-content: center;
   }
+  &:deep(.v-chip--clickable) {
+    cursor: auto;
+  }
 }
 
 :deep(.v-select__selections) input {
diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index db8aa54f2c..b73d4bd356 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -369,7 +369,7 @@ export default {
   }
 
   @media #{map-get($display-breakpoints, 'sm-and-up')} {
-    height: calc(100vh - 136px);
+    height: calc(100vh - 106px);
   }
 
   @media #{map-get($display-breakpoints, 'md-and-up')} {
@@ -435,6 +435,20 @@ export default {
       overflow-y: visible;
     }
   }
+
+  &:not(.e-picasso-entry--editable) {
+    &:deep(.v-calendar-daily_head-day-label) {
+      cursor: auto;
+
+      .theme--light.v-text-field > .v-input__control > .v-input__slot {
+        cursor: auto;
+
+        &:before {
+          border: none !important;
+        }
+      }
+    }
+  }
 }
 
 // day title
@@ -448,6 +462,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+  padding: 0;
 
   .v-text-field .v-label {
     text-align: center;
@@ -475,7 +490,10 @@ export default {
 
   .v-select__selections {
     gap: 4px;
-    padding: 4px 2px;
+    padding: 2px;
+    @media #{map-get($display-breakpoints, 'md-and-up')} {
+      padding: 4px 2px;
+    }
     width: 100%;
     min-width: initial;
 
diff --git a/frontend/src/views/NavigationDefault.vue b/frontend/src/views/NavigationDefault.vue
index b569a97963..017e0771c9 100644
--- a/frontend/src/views/NavigationDefault.vue
+++ b/frontend/src/views/NavigationDefault.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app-bar
-    v-if="$vuetify.breakpoint.smAndUp"
+    v-if="$vuetify.breakpoint.mdAndUp"
     app
     clipped-left
     color="blue-grey darken-4"
diff --git a/frontend/src/views/camp/navigation/NavigationCamp.vue b/frontend/src/views/camp/navigation/NavigationCamp.vue
index bd15178105..16112f7a16 100644
--- a/frontend/src/views/camp/navigation/NavigationCamp.vue
+++ b/frontend/src/views/camp/navigation/NavigationCamp.vue
@@ -1,5 +1,5 @@
 <template>
-  <NavTopbar v-if="$vuetify.breakpoint.smAndUp" :camp="camp" />
+  <NavTopbar v-if="$vuetify.breakpoint.mdAndUp" :camp="camp" />
   <div v-else>
     <NavBottombar :camp="camp" @input="open = $event" />
     <NavSidebar v-model="open" :camp="camp" />

From 50f7e89e12d6c10d1d5858540c55e28fc0cde63c Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Fri, 30 Dec 2022 15:52:13 +0100
Subject: [PATCH 27/29] Fix missing constant

---
 frontend/src/helpers/vCalendarDragAndDrop.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/helpers/vCalendarDragAndDrop.js b/frontend/src/helpers/vCalendarDragAndDrop.js
index 8dd34d008e..6418f82923 100644
--- a/frontend/src/helpers/vCalendarDragAndDrop.js
+++ b/frontend/src/helpers/vCalendarDragAndDrop.js
@@ -29,7 +29,8 @@ const minMaxTime = (start, end) => {
   }
 }
 
-const ONE_MINUTE = 40 * 60 * 1000
-const ONE_DAY = 24 * 60 * 60 * 1000
+const ONE_MINUTE = 60 * 1000
+const ONE_HOUR = 60 * ONE_MINUTE
+const ONE_DAY = 24 * ONE_HOUR
 
-export { toTime, roundTimeDown, roundTimeUp, minMaxTime, ONE_MINUTE, ONE_DAY }
+export { toTime, roundTimeDown, roundTimeUp, minMaxTime, ONE_MINUTE, ONE_HOUR, ONE_DAY }

From 4b49022b39c6a52b2d0b9e47b1a8974ffd8d2955 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 31 Dec 2022 11:04:41 +0100
Subject: [PATCH 28/29] Remove showAvatars option

Display avatars automatically at a min width of 200 px
---
 frontend/src/components/program/picasso/Picasso.vue      | 4 ----
 frontend/src/components/program/picasso/PicassoEntry.vue | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index b73d4bd356..4710e483f4 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -60,7 +60,6 @@ Listing all given activity schedule entries in a calendar view.
       <!-- template for single scheduleEntry -->
       <template #event="{ event }">
         <PicassoEntry
-          :show-avatars="showAvatars"
           :schedule-entry="event"
           :editable="editable"
           @startResize="startResize(event)"
@@ -157,8 +156,6 @@ export default {
 
     const isSaving = ref(false)
 
-    const showAvatars = new URLSearchParams(document.location.search).has('showAvatars')
-
     // callback used to save entry to API
     const updateEntry = (scheduleEntry, startTimestamp, endTimestamp) => {
       const patchData = {
@@ -264,7 +261,6 @@ export default {
     }
 
     return {
-      showAvatars,
       vCalendarListeners,
       startResize: dragAndDropResize.startResize,
       onMouseleave,
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index e1fd137cbc..3f52d40b1e 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -45,7 +45,7 @@
       </small>
     </template>
     <template v-if="campCollaborationText">
-      <template v-if="clientWidth < 200 || !showAvatars">
+      <template v-if="clientWidth < 200">
         <span v-if="!isLongDuration && location && campCollaborations"> &middot; </span>
         <br v-if="isLongDuration" />
         <small
@@ -86,7 +86,7 @@
       </small>
     </template>
     <template v-if="campCollaborationText">
-      <template v-if="clientWidth < 200 || !showAvatars">
+      <template v-if="clientWidth < 200">
         <span v-if="!isLongDuration && location && campCollaborations"> &middot; </span>
         <br v-if="isLongDuration" />
         <small
@@ -116,7 +116,6 @@ export default {
   props: {
     editable: { type: Boolean, required: true },
     scheduleEntry: { type: Object, required: true },
-    showAvatars: Boolean,
   },
   emits: ['startResize', 'finishEdit'],
   setup(props) {

From 55a687cfa85357deb8e90ceb2e96bad63375604e Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Wed, 25 Jan 2023 00:29:51 +0100
Subject: [PATCH 29/29] Change from v-timed padding to outline

---
 frontend/src/components/program/picasso/Picasso.vue      | 7 +------
 frontend/src/components/program/picasso/PicassoEntry.vue | 6 +++++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
index 4710e483f4..697e20cadc 100644
--- a/frontend/src/components/program/picasso/Picasso.vue
+++ b/frontend/src/components/program/picasso/Picasso.vue
@@ -10,7 +10,6 @@ Listing all given activity schedule entries in a calendar view.
       v-resize="resize"
       :class="['e-picasso', editable && 'e-picasso--editable']"
       :events="events"
-      event-overlap-mode="column"
       event-start="startTimestamp"
       event-end="endTimestamp"
       event-color="transparent"
@@ -389,11 +388,7 @@ export default {
     }
 
     .v-event-timed {
-      padding: 0 1px 1px 0;
-      @media #{map-get($display-breakpoints, 'md-and-up')} {
-        padding-bottom: 2px;
-        padding-right: 2px;
-      }
+      padding: 0;
       white-space: normal;
       border: none !important;
     }
diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
index 3f52d40b1e..708a8a4bc0 100644
--- a/frontend/src/components/program/picasso/PicassoEntry.vue
+++ b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -249,6 +249,11 @@ export default {
   border-color: transparent;
   border-style: solid;
   border-radius: 3px;
+  outline: 1px solid white;
+
+  &:hover {
+    z-index: 999;
+  }
 }
 
 @media #{map-get($display-breakpoints, 'sm-and-up')} {
@@ -267,7 +272,6 @@ export default {
   transition: transform 0.1s;
 
   &:hover {
-    z-index: 999;
     transform: scale(
       1.02
     ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */