From 8f1e35c4bc86a7153c492f5cf5328220b65a410b Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 13 Aug 2023 18:41:02 -0500 Subject: [PATCH 01/19] added home button to match other pages --- src/router/index.ts | 38 +++-- src/views/Home/Home.vue | 12 +- src/views/JazzmanMenu/JazzmanMenu.vue | 230 ++++++++++++++++++++++++++ 3 files changed, 260 insertions(+), 20 deletions(-) create mode 100644 src/views/JazzmanMenu/JazzmanMenu.vue diff --git a/src/router/index.ts b/src/router/index.ts index b25e0a73..8bca0077 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,21 +1,22 @@ import { createRouter, createWebHistory, RouteRecordRaw, RouteComponent, RouteLocationNormalized, NavigationGuardNext } from 'vue-router'; import useAuthenticationStore from '@/stores/authentication'; -const Home:RouteComponent = () => import('@/views/Home/Home.vue'); -const GpaCalculator:RouteComponent = () => import('@/views/GpaCalculator/GpaCalculator.vue'); -const BellSchedules:RouteComponent = () => import('@/views/Bell Schedules/BellSchedules.vue'); -const Calendar:RouteComponent = () => import('@/views/Calendar/Calendar.vue'); -const Links:RouteComponent = () => import('@/views/Links/Links.vue'); -const Colors:RouteComponent = () => import('@/views/Colors/Colors.vue'); -const Settings:RouteComponent = () => import('@/views/Settings/Settings.vue'); -const Tools:RouteComponent = () => import('@/views/Tools/Tools.vue'); -const Documents:RouteComponent = () => import('@/views/Documents/Documents.vue'); -const AddSchedule:RouteComponent = () => import('@/views/Settings/Add Schedule/AddSchedule.vue'); -const Login:RouteComponent = () => import('@/views/Login/Login.vue'); -const Code:RouteComponent = () => import('@/views/Code/Code.vue'); -const QRCode:RouteComponent = () => import('@/views/QRCodes/QRCodes.vue'); -const GetHelp:RouteComponent = () => import('@/views/GetHelp/GetHelp.vue'); +const Home: RouteComponent = () => import('@/views/Home/Home.vue'); +const GpaCalculator: RouteComponent = () => import('@/views/GpaCalculator/GpaCalculator.vue'); +const BellSchedules: RouteComponent = () => import('@/views/Bell Schedules/BellSchedules.vue'); +const Calendar: RouteComponent = () => import('@/views/Calendar/Calendar.vue'); +const Links: RouteComponent = () => import('@/views/Links/Links.vue'); +const Colors: RouteComponent = () => import('@/views/Colors/Colors.vue'); +const Settings: RouteComponent = () => import('@/views/Settings/Settings.vue'); +const Tools: RouteComponent = () => import('@/views/Tools/Tools.vue'); +const Documents: RouteComponent = () => import('@/views/Documents/Documents.vue'); +const AddSchedule: RouteComponent = () => import('@/views/Settings/Add Schedule/AddSchedule.vue'); +const Login: RouteComponent = () => import('@/views/Login/Login.vue'); +const Code: RouteComponent = () => import('@/views/Code/Code.vue'); +const QRCode: RouteComponent = () => import('@/views/QRCodes/QRCodes.vue'); +const GetHelp: RouteComponent = () => import('@/views/GetHelp/GetHelp.vue'); const Jukebox: RouteComponent = () => import('@/views/Jukebox/Jukebox.vue'); +const JazzmanMenu: RouteComponent = () => import('@/views/JazzmanMenu/JazzmanMenu.vue'); type EditScheduleProps = { @@ -103,6 +104,11 @@ const routes: Array<RouteRecordRaw> = [ path: '/jukebox', component: Jukebox, }, + { + name: 'JazzmanMenu', + path: '/jazzmanMenu', + component: JazzmanMenu, + }, ]; const router = createRouter({ @@ -117,7 +123,7 @@ const router = createRouter({ }); // ensure any page with requiresAuth set to true will redirect through the login proxy component -router.beforeEach((to:RouteLocationNormalized, from:RouteLocationNormalized, next:NavigationGuardNext) => { +router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => { // check if to requires auth if (to.matched.some((record) => record.meta && record.meta.requiresAuth)) { // check if we are already authenticated, and continue ahead if we are @@ -136,4 +142,4 @@ router.beforeEach((to:RouteLocationNormalized, from:RouteLocationNormalized, nex } }); -export default router; +export default router; \ No newline at end of file diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue index 952a2846..deb5813b 100644 --- a/src/views/Home/Home.vue +++ b/src/views/Home/Home.vue @@ -19,7 +19,7 @@ <holiday-card /> <schedule-card /> <weather-card /> - <pwc-card/> + <pwc-card /> <lunch-card /> <upcoming-events-card /> @@ -35,6 +35,8 @@ <icon-text-card :icon="icons.faRadio" text="Jukebox" link="jukebox" /> + <icon-text-card :icon="icons.faMugSaucer" text="Jazzman's Menu" link="jazzmanMenu" /> + <icon-text-card :icon="icons.faCalculator" text="GPA Calculator" link="gpaCalculator" @@ -64,13 +66,14 @@ import { faHourglass, faQrcode, faRadio, + faMugSaucer, } from "@fortawesome/free-solid-svg-icons"; import { mapActions } from "pinia"; import CardContainer from "@/components/CardContainer.vue"; import UpcomingEventsCard from "@/components/cards/UpcomingEventsCard.vue"; import IconTextCard from "@/components/cards/IconTextCard.vue"; import WeatherCard from "@/components/cards/WeatherCard.vue"; - import PwcCard from "@/components/cards/PwcCard.vue"; + import ScheduleCard from "@/components/cards/ScheduleCard.vue"; import HolidayCard from "@/components/cards/HolidayCard.vue"; import ContributeCard from "@/components/cards/ContributeCard.vue"; @@ -95,7 +98,7 @@ export default { IconTextCard, ScheduleCard, WeatherCard, - PwcCard, + HolidayCard, ContributeCard, NewThemeCard, @@ -119,6 +122,7 @@ export default { faHourglass, faQrcode, faRadio, + faMugSaucer, }, fullScreenMode: false, @@ -149,4 +153,4 @@ export default { .card-container .card:nth-child(#{$i}) +animate-fade-up animation-delay: $i * 0.011s -</style> +</style> \ No newline at end of file diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue new file mode 100644 index 00000000..e856ea95 --- /dev/null +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -0,0 +1,230 @@ +<template> + <div> + <plain-header title="Links" /> + <div class="menu-board"> + <header class="menu-header"> + <h1 class="menu-title">Jazzman's Menu</h1> + <div class="green-line"></div> + </header> + + <div class="menu-row"> + <section class="menu-category"> + <h2 class="category-title">Classics</h2> + <div class="small-green-line"></div> + <ul> + <li>Latte & Cappuccino</li> + <li>Mocha</li> + <li>Espresso</li> + <li>Americano</li> + <li>Regular or Decaf Coffee</li> + <li>Iced Coffee</li> + <li>Hot Chocolate</li> + <li>Flavored Steamer</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Good Stuff</h2> + <div class="small-green-line"></div> + <ul> + <li>Caramel Delight</li> + <li>Caramel Latte</li> + <li>White Chocolate Mocha</li> + <li>Crème Brûlée</li> + <li>Tuxedo</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Tea</h2> + <div class="small-green-line"></div> + <ul> + <li>Iced Blueberry Green Tea</li> + <li>Hot Tea</li> + <li>Hot or Iced Tea Latte</li> + <ul> + <li>Chai</li> + <li>Coco Coconut</li> + <li>Green Tea Matcha</li> + </ul> + <li>Iced Tea</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Bakery</h2> + <div class="small-green-line"></div> + <ul> + <li>Muffins</li> + <li>Cookies</li> + <li>Turnovers</li> + <li>Scones</li> + <li>Brownies</li> + <li>Bagels</li> + <li>Cinnamon Roll</li> + </ul> + </section> + </div> + + <div class="menu-row"> + <section class="menu-categoryTwo"> + <h2 class="category-title">Sandwiches</h2> + <div class="small-green-line"></div> + <ul> + <li>Turkey & Cheese</li> + <li>Italian Sandwich</li> + <li>Chicken Salad</li> + <li>Ham & Swiss</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Hummus & Roasted Veggie</li> + <li>Chicken Caesar</li> + <li>Caesar Wrap</li> + <li>Turkey Bacon</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Salads</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Garden Salad</li> + <li>Chicken Caesar</li> + <li>Caesar Salad</li> + <li>Quinoa Salad</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Snacks</h2> + <div class="small-green-line"></div> + <ul> + <li>Chips</li> + <li>Hummus & Pita</li> + <li>Yogurt Parfait</li> + <li>Grapes & Cheese</li> + <li>Fruit Cup</li> + <li>Jello</li> + <li>Pasta-Salad</li> + <li>Pudding</li> + </ul> + </section> + </div> + </div> + </div> +</template> + +<script> + import PlainHeader from '@/components/HomeLink.vue'; // Update the import path accordingly + export default { + components: { + PlainHeader, + }, + }; +</script> + +<style lang="sass"> +@import 'src/styles/style.sass' + + + + +.plain-header + max-width: $content-width + margin: auto + position: relative + margin-top: 10px + color: var(--color) + +mobile + text-align: center + +.title + line-height: 120px + font-size: 3.5em + font-weight: bold + margin-left: 10px + +mobile + margin-left: 0 + +.home-link + position: absolute + top: 10px + right: 15px + +mobile-small + top: 0 + right: 5px + + +.menu-board + display: flex + flex-direction: column + align-items: center + justify-content: flex-start + min-height: 100vh + padding: 20px 0 + background-color: #fefffe /* White background */ + color: #040f0f /* Rich black (FOGRA29) */ + +.menu-header + text-align: center + margin-bottom: 30px + +.green-line + width: 60px + height: 2px + background-color: #eec643 /* Phthalo green */ + margin: 10px auto + +.small-green-line + width: 30px + height: 2px + background-color: #eec643 /* Phthalo green */ + margin: 10px auto + +.menu-row + display: flex + justify-content: center + +.menu-category + margin: 20px + text-align: center + flex: 1 + +.menu-categoryTwo + margin: 28px + text-align: center + flex: 1 + +.category-title + font-size: 24px + color: #00a859 /* Silver sand */ + +.menu-category ul + list-style-type: none + padding-left: 0 + +.menu-category li + margin: 5px 0 + font-size: 18px + color: #8c8c8c /* Dark gray text color */ + +.menu-categoryTwo ul + list-style-type: none + padding-left: 0 + +.menu-categoryTwo li + margin: 5px 0 + font-size: 18px + color: #8c8c8c /* Dark gray text color */ + +.menu-title + font-size: 32px + color: #183c28 /* Phthalo green */ +</style> \ No newline at end of file From 399caab8e7fc817d1e82849c72028416a11ca107 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 13 Aug 2023 19:58:16 -0500 Subject: [PATCH 02/19] Pwc Menu added, dropdown, color changes added pwc menu, will add milkshake place later as well. Added dropdown to select between menus. changed colors to match what theme is chosen --- src/views/JazzmanMenu/JazzmanMenu.vue | 407 ++++++++++++++++++-------- 1 file changed, 290 insertions(+), 117 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index e856ea95..90cada67 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -1,124 +1,249 @@ <template> <div> - <plain-header title="Links" /> - <div class="menu-board"> - <header class="menu-header"> - <h1 class="menu-title">Jazzman's Menu</h1> - <div class="green-line"></div> - </header> - - <div class="menu-row"> - <section class="menu-category"> - <h2 class="category-title">Classics</h2> - <div class="small-green-line"></div> - <ul> - <li>Latte & Cappuccino</li> - <li>Mocha</li> - <li>Espresso</li> - <li>Americano</li> - <li>Regular or Decaf Coffee</li> - <li>Iced Coffee</li> - <li>Hot Chocolate</li> - <li>Flavored Steamer</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Good Stuff</h2> - <div class="small-green-line"></div> - <ul> - <li>Caramel Delight</li> - <li>Caramel Latte</li> - <li>White Chocolate Mocha</li> - <li>Crème Brûlée</li> - <li>Tuxedo</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Tea</h2> - <div class="small-green-line"></div> - <ul> - <li>Iced Blueberry Green Tea</li> - <li>Hot Tea</li> - <li>Hot or Iced Tea Latte</li> + <plain-header title="Menus" /> + <div class="menu-dropdown"> + <label for="menu-select">Select a Menu:</label> + <select id="menu-select" v-model="selectedMenu"> + <option value="jazzmans">Jazzman's Menu</option> + <option value="pwc-cafe">PWC Cafe Menu</option> + </select> + </div> + <div class="menu-board"> + <header class="menu-header" v-if="selectedMenu === 'jazzmans'"> + <h1 class="menu-title">Jazzman's Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'pwc-cafe'"> + <h1 class="menu-title">PWC Menu</h1> + <div class="green-line"></div> + </header> + + <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> + <section class="menu-categoryFour"> + <h2 class="category-title">Açaí Bowl</h2> + <div class="small-green-line"></div> + <ul> + <li>Acai Sorbet</li> + <li>Granola</li> + <li>Chia Seeds</li> + <li>Honey</li> + <li>Blueberries</li> + <li>Blackberries</li> + <li>Strawberries</li> + <li>Mango</li> + <li>Kiwi</li> + </ul> + </section> + + <section class="menu-categoryFour"> + <h2 class="category-title">Drinks</h2> + <div class="small-green-line"></div> + <ul> + <li>Black Milk</li> + <li>Matcha Milk</li> + <li>Chia Milk</li> + <li>Taro Milk</li> + <li>Strawberry</li> + <li>Mango</li> + <li>Dragon Fruit</li> + <li>Green Machine</li> + <li>Forever Berry</li> + </ul> + </section> + + + + <section class="menu-categoryFour"> + <h2 class="category-title">Salad</h2> + <div class="small-green-line"></div> <ul> + <li>Chicken Salad</li> + <li>Hearts of Palm</li> + <li>Tuna Salad</li> + <li>Egg Salad</li> + <li>Sweet Potato</li> + <li>Custom Salad</li> + </ul> + </section> + + <section class="menu-categoryFour"> + <h2 class="category-title">To Go</h2> + <div class="small-green-line"></div> + <ul> + <li>Antipasto Box</li> + <li>Pinwheel Box</li> + <li>Protein Box</li> + <li>Cottage Cheese Box</li> + <li>Crudite Cup</li> + <li>Mixed Fruit Cup</li> + <li>Fruit Yogurt</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> + <section class="menu-categoryThree"> + <h2 class="category-title">Tea/Coffee</h2> + <div class="small-green-line"></div> + <ul> + <li>Coffee</li> + <li>Latte Hot</li> + <li>Latte Iced</li> + <li>Latte Iced Caramel</li> + <li>Mocha White Chocolate </li> + <li>Mocha Hot</li> + <li>Mocha Iced</li> + <li>Monin Tea</li> + <li>Americano</li> + <li>Cappucino</li> + <li>Hot Chocolate</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Power Wrap</li> + <li>Thai Wrap</li> + <li>Veggie Vitality Wrap</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Pastries</h2> + <div class="small-green-line"></div> + <ul> + <li>Caprese Puff Pastry</li> + <li>Ham & Cheese Puff Pastry With Asparagus</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Oats</h2> + <div class="small-green-line"></div> + <ul> + <li>Autumn Harvest</li> + <li>Strawberry Cheesecake</li> + <li>Mango Chia</li> + </ul> + </section> + </div> + <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> + <section class="menu-category"> + <h2 class="category-title">Classics</h2> + <div class="small-green-line"></div> + <ul> + <li>Latte & Cappuccino</li> + <li>Mocha</li> + <li>Espresso</li> + <li>Americano</li> + <li>Regular or Decaf Coffee</li> + <li>Iced Coffee</li> + <li>Hot Chocolate</li> + <li>Flavored Steamer</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Snacks</h2> + <div class="small-green-line"></div> + <ul> + <li>Chips</li> + <li>Hummus & Pita</li> + <li>Yogurt Parfait</li> + <li>Grapes & Cheese</li> + <li>Fruit Cup</li> + <li>Jello</li> + <li>Pasta-Salad</li> + <li>Pudding</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Tea</h2> + <div class="small-green-line"></div> + <ul> + <li>Iced Blueberry Green Tea</li> + <li>Hot Tea</li> + <li>Hot or Iced Tea Latte</li> + <li>Chai</li> <li>Coco Coconut</li> <li>Green Tea Matcha</li> + + <li>Iced Tea</li> </ul> - <li>Iced Tea</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Bakery</h2> - <div class="small-green-line"></div> - <ul> - <li>Muffins</li> - <li>Cookies</li> - <li>Turnovers</li> - <li>Scones</li> - <li>Brownies</li> - <li>Bagels</li> - <li>Cinnamon Roll</li> - </ul> - </section> - </div> + </section> + + <section class="menu-category"> + <h2 class="category-title">Bakery</h2> + <div class="small-green-line"></div> + <ul> + <li>Muffins</li> + <li>Cookies</li> + <li>Turnovers</li> + <li>Scones</li> + <li>Brownies</li> + <li>Bagels</li> + <li>Cinnamon Roll</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> + <section class="menu-categoryTwo"> + <h2 class="category-title">Sandwiches</h2> + <div class="small-green-line"></div> + <ul> + <li>Turkey & Cheese</li> + <li>Italian Sandwich</li> + <li>Chicken Salad</li> + <li>Ham & Swiss</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Hummus & Roasted Veggie</li> + <li>Chicken Caesar</li> + <li>Caesar Wrap</li> + <li>Turkey Bacon</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Salads</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Garden Salad</li> + <li>Chicken Caesar</li> + <li>Caesar Salad</li> + <li>Quinoa Salad</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Good Stuff</h2> + <div class="small-green-line"></div> + <ul> + <li>Caramel Delight</li> + <li>Caramel Latte</li> + <li>White Chocolate Mocha</li> + <li>Crème Brûlée</li> + <li>Tuxedo</li> + </ul> + </section> + + </div> - <div class="menu-row"> - <section class="menu-categoryTwo"> - <h2 class="category-title">Sandwiches</h2> - <div class="small-green-line"></div> - <ul> - <li>Turkey & Cheese</li> - <li>Italian Sandwich</li> - <li>Chicken Salad</li> - <li>Ham & Swiss</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Wraps</h2> - <div class="small-green-line"></div> - <ul> - <li>Buffalo Chicken</li> - <li>Hummus & Roasted Veggie</li> - <li>Chicken Caesar</li> - <li>Caesar Wrap</li> - <li>Turkey Bacon</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Salads</h2> - <div class="small-green-line"></div> - <ul> - <li>Buffalo Chicken</li> - <li>Garden Salad</li> - <li>Chicken Caesar</li> - <li>Caesar Salad</li> - <li>Quinoa Salad</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Snacks</h2> - <div class="small-green-line"></div> - <ul> - <li>Chips</li> - <li>Hummus & Pita</li> - <li>Yogurt Parfait</li> - <li>Grapes & Cheese</li> - <li>Fruit Cup</li> - <li>Jello</li> - <li>Pasta-Salad</li> - <li>Pudding</li> - </ul> - </section> </div> + </div> - </div> </template> <script> @@ -127,12 +252,27 @@ components: { PlainHeader, }, + data() { + return { + selectedMenu: 'jazzmans', // Default selection + }; + }, }; </script> <style lang="sass"> @import 'src/styles/style.sass' +.menu-dropdown + text-align: center + margin: 20px 0 + +.menu-select + padding: 5px 10px + border: 1px solid #ccc + border-radius: 4px + font-size: 16px + @@ -179,13 +319,13 @@ .green-line width: 60px height: 2px - background-color: #eec643 /* Phthalo green */ + background-color: #040f0f /* Phthalo green */ margin: 10px auto .small-green-line width: 30px height: 2px - background-color: #eec643 /* Phthalo green */ + background-color: #040f0f /* Phthalo green */ margin: 10px auto .menu-row @@ -193,18 +333,32 @@ justify-content: center .menu-category - margin: 20px + margin-right: 70px + margin-left: 70px text-align: center flex: 1 .menu-categoryTwo - margin: 28px + margin-right: 77px + margin-left: 77px + text-align: center + flex: 1 + +.menu-categoryThree + margin-right: 17px + margin-left: 30px + text-align: center + flex: 1 + +.menu-categoryFour + margin-right: 70px + margin-left: 70px text-align: center flex: 1 .category-title font-size: 24px - color: #00a859 /* Silver sand */ + color: var(--color) /* Silver sand */ .menu-category ul list-style-type: none @@ -224,7 +378,26 @@ font-size: 18px color: #8c8c8c /* Dark gray text color */ +.menu-categoryThree ul + list-style-type: none + padding-left: 0 + +.menu-categoryThree li + margin: 5px 0 + font-size: 18px + color: #8c8c8c /* Dark gray text color */ + +.menu-categoryFour ul + list-style-type: none + padding-left: 0 + +.menu-categoryFour li + margin: 5px 0 + font-size: 18px + color: #8c8c8c /* Dark gray text color */ + + .menu-title font-size: 32px - color: #183c28 /* Phthalo green */ + color: var(--color) /* Phthalo green */ </style> \ No newline at end of file From 818467ccb508f3d0fd2acfeda15e764c827927bd Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Tue, 15 Aug 2023 18:52:28 -0500 Subject: [PATCH 03/19] Added Special Menu + Deli Added Special Menu (Poke Bowl, Sushi, Taco, Wings) and Deli menu (Sandwich Bar) --- src/views/JazzmanMenu/JazzmanMenu.vue | 213 ++++++++++++++++++++++++-- 1 file changed, 203 insertions(+), 10 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 90cada67..14c54c52 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -6,6 +6,8 @@ <select id="menu-select" v-model="selectedMenu"> <option value="jazzmans">Jazzman's Menu</option> <option value="pwc-cafe">PWC Cafe Menu</option> + <option value="deli">Deli Menu</option> + <option value="special">Special Menu</option> </select> </div> <div class="menu-board"> @@ -17,6 +19,14 @@ <h1 class="menu-title">PWC Menu</h1> <div class="green-line"></div> </header> + <header class="menu-header" v-if="selectedMenu === 'deli'"> + <h1 class="menu-title">Deli Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'special'"> + <h1 class="menu-title">Special Menu</h1> + <div class="green-line"></div> + </header> <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> <section class="menu-categoryFour"> @@ -81,6 +91,103 @@ </section> </div> + <div class="menu-row" v-if="selectedMenu === 'special'"> + <section class="menu-categorySix"> + <h2 class="category-title">Poké Bowl <br />(Monday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose Two:</li> + <li>Salmon</li> + <li>Tuna</li> + <li>Shrimp Tempura</li> + <li>Tofu</li> + <li>Imitation Crab</li> + <li> + - + </li> + <li>Toppings:</li> + <li>Edamame</li> + <li>Mushroom</li> + <li>Cucumber</li> + <li>Green Onion</li> + <li>Carrot</li> + <li>Lettuce</li> + <li>Ginger</li> + <li>Radish</li> + <li>-</li> + <li>Sauce:</li> + <li>Spicy Mayo</li> + <li>Soy Sauce</li> + <li>Wasabi:</li> + + </ul> + </section> + + <section class="menu-categorySix"> + <h2 class="category-title">Fat Rosie's Tacos (Tuesday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose Two:</li> + <li>Beef</li> + <li>Chicken</li> + <li>Cauliflower</li> + <li> + - + </li> + <li>Sides:</li> + <li>Rice & Beans</li> + + <li>-</li> + <li>Toppings;</li> + <li>Cheese</li> + <li>Lettuce</li> + <li>Sour Cream</li> + <li>Tomatoes</li> + <li>-</li> + <li>Sauce:</li> + <li>Spicy</li> + <li>Mild</li> + </ul> + </section> + + + + <section class="menu-categorySix"> + <h2 class="category-title">Chicken Wing (Wednesday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choice Of:</li> + <li>Boneless</li> + <li>Bone-In</li> + <li>-</li> + <li>Sides:</li> + <li>Fries</li> + <li>-</li> + <li>Flavor (Dry):</li> + <li>Lemon Pepper</li> + <li>Parmesan</li> + <li>Flavor (Wet):</li> + <li>Spicy</li> + <li>BBQ</li> + </ul> + </section> + + <section class="menu-categorySix"> + <h2 class="category-title">Stevenson Sushi (Friday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose 8 Pieces:</li> + <li>California</li> + <li>Salmon</li> + <li>Philidelphia</li> + <li>Tuna Roll</li> + <li>Rainbow</li> + <li>Spicy Crab</li> + <li>Shrimp Tempura</li> + </ul> + </section> + </div> + <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> <section class="menu-categoryThree"> <h2 class="category-title">Tea/Coffee</h2> @@ -90,7 +197,6 @@ <li>Latte Hot</li> <li>Latte Iced</li> <li>Latte Iced Caramel</li> - <li>Mocha White Chocolate </li> <li>Mocha Hot</li> <li>Mocha Iced</li> <li>Monin Tea</li> @@ -106,7 +212,7 @@ <ul> <li>Power Wrap</li> <li>Thai Wrap</li> - <li>Veggie Vitality Wrap</li> + <li>Veggie Wrap</li> </ul> </section> @@ -114,8 +220,8 @@ <h2 class="category-title">Pastries</h2> <div class="small-green-line"></div> <ul> - <li>Caprese Puff Pastry</li> - <li>Ham & Cheese Puff Pastry With Asparagus</li> + <li>Caprese Puff </li> + <li>Ham & Cheese </li> </ul> </section> @@ -129,6 +235,7 @@ </ul> </section> </div> + <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> <section class="menu-category"> <h2 class="category-title">Classics</h2> @@ -238,6 +345,63 @@ <li>Tuxedo</li> </ul> </section> + </div> + <div class="menu-row" v-if="selectedMenu === 'deli'"> + <section class="menu-categoryFive"> + <h2 class="category-title">Bread</h2> + <div class="small-green-line"></div> + <ul> + <li>White Bread</li> + <li>Wheat Bread</li> + <li>9 Grain</li> + <li>Pretzel Bun</li> + <li>Kaiser Roll</li> + <li>Tortilla</li> + </ul> + </section> + + <section class="menu-categoryFive"> + <h2 class="category-title">Protein</h2> + <div class="small-green-line"></div> + <ul> + <li>Roast Beef</li> + <li>Turkey</li> + <li>Ham</li> + <li>Salami</li> + <li>BBQ Chicken</li> + <li>Buffalo Chicken</li> + <li>Hummus</li> + </ul> + </section> + + <section class="menu-categoryFive"> + <h2 class="category-title">Toppings</h2> + <div class="small-green-line"></div> + <ul> + <li>Lettuce</li> + <li>Tomato</li> + <li>Onion</li> + <li>Pickles</li> + <li>Olives</li> + <li>Cucumber</li> + <li>Swiss Cheese</li> + <li>Provolone</li> + <li>Cheddar</li> + <li>Pepper Jack</li> + </ul> + </section> + + <section class="menu-categoryFive"> + <h2 class="category-title">Sauce</h2> + <div class="small-green-line"></div> + <ul> + <li>Chipotle</li> + <li>Mustard</li> + <li>Ketchup</li> + <li>Ranch</li> + <li>Honey Mustard</li> + </ul> + </section> </div> @@ -339,23 +503,34 @@ flex: 1 .menu-categoryTwo - margin-right: 77px - margin-left: 77px + margin-right: 70px + margin-left: 70px text-align: center flex: 1 .menu-categoryThree - margin-right: 17px - margin-left: 30px + margin-right: 90px + margin-left: 90px text-align: center flex: 1 .menu-categoryFour - margin-right: 70px - margin-left: 70px + margin-right: 90px + margin-left: 90px + text-align: center + flex: 1 + +.menu-categoryFive + margin-right: 97px + margin-left: 97px text-align: center flex: 1 +.menu-categorySix + margin-right: 25px + margin-left: 25px + text-align: center + flex: 1 .category-title font-size: 24px color: var(--color) /* Silver sand */ @@ -396,6 +571,24 @@ font-size: 18px color: #8c8c8c /* Dark gray text color */ +.menu-categoryFive ul + list-style-type: none + padding-left: 0 + +.menu-categoryFive li + margin: 5px 0 + font-size: 18px + color: #8c8c8c /* Dark gray text color */ + +.menu-categorySix ul + list-style-type: none + padding-left: 0 + +.menu-categorySix li + margin: 5px 0 + font-size: 18px + color: #8c8c8c /* Dark gray text color */ + .menu-title font-size: 32px From af34fde01ffd83541eb104c0ed21fe7747dee1d6 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Tue, 15 Aug 2023 21:46:05 -0500 Subject: [PATCH 04/19] added more styling to match --- src/views/JazzmanMenu/JazzmanMenu.vue | 815 +++++++++++++------------- 1 file changed, 418 insertions(+), 397 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 14c54c52..af5efed4 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -1,6 +1,5 @@ <template> - <div> - <plain-header title="Menus" /> + <div class="outer-container"> <div class="menu-dropdown"> <label for="menu-select">Select a Menu:</label> <select id="menu-select" v-model="selectedMenu"> @@ -10,404 +9,412 @@ <option value="special">Special Menu</option> </select> </div> - <div class="menu-board"> - <header class="menu-header" v-if="selectedMenu === 'jazzmans'"> - <h1 class="menu-title">Jazzman's Menu</h1> - <div class="green-line"></div> - </header> - <header class="menu-header" v-if="selectedMenu === 'pwc-cafe'"> - <h1 class="menu-title">PWC Menu</h1> - <div class="green-line"></div> - </header> - <header class="menu-header" v-if="selectedMenu === 'deli'"> - <h1 class="menu-title">Deli Menu</h1> - <div class="green-line"></div> - </header> - <header class="menu-header" v-if="selectedMenu === 'special'"> - <h1 class="menu-title">Special Menu</h1> - <div class="green-line"></div> - </header> - - <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> - <section class="menu-categoryFour"> - <h2 class="category-title">Açaí Bowl</h2> - <div class="small-green-line"></div> - <ul> - <li>Acai Sorbet</li> - <li>Granola</li> - <li>Chia Seeds</li> - <li>Honey</li> - <li>Blueberries</li> - <li>Blackberries</li> - <li>Strawberries</li> - <li>Mango</li> - <li>Kiwi</li> - </ul> - </section> - - <section class="menu-categoryFour"> - <h2 class="category-title">Drinks</h2> - <div class="small-green-line"></div> - <ul> - <li>Black Milk</li> - <li>Matcha Milk</li> - <li>Chia Milk</li> - <li>Taro Milk</li> - <li>Strawberry</li> - <li>Mango</li> - <li>Dragon Fruit</li> - <li>Green Machine</li> - <li>Forever Berry</li> - </ul> - </section> - - - - <section class="menu-categoryFour"> - <h2 class="category-title">Salad</h2> - <div class="small-green-line"></div> - <ul> - <li>Chicken Salad</li> - <li>Hearts of Palm</li> - <li>Tuna Salad</li> - <li>Egg Salad</li> - <li>Sweet Potato</li> - <li>Custom Salad</li> - </ul> - </section> - - <section class="menu-categoryFour"> - <h2 class="category-title">To Go</h2> - <div class="small-green-line"></div> - <ul> - <li>Antipasto Box</li> - <li>Pinwheel Box</li> - <li>Protein Box</li> - <li>Cottage Cheese Box</li> - <li>Crudite Cup</li> - <li>Mixed Fruit Cup</li> - <li>Fruit Yogurt</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'special'"> - <section class="menu-categorySix"> - <h2 class="category-title">Poké Bowl <br />(Monday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choose Two:</li> - <li>Salmon</li> - <li>Tuna</li> - <li>Shrimp Tempura</li> - <li>Tofu</li> - <li>Imitation Crab</li> - <li> - - - </li> - <li>Toppings:</li> - <li>Edamame</li> - <li>Mushroom</li> - <li>Cucumber</li> - <li>Green Onion</li> - <li>Carrot</li> - <li>Lettuce</li> - <li>Ginger</li> - <li>Radish</li> - <li>-</li> - <li>Sauce:</li> - <li>Spicy Mayo</li> - <li>Soy Sauce</li> - <li>Wasabi:</li> - - </ul> - </section> - - <section class="menu-categorySix"> - <h2 class="category-title">Fat Rosie's Tacos (Tuesday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choose Two:</li> - <li>Beef</li> - <li>Chicken</li> - <li>Cauliflower</li> - <li> - - - </li> - <li>Sides:</li> - <li>Rice & Beans</li> - - <li>-</li> - <li>Toppings;</li> - <li>Cheese</li> - <li>Lettuce</li> - <li>Sour Cream</li> - <li>Tomatoes</li> - <li>-</li> - <li>Sauce:</li> - <li>Spicy</li> - <li>Mild</li> - </ul> - </section> - - - - <section class="menu-categorySix"> - <h2 class="category-title">Chicken Wing (Wednesday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choice Of:</li> - <li>Boneless</li> - <li>Bone-In</li> - <li>-</li> - <li>Sides:</li> - <li>Fries</li> - <li>-</li> - <li>Flavor (Dry):</li> - <li>Lemon Pepper</li> - <li>Parmesan</li> - <li>Flavor (Wet):</li> - <li>Spicy</li> - <li>BBQ</li> - </ul> - </section> - - <section class="menu-categorySix"> - <h2 class="category-title">Stevenson Sushi (Friday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choose 8 Pieces:</li> - <li>California</li> - <li>Salmon</li> - <li>Philidelphia</li> - <li>Tuna Roll</li> - <li>Rainbow</li> - <li>Spicy Crab</li> - <li>Shrimp Tempura</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> - <section class="menu-categoryThree"> - <h2 class="category-title">Tea/Coffee</h2> - <div class="small-green-line"></div> - <ul> - <li>Coffee</li> - <li>Latte Hot</li> - <li>Latte Iced</li> - <li>Latte Iced Caramel</li> - <li>Mocha Hot</li> - <li>Mocha Iced</li> - <li>Monin Tea</li> - <li>Americano</li> - <li>Cappucino</li> - <li>Hot Chocolate</li> - </ul> - </section> - - <section class="menu-categoryThree"> - <h2 class="category-title">Wraps</h2> - <div class="small-green-line"></div> - <ul> - <li>Power Wrap</li> - <li>Thai Wrap</li> - <li>Veggie Wrap</li> - </ul> - </section> - - <section class="menu-categoryThree"> - <h2 class="category-title">Pastries</h2> - <div class="small-green-line"></div> - <ul> - <li>Caprese Puff </li> - <li>Ham & Cheese </li> - </ul> - </section> - - <section class="menu-categoryThree"> - <h2 class="category-title">Oats</h2> - <div class="small-green-line"></div> - <ul> - <li>Autumn Harvest</li> - <li>Strawberry Cheesecake</li> - <li>Mango Chia</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> - <section class="menu-category"> - <h2 class="category-title">Classics</h2> - <div class="small-green-line"></div> - <ul> - <li>Latte & Cappuccino</li> - <li>Mocha</li> - <li>Espresso</li> - <li>Americano</li> - <li>Regular or Decaf Coffee</li> - <li>Iced Coffee</li> - <li>Hot Chocolate</li> - <li>Flavored Steamer</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Snacks</h2> - <div class="small-green-line"></div> - <ul> - <li>Chips</li> - <li>Hummus & Pita</li> - <li>Yogurt Parfait</li> - <li>Grapes & Cheese</li> - <li>Fruit Cup</li> - <li>Jello</li> - <li>Pasta-Salad</li> - <li>Pudding</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Tea</h2> - <div class="small-green-line"></div> - <ul> - <li>Iced Blueberry Green Tea</li> - <li>Hot Tea</li> - <li>Hot or Iced Tea Latte</li> - - <li>Chai</li> - <li>Coco Coconut</li> - <li>Green Tea Matcha</li> - - <li>Iced Tea</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Bakery</h2> - <div class="small-green-line"></div> - <ul> - <li>Muffins</li> - <li>Cookies</li> - <li>Turnovers</li> - <li>Scones</li> - <li>Brownies</li> - <li>Bagels</li> - <li>Cinnamon Roll</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> - <section class="menu-categoryTwo"> - <h2 class="category-title">Sandwiches</h2> - <div class="small-green-line"></div> - <ul> - <li>Turkey & Cheese</li> - <li>Italian Sandwich</li> - <li>Chicken Salad</li> - <li>Ham & Swiss</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Wraps</h2> - <div class="small-green-line"></div> - <ul> - <li>Buffalo Chicken</li> - <li>Hummus & Roasted Veggie</li> - <li>Chicken Caesar</li> - <li>Caesar Wrap</li> - <li>Turkey Bacon</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Salads</h2> - <div class="small-green-line"></div> - <ul> - <li>Buffalo Chicken</li> - <li>Garden Salad</li> - <li>Chicken Caesar</li> - <li>Caesar Salad</li> - <li>Quinoa Salad</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Good Stuff</h2> - <div class="small-green-line"></div> - <ul> - <li>Caramel Delight</li> - <li>Caramel Latte</li> - <li>White Chocolate Mocha</li> - <li>Crème Brûlée</li> - <li>Tuxedo</li> - </ul> - </section> - </div> - <div class="menu-row" v-if="selectedMenu === 'deli'"> - <section class="menu-categoryFive"> - <h2 class="category-title">Bread</h2> - <div class="small-green-line"></div> - <ul> - <li>White Bread</li> - <li>Wheat Bread</li> - <li>9 Grain</li> - <li>Pretzel Bun</li> - <li>Kaiser Roll</li> - <li>Tortilla</li> - </ul> - </section> - - <section class="menu-categoryFive"> - <h2 class="category-title">Protein</h2> - <div class="small-green-line"></div> - <ul> - <li>Roast Beef</li> - <li>Turkey</li> - <li>Ham</li> - <li>Salami</li> - <li>BBQ Chicken</li> - <li>Buffalo Chicken</li> - <li>Hummus</li> - </ul> - </section> - - <section class="menu-categoryFive"> - <h2 class="category-title">Toppings</h2> - <div class="small-green-line"></div> - <ul> - <li>Lettuce</li> - <li>Tomato</li> - <li>Onion</li> - <li>Pickles</li> - <li>Olives</li> - <li>Cucumber</li> - <li>Swiss Cheese</li> - <li>Provolone</li> - <li>Cheddar</li> - <li>Pepper Jack</li> - </ul> - </section> - - <section class="menu-categoryFive"> - <h2 class="category-title">Sauce</h2> - <div class="small-green-line"></div> - <ul> - <li>Chipotle</li> - <li>Mustard</li> - <li>Ketchup</li> - <li>Ranch</li> - <li>Honey Mustard</li> - </ul> - </section> + <div class="menu-container"> + <div> + <plain-header title="Menus" /> + + <div class="menu-board"> + <header class="menu-header" v-if="selectedMenu === 'jazzmans'"> + <h1 class="menu-title">Jazzman's Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'pwc-cafe'"> + <h1 class="menu-title">PWC Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'deli'"> + <h1 class="menu-title">Deli Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'special'"> + <h1 class="menu-title">Special Menu</h1> + <div class="green-line"></div> + </header> + + + <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> + <section class="menu-categoryFour"> + <h2 class="category-title">Açaí Bowl</h2> + <div class="small-green-line"></div> + <ul> + <li>Acai Sorbet</li> + <li>Granola</li> + <li>Chia Seeds</li> + <li>Honey</li> + <li>Blueberries</li> + <li>Blackberries</li> + <li>Strawberries</li> + <li>Mango</li> + <li>Kiwi</li> + </ul> + </section> + + <section class="menu-categoryFour"> + <h2 class="category-title">Drinks</h2> + <div class="small-green-line"></div> + <ul> + <li>Black Milk</li> + <li>Matcha Milk</li> + <li>Chia Milk</li> + <li>Taro Milk</li> + <li>Strawberry</li> + <li>Mango</li> + <li>Dragon Fruit</li> + <li>Green Machine</li> + <li>Forever Berry</li> + </ul> + </section> + + + + <section class="menu-categoryFour"> + <h2 class="category-title">Salad</h2> + <div class="small-green-line"></div> + <ul> + <li>Chicken Salad</li> + <li>Hearts of Palm</li> + <li>Tuna Salad</li> + <li>Egg Salad</li> + <li>Sweet Potato</li> + <li>Custom Salad</li> + </ul> + </section> + + <section class="menu-categoryFour"> + <h2 class="category-title">To Go</h2> + <div class="small-green-line"></div> + <ul> + <li>Antipasto Box</li> + <li>Pinwheel Box</li> + <li>Protein Box</li> + <li>Cottage Cheese Box</li> + <li>Crudite Cup</li> + <li>Mixed Fruit Cup</li> + <li>Fruit Yogurt</li> + </ul> + </section> + </div> + + + <div class="menu-row" v-if="selectedMenu === 'special'"> + <section class="menu-categorySix"> + <h2 class="category-title">Poké Bowl <br />(Monday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose Two:</li> + <li>Salmon</li> + <li>Tuna</li> + <li>Shrimp Tempura</li> + <li>Tofu</li> + <li>Imitation Crab</li> + <li> + - + </li> + <li>Toppings:</li> + <li>Edamame</li> + <li>Mushroom</li> + <li>Cucumber</li> + <li>Green Onion</li> + <li>Carrot</li> + <li>Lettuce</li> + <li>Ginger</li> + <li>Radish</li> + <li>-</li> + <li>Sauce:</li> + <li>Spicy Mayo</li> + <li>Soy Sauce</li> + <li>Wasabi:</li> + + </ul> + </section> + + <section class="menu-categorySix"> + <h2 class="category-title">Fat Rosie's Tacos (Tuesday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose Two:</li> + <li>Beef</li> + <li>Chicken</li> + <li>Cauliflower</li> + <li> + - + </li> + <li>Sides:</li> + <li>Rice & Beans</li> + + <li>-</li> + <li>Toppings;</li> + <li>Cheese</li> + <li>Lettuce</li> + <li>Sour Cream</li> + <li>Tomatoes</li> + <li>-</li> + <li>Sauce:</li> + <li>Spicy</li> + <li>Mild</li> + </ul> + </section> + + + + <section class="menu-categorySix"> + <h2 class="category-title">Chicken Wing (Wednesday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choice Of:</li> + <li>Boneless</li> + <li>Bone-In</li> + <li>-</li> + <li>Sides:</li> + <li>Fries</li> + <li>-</li> + <li>Flavor (Dry):</li> + <li>Lemon Pepper</li> + <li>Parmesan</li> + <li>Flavor (Wet):</li> + <li>Spicy</li> + <li>BBQ</li> + </ul> + </section> + + <section class="menu-categorySix"> + <h2 class="category-title">Stevenson Sushi (Friday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose 8 Pieces:</li> + <li>California</li> + <li>Salmon</li> + <li>Philidelphia</li> + <li>Tuna Roll</li> + <li>Rainbow</li> + <li>Spicy Crab</li> + <li>Shrimp Tempura</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> + <section class="menu-categoryThree"> + <h2 class="category-title">Tea/Coffee</h2> + <div class="small-green-line"></div> + <ul> + <li>Coffee</li> + <li>Latte Hot</li> + <li>Latte Iced</li> + <li>Latte Iced Caramel</li> + <li>Mocha Hot</li> + <li>Mocha Iced</li> + <li>Monin Tea</li> + <li>Americano</li> + <li>Cappucino</li> + <li>Hot Chocolate</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Power Wrap</li> + <li>Thai Wrap</li> + <li>Veggie Wrap</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Pastries</h2> + <div class="small-green-line"></div> + <ul> + <li>Caprese Puff </li> + <li>Ham & Cheese </li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Oats</h2> + <div class="small-green-line"></div> + <ul> + <li>Autumn Harvest</li> + <li>Strawberry Cheesecake</li> + <li>Mango Chia</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> + <section class="menu-category"> + <h2 class="category-title">Classics</h2> + <div class="small-green-line"></div> + <ul> + <li>Latte & Cappuccino</li> + <li>Mocha</li> + <li>Espresso</li> + <li>Americano</li> + <li>Regular or Decaf Coffee</li> + <li>Iced Coffee</li> + <li>Hot Chocolate</li> + <li>Flavored Steamer</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Snacks</h2> + <div class="small-green-line"></div> + <ul> + <li>Chips</li> + <li>Hummus & Pita</li> + <li>Yogurt Parfait</li> + <li>Grapes & Cheese</li> + <li>Fruit Cup</li> + <li>Jello</li> + <li>Pasta-Salad</li> + <li>Pudding</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Tea</h2> + <div class="small-green-line"></div> + <ul> + <li>Iced Blueberry Green Tea</li> + <li>Hot Tea</li> + <li>Hot or Iced Tea Latte</li> + + <li>Chai</li> + <li>Coco Coconut</li> + <li>Green Tea Matcha</li> + + <li>Iced Tea</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Bakery</h2> + <div class="small-green-line"></div> + <ul> + <li>Muffins</li> + <li>Cookies</li> + <li>Turnovers</li> + <li>Scones</li> + <li>Brownies</li> + <li>Bagels</li> + <li>Cinnamon Roll</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> + <section class="menu-categoryTwo"> + <h2 class="category-title">Sandwiches</h2> + <div class="small-green-line"></div> + <ul> + <li>Turkey & Cheese</li> + <li>Italian Sandwich</li> + <li>Chicken Salad</li> + <li>Ham & Swiss</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Hummus & Roasted Veggie</li> + <li>Chicken Caesar</li> + <li>Caesar Wrap</li> + <li>Turkey Bacon</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Salads</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Garden Salad</li> + <li>Chicken Caesar</li> + <li>Caesar Salad</li> + <li>Quinoa Salad</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Good Stuff</h2> + <div class="small-green-line"></div> + <ul> + <li>Caramel Delight</li> + <li>Caramel Latte</li> + <li>White Chocolate Mocha</li> + <li>Crème Brûlée</li> + <li>Tuxedo</li> + </ul> + </section> + </div> + <div class="menu-row" v-if="selectedMenu === 'deli'"> + <section class="menu-categoryFive"> + <h2 class="category-title">Bread</h2> + <div class="small-green-line"></div> + <ul> + <li>White Bread</li> + <li>Wheat Bread</li> + <li>9 Grain</li> + <li>Pretzel Bun</li> + <li>Kaiser Roll</li> + <li>Tortilla</li> + </ul> + </section> + + <section class="menu-categoryFive"> + <h2 class="category-title">Protein</h2> + <div class="small-green-line"></div> + <ul> + <li>Roast Beef</li> + <li>Turkey</li> + <li>Ham</li> + <li>Salami</li> + <li>BBQ Chicken</li> + <li>Buffalo Chicken</li> + <li>Hummus</li> + </ul> + </section> + + <section class="menu-categoryFive"> + <h2 class="category-title">Toppings</h2> + <div class="small-green-line"></div> + <ul> + <li>Lettuce</li> + <li>Tomato</li> + <li>Onion</li> + <li>Pickles</li> + <li>Olives</li> + <li>Cucumber</li> + <li>Swiss Cheese</li> + <li>Provolone</li> + <li>Cheddar</li> + <li>Pepper Jack</li> + </ul> + </section> + + <section class="menu-categoryFive"> + <h2 class="category-title">Sauce</h2> + <div class="small-green-line"></div> + <ul> + <li>Chipotle</li> + <li>Mustard</li> + <li>Ketchup</li> + <li>Ranch</li> + <li>Honey Mustard</li> + </ul> + </section> + + </div> + + </div> </div> - </div> - - </div> + </div> </template> <script> @@ -427,6 +434,20 @@ <style lang="sass"> @import 'src/styles/style.sass' +.outer-container + background-color: var(--color) /* */ + + +.menu-container + width: 80% /* Adjust the width as needed */ + background-color: #ffffff + border: 2px solid #000000 + border-radius: 10px + padding: 20px + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) + margin: auto + + .menu-dropdown text-align: center margin: 20px 0 From e16d207f6b3f2b45dd273e646ae83f47f943cfda Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Wed, 16 Aug 2023 22:39:42 -0500 Subject: [PATCH 05/19] Added dropdown and matched styling --- src/views/JazzmanMenu/JazzmanMenu.vue | 87 +++++++++++++++++---------- 1 file changed, 54 insertions(+), 33 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index af5efed4..fd5b3181 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -1,38 +1,37 @@ <template> <div class="outer-container"> - <div class="menu-dropdown"> - <label for="menu-select">Select a Menu:</label> - <select id="menu-select" v-model="selectedMenu"> - <option value="jazzmans">Jazzman's Menu</option> - <option value="pwc-cafe">PWC Cafe Menu</option> - <option value="deli">Deli Menu</option> - <option value="special">Special Menu</option> - </select> - </div> + <div class="menu-container"> + <h1 class="menu-text" for="menu-select">Select a Menu:</h1> + <Dropdown :options="menuOptions" + :modelValue="selectedMenu" + align="center" + direction="down" + @update:modelValue="onMenuSelect" /> + <div> <plain-header title="Menus" /> <div class="menu-board"> - <header class="menu-header" v-if="selectedMenu === 'jazzmans'"> + <header class="menu-header" v-if="selectedMenu === 'Jazzmans'"> <h1 class="menu-title">Jazzman's Menu</h1> <div class="green-line"></div> </header> - <header class="menu-header" v-if="selectedMenu === 'pwc-cafe'"> + <header class="menu-header" v-if="selectedMenu === 'Pwc Cafe'"> <h1 class="menu-title">PWC Menu</h1> <div class="green-line"></div> </header> - <header class="menu-header" v-if="selectedMenu === 'deli'"> + <header class="menu-header" v-if="selectedMenu === 'Deli Menu'"> <h1 class="menu-title">Deli Menu</h1> <div class="green-line"></div> </header> - <header class="menu-header" v-if="selectedMenu === 'special'"> + <header class="menu-header" v-if="selectedMenu === 'Special Menu'"> <h1 class="menu-title">Special Menu</h1> <div class="green-line"></div> </header> - <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> + <div class="menu-row" v-if="selectedMenu === 'Pwc Cafe'"> <section class="menu-categoryFour"> <h2 class="category-title">Açaí Bowl</h2> <div class="small-green-line"></div> @@ -96,7 +95,7 @@ </div> - <div class="menu-row" v-if="selectedMenu === 'special'"> + <div class="menu-row" v-if="selectedMenu === 'Special Menu'"> <section class="menu-categorySix"> <h2 class="category-title">Poké Bowl <br />(Monday)</h2> <div class="small-green-line"></div> @@ -193,7 +192,7 @@ </section> </div> - <div class="menu-row" v-if="selectedMenu === 'pwc-cafe'"> + <div class="menu-row" v-if="selectedMenu === 'Pwc Cafe'"> <section class="menu-categoryThree"> <h2 class="category-title">Tea/Coffee</h2> <div class="small-green-line"></div> @@ -241,7 +240,7 @@ </section> </div> - <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> + <div class="menu-row" v-if="selectedMenu === 'Jazzmans'"> <section class="menu-category"> <h2 class="category-title">Classics</h2> <div class="small-green-line"></div> @@ -303,7 +302,7 @@ </section> </div> - <div class="menu-row" v-if="selectedMenu === 'jazzmans'"> + <div class="menu-row" v-if="selectedMenu === 'Jazzmans'"> <section class="menu-categoryTwo"> <h2 class="category-title">Sandwiches</h2> <div class="small-green-line"></div> @@ -351,7 +350,7 @@ </ul> </section> </div> - <div class="menu-row" v-if="selectedMenu === 'deli'"> + <div class="menu-row" v-if="selectedMenu === 'Deli Menu'"> <section class="menu-categoryFive"> <h2 class="category-title">Bread</h2> <div class="small-green-line"></div> @@ -414,20 +413,39 @@ </div> </div> - </div> + </div> </template> <script> import PlainHeader from '@/components/HomeLink.vue'; // Update the import path accordingly + import Dropdown from '@/Components/Dropdown.vue'; // Import the Dropdown component + export default { components: { PlainHeader, + Dropdown, // Register the Dropdown component }, data() { return { - selectedMenu: 'jazzmans', // Default selection + selectedMenu: 'Jazzmans', // Default selection + // Additional data for Dropdown component + menuOptions: [ + 'Jazzmans', + 'Pwc Cafe', + 'Deli Menu', + 'Special Menu', + ], + selectedOptionIndex: 0, // Default selected index }; }, + methods: { + onMenuSelect(selectedIndex) { + this.selectedOptionIndex = selectedIndex; // Update the selected option index + this.selectedMenu = this.menuOptions[selectedIndex]; + }, + // ... Other methods + }, + }; </script> @@ -447,6 +465,9 @@ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) margin: auto +.menu-text + text-align: center + font-size: 17px .menu-dropdown text-align: center @@ -518,38 +539,38 @@ justify-content: center .menu-category - margin-right: 70px - margin-left: 70px + margin-right: 50px + margin-left: 50px text-align: center flex: 1 .menu-categoryTwo - margin-right: 70px - margin-left: 70px + margin-right: 50px + margin-left: 50px text-align: center flex: 1 .menu-categoryThree - margin-right: 90px - margin-left: 90px + margin-right: 50px + margin-left: 50px text-align: center flex: 1 .menu-categoryFour - margin-right: 90px - margin-left: 90px + margin-right: 50px + margin-left: 50px text-align: center flex: 1 .menu-categoryFive - margin-right: 97px - margin-left: 97px + margin-right: 50px + margin-left: 50px text-align: center flex: 1 .menu-categorySix - margin-right: 25px - margin-left: 25px + margin-right: 50px + margin-left: 50px text-align: center flex: 1 .category-title From d23e2f2a3ad2610a56a449643f2162e922ca03f4 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Wed, 16 Aug 2023 22:47:06 -0500 Subject: [PATCH 06/19] Update JazzmanMenu.vue --- src/views/JazzmanMenu/JazzmanMenu.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index fd5b3181..8672de5e 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -417,13 +417,13 @@ </template> <script> + import Dropdown from '@/components/Dropdown.vue'; import PlainHeader from '@/components/HomeLink.vue'; // Update the import path accordingly - import Dropdown from '@/Components/Dropdown.vue'; // Import the Dropdown component - + export default { components: { PlainHeader, - Dropdown, // Register the Dropdown component + Dropdown, }, data() { return { From d2d840cff14df238da77f74bbc676ecc244608cc Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 20 Aug 2023 16:47:50 -0500 Subject: [PATCH 07/19] Fixed spacing and border --- src/views/JazzmanMenu/JazzmanMenu.vue | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 8672de5e..80725050 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -1,6 +1,6 @@ <template> <div class="outer-container"> - + <div class="gap"></div> <div class="menu-container"> <h1 class="menu-text" for="menu-select">Select a Menu:</h1> <Dropdown :options="menuOptions" @@ -17,7 +17,7 @@ <h1 class="menu-title">Jazzman's Menu</h1> <div class="green-line"></div> </header> - <header class="menu-header" v-if="selectedMenu === 'Pwc Cafe'"> + <header class="menu-header" v-if="selectedMenu === 'PWC Cafe'"> <h1 class="menu-title">PWC Menu</h1> <div class="green-line"></div> </header> @@ -31,7 +31,7 @@ </header> - <div class="menu-row" v-if="selectedMenu === 'Pwc Cafe'"> + <div class="menu-row" v-if="selectedMenu === 'PWC Cafe'"> <section class="menu-categoryFour"> <h2 class="category-title">Açaí Bowl</h2> <div class="small-green-line"></div> @@ -192,7 +192,7 @@ </section> </div> - <div class="menu-row" v-if="selectedMenu === 'Pwc Cafe'"> + <div class="menu-row" v-if="selectedMenu === 'PWC Cafe'"> <section class="menu-categoryThree"> <h2 class="category-title">Tea/Coffee</h2> <div class="small-green-line"></div> @@ -431,7 +431,7 @@ // Additional data for Dropdown component menuOptions: [ 'Jazzmans', - 'Pwc Cafe', + 'PWC Cafe', 'Deli Menu', 'Special Menu', ], @@ -443,7 +443,7 @@ this.selectedOptionIndex = selectedIndex; // Update the selected option index this.selectedMenu = this.menuOptions[selectedIndex]; }, - // ... Other methods + }, }; @@ -455,11 +455,13 @@ .outer-container background-color: var(--color) /* */ +.gap + padding: 35px .menu-container width: 80% /* Adjust the width as needed */ background-color: #ffffff - border: 2px solid #000000 + border: 0px solid #000000 border-radius: 10px padding: 20px box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) @@ -502,7 +504,7 @@ .home-link position: absolute top: 10px - right: 15px + right: 90px +mobile-small top: 0 right: 5px @@ -634,5 +636,7 @@ .menu-title font-size: 32px - color: var(--color) /* Phthalo green */ + color: var(--color) /* Phthalo green */ + + </style> \ No newline at end of file From c842ebd45e6e118f4eb90077ffe48a20a0f6ac5e Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 20 Aug 2023 16:57:12 -0500 Subject: [PATCH 08/19] moved countdown to left --- src/views/JazzmanMenu/JazzmanMenu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 80725050..94825aa8 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -5,7 +5,7 @@ <h1 class="menu-text" for="menu-select">Select a Menu:</h1> <Dropdown :options="menuOptions" :modelValue="selectedMenu" - align="center" + align="left" direction="down" @update:modelValue="onMenuSelect" /> From 274ceaf8100d78569a35ebc0de6ac224c16201fd Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 20 Aug 2023 17:09:39 -0500 Subject: [PATCH 09/19] mobile fix? --- src/views/JazzmanMenu/JazzmanMenu.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 94825aa8..33002fe3 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -459,7 +459,9 @@ padding: 35px .menu-container - width: 80% /* Adjust the width as needed */ + width: 80% + +mobile + width: 100%/* Adjust the width as needed */ background-color: #ffffff border: 0px solid #000000 border-radius: 10px @@ -539,6 +541,8 @@ .menu-row display: flex justify-content: center + +mobile + flex-direction: column .menu-category margin-right: 50px From d04059748217a3276b9477381500c771a4a7047a Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Mon, 21 Aug 2023 21:30:21 -0500 Subject: [PATCH 10/19] Mobile Fixed --- src/views/JazzmanMenu/JazzmanMenu.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 33002fe3..7e352d88 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -453,7 +453,10 @@ @import 'src/styles/style.sass' .outer-container - background-color: var(--color) /* */ + background-color: var(--color) + +mobile + width: 100% + .gap padding: 35px @@ -461,7 +464,7 @@ .menu-container width: 80% +mobile - width: 100%/* Adjust the width as needed */ + width: 60%/* Adjust the width as needed */ background-color: #ffffff border: 0px solid #000000 border-radius: 10px @@ -476,6 +479,8 @@ .menu-dropdown text-align: center margin: 20px 0 + + .menu-select padding: 5px 10px @@ -486,6 +491,7 @@ + .plain-header max-width: $content-width margin: auto From abbfc3add4864a41bbec6e8e4e45a2df52e49430 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:33:27 -0500 Subject: [PATCH 11/19] Fixed ypadding of other cards bug --- src/views/JazzmanMenu/JazzmanMenu.vue | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 7e352d88..d970b97d 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -449,8 +449,9 @@ }; </script> -<style lang="sass"> -@import 'src/styles/style.sass' + +<style lang="sass"> + @import 'src/styles/style.sass' .outer-container background-color: var(--color) @@ -480,7 +481,6 @@ text-align: center margin: 20px 0 - .menu-select padding: 5px 10px @@ -488,10 +488,6 @@ border-radius: 4px font-size: 16px - - - - .plain-header max-width: $content-width margin: auto @@ -502,7 +498,6 @@ text-align: center .title - line-height: 120px font-size: 3.5em font-weight: bold margin-left: 10px @@ -517,7 +512,6 @@ top: 0 right: 5px - .menu-board display: flex flex-direction: column @@ -632,7 +626,7 @@ .menu-categoryFive li margin: 5px 0 font-size: 18px - color: #8c8c8c /* Dark gray text color */ + color: #8c8c8c .menu-categorySix ul list-style-type: none @@ -641,12 +635,10 @@ .menu-categorySix li margin: 5px 0 font-size: 18px - color: #8c8c8c /* Dark gray text color */ + color: #8c8c8c .menu-title font-size: 32px - color: var(--color) /* Phthalo green */ - - -</style> \ No newline at end of file + color: var(--color) +</style> From 6552cff8841039cb1f36461505e58193ccf31693 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:42:54 -0500 Subject: [PATCH 12/19] matched padding to jukebox --- src/views/JazzmanMenu/JazzmanMenu.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index d970b97d..e61deb61 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -460,7 +460,7 @@ .gap - padding: 35px + padding:50px .menu-container width: 80% @@ -480,6 +480,7 @@ .menu-dropdown text-align: center margin: 20px 0 + .menu-select @@ -506,7 +507,7 @@ .home-link position: absolute - top: 10px + top: 30px right: 90px +mobile-small top: 0 From b0d2a0a3df455788c187fa7c4a3e43e4e06c417e Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:53:39 -0500 Subject: [PATCH 13/19] tried to change dropdown alignment --- src/views/JazzmanMenu/JazzmanMenu.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index e61deb61..cc6acd5c 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -5,7 +5,7 @@ <h1 class="menu-text" for="menu-select">Select a Menu:</h1> <Dropdown :options="menuOptions" :modelValue="selectedMenu" - align="left" + align="right" direction="down" @update:modelValue="onMenuSelect" /> @@ -469,7 +469,10 @@ background-color: #ffffff border: 0px solid #000000 border-radius: 10px - padding: 20px + padding-bottom: 20px + padding-right: 20px + padding-left: 20px + padding-top: 5px box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) margin: auto From 381c7caa16a287d21a237a51b7ed08f1c814eb91 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:57:42 -0500 Subject: [PATCH 14/19] bug fix --- src/views/Home/Home.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue index deb5813b..c18d1486 100644 --- a/src/views/Home/Home.vue +++ b/src/views/Home/Home.vue @@ -73,7 +73,7 @@ import CardContainer from "@/components/CardContainer.vue"; import UpcomingEventsCard from "@/components/cards/UpcomingEventsCard.vue"; import IconTextCard from "@/components/cards/IconTextCard.vue"; import WeatherCard from "@/components/cards/WeatherCard.vue"; - + import PwcCard from "@/components/cards/PwcCard.vue"; import ScheduleCard from "@/components/cards/ScheduleCard.vue"; import HolidayCard from "@/components/cards/HolidayCard.vue"; import ContributeCard from "@/components/cards/ContributeCard.vue"; @@ -98,6 +98,7 @@ export default { IconTextCard, ScheduleCard, WeatherCard, + PwcCard, HolidayCard, ContributeCard, From 0008e4d703556b32bd30f50e7c42f2a727d0b3b1 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sat, 26 Aug 2023 17:43:58 -0500 Subject: [PATCH 15/19] Fixed dropdown button size and position --- src/views/JazzmanMenu/JazzmanMenu.vue | 79 +++++++++++++++++++-------- 1 file changed, 57 insertions(+), 22 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index cc6acd5c..e36b306c 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -2,14 +2,17 @@ <div class="outer-container"> <div class="gap"></div> <div class="menu-container"> - <h1 class="menu-text" for="menu-select">Select a Menu:</h1> - <Dropdown :options="menuOptions" - :modelValue="selectedMenu" - align="right" - direction="down" - @update:modelValue="onMenuSelect" /> - - <div> + + <div class="menu-dropdown-container"> + <h1 class="menu-text" for="menu-select">Select a Menu:</h1> + <Dropdown :options="menuOptions" + :modelValue="selectedMenu" + align="right" + direction="down" + @update:modelValue="onMenuSelect" /> + <div class="gap2"></div> + + <plain-header title="Menus" /> <div class="menu-board"> @@ -351,7 +354,7 @@ </section> </div> <div class="menu-row" v-if="selectedMenu === 'Deli Menu'"> - <section class="menu-categoryFive"> + <section class="menu-categorySeven"> <h2 class="category-title">Bread</h2> <div class="small-green-line"></div> <ul> @@ -364,7 +367,7 @@ </ul> </section> - <section class="menu-categoryFive"> + <section class="menu-categorySeven"> <h2 class="category-title">Protein</h2> <div class="small-green-line"></div> <ul> @@ -378,7 +381,7 @@ </ul> </section> - <section class="menu-categoryFive"> + <section class="menu-categorySeven"> <h2 class="category-title">Toppings</h2> <div class="small-green-line"></div> <ul> @@ -395,7 +398,7 @@ </ul> </section> - <section class="menu-categoryFive"> + <section class="menu-categorySeven"> <h2 class="category-title">Sauce</h2> <div class="small-green-line"></div> <ul> @@ -450,7 +453,7 @@ </script> -<style lang="sass"> +<style lang="sass"> @import 'src/styles/style.sass' .outer-container @@ -462,6 +465,22 @@ .gap padding:50px +.menu-dropdown-container + display: flex + align-items: center // Vertically align contents + + margin-left:10px 0 + flex-wrap: wrap // Allow items to wrap if they don't fit in a row + + +.menu-dropdown + text-align: center + margin: 0 10px + +.gap2 + padding-left: 50px + padding-right: 10px + .menu-container width: 80% +mobile @@ -477,13 +496,13 @@ margin: auto .menu-text - text-align: center + text-align: left font-size: 17px .menu-dropdown text-align: center margin: 20px 0 - + .menu-select @@ -550,25 +569,25 @@ .menu-category margin-right: 50px - margin-left: 50px + margin-left:60px text-align: center flex: 1 .menu-categoryTwo margin-right: 50px - margin-left: 50px + margin-left: 60px text-align: center flex: 1 .menu-categoryThree - margin-right: 50px - margin-left: 50px + margin-right: 70px + margin-left: 65px text-align: center flex: 1 .menu-categoryFour - margin-right: 50px - margin-left: 50px + margin-right: 70px + margin-left: 65px text-align: center flex: 1 @@ -583,6 +602,13 @@ margin-left: 50px text-align: center flex: 1 + +.menu-categorySeven + margin-right: 60px + margin-left: 94px + text-align: center + flex: 1 + .category-title font-size: 24px color: var(--color) /* Silver sand */ @@ -637,6 +663,15 @@ padding-left: 0 .menu-categorySix li + margin: 5px 0 + font-size: 18px + color: #8c8c8c + +.menu-categorySeven ul + list-style-type: none + padding-left: 0 + +.menu-categorySeven li margin: 5px 0 font-size: 18px color: #8c8c8c @@ -645,4 +680,4 @@ .menu-title font-size: 32px color: var(--color) -</style> +</style> \ No newline at end of file From a8445e235b098da065a5c7b4c8c63b89715c1413 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 27 Aug 2023 10:06:07 -0500 Subject: [PATCH 16/19] Updated mobile font sizing --- src/views/JazzmanMenu/JazzmanMenu.vue | 67 +++++++++++++++++++++------ 1 file changed, 54 insertions(+), 13 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index e36b306c..d6118319 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -355,8 +355,8 @@ </div> <div class="menu-row" v-if="selectedMenu === 'Deli Menu'"> <section class="menu-categorySeven"> - <h2 class="category-title">Bread</h2> - <div class="small-green-line"></div> + <h2 class="category-titleTwo">Bread</h2> + <div class="small-green-lineTwo"></div> <ul> <li>White Bread</li> <li>Wheat Bread</li> @@ -368,8 +368,8 @@ </section> <section class="menu-categorySeven"> - <h2 class="category-title">Protein</h2> - <div class="small-green-line"></div> + <h2 class="category-titleTwo">Protein</h2> + <div class="small-green-lineTwo"></div> <ul> <li>Roast Beef</li> <li>Turkey</li> @@ -382,8 +382,8 @@ </section> <section class="menu-categorySeven"> - <h2 class="category-title">Toppings</h2> - <div class="small-green-line"></div> + <h2 class="category-titleTwo">Toppings</h2> + <div class="small-green-lineTwo"></div> <ul> <li>Lettuce</li> <li>Tomato</li> @@ -399,8 +399,8 @@ </section> <section class="menu-categorySeven"> - <h2 class="category-title">Sauce</h2> - <div class="small-green-line"></div> + <h2 class="category-titleTwo">Sauce</h2> + <div class="small-green-lineTwo"></div> <ul> <li>Chipotle</li> <li>Mustard</li> @@ -503,7 +503,7 @@ text-align: center margin: 20px 0 - + .menu-select padding: 5px 10px @@ -549,6 +549,7 @@ text-align: center margin-bottom: 30px + .green-line width: 60px height: 2px @@ -572,6 +573,8 @@ margin-left:60px text-align: center flex: 1 + + .menu-categoryTwo margin-right: 50px @@ -612,24 +615,34 @@ .category-title font-size: 24px color: var(--color) /* Silver sand */ + +mobile + font-size:19px + padding-right: 5px .menu-category ul list-style-type: none padding-left: 0 - + + + .menu-category li margin: 5px 0 font-size: 18px color: #8c8c8c /* Dark gray text color */ + +mobile + font-size: 12px .menu-categoryTwo ul list-style-type: none padding-left: 0 + .menu-categoryTwo li margin: 5px 0 font-size: 18px color: #8c8c8c /* Dark gray text color */ + +mobile + font-size: 12px .menu-categoryThree ul list-style-type: none @@ -639,6 +652,8 @@ margin: 5px 0 font-size: 18px color: #8c8c8c /* Dark gray text color */ + +mobile + font-size: 12px .menu-categoryFour ul list-style-type: none @@ -648,6 +663,8 @@ margin: 5px 0 font-size: 18px color: #8c8c8c /* Dark gray text color */ + +mobile + font-size: 12px .menu-categoryFive ul list-style-type: none @@ -657,6 +674,8 @@ margin: 5px 0 font-size: 18px color: #8c8c8c + +mobile + font-size: 12px .menu-categorySix ul list-style-type: none @@ -666,18 +685,40 @@ margin: 5px 0 font-size: 18px color: #8c8c8c + +mobile + font-size: 12px .menu-categorySeven ul list-style-type: none - padding-left: 0 + padding-left: 0px + padding-right: 0px .menu-categorySeven li margin: 5px 0 font-size: 18px color: #8c8c8c - + +mobile + font-size: 12px + padding-right: 25px .menu-title font-size: 32px - color: var(--color) + color: var(--color) + +.category-titleTwo + font-size: 24px + color: var(--color) /* Silver sand */ + +mobile + font-size:19px + padding-right:30px + +.small-green-lineTwo + width: 20px + height: 2px + background-color: #040f0f /* Phthalo green */ + margin-left: 50px + margin-right: 45px + +mobile + padding-right:0px + padding-left:0px </style> \ No newline at end of file From e142b00ea3e827b116cc6df0f95fb04a94a82201 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 3 Sep 2023 11:49:12 -0500 Subject: [PATCH 17/19] Fixed deli padding --- src/views/JazzmanMenu/JazzmanMenu.vue | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index d6118319..cec21bee 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -583,32 +583,32 @@ flex: 1 .menu-categoryThree - margin-right: 70px - margin-left: 65px + margin-right: 50px + margin-left: 60x text-align: center flex: 1 .menu-categoryFour - margin-right: 70px - margin-left: 65px + margin-right: 50px + margin-left: 60px text-align: center flex: 1 .menu-categoryFive margin-right: 50px - margin-left: 50px + margin-left: 60px text-align: center flex: 1 .menu-categorySix margin-right: 50px - margin-left: 50px + margin-left: 60px text-align: center flex: 1 .menu-categorySeven - margin-right: 60px - margin-left: 94px + margin-right: 50px + margin-left: 70px text-align: center flex: 1 From 0af129694c9807686f94c2fea9ac63bd6a795932 Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Sun, 10 Sep 2023 22:49:44 -0500 Subject: [PATCH 18/19] Fixed dropdown Added text to dropdown to match current menu --- src/views/JazzmanMenu/JazzmanMenu.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index cec21bee..497bb7e7 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -6,12 +6,16 @@ <div class="menu-dropdown-container"> <h1 class="menu-text" for="menu-select">Select a Menu:</h1> <Dropdown :options="menuOptions" - :modelValue="selectedMenu" + :modelValue="selectedOptionIndex" align="right" direction="down" - @update:modelValue="onMenuSelect" /> + @update:modelValue="onMenuSelect"> + <template v-slot="{ option }"> + {{ menuOptions[option] }} + </template> + </Dropdown> <div class="gap2"></div> - + <plain-header title="Menus" /> From 0b8aa90cac925aab02c335b7f782ef81e52e00fa Mon Sep 17 00:00:00 2001 From: yashjagtap23 <108370176+yashjagtap23@users.noreply.github.com> Date: Thu, 14 Sep 2023 00:03:16 -0500 Subject: [PATCH 19/19] Fixed Styling Fixed styling to work on all devices properly and no extra padding or white space --- src/views/JazzmanMenu/JazzmanMenu.vue | 943 +++++++++++++------------- 1 file changed, 466 insertions(+), 477 deletions(-) diff --git a/src/views/JazzmanMenu/JazzmanMenu.vue b/src/views/JazzmanMenu/JazzmanMenu.vue index 497bb7e7..6bdeb01c 100644 --- a/src/views/JazzmanMenu/JazzmanMenu.vue +++ b/src/views/JazzmanMenu/JazzmanMenu.vue @@ -2,424 +2,442 @@ <div class="outer-container"> <div class="gap"></div> <div class="menu-container"> - - <div class="menu-dropdown-container"> - <h1 class="menu-text" for="menu-select">Select a Menu:</h1> - <Dropdown :options="menuOptions" - :modelValue="selectedOptionIndex" - align="right" - direction="down" - @update:modelValue="onMenuSelect"> - <template v-slot="{ option }"> - {{ menuOptions[option] }} - </template> - </Dropdown> - <div class="gap2"></div> - - - <plain-header title="Menus" /> - - <div class="menu-board"> - <header class="menu-header" v-if="selectedMenu === 'Jazzmans'"> - <h1 class="menu-title">Jazzman's Menu</h1> - <div class="green-line"></div> - </header> - <header class="menu-header" v-if="selectedMenu === 'PWC Cafe'"> - <h1 class="menu-title">PWC Menu</h1> - <div class="green-line"></div> - </header> - <header class="menu-header" v-if="selectedMenu === 'Deli Menu'"> - <h1 class="menu-title">Deli Menu</h1> - <div class="green-line"></div> - </header> - <header class="menu-header" v-if="selectedMenu === 'Special Menu'"> - <h1 class="menu-title">Special Menu</h1> - <div class="green-line"></div> - </header> - - - <div class="menu-row" v-if="selectedMenu === 'PWC Cafe'"> - <section class="menu-categoryFour"> - <h2 class="category-title">Açaí Bowl</h2> - <div class="small-green-line"></div> - <ul> - <li>Acai Sorbet</li> - <li>Granola</li> - <li>Chia Seeds</li> - <li>Honey</li> - <li>Blueberries</li> - <li>Blackberries</li> - <li>Strawberries</li> - <li>Mango</li> - <li>Kiwi</li> - </ul> - </section> - - <section class="menu-categoryFour"> - <h2 class="category-title">Drinks</h2> - <div class="small-green-line"></div> - <ul> - <li>Black Milk</li> - <li>Matcha Milk</li> - <li>Chia Milk</li> - <li>Taro Milk</li> - <li>Strawberry</li> - <li>Mango</li> - <li>Dragon Fruit</li> - <li>Green Machine</li> - <li>Forever Berry</li> - </ul> - </section> - - - - <section class="menu-categoryFour"> - <h2 class="category-title">Salad</h2> - <div class="small-green-line"></div> - <ul> - <li>Chicken Salad</li> - <li>Hearts of Palm</li> - <li>Tuna Salad</li> - <li>Egg Salad</li> - <li>Sweet Potato</li> - <li>Custom Salad</li> - </ul> - </section> - - <section class="menu-categoryFour"> - <h2 class="category-title">To Go</h2> - <div class="small-green-line"></div> - <ul> - <li>Antipasto Box</li> - <li>Pinwheel Box</li> - <li>Protein Box</li> - <li>Cottage Cheese Box</li> - <li>Crudite Cup</li> - <li>Mixed Fruit Cup</li> - <li>Fruit Yogurt</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'Special Menu'"> - <section class="menu-categorySix"> - <h2 class="category-title">Poké Bowl <br />(Monday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choose Two:</li> - <li>Salmon</li> - <li>Tuna</li> - <li>Shrimp Tempura</li> - <li>Tofu</li> - <li>Imitation Crab</li> - <li> - - - </li> - <li>Toppings:</li> - <li>Edamame</li> - <li>Mushroom</li> - <li>Cucumber</li> - <li>Green Onion</li> - <li>Carrot</li> - <li>Lettuce</li> - <li>Ginger</li> - <li>Radish</li> - <li>-</li> - <li>Sauce:</li> - <li>Spicy Mayo</li> - <li>Soy Sauce</li> - <li>Wasabi:</li> - - </ul> - </section> - - <section class="menu-categorySix"> - <h2 class="category-title">Fat Rosie's Tacos (Tuesday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choose Two:</li> - <li>Beef</li> - <li>Chicken</li> - <li>Cauliflower</li> - <li> - - - </li> - <li>Sides:</li> - <li>Rice & Beans</li> - - <li>-</li> - <li>Toppings;</li> - <li>Cheese</li> - <li>Lettuce</li> - <li>Sour Cream</li> - <li>Tomatoes</li> - <li>-</li> - <li>Sauce:</li> - <li>Spicy</li> - <li>Mild</li> - </ul> - </section> - - - - <section class="menu-categorySix"> - <h2 class="category-title">Chicken Wing (Wednesday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choice Of:</li> - <li>Boneless</li> - <li>Bone-In</li> - <li>-</li> - <li>Sides:</li> - <li>Fries</li> - <li>-</li> - <li>Flavor (Dry):</li> - <li>Lemon Pepper</li> - <li>Parmesan</li> - <li>Flavor (Wet):</li> - <li>Spicy</li> - <li>BBQ</li> - </ul> - </section> - - <section class="menu-categorySix"> - <h2 class="category-title">Stevenson Sushi (Friday)</h2> - <div class="small-green-line"></div> - <ul> - <li>Choose 8 Pieces:</li> - <li>California</li> - <li>Salmon</li> - <li>Philidelphia</li> - <li>Tuna Roll</li> - <li>Rainbow</li> - <li>Spicy Crab</li> - <li>Shrimp Tempura</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'PWC Cafe'"> - <section class="menu-categoryThree"> - <h2 class="category-title">Tea/Coffee</h2> - <div class="small-green-line"></div> - <ul> - <li>Coffee</li> - <li>Latte Hot</li> - <li>Latte Iced</li> - <li>Latte Iced Caramel</li> - <li>Mocha Hot</li> - <li>Mocha Iced</li> - <li>Monin Tea</li> - <li>Americano</li> - <li>Cappucino</li> - <li>Hot Chocolate</li> - </ul> - </section> - - <section class="menu-categoryThree"> - <h2 class="category-title">Wraps</h2> - <div class="small-green-line"></div> - <ul> - <li>Power Wrap</li> - <li>Thai Wrap</li> - <li>Veggie Wrap</li> - </ul> - </section> - - <section class="menu-categoryThree"> - <h2 class="category-title">Pastries</h2> - <div class="small-green-line"></div> - <ul> - <li>Caprese Puff </li> - <li>Ham & Cheese </li> - </ul> - </section> - - <section class="menu-categoryThree"> - <h2 class="category-title">Oats</h2> - <div class="small-green-line"></div> - <ul> - <li>Autumn Harvest</li> - <li>Strawberry Cheesecake</li> - <li>Mango Chia</li> - </ul> - </section> - </div> - <div class="menu-row" v-if="selectedMenu === 'Jazzmans'"> - <section class="menu-category"> - <h2 class="category-title">Classics</h2> - <div class="small-green-line"></div> - <ul> - <li>Latte & Cappuccino</li> - <li>Mocha</li> - <li>Espresso</li> - <li>Americano</li> - <li>Regular or Decaf Coffee</li> - <li>Iced Coffee</li> - <li>Hot Chocolate</li> - <li>Flavored Steamer</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Snacks</h2> - <div class="small-green-line"></div> - <ul> - <li>Chips</li> - <li>Hummus & Pita</li> - <li>Yogurt Parfait</li> - <li>Grapes & Cheese</li> - <li>Fruit Cup</li> - <li>Jello</li> - <li>Pasta-Salad</li> - <li>Pudding</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Tea</h2> - <div class="small-green-line"></div> - <ul> - <li>Iced Blueberry Green Tea</li> - <li>Hot Tea</li> - <li>Hot or Iced Tea Latte</li> - - <li>Chai</li> - <li>Coco Coconut</li> - <li>Green Tea Matcha</li> - - <li>Iced Tea</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Bakery</h2> - <div class="small-green-line"></div> - <ul> - <li>Muffins</li> - <li>Cookies</li> - <li>Turnovers</li> - <li>Scones</li> - <li>Brownies</li> - <li>Bagels</li> - <li>Cinnamon Roll</li> - </ul> - </section> - </div> - - <div class="menu-row" v-if="selectedMenu === 'Jazzmans'"> - <section class="menu-categoryTwo"> - <h2 class="category-title">Sandwiches</h2> - <div class="small-green-line"></div> - <ul> - <li>Turkey & Cheese</li> - <li>Italian Sandwich</li> - <li>Chicken Salad</li> - <li>Ham & Swiss</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Wraps</h2> - <div class="small-green-line"></div> - <ul> - <li>Buffalo Chicken</li> - <li>Hummus & Roasted Veggie</li> - <li>Chicken Caesar</li> - <li>Caesar Wrap</li> - <li>Turkey Bacon</li> - </ul> - </section> - - <section class="menu-categoryTwo"> - <h2 class="category-title">Salads</h2> - <div class="small-green-line"></div> - <ul> - <li>Buffalo Chicken</li> - <li>Garden Salad</li> - <li>Chicken Caesar</li> - <li>Caesar Salad</li> - <li>Quinoa Salad</li> - </ul> - </section> - - <section class="menu-category"> - <h2 class="category-title">Good Stuff</h2> - <div class="small-green-line"></div> - <ul> - <li>Caramel Delight</li> - <li>Caramel Latte</li> - <li>White Chocolate Mocha</li> - <li>Crème Brûlée</li> - <li>Tuxedo</li> - </ul> - </section> - </div> - <div class="menu-row" v-if="selectedMenu === 'Deli Menu'"> - <section class="menu-categorySeven"> - <h2 class="category-titleTwo">Bread</h2> - <div class="small-green-lineTwo"></div> - <ul> - <li>White Bread</li> - <li>Wheat Bread</li> - <li>9 Grain</li> - <li>Pretzel Bun</li> - <li>Kaiser Roll</li> - <li>Tortilla</li> - </ul> - </section> - - <section class="menu-categorySeven"> - <h2 class="category-titleTwo">Protein</h2> - <div class="small-green-lineTwo"></div> - <ul> - <li>Roast Beef</li> - <li>Turkey</li> - <li>Ham</li> - <li>Salami</li> - <li>BBQ Chicken</li> - <li>Buffalo Chicken</li> - <li>Hummus</li> - </ul> - </section> - - <section class="menu-categorySeven"> - <h2 class="category-titleTwo">Toppings</h2> - <div class="small-green-lineTwo"></div> - <ul> - <li>Lettuce</li> - <li>Tomato</li> - <li>Onion</li> - <li>Pickles</li> - <li>Olives</li> - <li>Cucumber</li> - <li>Swiss Cheese</li> - <li>Provolone</li> - <li>Cheddar</li> - <li>Pepper Jack</li> - </ul> - </section> - - <section class="menu-categorySeven"> - <h2 class="category-titleTwo">Sauce</h2> - <div class="small-green-lineTwo"></div> - <ul> - <li>Chipotle</li> - <li>Mustard</li> - <li>Ketchup</li> - <li>Ranch</li> - <li>Honey Mustard</li> - </ul> - </section> + <div class="menu-dropdown-container"> + + <div class="dropdown-wrapper"> + <h1 class="menu-text" for="menu-select">Menu:</h1> + <Dropdown :options="menuOptions" + :modelValue="selectedOptionIndex" + align="right" + direction="down" + @update:modelValue="onMenuSelect"> + + + <template v-slot="{ option }"> + {{ menuOptions[option] }} + </template> + </Dropdown> + </div> + <div class="gap2"></div> + + + <plain-header title="Menus" /> + + <div class="menu-board"> + <header class="menu-header" v-if="selectedMenu === 'Jazzmans Menu'"> + <h1 class="menu-title">Jazzman's Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'PWC Cafe Menu'"> + <h1 class="menu-title">PWC Cafe Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'The Deli Menu'"> + <h1 class="menu-title">The Deli Menu</h1> + <div class="green-line"></div> + </header> + <header class="menu-header" v-if="selectedMenu === 'Special Menu'"> + <h1 class="menu-title">Special Menu</h1> + <div class="green-line"></div> + </header> + + + <div class="menu-row" v-if="selectedMenu === 'PWC Cafe Menu'"> + <section class="menu-categoryFour"> + <h2 class="category-title">Açaí Bowl</h2> + <div class="small-green-line"></div> + <ul> + <li>Acai Sorbet</li> + <li>Granola</li> + <li>Chia Seeds</li> + <li>Honey</li> + <li>Blueberries</li> + <li>Blackberries</li> + <li>Strawberries</li> + <li>Mango</li> + <li>Kiwi</li> + </ul> + </section> + + <section class="menu-categoryFour"> + <h2 class="category-title">Drinks</h2> + <div class="small-green-line"></div> + <ul> + <li>Black Milk</li> + <li>Matcha Milk</li> + <li>Chia Milk</li> + <li>Taro Milk</li> + <li>Strawberry</li> + <li>Mango</li> + <li>Dragon Fruit</li> + <li>Green Machine</li> + <li>Forever Berry</li> + </ul> + </section> + + + + <section class="menu-categoryFour"> + <h2 class="category-title">Salad</h2> + <div class="small-green-line"></div> + <ul> + <li>Chicken Salad</li> + <li>Hearts of Palm</li> + <li>Tuna Salad</li> + <li>Egg Salad</li> + <li>Sweet Potato</li> + <li>Custom Salad</li> + </ul> + </section> + + <section class="menu-categoryFour"> + <h2 class="category-title">To Go</h2> + <div class="small-green-line"></div> + <ul> + <li>Antipasto Box</li> + <li>Pinwheel Box</li> + <li>Protein Box</li> + <li>Cottage Cheese Box</li> + <li>Crudite Cup</li> + <li>Mixed Fruit Cup</li> + <li>Fruit Yogurt</li> + </ul> + </section> + </div> + + + <div class="menu-row" v-if="selectedMenu === 'Special Menu'"> + <section class="menu-categorySix"> + <h2 class="category-title">Poké Bowl <br />(Monday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose Two:</li> + <li>Salmon</li> + <li>Tuna</li> + <li>Shrimp Tempura</li> + <li>Tofu</li> + <li>Imitation Crab</li> + <li> + - + </li> + <li>Toppings:</li> + <li>Edamame</li> + <li>Mushroom</li> + <li>Cucumber</li> + <li>Green Onion</li> + <li>Carrot</li> + <li>Lettuce</li> + <li>Ginger</li> + <li>Radish</li> + <li>-</li> + <li>Sauce:</li> + <li>Spicy Mayo</li> + <li>Soy Sauce</li> + <li>Wasabi:</li> + + </ul> + </section> + + <section class="menu-categorySix"> + <h2 class="category-title">Fat Rosie's Tacos (Tuesday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose Two:</li> + <li>Beef</li> + <li>Chicken</li> + <li>Cauliflower</li> + <li> + - + </li> + <li>Sides:</li> + <li>Rice & Beans</li> + + <li>-</li> + <li>Toppings;</li> + <li>Cheese</li> + <li>Lettuce</li> + <li>Sour Cream</li> + <li>Tomatoes</li> + <li>-</li> + <li>Sauce:</li> + <li>Spicy</li> + <li>Mild</li> + </ul> + </section> + + + + <section class="menu-categorySix"> + <h2 class="category-title">Chicken Wing (Wednesday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choice Of:</li> + <li>Boneless</li> + <li>Bone-In</li> + <li>-</li> + <li>Sides:</li> + <li>Fries</li> + <li>-</li> + <li>Flavor (Dry):</li> + <li>Lemon Pepper</li> + <li>Parmesan</li> + <li>Flavor (Wet):</li> + <li>Spicy</li> + <li>BBQ</li> + </ul> + </section> + + <section class="menu-categorySix"> + <h2 class="category-title">Stevenson Sushi (Friday)</h2> + <div class="small-green-line"></div> + <ul> + <li>Choose 8 Pieces:</li> + <li>California</li> + <li>Salmon</li> + <li>Philidelphia</li> + <li>Tuna Roll</li> + <li>Rainbow</li> + <li>Spicy Crab</li> + <li>Shrimp Tempura</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'PWC Cafe Menu'"> + <section class="menu-categoryThree"> + <h2 class="category-title">Tea/Coffee</h2> + <div class="small-green-line"></div> + <ul> + <li>Coffee</li> + <li>Latte Hot</li> + <li>Latte Iced</li> + <li>Latte Iced Caramel</li> + <li>Mocha Hot</li> + <li>Mocha Iced</li> + <li>Monin Tea</li> + <li>Americano</li> + <li>Cappucino</li> + <li>Hot Chocolate</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Power Wrap</li> + <li>Thai Wrap</li> + <li>Veggie Wrap</li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Pastries</h2> + <div class="small-green-line"></div> + <ul> + <li>Caprese Puff </li> + <li>Ham & Cheese </li> + </ul> + </section> + + <section class="menu-categoryThree"> + <h2 class="category-title">Oats</h2> + <div class="small-green-line"></div> + <ul> + <li>Autumn Harvest</li> + <li>Strawberry Cheesecake</li> + <li>Mango Chia</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'Jazzmans Menu'"> + <section class="menu-category"> + <h2 class="category-title">Classics</h2> + <div class="small-green-line"></div> + <ul> + <li>Latte & Cappuccino</li> + <li>Mocha</li> + <li>Espresso</li> + <li>Americano</li> + <li>Regular or Decaf Coffee</li> + <li>Iced Coffee</li> + <li>Hot Chocolate</li> + <li>Flavored Steamer</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Snacks</h2> + <div class="small-green-line"></div> + <ul> + <li>Chips</li> + <li>Hummus & Pita</li> + <li>Yogurt Parfait</li> + <li>Grapes & Cheese</li> + <li>Fruit Cup</li> + <li>Jello</li> + <li>Pasta-Salad</li> + <li>Pudding</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Tea</h2> + <div class="small-green-line"></div> + <ul> + <li>Iced Blueberry Green Tea</li> + <li>Hot Tea</li> + <li>Hot or Iced Tea Latte</li> + + <li>Chai</li> + <li>Coco Coconut</li> + <li>Green Tea Matcha</li> + + <li>Iced Tea</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Bakery</h2> + <div class="small-green-line"></div> + <ul> + <li>Muffins</li> + <li>Cookies</li> + <li>Turnovers</li> + <li>Scones</li> + <li>Brownies</li> + <li>Bagels</li> + <li>Cinnamon Roll</li> + </ul> + </section> + </div> + + <div class="menu-row" v-if="selectedMenu === 'Jazzmans Menu'"> + <section class="menu-categoryTwo"> + <h2 class="category-title">Sandwiches</h2> + <div class="small-green-line"></div> + <ul> + <li>Turkey & Cheese</li> + <li>Italian Sandwich</li> + <li>Chicken Salad</li> + <li>Ham & Swiss</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Wraps</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Hummus & Roasted Veggie</li> + <li>Chicken Caesar</li> + <li>Caesar Wrap</li> + <li>Turkey Bacon</li> + </ul> + </section> + + <section class="menu-categoryTwo"> + <h2 class="category-title">Salads</h2> + <div class="small-green-line"></div> + <ul> + <li>Buffalo Chicken</li> + <li>Garden Salad</li> + <li>Chicken Caesar</li> + <li>Caesar Salad</li> + <li>Quinoa Salad</li> + </ul> + </section> + + <section class="menu-category"> + <h2 class="category-title">Good Stuff</h2> + <div class="small-green-line"></div> + <ul> + <li>Caramel Delight</li> + <li>Caramel Latte</li> + <li>White Chocolate Mocha</li> + <li>Crème Brûlée</li> + <li>Tuxedo</li> + </ul> + </section> + </div> + <div class="menu-row" v-if="selectedMenu === 'The Deli Menu'"> + <section class="menu-categorySeven"> + <h2 class="category-title">Bread Types</h2> + <div class="small-green-line"></div> + <ul> + <li>White Bread</li> + <li>Wheat Bread</li> + <li>9 Grain</li> + <li>Pretzel Bun</li> + <li>Kaiser Roll</li> + <li>Tortilla</li> + </ul> + </section> + + <section class="menu-categorySeven"> + <h2 class="category-title">Protein Types</h2> + <div class="small-green-line"></div> + <ul> + <li>Roast Beef</li> + <li>Turkey</li> + <li>Ham</li> + <li>Salami</li> + <li>BBQ Chicken</li> + <li>Buffalo Chicken</li> + <li>Hummus</li> + + </ul> + </section> + + <section class="menu-categorySeven"> + <h2 class="category-title">Toppings Types</h2> + <div class="small-green-line"></div> + <ul> + <li>Lettuce</li> + <li>Tomato</li> + <li>Onion</li> + <li>Pickles</li> + <li>Olives</li> + <li>Cucumber</li> + <li>Swiss Cheese</li> + <li>Provolone</li> + <li>Cheddar</li> + <li>Pepper Jack</li> + <li class="invisible">Invisible Topping 1</li> + <li class="invisible">Invisible Topping 2</li> + <li class="invisible">Invisible Topping 3</li> + <li class="invisible">Invisible Topping 4</li> + <li class="invisible">Invisible Topping 5</li> + <li class="invisible">Invisible Topping 6</li> + <li class="invisible">Invisible Topping 7</li> + <li class="invisible">Invisible Topping 8</li> + <li class="invisible">Invisible Topping 9</li> <!--styling purposes--> + </ul> + </section> + + <section class="menu-categorySeven"> + <h2 class="category-title">Sauce Types</h2> + <div class="small-green-line"></div> + <ul> + <li>Chipotle</li> + <li>Mustard</li> + <li>Ketchup</li> + <li>Ranch</li> + <li>Honey Mustard</li> + <li>Mayo</li> + + </ul> + </section> + + </div> </div> </div> - </div> - </div> </div> </template> @@ -434,12 +452,12 @@ }, data() { return { - selectedMenu: 'Jazzmans', // Default selection + selectedMenu: 'Jazzmans Menu', // Default selection // Additional data for Dropdown component menuOptions: [ - 'Jazzmans', - 'PWC Cafe', - 'Deli Menu', + 'Jazzmans Menu', + 'PWC Cafe Menu', + 'The Deli Menu', 'Special Menu', ], selectedOptionIndex: 0, // Default selected index @@ -460,11 +478,25 @@ <style lang="sass"> @import 'src/styles/style.sass' +.menu-categorySeven ul li.invisible + color: #ffffff + .outer-container background-color: var(--color) +mobile - width: 100% + width: 100% +.dropdown-wrapper + position: absolute + top: 110px /* Adjust the top value as needed */ + left: 150px /* Adjust the left value as needed */ + +mobile + display: flex + align-items: flex-start + justify-content: flex-start + left: 80px + + .gap padding:50px @@ -472,7 +504,7 @@ .menu-dropdown-container display: flex align-items: center // Vertically align contents - + justify-content: center margin-left:10px 0 flex-wrap: wrap // Allow items to wrap if they don't fit in a row @@ -481,6 +513,7 @@ text-align: center margin: 0 10px + .gap2 padding-left: 50px padding-right: 10px @@ -542,8 +575,8 @@ .menu-board display: flex flex-direction: column - align-items: center - justify-content: flex-start + align-items: center /* Center horizontally */ + justify-content: center /* Center vertically */ min-height: 100vh padding: 20px 0 background-color: #fefffe /* White background */ @@ -572,49 +605,7 @@ +mobile flex-direction: column -.menu-category - margin-right: 50px - margin-left:60px - text-align: center - flex: 1 - - - -.menu-categoryTwo - margin-right: 50px - margin-left: 60px - text-align: center - flex: 1 - -.menu-categoryThree - margin-right: 50px - margin-left: 60x - text-align: center - flex: 1 -.menu-categoryFour - margin-right: 50px - margin-left: 60px - text-align: center - flex: 1 - -.menu-categoryFive - margin-right: 50px - margin-left: 60px - text-align: center - flex: 1 - -.menu-categorySix - margin-right: 50px - margin-left: 60px - text-align: center - flex: 1 - -.menu-categorySeven - margin-right: 50px - margin-left: 70px - text-align: center - flex: 1 .category-title font-size: 24px @@ -703,26 +694,24 @@ color: #8c8c8c +mobile font-size: 12px - padding-right: 25px + .menu-title font-size: 32px color: var(--color) -.category-titleTwo - font-size: 24px - color: var(--color) /* Silver sand */ - +mobile - font-size:19px - padding-right:30px -.small-green-lineTwo - width: 20px - height: 2px - background-color: #040f0f /* Phthalo green */ - margin-left: 50px - margin-right: 45px - +mobile - padding-right:0px - padding-left:0px +.menu-category, +.menu-categoryTwo, +.menu-categoryThree, +.menu-categoryFour, +.menu-categoryFive, +.menu-categorySix, +.menu-categorySeven + margin-left: 70px + margin-right: 70px + margin-top: 10px // Adjust spacing between items + text-align: center // Center-align text + + </style> \ No newline at end of file