diff --git a/frontend/package.json b/frontend/package.json index b7cc2972..e9ef71e8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "vee-validate": "^4.8.6", "vue": "^3.2.0", "vue-router": "^4.0.0", + "vue3-mq": "^3.1.3", "vuetify": "^3.0.0", "webfontloader": "^1.0.0", "yup": "^1.1.1" diff --git a/frontend/src/assets/stylesheets/base/0_base.scss b/frontend/src/assets/stylesheets/base/0_base.scss index 6ad4b7d8..d9a0b097 100644 --- a/frontend/src/assets/stylesheets/base/0_base.scss +++ b/frontend/src/assets/stylesheets/base/0_base.scss @@ -44,7 +44,7 @@ main { footer { display: flex; flex: 0 !important; - flex-direction: row !important; + flex-direction: row; justify-content: space-between; a, a:visited { diff --git a/frontend/src/assets/stylesheets/base/basics.scss b/frontend/src/assets/stylesheets/base/basics.scss index 7bf07640..93dbf288 100644 --- a/frontend/src/assets/stylesheets/base/basics.scss +++ b/frontend/src/assets/stylesheets/base/basics.scss @@ -7,4 +7,8 @@ .flex-space-between { display: flex; justify-content: space-between; +} + +.no-padding { + padding: 0; } \ No newline at end of file diff --git a/frontend/src/assets/stylesheets/base/variables.scss b/frontend/src/assets/stylesheets/base/variables.scss index d26f7997..25f63050 100644 --- a/frontend/src/assets/stylesheets/base/variables.scss +++ b/frontend/src/assets/stylesheets/base/variables.scss @@ -6,7 +6,8 @@ $main-link-hover: $color-deep-sea; $main-nav-bg: $color-medium-sea-green; $main-nav-font: $color-cultured; $main-nav-font-size: 22px; -$main-nav-bg-hover: $color-deep-sea; +$main-nav-bg-hover: $color-white; +$main-nav-font-hover: $color-deep-sea; $warning-color: $color-orange-darkened; @@ -28,6 +29,8 @@ $user-stats: $color-info-blue; $event-stats: $color-success-green; // Events +$date-color: $color-sonic-silver; +$description-color: $color-cadet-blue-crayola; $edit-link-color: $color-info-blue; $edit-link-hover: $color-fed-blue; diff --git a/frontend/src/assets/stylesheets/components/0_components.scss b/frontend/src/assets/stylesheets/components/0_components.scss index 81873afd..20071c30 100644 --- a/frontend/src/assets/stylesheets/components/0_components.scss +++ b/frontend/src/assets/stylesheets/components/0_components.scss @@ -2,7 +2,6 @@ @import "./buttons.scss"; @import "./cards.scss"; @import "./events.scss"; -@import "./footer.scss"; @import "./forms.scss"; @import "./headers.scss"; @import "./layouts.scss"; diff --git a/frontend/src/assets/stylesheets/components/events.scss b/frontend/src/assets/stylesheets/components/events.scss index 72d8e152..11b75e13 100644 --- a/frontend/src/assets/stylesheets/components/events.scss +++ b/frontend/src/assets/stylesheets/components/events.scss @@ -1,4 +1,13 @@ .event-container { + #event-date { + color: $date-color; + } + + .no-description { + color: $description-color; + font-style: italic; + } + .event-actions-container { display: flex; justify-content: space-between; diff --git a/frontend/src/assets/stylesheets/components/footer.scss b/frontend/src/assets/stylesheets/components/footer.scss deleted file mode 100644 index 99df537b..00000000 --- a/frontend/src/assets/stylesheets/components/footer.scss +++ /dev/null @@ -1,4 +0,0 @@ -footer { - display: flex; - flex-direction: column; -} \ No newline at end of file diff --git a/frontend/src/assets/stylesheets/components/navigation.scss b/frontend/src/assets/stylesheets/components/navigation.scss index e24819e3..083c411e 100644 --- a/frontend/src/assets/stylesheets/components/navigation.scss +++ b/frontend/src/assets/stylesheets/components/navigation.scss @@ -1,11 +1,16 @@ nav { background-color: $main-nav-bg; - height: 64px; width: 100%; .v-toolbar { margin: 0 auto; } + + .v-toolbar__content { + display: flex; + flex-direction: column; + height: auto !important; + } } #main-navigation { @@ -16,21 +21,22 @@ nav { .nav_logo_container { display: flex; - flex-direction: column; justify-content: space-around; + width: 100%; img { - margin: 10px 15px 5px 15px; - width: 52px; + justify-content: space-around; + margin: 8px 15px 0px 15px; + width: 80px; height: auto; } } .nav_links_container { display: flex; - flex-direction: row; - height: 64px; + flex-direction: column; vertical-align: bottom; + width: 100%; a, a:visited { color: $color-cultured; @@ -40,13 +46,13 @@ nav { height: 100%; margin: 15px 0 0 0; padding: 5px 15px; + text-align: center; text-decoration: none; } a:hover { background-color: $main-nav-bg-hover; - border-top-left-radius: 15px; - border-top-right-radius: 15px; + color: $main-nav-font-hover; } button { @@ -54,7 +60,6 @@ nav { font-size: 22px; font-weight: 700; letter-spacing: .25px; - margin-top: 18px; text-transform: capitalize; } @@ -62,12 +67,9 @@ nav { background-color: $main-nav-bg-hover; } - .router-link-exact-active { + a+.router-link-exact-active { background-color: $main-nav-bg-hover; - border-top-left-radius: 15px; - border-top-right-radius: 15px; - margin: 8px 0 0 0; - padding-top: 5px; + color: $main-nav-font-hover; } } } @@ -127,4 +129,30 @@ nav { display: flex; flex-direction: row; justify-content: right; +} + +@media screen and (min-width: 960px) { + nav { + .v-toolbar__content { + flex-direction: row; + } + } + + #main-navigation { + .nav_links_container { + flex-direction: row; + justify-content: right; + } + } + + + .nav_logo_container { + flex-direction: column; + + img { + margin: 8px 15px; + width: 58px; + height: auto; + } + } } \ No newline at end of file diff --git a/frontend/src/components/MainNav.vue b/frontend/src/components/MainNav.vue index cf6e53ff..ef82fe94 100644 --- a/frontend/src/components/MainNav.vue +++ b/frontend/src/components/MainNav.vue @@ -1,54 +1,62 @@ \ No newline at end of file diff --git a/frontend/src/plugins/index.ts b/frontend/src/plugins/index.ts index 70f7a10c..2966c439 100644 --- a/frontend/src/plugins/index.ts +++ b/frontend/src/plugins/index.ts @@ -12,6 +12,8 @@ import router from '@/router' import VueDatePicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css' +import { Vue3Mq } from "vue3-mq"; + // Types import type { App } from 'vue' @@ -21,5 +23,13 @@ export function registerPlugins (app: App) { .component('VueDatePicker', VueDatePicker) .use(vuetify) .use(router) + .use(Vue3Mq, { + preset: 'vuetify' + // xs 0 + // sm 600 + // md 960 + // lg 1264 + // xl 1904 + }) .use(createPinia()) } diff --git a/frontend/src/views/account/Profile.vue b/frontend/src/views/account/Profile.vue index bcf1fe81..3c5477e5 100644 --- a/frontend/src/views/account/Profile.vue +++ b/frontend/src/views/account/Profile.vue @@ -1,6 +1,6 @@ @@ -19,5 +24,5 @@ import { userFullName } from '@/helpers'; const authStore = useAuthStore(); const currentUser = authStore.currentUser; -const fullname = userFullName(currentUser.first_name, currentUser.last_name); +const fullName = userFullName(currentUser.first_name, currentUser.last_name); \ No newline at end of file diff --git a/frontend/src/views/events/StagedEvent.vue b/frontend/src/views/events/StagedEvent.vue index f038e919..1eb173ea 100644 --- a/frontend/src/views/events/StagedEvent.vue +++ b/frontend/src/views/events/StagedEvent.vue @@ -1,6 +1,9 @@ diff --git a/frontend/src/views/website/About.vue b/frontend/src/views/website/About.vue index f2874155..a646336d 100644 --- a/frontend/src/views/website/About.vue +++ b/frontend/src/views/website/About.vue @@ -1,6 +1,6 @@ diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 940748ac..25ae599e 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1702,6 +1702,11 @@ vue-tsc@^1.2.0: "@volar/vue-typescript" "1.6.3" semver "^7.3.8" +vue3-mq@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/vue3-mq/-/vue3-mq-3.1.3.tgz#243b18833f25fd83cb4bada0bd1e52ee0f308f31" + integrity sha512-T4a0DjPr7hKGoFEjyj8n1CfovnrIKkOxi27wtE/bxv98gkAETGWfmqYYxjtXOSukP5HkPDMFhpn1haJfImSK+Q== + vue@^3.2.0: version "3.2.47" resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"