implement draggable menu feature; enhance external data fetching and styling

Author: saaqi

src/lib/components/FetchEaternalData.svelte

@@ -11,23 +11,35 @@
 
 	// Import Transition
 	import { fade } from 'svelte/transition';
+	import '$lib/styles/draggable.scss';
+	import { onMount } from 'svelte';
+	import draggableContainer from '$lib/components/draggableContainer.js';
+	onMount(async () => {
+		try {
+			await restaurantMenu();
+			draggableContainer('draggableContainer');
+		} catch (error) {
+			console.error('Error fetching restaurant menu:', error);
+		}
+	});
 </script>
 
 {#snippet resMenu(data)}
-	<div class="container mt-4" in:fade>
-		<div class="row g-3">
+	<div class="draggableOuterContainer container mt-4" in:fade>
+		<div id="draggableContainer" class="row g-2 draggableContainer pb-lg-0 pb-3">
 			{#each data.menu as { name, price, description, image, category }, index ('resmenu-' + index)}
-				<div class="col-6 col-md-4 col-lg-3">
+				<div class="draggableItem">
 					<div class="card h-100">
 						<img
 							src="https://raw.githubusercontent.com/saaqi/restaurant-mobile-app-react-native/refs/heads/main/assets/menu/{image}"
 							class="card-img-top"
 							alt={name}
-							loading='lazy'
+							loading="lazy"
+							draggable="false"
 						/>
 						<div class="card-body">
 							<h4 class="card-title mb-3">{name}</h4>
-							<p class="card-text">{description}</p>
+							<p class="card-text shortDescription">{description}</p>
 						</div>
 						<div class="card-footer">
 							<div class="row align-items-center justify-content-between">
@@ -57,3 +69,15 @@
 {:catch error}
 	{alert(error + ' - Error Fetching Restaurant Menu')}
 {/await}
+
+<style>
+	.shortDescription {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-clamp: 2;
+		max-height: 3em;
+	}
+</style>

src/lib/components/Navigation.svelte

@@ -18,13 +18,6 @@
 		});
 	});
 
-	onMount(async () => {
-		// Only runs in browser
-		// await import('bootstrap/js/dist/dropdown.js');
-		await import('bootstrap/js/dist/collapse.js');
-		// await import('bootstrap/js/dist/scrollspy.js');
-	});
-
 	// Collapse Bootstrap Navigation on click
 	function collapseBootstrapMenu() {
 		const menuButton = document.querySelector('.navbar-toggler');
@@ -34,6 +27,13 @@
 		navbarCollapse.classList.remove('show');
 	}
 
+	onMount(async () => {
+		// Only runs in browser
+		// await import('bootstrap/js/dist/dropdown.js');
+		await import('bootstrap/js/dist/collapse.js');
+		// await import('bootstrap/js/dist/scrollspy.js');
+	});
+
 	// Navigation links
 	// You can add more links here
 	const navLinks = [

src/lib/components/draggableContainer.js

@@ -0,0 +1,48 @@
+// function isMobile() {
+//   const isAndroid = /Android/i.test(navigator.userAgent);
+//   const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+//   return isAndroid || isiOS;
+// }
+
+const hasTouchSupport = () => (
+  'ontouchstart' in window ||
+  navigator.maxTouchPoints > 0 ||
+  navigator.msMaxTouchPoints > 0
+)
+
+const draggableContainer = selectorID => {
+  if (hasTouchSupport()) return
+
+  const container = document.getElementById(selectorID)
+  if (!container) return
+
+  let isDragging = false
+  let startX = 0
+  let scrollLeft = 0
+
+  const onMouseDown = e => {
+    isDragging = true
+    startX = e.pageX - container.offsetLeft
+    scrollLeft = container.scrollLeft
+    container.classList.add('dragging')
+  }
+
+  const onMouseLeaveOrUp = () => {
+    isDragging = false
+    container.classList.remove('dragging')
+  }
+
+  const onMouseMove = e => {
+    if (!isDragging) return
+    e.preventDefault()
+    const x = e.pageX - container.offsetLeft
+    const walk = (x - startX) * 3
+    container.scrollLeft = scrollLeft - walk
+  }
+
+  container.addEventListener('mousedown', onMouseDown)
+  container.addEventListener('mouseleave', onMouseLeaveOrUp)
+  container.addEventListener('mouseup', onMouseLeaveOrUp)
+  container.addEventListener('mousemove', onMouseMove)
+}
+export default draggableContainer

src/lib/styles/draggable.scss

@@ -0,0 +1,32 @@
+.draggableContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+}
+.draggableItem {
+  flex: 0 0 25%;
+}
+
+@media (max-width: 992px) {
+  .draggableContainer {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    cursor: grab;
+    user-select: none;
+
+    &.dragging {
+      cursor: grabbing;
+    }
+  }
+  .draggableItem {
+    flex: 0 0 48%;
+  }
+}
+
+@media (max-width: 768px) {
+  .draggableItem {
+    flex: 0 0 95%;
+  }
+}