Implement sort most popular sessions view

src/components/AppDropdown.vue

@@ -0,0 +1,69 @@
+<template>
+  <div v-on-clickaway="away" class="app-drop-down">
+    <bunt-button @click="toggle">
+      <slot name="toggler"> Toggle </slot>
+      <svg
+        v-if="this.sharedState.active"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+      >
+        <path fill="currentColor" d="m7 15l5-5l5 5z" />
+      </svg>
+      <svg
+        v-else
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+      >
+        <path fill="currentColor" d="m7 10l5 5l5-5z" />
+      </svg>
+    </bunt-button>
+    <slot />
+  </div>
+</template>
+<script>
+import { mixin as clickaway } from 'vue-clickaway'
+
+export default {
+	name: 'AppDropdown',
+	mixins: [clickaway],
+	provide () {
+		return {
+			sharedState: this.sharedState
+		}
+	},
+	data () {
+		return {
+			sharedState: {
+				active: false,
+			},
+		}
+	},
+	methods: {
+		toggle () {
+			this.sharedState.active = !this.sharedState.active
+		},
+		away () {
+			this.sharedState.active = false
+		}
+	}
+}
+</script>
+<style>
+.app-drop-down {
+  margin: 0px 4px;
+  border-radius: 5px;
+  border: 2px solid rgba(0, 0, 0, 0.38);
+}
+
+.app-drop-down .bunt-button {
+  background-color: white;
+}
+
+.app-drop-down .bunt-button .bunt-button-content {
+  text-transform: capitalize;
+}
+</style>

src/components/AppDropdownContent.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition name="dropdown-content">
+    <div v-if="active" class="dropdown-content">
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+	name: 'AppDropdownContent',
+	inject: ['sharedState'],
+	computed: {
+		active () {
+			return this.sharedState.active
+		},
+	},
+}
+</script>
+
+<style>
+.dropdown-content {
+  position: absolute;
+  background: #ffffff;
+  margin-top: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  border-radius: 5px;
+  max-width: calc(100% - 40px);
+  max-height: 350px;
+  overflow-y: auto;
+}
+.dropdown-content .checkbox-line {
+  margin: 8px;
+}
+.dropdown-content .checkbox-line .bunt-checkbox .bunt-checkbox-box {
+  min-width: 20px;
+}
+.dropdown-content-enter-active,
+.dropdown-content-leave-active {
+  transition: all 0.2s;
+}
+.dropdown-content-enter,
+.dropdown-content-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+
+@media screen and (max-width: 480px) {
+  .dropdown-content {
+    /* left: 5px; */
+    max-width: 50%;
+    z-index: 10;
+  }
+}
+</style>

src/components/AppDropdownItem.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <slot/>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "AppDropdownItem"
+};
+</script>

src/components/GridSchedule.vue

@@ -190,7 +190,7 @@ export default {
 				}
 			})
 			// remove gap at the end of the schedule
