OrcasHub/gancio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: OrcasHub:master
Branches Tags
OrcasHub:master
..
compare: OrcasHub:d1149825d4ea1a7e3e92bcfe7d070c9f1d381036
Branches Tags
OrcasHub:master

1 Commits
master ... d1149825d4

Author SHA1 Message Date
Tony Grosinger
d1149825d4 OrcasHub: Start customizing the header to match 2025-04-10 10:14:39 -07:00
4 changed files with 55 additions and 258 deletions
Expand all files Collapse all files

111
assets/style.css
View File

@ -18,38 +18,11 @@ html, body {
.header-logo svg { .header-logo svg {
height: 8rem; height: 8rem;
} }
.mobile-only {
display: none !important;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.header-logo svg { .header-logo svg {
height: 5rem; height: 5rem;
} }
.navbar {
height: 0 !important;
}
/* Do not show the header buttons on mobile */
.navbar ul,
.v-application .d-flex.right-side-header-buttons {
display: none !important;
}
.v-navigation-drawer__content .active {
background-color: #e8e8e8;
}
}
.mobile-menu-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
color: #9ca3af !important;
background-color: #1f2937;
border-radius: 0.375rem;
} }
/* OrcasHub header links */ /* OrcasHub header links */
@ -57,6 +30,8 @@ html, body {
height: 3rem; height: 3rem;
background-color: #374151; background-color: #374151;
/* TODO: Hide the navbar links on mobile and replace with toggleable menu. */
&.d-flex.pa-4 { &.d-flex.pa-4 {
padding: 0 16px !important; padding: 0 16px !important;
} }
@ -107,88 +82,6 @@ nav {
background-image: none !important; background-image: none !important;
} }
/* Update footer styles */
footer {
background-color: #1f2937 !important;
@media (min-width: 768px) {
.inner-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
.inner-grid-second-row {
margin-top: 0 !important;
}
}
@media (min-width: 640px) {
.outer-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.outer-container {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
.outer-grid {
grid-column: span 4 / span 4;
}
}
.outer-container {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 3rem;
padding-bottom: 3rem;
max-width: 80rem;
margin: 0 auto;
}
.outer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
.inner-grid-second-row {
margin-top: 3rem;
}
h3 {
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color: #ffffff;
}
ul {
padding-left: 0 !important;
}
li {
list-style: none;
margin-left: 0 !important;
}
a {
color: #d1d5db !important;
font-size: 1rem;
line-height: 1.5rem;
text-decoration: none;
}
a:hover {
color: #ffffff;
}
}
li { li {
margin-left: 10px; margin-left: 10px;
} }

108
components/Footer.vue
View File

@ -1,81 +1,33 @@
<template> <template lang="pug">
<footer> v-footer(aria-label='Footer')
<div class="outer-container">
<div class="outer-grid"> v-dialog(v-model='showFollowMe' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly')
<div class="inner-grid"> FollowMe(@close='showFollowMe=false' is-dialog)
<div>
<h3>Classifieds</h3> v-btn.ml-1(v-for='link in footerLinks'
<ul> :key='link.label' color='primary' text
<li> :href='link.href' :to='link.to' :target="link.href && '_blank'") {{link.label}}
<a href="/classified/for-sale">For Sale</a>
</li> v-menu(v-if='settings.enable_federation && trusted_sources?.length' max-height=550
<li> offset-y bottom transition="slide-y-transition")
<a href="/classified/for-free">For Free</a> template(v-slot:activator="{ on, attrs }")
</li> v-btn.ml-1(v-bind='attrs' v-on='on' color='primary' text) {{ settings.trusted_sources_label || $t('admin.trusted_sources_label_default')}}
<li> v-list(subheaders two-lines max-width=550)
<a href="/classified/want-to-buy">Looking For</a> v-list-item(v-for='instance in trusted_sources'
</li> :key='instance.ap_id'
<li> target='_blank'
<a href="/classified/want-to-borrow">Want to Borrow</a> :href='instance?.object?.url ?? instance?.ap_id'
</li> two-line)
<li> v-list-item-avatar
<a href="/classified/new">New Post</a> v-img(:src='instance?.object?.icon?.url ?? `${instance.url}/favicon.ico`')
</li> v-list-item-content
</ul> v-list-item-title {{ instance?.object?.name ?? instance?.object?.preferredUsername }}
</div> v-list-item-subtitle {{ instance?.object?.summary ?? instance?.instance?.data?.metadata?.nodeDescription }}
<div class="inner-grid-second-row">
<h3>Housing</h3> v-btn.ml-1(v-if='settings.enable_federation' color='primary' text rel='me' @click.prevent='showFollowMe=true') {{$t('event.interact_with_me')}}
<ul> v-spacer
<li> v-btn(color='primary' text href='https://gancio.org' target='_blank' rel="noopener") Gancio <small>{{settings.version}}</small>
<a href="/housing">For Rent</a>
</li>
<li>
<a href="/housing">Requests</a>
</li>
<li>
<a href="/housing/new">New Post</a>
</li>
</ul>
</div>
</div>
<div class="inner-grid">
<div>
<h3>San Juan Islands</h3>
<ul>
<li>
<a href="https://groups.orcashub.org" target="_blank">Groups</a>
</li>
<li>
<a href="/events">Events</a>
</li>
<li>
<a href="https://sanjuans.online/" target="_blank"
>San Juans Online</a
>
</li>
</ul>
</div>
<div class="inner-grid-second-row">
<h3>About</h3>
<ul>
<li>
<a href="/faq">FAQ</a>
</li>
<li>
<a href="/terms-of-service">Terms of Service</a>
</li>
<li>
<a href="/privacy-policy">Privacy Policy</a>
</li>
<li>
<a href="/donate">Donate</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'

88
components/NavHeader.vue
View File

@ -2,82 +2,31 @@
<div class="d-flex pa-4 navbar"> <div class="d-flex pa-4 navbar">
<ul> <ul>
<li> <li>
<a href="https://orcashub.org">Home</a> <a href="/">Home</a>
</li> </li>
<li> <li>
<a href="https://orcashub.org/classified/for-sale">Classifieds</a> <a href="/classified/for-sale">Classifieds</a>
</li> </li>
<li class="active"> <li class="active">
<a href="/">Events</a> <a href="/events">Events</a>
</li> </li>
<li> <li>
<a href="https://groups.orcashub.org">Groups</a> <a href="https://groups.orcashub.org">Groups</a>
</li> </li>
<li> <li>
<a href="https://orcashub.org/community-resources">Resources</a> <a href="/community-resources">Resources</a>
</li> </li>
</ul> </ul>
<v-spacer/> <v-spacer/>
<div class="mobile-only"> <div class='d-flex'>
<v-app-bar-nav-icon class="mobile-menu-button" @click.stop="drawer = !drawer" > <v-btn icon large href='/about' :title='$t("common.about")' :aria-label='$t("common.about")'>
<v-icon v-text="mdiMenu" /> <v-icon v-text='mdiInformation' />
</v-app-bar-nav-icon> </v-btn>
<client-only> <v-btn icon large @click='toggleDark'>
<v-navigation-drawer v-model="drawer" absolute left temporary> <v-icon v-text='mdiContrastCircle' />
<v-list nav dense> </v-btn>
<v-list-item-group
v-model="group"
active-class="deep-purple--text text--accent-4"
>
<v-list-item tag="a" href="https://orcashub.org">
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<v-list-item
tag="a"
href="https://orcashub.org/classified/for-sale"
>
<v-list-item-title>Classifieds</v-list-item-title>
</v-list-item>
<v-list-item class="active" nux to="/">
<v-list-item-title>Events</v-list-item-title>
</v-list-item>
<v-list-item tag="a" href="https://groups.orcashub.org">
<v-list-item-title>Groups</v-list-item-title>
</v-list-item>
<v-list-item tag="a" href="https://wiki.orcashub.org">
<v-list-item-title>Resources</v-list-item-title>
</v-list-item>
<v-divider></v-divider>
<v-list-item
v-if="$auth.loggedIn && ($auth.user.is_admin || $auth.user.is_editor)"
nuxt
to="/admin"
>
<v-list-item-title v-text="$t(`common.${$auth.user.role}`)" />
</v-list-item>
<v-list-item v-if="$auth.loggedIn" @click="logout">
<v-list-item-title v-text="$t('common.logout')" />
</v-list-item>
<v-list-item v-if="!$auth.loggedIn" nuxt to="/login">
<v-list-item-title v-text="$t('common.login')" />
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</client-only>
</div>
<div class='d-flex right-side-header-buttons'>
<client-only> <client-only>
<v-menu offset-y transition="slide-y-transition" bottom max-height=600> <v-menu offset-y transition="slide-y-transition" bottom max-height=600>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
@ -158,19 +107,22 @@
</template> </template>
<script> <script>
import { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount } from '@mdi/js' import { mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiInformation, mdiContrastCircle, mdiCalendarAccount } from '@mdi/js'
import { mapActions, mapGetters } from 'vuex' import { mapActions, mapGetters } from 'vuex'
export default { export default {
data () { data () {
return { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount, drawer: false, group: null } return { mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiInformation, mdiContrastCircle, mdiCalendarAccount }
},
watch: {
group() {
this.drawer = false
}, },
computed: {
...mapGetters(['hide_thumbs', 'is_dark']),
}, },
methods: { methods: {
...mapActions(['setLocalSetting']),
async toggleDark() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
this.setLocalSetting({ key: 'theme.is_dark', value: !this.is_dark })
},
logout () { logout () {
this.$root.$message('common.logout_ok') this.$root.$message('common.logout_ok')
this.$auth.logout() this.$auth.logout()

4
store/index.js
View File

@ -28,7 +28,7 @@ export const state = () => ({
trusted_sources_label: '', trusted_sources_label: '',
footerLinks: [], footerLinks: [],
hide_thumbs: false, hide_thumbs: false,
'theme.is_dark': false, 'theme.is_dark': true,
hide_calendar: false hide_calendar: false
}, },
filter: { filter: {
@ -46,7 +46,7 @@ export const getters = {
return (![true, false].includes(state.localSettings['hide_thumbs'])) ? state.settings.hide_thumbs : state.localSettings.hide_thumbs return (![true, false].includes(state.localSettings['hide_thumbs'])) ? state.settings.hide_thumbs : state.localSettings.hide_thumbs
}, },
is_dark (state) { is_dark (state) {
return false return (![true, false].includes(state.localSettings['theme.is_dark'])) ? state.settings['theme.is_dark'] : state.localSettings['theme.is_dark']
} }
} }