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

Compare commits

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

7 Commits
d1149825d4 ... master

Author SHA1 Message Date
Tony Grosinger
9429957f6c OrcasHub: Replace footer
Some checks failed
CodeQL Advanced / Analyze (javascript-typescript) (push) Failing after 25s
Details
2025-04-11 17:35:17 -07:00
Tony Grosinger
2a939429f0 OrcasHub: Update header links 2025-04-11 17:35:17 -07:00
Tony Grosinger
2a642a0fd4 OrcasHub: Disable dark theme 2025-04-11 16:59:11 -07:00
Tony Grosinger
06a65a26d9 OrcasHub: Add navigation drawer on mobile
Some checks failed
CodeQL Advanced / Analyze (javascript-typescript) (push) Failing after 4m45s
Details
2025-04-10 22:33:55 -07:00
Tony Grosinger
d4a2356dbf OrcasHub: Apply proper coloring to the right side header buttons 2025-04-10 18:49:52 -07:00
Tony Grosinger
b8070e1806 OrcasHub: Remove the theme and about header buttons 2025-04-10 18:49:52 -07:00
Tony Grosinger
11d8f11cab OrcasHub: Start customizing the header to match 2025-04-10 18:27:02 -07:00
5 changed files with 430 additions and 69 deletions
Expand all files Collapse all files

183
assets/style.css
View File

@ -6,6 +6,189 @@ html, body {
font-family: sans-serif;
}
/* OrcasHub logo at the top of the page. */
.header-logo {
display: flex;
justify-content: center;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
background-color: #374151;
}
@media (min-width: 768px) {
.header-logo svg {
height: 8rem;
}
.mobile-only {
display: none !important;
}
}
@media (max-width: 768px) {
.header-logo svg {
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 */
.navbar {
height: 3rem;
background-color: #374151;
&.d-flex.pa-4 {
padding: 0 16px !important;
}
ul {
line-height: 1.25rem;
display: inline-flex;
height: min-content;
li + li {
margin-left: 16px;
}
li {
list-style: none;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
&.active {
background-color: #111827;
a {
color: #ffffff;
}
}
}
a {
text-decoration: none;
color: #d1d5db;
font-weight: 500;
font-size: 0.875rem;
}
}
}
.right-side-header-buttons {
button {
color: #d1d5db !important;
}
a {
color: #d1d5db !important;
}
}
/* Remove the background image */
nav {
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 {
margin-left: 10px;
}

100
components/Appbar.vue
View File

File diff suppressed because one or more lines are too long

108
components/Footer.vue
View File

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

104
components/NavHeader.vue
View File

@ -1,18 +1,83 @@
<template>
<div class='d-flex pa-4'>
<v-btn icon large nuxt to='/'>
<img src='/logo.png' height='40' />
</v-btn>
<div class="d-flex pa-4 navbar">
<ul>
<li>
<a href="https://orcashub.org">Home</a>
</li>
<li>
<a href="https://orcashub.org/classified/for-sale">Classifieds</a>
</li>
<li class="active">
<a href="/">Events</a>
</li>
<li>
<a href="https://groups.orcashub.org">Groups</a>
</li>
<li>
<a href="https://orcashub.org/community-resources">Resources</a>
</li>
</ul>
<v-spacer/>
<div class='d-flex'>
<v-btn icon large href='/about' :title='$t("common.about")' :aria-label='$t("common.about")'>
<v-icon v-text='mdiInformation' />
</v-btn>
<v-btn icon large @click='toggleDark'>
<v-icon v-text='mdiContrastCircle' />
</v-btn>
<div class="mobile-only">
<v-app-bar-nav-icon class="mobile-menu-button" @click.stop="drawer = !drawer" >
<v-icon v-text="mdiMenu" />
</v-app-bar-nav-icon>
<client-only>
<v-navigation-drawer v-model="drawer" absolute left temporary>
<v-list nav dense>
<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>
<v-menu offset-y transition="slide-y-transition" bottom max-height=600>
<template v-slot:activator="{ on, attrs }">
@ -93,22 +158,19 @@
</template>
<script>
import { mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiInformation, mdiContrastCircle, mdiCalendarAccount } from '@mdi/js'
import { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount } from '@mdi/js'
import { mapActions, mapGetters } from 'vuex'
export default {
data () {
return { mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiInformation, mdiContrastCircle, mdiCalendarAccount }
return { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount, drawer: false, group: null }
},
watch: {
group() {
this.drawer = false
},
},
computed: {
...mapGetters(['hide_thumbs', 'is_dark']),
},
methods: {
...mapActions(['setLocalSetting']),
async toggleDark() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
this.setLocalSetting({ key: 'theme.is_dark', value: !this.is_dark })
},
logout () {
this.$root.$message('common.logout_ok')
this.$auth.logout()

4
store/index.js
View File

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