-			if (compactedSlices[compactedSlices.length - 1].gap) compactedSlices.pop()
+			if (compactedSlices && compactedSlices[compactedSlices.length - 1]?.gap) compactedSlices.pop()
 			return compactedSlices
 		},
 		visibleTimeslices () {
@@ -330,6 +330,8 @@ export default {
 .c-grid-schedule
 	flex: auto
 	background-color: $clr-grey-50
+	max-width: 100vw
+	overflow: auto
 	.grid
 		display: grid
 		grid-template-columns: 78px repeat(var(--total-rooms), 1fr) auto
@@ -338,7 +340,7 @@ export default {
 		min-width: min-content
 		> .room
 			position: sticky
-			top: calc(var(--pretalx-sticky-date-offset) + var(--pretalx-sticky-top-offset, 0px))
+			// top: calc(var(--pretalx-sticky-date-offset) + var(--pretalx-sticky-top-offset, 0px))
 			display: flex
 			justify-content: center
 			align-items: center

src/components/LinearSchedule.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .c-linear-schedule(v-scrollbar.y="")
-	.bucket(v-for="({date, sessions}, index) of sessionBuckets")
+	.bucket(v-if="sortBy == 'time'", v-for="({date, sessions}, index) of sessionBuckets")
 		.bucket-label(:ref="getBucketName(date)", :data-date="date.format()")
 			.day(v-if="index === 0 || date.clone().startOf('day').diff(sessionBuckets[index - 1].date.clone().startOf('day'), 'day') > 0")  {{ date.format('dddd DD. MMMM') }}
 			.time {{ date.format('LT') }}
@@ -15,8 +15,21 @@
 				)
 				.break(v-else)
 					.title {{ getLocalizedString(session.title) }}
+	.bucket(v-if="sortBy == 'popularity' || sortBy == 'title'", v-for="session of sessionBuckets")
+		.sorted-session
+			session(
+				v-if="isProperSession(session)",
+				:session="session",
+				:faved="session.id && favs.includes(session.id)",
+				@fav="$emit('fav', session.id)",
+				@unfav="$emit('unfav', session.id)",
+				isLinearSchedule=true
+			)
+			.break(v-else)
+				.title {{ getLocalizedString(session.title) }}
 </template>
 <script>
+import _ from 'lodash'
 import moment from 'moment-timezone'
 import { getLocalizedString } from 'utils'
 import Session from './Session'
@@ -46,52 +59,40 @@ export default {
 	},
 	computed: {
 		sessionBuckets () {
-			const buckets = {}
-			for (const session of this.sessions) {
-				const key = session.start.format()
-				if (!buckets[key]) {
-					buckets[key] = []
-				}
-				if (!session.id) {
-					// Remove duplicate breaks, meaning same start, end and text
-					session.break_id = `${session.start}${session.end}${session.title}`
-					if (buckets[key].filter(s => s.break_id === session.break_id).length === 0) buckets[key].push(session)
-				} else {
-					buckets[key].push(session)
-				}
-			}
-
-			return Object.entries(buckets).map(([date, sessions]) => {
-				let sessionBucket = {}
-				switch (this.sortBy) {
-					case 'title':
-						sessionBucket = {
-							date: sessions[0].start,
-							// sort by room for stable sort across time buckets
-							sessions: sessions.sort((a, b) => {
-								return a.title.localeCompare(b.title)
-							})
-						}
-						break
-					case 'popularity':
-						sessionBucket = {
-							date: sessions[0].start,
-							// sort by room for stable sort across time buckets
-							sessions: sessions.sort((a, b) => {
-								return b.fav_count - a.fav_count
-							})
-						}
-						break
-					default:
-						sessionBucket = {
-							date: sessions[0].start,
-							// sort by room for stable sort across time buckets
-							sessions: sessions.sort((a, b) => this.rooms.findIndex(room => room.id === a.room.id) - this.rooms.findIndex(room => room.id === b.room.id))
-						}
+			if (this.sortBy === 'time') {
+				const buckets = {}
+				for (const session of this.sessions) {
+					const key = session.start.format()
+					if (!buckets[key]) {
+						buckets[key] = []
+					}
+					if (!session.id) {
+						// Remove duplicate breaks, meaning same start, end and text
+						session.break_id = `${session.start}${session.end}${session.title}`
+						if (!buckets[key].some(s => s.break_id === session.break_id)) buckets[key].push(session)
+					} else {
+						buckets[key].push(session)
+					}
 				}
 
-				return sessionBucket
-			})
+				return Object.entries(buckets).map(([date, sessions]) => ({
+					date: sessions[0].start,
+					// sort by room for stable sort across time buckets
+					sessions: _.sortBy(sessions, session => this.rooms.findIndex(room => room.id === session.room.id))
+				}))
+			} else {
+				const sortedSessions = this.sessions.slice().sort((a, b) => {
+					switch (this.sortBy) {
+						case 'title':
+							return a.title.localeCompare(b.title)
+						case 'popularity':
+							return b.fav_count - a.fav_count
+						default:
+							return _.sortBy(this.rooms, room => room.id === a.room.id) - _.sortBy(this.rooms, room => room.id === b.room.id)
+					}
+				})
+				return sortedSessions
+			}
 		}
 	},
 	watch: {
@@ -189,6 +190,8 @@ export default {
 			padding-left: 16px
 			.day
 				font-weight: 600
+		.sorted-session
+			padding-left: 16px
 		.break
 			z-index: 10
 			margin: 8px

src/components/Session.vue

@@ -5,6 +5,7 @@ a.c-linear-schedule-session(:class="{faved}", :style="style", :href="link", @cli
 			.time {{ startTime.time }}
 			.ampm(v-if="startTime.ampm") {{ startTime.ampm }}
 		.duration {{ getPrettyDuration(session.start, session.end) }}
+		.session-date {{ getPrettyDate(session.start) }}
 		.buffer
 		.is-live(v-if="isLive") live
 	.info
@@ -36,7 +37,7 @@ a.c-linear-schedule-session(:class="{faved}", :style="style", :href="link", @cli
 <script>
 import moment from 'moment-timezone'
 import MarkdownIt from 'markdown-it'
-import { getLocalizedString, getPrettyDuration } from 'utils'
+import { getLocalizedString, getPrettyDuration, getPrettyDate } from 'utils'
 
 const markdownIt = MarkdownIt({
 	linkify: true,
@@ -81,7 +82,8 @@ export default {
 	data () {
 		return {
 			getPrettyDuration,
-			getLocalizedString
+			getLocalizedString,
+			getPrettyDate,
 		}
 	},
 	computed: {
@@ -151,7 +153,8 @@ export default {
 	color: $clr-primary-text-light
 	position: relative
 	.time-box
-		width: 69px
+		min-width: 75px
+		max-width: 75px
 		box-sizing: border-box
 		background-color: var(--track-color)
 		padding: 12px 16px 8px 12px
@@ -174,6 +177,14 @@ export default {
 				font-size: 13px
 		.duration
 			color: $clr-secondary-text-dark
+			margin-bottom: 8px
+		.session-date
+			color: $clr-primary-text-dark
+			font-size: 13px
+			font-weight: 600
+			display: flex
+			flex-direction: column
+			align-items: flex-end
 		.buffer
 			flex: auto
 		.is-live

src/utils.js

@@ -1,4 +1,5 @@
 // import i18n from 'i18n'
+import moment from 'moment';
 
 export function getLocalizedString (string) {
 	if (!string) return ''
@@ -26,3 +27,7 @@ export function getPrettyDuration (start, end) {
 	}
 	return `${hours}h`
 }
+export function getPrettyDate (start) {
+    const date = moment(start);
+    return date.format('ddd DD. MMM');
+}