Skip to content

Commit

Permalink
feat: tabbar and profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@qin-guan
qin-guan committed Sep 23, 2023
1 parent 962cdd4 commit bb716c1
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 124 deletions.
117 changes: 12 additions & 105 deletions components/app/events/page.vue
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,16 @@
<script>
import {
f7AccordionContent,
f7Block,
f7BlockTitle,
f7List,
f7ListItem,
f7Navbar,
f7Page,
} from 'framework7-vue'
export default {
components: {
F7Navbar: f7Navbar,
F7Page: f7Page,
F7BlockTitle: f7BlockTitle,
F7Block: f7Block,
F7AccordionContent: f7AccordionContent,
F7List: f7List,
F7ListItem: f7ListItem,
},
}
<script setup lang="ts">
import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
</script>

<template>
<F7Page>
<F7Navbar title="Accordion" back-link="Back" />

<F7BlockTitle>List View Accordion</F7BlockTitle>
<F7List strong outline-ios dividers-ios inset-md accordion-list>
<F7ListItem accordion-item title="Lorem Ipsum">
<F7AccordionContent>
<F7Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
ipsum.
</p>
</F7Block>
</F7AccordionContent>
</F7ListItem>
<F7ListItem accordion-item title="Nested List">
<F7AccordionContent>
<F7List>
<F7ListItem title="Item 1" />
<F7ListItem title="Item 2" />
<F7ListItem title="Item 3" />
<F7ListItem title="Item 4" />
</F7List>
</F7AccordionContent>
</F7ListItem>
<F7ListItem accordion-item title="Integer semper">
<F7AccordionContent>
<F7Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
ipsum.
</p>
</F7Block>
</F7AccordionContent>
</F7ListItem>
</F7List>

