Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic Jazzman Menu Page #201

Closed
wants to merge 1 commit into from
Closed

Basic Jazzman Menu Page #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions src/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
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 Jukebox:RouteComponent = () => import('@/views/Jukebox/Jukebox.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 = {
scheduleToEdit: string;
Expand Down Expand Up @@ -102,6 +104,11 @@ const routes: Array<RouteRecordRaw> = [
path: '/jukebox',
component: Jukebox,
},
{
name: 'JazzmanMenu',
path: '/jazzmanMenu',
component: JazzmanMenu,
},
];

const router = createRouter({
Expand All @@ -116,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
Expand All @@ -135,4 +142,4 @@ router.beforeEach((to:RouteLocationNormalized, from:RouteLocationNormalized, nex
}
});

export default router;
export default router;
100 changes: 52 additions & 48 deletions src/views/Home/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,51 +6,50 @@
/>

<card-container class="card-container">
<end-of-year-card />
<!-- <countdown-card
v-show="themeName === 'Summer'"
untilDate="May 27, 2023"
message="🌴 Summer Countdown 🐬"
/> -->
<new-feature-card />
<new-theme-card />
<!-- <april-fools-card /> -->
<!-- <shs-hacks-card/> -->
<holiday-card />
<schedule-card />
<weather-card />
<lunch-card />
<upcoming-events-card />

<icon-text-card
:icon="icons.faBell"
text="Bell Schedules"
link="bellschedules"
:invert="false"
/>

<icon-text-card :icon="icons.faLink" text="Links" link="links" :invert="true" />

<icon-text-card :icon="icons.faCalendarDays" text="Calendar" link="calendar" :invert="true" />
<icon-text-card :icon="icons.faQrcode" text="QR Codes" link="qr" />

<icon-text-card :icon="icons.faRadio" text="Jukebox" link="jukebox" />

<icon-text-card
:icon="icons.faCalculator"
text="GPA Calculator"
link="gpaCalculator"
:link-props="{ type: 'a' }"
:invert="true"
/>

<icon-text-card :icon="icons.faDroplet" text="Switch Theme" link="colors" />

<icon-text-card :icon="icons.faHourglass" text="Timer" link="tools" :invert="true" />

<icon-text-card :icon="icons.faFileLines" text="Documents" link="documents" />

<icon-text-card :icon="icons.faGear" text="Settings" link="settings" :invert="true" />
<end-of-year-card />
<!-- <countdown-card
v-show="themeName === 'Summer'"
untilDate="May 27, 2023"
message="🌴 Summer Countdown 🐬"
/> -->
<new-feature-card />
<new-theme-card />
<!-- <april-fools-card /> -->
<!-- <shs-hacks-card/> -->
<holiday-card />
<schedule-card />
<weather-card />
<pwc-card />
<lunch-card />
<upcoming-events-card />

<icon-text-card :icon="icons.faBell"
text="Bell Schedules"
link="bellschedules"
:invert="false" />

<icon-text-card :icon="icons.faLink" text="Links" link="links" :invert="true" />

<icon-text-card :icon="icons.faCalendarDays" text="Calendar" link="calendar" :invert="true" />
<icon-text-card :icon="icons.faQrcode" text="QR Codes" link="qr" />

<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"
:link-props="{ type: 'a' }"
:invert="true" />

<icon-text-card :icon="icons.faDroplet" text="Switch Theme" link="colors" />

<icon-text-card :icon="icons.faHourglass" text="Timer" link="tools" :invert="true" />

<icon-text-card :icon="icons.faFileLines" text="Documents" link="documents" />

<icon-text-card :icon="icons.faGear" text="Settings" link="settings" :invert="true" />
</card-container>
</div>
</template>
Expand All @@ -67,12 +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 IconTextCard from "@/components/cards/IconTextCard.vue";
import WeatherCard from "@/components/cards/WeatherCard.vue";

import ScheduleCard from "@/components/cards/ScheduleCard.vue";
import HolidayCard from "@/components/cards/HolidayCard.vue";
import ContributeCard from "@/components/cards/ContributeCard.vue";
Expand All @@ -97,6 +98,7 @@ export default {
IconTextCard,
ScheduleCard,
WeatherCard,

HolidayCard,
ContributeCard,
NewThemeCard,
Expand All @@ -120,6 +122,8 @@ export default {
faHourglass,
faQrcode,
faRadio,
faMugSaucer,

},
fullScreenMode: false,
themeName: useThemeStore().theme.name,
Expand Down Expand Up @@ -149,4 +153,4 @@ export default {
.card-container .card:nth-child(#{$i})
+animate-fade-up
animation-delay: $i * 0.011s
</style>
</style>
189 changes: 189 additions & 0 deletions src/views/JazzmanMenu/JazzmanMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<template>
<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>
</template>

<style lang="sass">
@import 'src/styles/style.sass'

.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>