-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6914eda
commit 9804cf3
Showing
18 changed files
with
498 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 79 additions & 18 deletions
97
web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,90 @@ | ||
| <!-- DivisionsButton.vue --> | ||
| <template> | ||
| <v-card class="card-box rounded-pill pa-8" elevation="8"> | ||
| <v-btn class="fill-height fill-width" :ripple="false" v-ripple> | ||
| <span>{{ text }}</span> | ||
| <div ref="tilt" class="tilt-wrapper"> | ||
| <v-btn class="square-button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8" | ||
| variant="text" rounded="xl"> | ||
| <span>{{ props.text }}</span> | ||
| </v-btn> | ||
| </v-card> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { defineProps } from 'vue' | ||
| <script setup lang="ts"> | ||
| import { ref, onUnmounted, watchEffect } from 'vue'; | ||
| import VanillaTilt from 'vanilla-tilt'; | ||
| import { useTheme } from 'vuetify'; | ||
| const props = defineProps({ | ||
| text: { | ||
| type: String, | ||
| required: true | ||
| const theme = useTheme(); | ||
| const getButtonColor = (index: number) => { | ||
| const colors = theme.current.value.colors; | ||
| return index % 2 === 0 ? colors.primaryMuted : colors.secondaryMuted; | ||
| }; | ||
| interface VanillaTiltHTMLElement extends HTMLElement { | ||
| vanillaTilt: VanillaTilt; | ||
| } | ||
| const props = defineProps<{ text: string; index: number }>(); | ||
| const tilt = ref<VanillaTiltHTMLElement | null>(null); | ||
| // Determine if tilt should be enabled based on screen size | ||
| const enableTilt = ref(window.innerWidth > 700); | ||
| // Initialize or destroy VanillaTilt based on screen size | ||
| watchEffect(() => { | ||
| if (enableTilt.value && tilt.value) { | ||
| VanillaTilt.init(tilt.value, { | ||
| max: 20, | ||
| speed: 10, | ||
| scale: 1.25, | ||
| glare: false, | ||
| reverse: false, | ||
| transition: true, | ||
| }); | ||
| } else if (tilt.value?.vanillaTilt) { | ||
| tilt.value.vanillaTilt.destroy(); | ||
| } | ||
| }) | ||
| }); | ||
| // Listen for screen resize to enable or disable tilt | ||
| window.addEventListener('resize', () => { | ||
| enableTilt.value = window.innerWidth > 700; | ||
| }); | ||
| onUnmounted(() => { | ||
| if (tilt.value?.vanillaTilt) { | ||
| tilt.value.vanillaTilt.destroy(); | ||
| } | ||
| window.removeEventListener('resize', () => { | ||
| enableTilt.value = window.innerWidth > 700; | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .card-box { | ||
| margin: 3vh; | ||
| aspect-ratio: 1 / 1; | ||
| display: inline-flex; | ||
| <style scoped lang="scss"> | ||
| /* Using Vuetify theme colors */ | ||
| .tilt-wrapper { | ||
| display: inline-block; | ||
| width: 100%; | ||
| height: 100%; | ||
| user-select: none; | ||
| } | ||
| .square-button { | ||
| z-index: 1; | ||
| width: 100%; | ||
| height: 100%; | ||
| font-size: 2.5vw; | ||
| font-weight: 400; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| user-select: none; | ||
| } | ||
| @media (max-width: 700px) { | ||
| .square-button { | ||
| font-size: 5vw; | ||
| } | ||
| } | ||
| </style> | ||
| </style> |
2 changes: 1 addition & 1 deletion
2
web/optivum-better-schedule-frontend/src/components/LanguageSwitcher.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.