<F7BlockTitle>Opposite Side</F7BlockTitle>
<F7List strong outline-ios dividers-ios inset-md accordion-list accordion-opposite>
<F7ListItem accordion-item title="Lorem Ipsum">
<F7AccordionContent>
<F7Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
ipsum.
</p>
</F7Block>
</F7AccordionContent>
</F7ListItem>
<F7ListItem accordion-item title="Nested List">
<F7AccordionContent>
<F7List>
<F7ListItem title="Item 1" />
<F7ListItem title="Item 2" />
<F7ListItem title="Item 3" />
<F7ListItem title="Item 4" />
</F7List>
</F7AccordionContent>
</F7ListItem>
<F7ListItem accordion-item title="Integer semper">
<F7AccordionContent>
<F7Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
ipsum.
</p>
</F7Block>
</F7AccordionContent>
</F7ListItem>
</F7List>
</F7Page>
<f7Page>
<f7Navbar large transparent :sliding="false">
<f7NavTitle sliding>
Events & Bookings
</f7NavTitle>
<f7NavTitleLarge>
Events & Bookings
</f7NavTitleLarge>
</f7Navbar>
</f7Page>
</template>
70 changes: 51 additions & 19 deletions components/app/home/page.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { f7, f7BlockTitle, f7Link, f7List, f7ListItem, f7NavLeft, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Searchbar, f7SkeletonBlock, f7SkeletonText } from 'framework7-vue'
import { f7Link, f7List, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Tab, f7Tabs, f7Toolbar } from 'framework7-vue'
import type { Router } from 'framework7/types'
import { useIsCurrentUserLoaded } from 'vuefire'
Expand All @@ -24,23 +24,55 @@ watch([authLoaded, auth], (values) => {
<template>
<f7Page>
<CommonLoginScreen v-model:opened="state.showLoginScreen" />
<f7Navbar large transparent :sliding="false">
<f7NavTitle sliding>
SSTAA
</f7NavTitle>
<f7NavTitleLarge>
SSTAA
</f7NavTitleLarge>
</f7Navbar>

<f7List inset class="space-y-8">
<div>
<AppHomeMembershipCard />
</div>

<div>
<AppHomeNews />
</div>
</f7List>

<f7Toolbar position="bottom" tabbar icons>
<f7Link
tab-link="#home"
tab-link-active
text="Home"
icon-md="material:home"
/>
<f7Link
tab-link="#services"
text="Services"
icon-md="material:sparkle"
/>
<f7Link
tab-link="#events"
text="events"
icon-md="material:events"
/>
<f7Link
tab-link="#profile"
text="Profile"
icon-md="material:account_circle"
/>
</f7Toolbar>

<f7Tabs>
<f7Tab id="home" tab-active>
<f7List inset class="space-y-8">
<div>
<AppHomeMembershipCard />
</div>

<div>
<AppHomeNews />
</div>
</f7List>
</f7Tab>

<f7Tab id="services">
<AppServicesPage />
</f7Tab>

<f7Tab id="events">
<AppEventsPage />
</f7Tab>

<f7Tab id="profile">
<AppProfilePage />
</f7Tab>
</f7Tabs>
</f7Page>
</template>
79 changes: 79 additions & 0 deletions components/app/profile/page.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<script setup lang="ts">
import { f7Block, f7BlockTitle, f7Link, f7List, f7ListButton, f7ListInput, f7ListItem, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Popup, f7View } from 'framework7-vue'
import { devDependencies } from '~/package.json'
const { data: user } = useUser()
const graduationYear = computed(() => {
return `Class of ${user.value?.graduationYear}`
})
const dependencies = Object.keys(devDependencies)
</script>

<template>
<f7Page>
<f7Navbar large transparent :sliding="false">
<f7NavTitle sliding>
Profile
</f7NavTitle>
<f7NavTitleLarge>
Profile
</f7NavTitleLarge>
</f7Navbar>

<f7List v-if="user">
<f7ListInput label="Name" type="text" placeholder="Your name" disabled :value="user.name" />
<f7ListInput label="Email" type="Email" placeholder="Your email" disabled :value="user.email" />
<f7ListInput label="Graduation year" placeholder="Your graduation year" disabled :value="graduationYear" />
<f7ListItem>
<span class="opacity-80 text-xs">
To update this information, contact us at <a href="mailto:app@sstaa.org">app@sstaa.org</a>
</span>
</f7ListItem>
</f7List>

<f7List inset strong>
<f7ListButton popup-open="#acknowledgements">
Acknowledgements
</f7ListButton>
</f7List>

<f7Popup id="acknowledgements" push>
<f7View>
<f7Page>
<f7Navbar title="Acknowledgements" large transparent>
<f7NavRight>
<f7Link popup-close>
Close
</f7Link>
</f7NavRight>
</f7Navbar>

<f7BlockTitle>Open source</f7BlockTitle>
<f7List inset strong>
<f7ListItem
target="_blank" link="https://github.com/sstalumniassociation/web" external
title="View on GitHub"
/>
</f7List>

<f7BlockTitle>Development team</f7BlockTitle>
<f7List inset strong>
<f7ListItem target="_blank" link="https://github.com/qin-guan" external title="Qin Guan" />
<f7ListItem target="_blank" link="https://github.com/jiachenyee" external title="Jia Chen" />
<f7ListItem target="_blank" link="https://github.com/arashnrim" external title="Arash" />
<f7ListItem target="_blank" link="https://github.com/Ethan-Chew" external title="Ethan" />
</f7List>

<f7BlockTitle>Packages & libraries</f7BlockTitle>
<f7List inset strong>
<f7ListItem
v-for="dependency in dependencies" :key="dependency" target="_blank"
:link="`https://npmjs.com/package/${dependency}`" external :title="dependency"
/>
</f7List>
</f7Page>
</f7View>
</f7Popup>
</f7Page>
</template>
16 changes: 16 additions & 0 deletions components/app/services/page.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
</script>

<template>
<f7Page>
<f7Navbar large transparent :sliding="false">
<f7NavTitle sliding>
Alumni Services
</f7NavTitle>
<f7NavTitleLarge>
Alumni Services
</f7NavTitleLarge>
</f7Navbar>
</f7Page>
</template>

0 comments on commit bb716c1

Please # to comment.