Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • websites/monnaie-libre-fr
  • midiland/monnaie-libre-fr
  • websites/moneda-libre-org
  • atlasan/g1-monetalibera-it
  • Processus42/monnaie-libre-fr
  • diablade/monnaie-libre-fr
  • Spiranne/monnaie-libre-fr
7 results
Show changes
Commits on Source (1205)
1,105 additional commits have been omitted to prevent performance issues.
Hide whitespace changes
Inline Side-by-side
Showing
with 716 additions and 128 deletions
.gitlab-ci.yml → .gitlab-ci_bkp.yml
View file @ 59776cad
File moved
.nvmrc 0 → 100644
View file @ 59776cad
v16.15.1
README.md
View file @ 59776cad
......@@ -51,9 +51,13 @@ Puis aller sur http://localhost:3000/admin/
# Design
## Storybook
## Illustration
Idée abandonnée. J'ai installé, configuré et testé. Mais c'est compliqué, et finalement pas super intégré pour vue.js...
Toutes les images utilisées sur le site :
https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/monnaie-libre.fr
Ressources :
https://www.pixeltrue.com/free-packs/minimalistic-illustrations#preview
## Afficher toutes les `class` de tailwindcss
......@@ -131,9 +135,8 @@ Graphql Explorer : https://git.duniter.org/-/graphql-explorer
https://blog.logrocket.com/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu/
# Discourse
## API Docs
https://docs.discourse.org/
\ No newline at end of file
https://docs.discourse.org/
assets/css/tailwind.css
View file @ 59776cad
......@@ -29,6 +29,14 @@ html {
@apply text-white;
}
/* For emojis from discourse */
img.emoji {
width: 20px;
height: 20px;
vertical-align: middle;
display: inline;
}
/* Loader */
@keyframes spinner {
to {
......
components/app/AppShareModal.vue 0 → 100644
View file @ 59776cad
<template>
<div class="relative">
<t-dropdown
:show.sync="show"
toggle-on-focus
toggle-on-hover
:hide-on-leave-timeout="0"
:classes="{
dropdown:
'absolute rounded-md shadow-lg dark:border-gray-500 border -top-3 -left-3 z-10 overflow-hidden w-40 bg-white dark:bg-gray-600 transition duration-150 ease-in-out',
}"
>
<button
slot="button"
class="relative flex items-center text-gray-500"
:class="show && 'z-20 text-gray-800 dark:text-gray-200'"
aria-label="Partager"
aria-haspopup="true"
>
<fa icon="share-alt" class="text-xl mr-2.5" />
<div>Partager</div>
</button>
<div class="mt-11 pt-0.5 pb-1">
<div class="border-t dark:border-gray-500 pt-1 mx-2"></div>
<ShareNetwork
v-for="network in networks"
:key="network.name"
:network="network.network"
:url="$config.site_url + document.path.replace(/^\/pages\//, '/')"
:title="document.title"
:description="document.description"
:quote="document.description"
:hashtags="$config.social_networks_hashtags"
:twitter-user="$config.twitter_user"
:media="media"
class="
flex
items-center
pl-4
pr-2
py-1
text-gray-600
hover:text-gray-700 hover:bg-hover-light
dark:text-gray-200
"
>
<fa :icon="network.icon" :class="network.class" />
<span class="pl-2">
{{ network.name }}
</span>
</ShareNetwork>
</div>
</t-dropdown>
</div>
</template>
<script>
import { defineComponent, ref } from '@nuxtjs/composition-api'
export default defineComponent({
props: {
document: {
type: Object,
required: true,
},
media: {
type: String,
default: null,
},
},
setup() {
const show = ref(false)
return {
show,
networks: [
{ network: 'email', name: 'Email', icon: 'envelope', class: 'email' },
{
network: 'facebook',
name: 'Facebook',
icon: ['fab', 'facebook'],
class: 'facebook',
},
{
network: 'twitter',
name: 'Twitter',
icon: ['fab', 'twitter'],
class: 'twitter',
},
{
network: 'linkedin',
name: 'Linkedin',
icon: ['fab', 'linkedin'],
class: 'linkedin',
},
{
network: 'reddit',
name: 'Reddit',
icon: ['fab', 'reddit'],
class: 'reddit',
},
{
network: 'skype',
name: 'Skype',
icon: ['fab', 'skype'],
class: 'skype',
},
{ network: 'sms', name: 'SMS', icon: 'comment', class: 'sms' },
{
network: 'telegram',
name: 'Telegram',
icon: ['fab', 'telegram'],
class: 'telegram',
},
{
network: 'whatsapp',
name: 'Whatsapp',
icon: ['fab', 'whatsapp'],
class: 'whatsapp',
},
],
}
},
})
</script>
<style scoped>
.email,
.sms {
color: #444;
}
.twitter {
color: #1da1f2;
}
.facebook {
color: #3b5998;
}
.linkedin {
color: #0077b5;
}
.skype {
color: #00aff0;
}
.reddit {
color: #ff4500;
}
.telegram {
color: #0088cc;
}
.whatsapp {
color: #43d854;
}
</style>
components/app/MiniMap.vue
View file @ 59776cad
......@@ -4,7 +4,17 @@
<span
v-show="hovered"
id="tooltip-mini-map"
class="absolute whitespace-nowrap pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 bg-white dark:bg-gray-700"
class="
absolute
whitespace-nowrap
pointer-events-none
p-1
shadow-lg
rounded
text-xs
bg-opacity-90 bg-white
dark:bg-gray-700
"
>
{{ hovered && hovered.name }}
</span>
......@@ -223,7 +233,7 @@ export default {
region.addEventListener('click', (evt) => {
window.open(
`https://forum.monnaie-libre.fr/c/${regions[evt.target.id].id}`,
`${this.$config.forum_url}/c/${regions[evt.target.id].id}`,
'_blank'
)
})
......
components/app/TInputIcon.vue
View file @ 59776cad
......@@ -47,7 +47,7 @@ export default {
},
},
mounted() {
if (this.focus) this.focus()
if (this.hasFocus) this.focus()
},
methods: {
focus() {
......
components/global/G1Crowdfunding.vue
View file @ 59776cad
......@@ -40,7 +40,17 @@
</slot>
<div
class="flex items-center w-full lg:w-max justify-center px-2 lg:px-0 pt-2 lg:pt-0"
class="
flex
items-center
w-full
lg:w-max
justify-center
px-2
lg:px-0
pt-2
lg:pt-0
"
>
<slot
v-if="!isKeyCopied"
......@@ -140,9 +150,8 @@ export default {
computed: {
endpoint() {
// Build url from props. Prevent missing protocol.
return (/^https:\/\//.test(this.node)
? this.node
: `https://${this.node}`
return (
/^https:\/\//.test(this.node) ? this.node : `https://${this.node}`
).replace(/\/$/, '')
},
startDateTimestamp() {
......
components/global/Lexique.vue
View file @ 59776cad
......@@ -14,7 +14,22 @@
<client-only>
<div
v-if="document"
class="tooltip absolute bg-blue-100 border-blue-200 border invisible opacity-0 left-1/2 px-4 py-3 rounded-xl shadow-2xl text-gray-600 text-sm z-50 dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800"
class="
tooltip
absolute
bg-blue-100
border-blue-200 border
invisible
opacity-0
left-1/2
px-4
py-3
rounded-xl
shadow-2xl
text-gray-600 text-sm
z-50
dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800
"
>
<span class="triangle absolute"></span>
......@@ -25,7 +40,13 @@
<span>{{ document.description }}</span>
<span
class="block font-light mt-3 text-xs text-purple-800 dark:text-purple-500"
class="
block
font-light
mt-3
text-xs text-purple-800
dark:text-purple-500
"
>
{{ $t('lexique.tooltipReadmore') }}
</span>
......
components/home/HomeHero.vue
View file @ 59776cad
......@@ -7,7 +7,16 @@
</div>
<SuperHero
class="superhero absolute h-40 hidden lg:h-full lg:relative lg:right-0 lg:w-full md:block right-6 w-1/3"
class="
superhero
absolute
h-40
hidden
lg:h-full lg:relative lg:right-0 lg:w-full
md:block
right-6
w-1/3
"
/>
</div>
</template>
......
components/home/HomeMap.vue 0 → 100644
View file @ 59776cad
<template>
<section id="map">
<div class="container flex items-end mb-3 pl-8">
<FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
<a
href="https://carte.monnaie-libre.fr"
target="_blank"
class="
group
bg-clip-text bg-gradient-to-r
font-extrabold
from-purple-800
hover:underline
text-4xl text-transparent
to-blue-600
uppercase
"
rel="noopener noreferrer"
>
Carte
<fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
/>
</a>
</div>
<iframe
:src="intersected ? $config.map_url : null"
class="w-full bg-gray-200"
style="height: 50vh; min-height: 600px"
title="Carte monnaie-libre"
/>
</section>
</template>
<script>
import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'
export default {
components: {
FaviconMap,
},
data() {
return {
observer: null,
intersected: false,
}
},
mounted() {
this.observer = new IntersectionObserver(
(entries) => {
const item = entries[0]
if (item.isIntersecting) {
this.intersected = true
this.observer.disconnect()
}
},
{
rootMargin: '500px',
}
)
this.observer.observe(this.$el)
},
destroyed() {
this.observer.disconnect()
},
}
</script>
components/home/HomeNextEvents.vue
View file @ 59776cad
<template>
<section id="agenda" class="container py-12">
<div class="border-b-2 container flex items-end mb-3 pb-2">
<div class="border-b-2 container flex items-end mb-3 pb-2 pl-1">
<JuneCalendar class="w-12 mr-3 fill-current dark:text-gray-100" />
<a
href="https://forum.monnaie-libre.fr/calendar"
:href="`${$config.forum_url}/calendar`"
target="_blank"
class="group bg-clip-text bg-gradient-to-r font-extrabold from-purple-800 hover:underline text-4xl text-transparent to-blue-600 uppercase"
class="
group
bg-clip-text bg-gradient-to-r
font-extrabold
from-purple-800
hover:underline
text-4xl text-transparent
to-blue-600
uppercase
"
rel="noopener noreferrer"
>
Agenda
......@@ -26,16 +35,25 @@
<a
v-for="(event, index) in column"
:key="index"
:href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
:href="`${$config.forum_url}${event.post.url}`"
target="_blank"
class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
class="
block
hover:bg-hover-light
dark-hover:text-gray-800
p-2
mt-1
rounded-lg
transition-colors
"
rel="noopener noreferrer"
>
<div class="event-date text-sm text-gray-500">
{{ prettyDate(event.event.start) }}
{{ prettyDate(event.starts_at) }}
<!-- poka: I don't find tags anymore with new api, so this line is actually unused -->
<div v-for="(tag, i) in event.tag" :key="i">{{ tag }}</div>
</div>
<div>{{ event.title }}</div>
<div v-html="emojify(event.post.topic.title)" />
</a>
</div>
</aside>
......@@ -49,6 +67,7 @@
<script>
import JuneCalendar from '~/static/img/june-calendar.svg?inline'
import { fetchNextEvents } from '~/libs/api-forum'
import { performEmojiUnescape } from '~/libs/emoji'
export default {
name: 'HomeNextEvents',
......@@ -101,6 +120,13 @@ export default {
})
.reduce((string, part) => string + part)
},
emojify(text) {
return performEmojiUnescape(text, {
emojiSet: 'images/emoji/twitter',
emojiCDNUrl: 'https://forum.monnaie-libre.fr',
getURL: (url) => url,
})
},
},
}
</script>
......
components/layout/LayoutFooter.vue
View file @ 59776cad
<template>
<div
class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 py-6 text-white z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
class="
bg-gradient-to-r
from-purple-600
to-purple-400
pt-8
text-white
z-10
dark:from-purple-900 dark:to-purple-700 dark:text-gray-100
transition
"
>
<div class="container">
<div class="flex flex-wrap mb-4 w-full">
<div class="w-full sm:w-1/2 md:w-1/2">
<div>
<h3 class="text-3xl py-4">À propos</h3>
<nuxt-content
v-if="$store.state.footer"
:document="$store.state.footer"
/>
</div>
<div>
<h3 class="text-3xl mt-8 py-4">Encouragez les développeurs</h3>
<div class="text-xl mb-2">Participez au financement en Ğ1 !</div>
<div
class="grid grid-flow-row gap-8 mb-4 w-full sm:grid-cols-5 lg:gap-x-20"
>
<div class="col-span-2 sm:col-span-5 lg:col-span-3">
<h3 class="text-3xl py-4">À propos</h3>
<nuxt-content
v-if="$store.state.footer"
:document="$store.state.footer"
class="about"
/>
</div>
<G1Crowdfunding
pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8"
class="flex"
>
<template #button="{ onClick }">
<t-button class="w-full lg:w-max" @click="onClick">
<fa icon="heart"></fa><span class="ml-2">Je participe !</span>
</t-button>
</template>
</G1Crowdfunding>
</div>
<div class="col-span-2 sm:col-span-5 lg:col-span-3 max-w-xl">
<h3 class="text-3xl py-4">Encouragez les développeurs</h3>
<div class="text-xl mb-3">Participez au financement en Ğ1 !</div>
<G1Crowdfunding
pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8"
class="sm:grid grid-flow-col"
>
<template #button="{ onClick }">
<t-button class="w-full sm:w-auto lg:w-max" @click="onClick">
<fa icon="heart"></fa><span class="ml-2">Je participe !</span>
</t-button>
</template>
</G1Crowdfunding>
</div>
<div
class="w-full flex flex-col pl-0 sm:w-1/2 sm:items-start sm:pl-8 md:justify-around md:flex-row"
class="
col-span-2
sm:col-span-3 sm:flex
justify-between
lg:col-span-2 lg:row-start-1 lg:col-start-4
"
>
<div>
<h3 class="text-3xl py-4">Sections</h3>
<ul>
<li>
<nuxt-link class="hover:underline" to="/blog">Blog</nuxt-link>
</li>
<li>
<nuxt-link class="hover:underline" to="/ressources">
Ressources
</nuxt-link>
</li>
<li>
<nuxt-link class="hover:underline" to="/faq">FAQ</nuxt-link>
</li>
<li>
<nuxt-link class="hover:underline" to="/lexique">
Lexique
</nuxt-link>
<div v-for="(column, index) of menuFooter" :key="index">
<h3 class="text-3xl py-4">{{ column.title }}</h3>
<ul v-if="column.type === 'column'">
<li v-for="(menu, i) of column.menus" :key="i">
<nuxt-link class="hover:underline" :to="menu.url">{{
menu.title
}}</nuxt-link>
</li>
</ul>
</div>
<div>
<h3 class="text-3xl py-4">Ressources</h3>
<ul>
<ul v-if="column.type === 'ressources'" class="grid gap-x-6">
<li v-for="category in categories" :key="category.title">
<nuxt-link
class="hover:underline"
:to="{
path: 'ressources',
path: '/ressources',
query: { filters: category.title },
}"
>
......@@ -70,21 +72,142 @@
</ul>
</div>
</div>
<div class="sm:col-span-2">
<h3 class="text-3xl py-4">Suivez-nous</h3>
<div class="text-xl">
<a
v-if="$config.mastodon_link && $config.mastodon_user"
:href="$config.mastodon_link"
target="_blank"
class="flex items-center mb-2 hover:underline"
rel="noopener noreferrer"
>
<fa :icon="['fab', 'mastodon']" class="text-2xl mr-2.5" />
<span>{{ $config.mastodon_user }}</span>
</a>
<a
v-if="$config.twitter_user"
:href="`https://twitter.com/${$config.twitter_user}`"
target="_blank"
class="flex items-center mb-2 hover:underline"
rel="noopener noreferrer"
>
<fa :icon="['fab', 'twitter']" class="text-2xl mr-2.5" />
<span>@{{ $config.twitter_user }}</span>
</a>
<a
v-if="$config.facebook_group"
:href="$config.facebook_group"
target="_blank"
class="flex items-center mb-2 hover:underline"
rel="noopener noreferrer"
>
<fa :icon="['fab', 'facebook']" class="text-2xl mr-2.5" />
<span>Groupe Facebook</span>
</a>
<a
href="https://t.me/monnaielibrejune"
target="_blank"
class="flex items-center mb-2 hover:underline"
rel="noopener noreferrer"
>
<fa :icon="['fab', 'telegram']" class="text-2xl mr-2.5" />
<span>Groupe de discussion Telegram</span>
</a>
<a
href="https://t.me/infomonnaielibre"
target="_blank"
class="flex items-center mb-2 hover:underline"
rel="noopener noreferrer"
>
<fa :icon="['fab', 'telegram']" class="text-2xl mr-2.5" />
<span>Canal d'info Telegram</span>
</a>
<nuxt-link
to="/feed"
class="flex items-center mb-2 hover:underline"
>
<fa icon="rss-square" class="text-2xl mr-2.5" />
<span>Flux RSS</span>
</nuxt-link>
</div>
</div>
</div>
<div
class="flex items-center justify-between text-xs border-t mt-12 py-4"
>
<div class="block lg:flex justify-between">
<nuxt-link to="/mentions-legales" class="lg:mr-4 hover:underline">
Mentions légales
</nuxt-link>
<div class="lg:mr-4">
Site généré avec
<a
href="https://nuxtjs.org"
target="_blank"
class="hover:underline"
rel="noopener noreferrer"
>
nuxtjs
</a>
au commit
<a
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/commit/${$config.git_commit}`"
target="_blank"
class="hover:underline"
rel="noopener noreferrer"
>
{{ $config.git_commit }}
</a>
</div>
</div>
<div class="">
<a
rel="license noopener noreferrer"
href="http://creativecommons.org/licenses/by-sa/4.0/"
target="_blank"
class="md:flex items-center"
>
<div class="pb-1 md:pr-3 md:pb-0">
Tout le contenu du site est<br />
en licence CC BY-SA 4.0
</div>
<img
alt="Licence Creative Commons"
style="border-width: 0"
src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"
/>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import menus from '~/static/settings/menus.json'
import categories from '~/static/settings/categories.json'
export default {
data() {
return {
menuFooter: menus.menu_footer,
categories: categories.ressources,
}
},
}
</script>
<style lang="scss" scoped></style>
<style lang="postcss" scoped>
>>> .about a {
font-weight: 500;
text-decoration: underline;
}
</style>
components/layout/LayoutHeader.vue
View file @ 59776cad
<template>
<div
class="header bg-white w-full fixed z-20 top-0 transition-transform duration-300 transform translate-y-0 dark:bg-black dark:text-gray-300"
class="
header
bg-white
w-full
fixed
z-20
top-0
transition
duration-300
transform
translate-y-0
dark:bg-black dark:text-gray-300
"
:class="{ '-translate-y-20': scrolled }"
>
<nav class="container flex justify-between items-center mx-auto h-16">
<LayoutHeaderMenuHamburger class="mr-3 flex lg:hidden">
<LayoutHeaderMenu class="flex-col space-y-4" />
</LayoutHeaderMenuHamburger>
<LayoutHeaderLogo :show-title="!searchFocus" />
<div class="flex justify-end items-center relative">
<LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />
<LayoutHeaderMenu />
<LayoutHeaderMenu class="hidden lg:flex" />
<AppDarkModeToggle class="hidden lg:inline-flex ml-3" />
<AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
<LayoutHeaderMenuAvatar />
<LayoutHeaderMenuAvatar class="hidden sm:block" />
</div>
</nav>
</div>
......@@ -63,13 +79,4 @@ export default {
/* Copied from discourse */
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 25%);
}
.menu-hamburger {
display: block;
fill: none;
height: 16px;
width: 16px;
stroke: currentcolor;
stroke-width: 3;
overflow: visible;
}
</style>
components/layout/LayoutHeaderLogo.vue
View file @ 59776cad
......@@ -4,12 +4,31 @@
class="group inline-flex items-center focus:outline-none py-3"
>
<div
class="w-9 mr-4 fill-current group-hover:text-purple-800 transition-colors"
class="
w-6
sm:w-9
mr-4
fill-current
group-hover:text-purple-800
transition-colors
"
v-html="$options.rawLogo"
/>
<span
class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors whitespace-nowrap"
class="
bg-clip-text bg-gradient-to-r
font-semibold
from-purple-800
group-hover:text-transparent
text-lg
sm:text-xl
lg:text-2xl
to-blue-700
tracking-tight
transition-colors
whitespace-nowrap
"
:class="!props.showTitle && 'hidden lg:block'"
>
{{ $options.config.site_title }}
......
components/layout/LayoutHeaderMenu.vue
View file @ 59776cad
<template>
<div class="flex">
<template v-for="(item, index) of menu">
<nuxt-link
v-if="item.url.startsWith('/')"
:key="index"
class="menu-item"
:to="item.url"
>
<nuxt-link v-if="item.url" :key="index" class="menu-item" :to="item.url">
{{ item.title }}
</nuxt-link>
</template>
<t-dropdown
toggle-on-hover
:hide-on-leave-timeout="0"
:classes="{
dropdown:
'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
}"
>
<a
slot="trigger"
class="menu-item"
href="https://forum.monnaie-libre.fr/"
target="_blank"
rel="noopener noreferrer"
<t-dropdown
v-else-if="item.title.toLowerCase() === 'forum'"
:key="index"
toggle-on-hover
:hide-on-leave-timeout="0"
:classes="{
dropdown:
'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
}"
>
Forum
<fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/>
</a>
<LayoutHeaderMenuForum />
</t-dropdown>
<a
slot="trigger"
class="menu-item"
:href="$config.forum_url"
target="_blank"
rel="noopener noreferrer"
>
Forum
<fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/>
</a>
<LayoutHeaderMenuForum />
</t-dropdown>
</template>
</div>
</template>
......
components/layout/LayoutHeaderMenuAvatar.vue
View file @ 59776cad
......@@ -69,15 +69,39 @@
</div>
<div v-if="git">
<span
class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded"
class="
bg-purple-200
text-purple-800
font-medium
py-0.5
px-1
text-sm
rounded
"
v-text="git.draft.count"
/>
<span
class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded"
class="
bg-yellow-200
text-yellow-800
font-medium
py-0.5
px-1
text-sm
rounded
"
v-text="git.pending_review.count"
/>
<span
class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded"
class="
bg-green-200
text-green-800
font-medium
py-0.5
px-1
text-sm
rounded
"
v-text="git.pending_publish.count"
/>
</div>
......@@ -123,7 +147,15 @@
>
<div>Mes tickets</div>
<div
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
class="
bg-gray-200
text-gray-800
font-medium
w-5
h-5
text-center text-sm
rounded-full
"
v-text="git.my_issues.count"
/>
</a>
......@@ -134,7 +166,15 @@
>
<div>Mes demandes de fusion</div>
<div
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
class="
bg-gray-200
text-gray-800
font-medium
w-5
h-5
text-center text-sm
rounded-full
"
v-text="git.my_merge_requests.count"
/>
</a>
......@@ -167,7 +207,7 @@
<span>Aide</span>
</nuxt-link>
<div><AppDarkModeToggle class="lg:hidden ml-2" /></div>
<AppDarkModeToggle class="xl:hidden ml-2" />
<AppA11y class="ml-2" />
</div>
......
components/layout/LayoutHeaderMenuForum.vue
View file @ 59776cad
<template>
<div v-if="!loading" class="flex items-center">
<div v-if="!loading" class="menu-forum flex items-center">
<MiniMap class="mx-4" style="min-width: 440px" />
<div class="text-left text-xs py-1 w-80 border-l dark:border-gray-500">
<a
v-for="(cat, index) in categories"
:key="index"
class="block text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 p-2 w-full"
:href="`https://forum.monnaie-libre.fr/c/${cat.slug}/${cat.id}`"
class="
block
text-gray-600
hover:text-gray-700 hover:bg-hover-light
dark:text-gray-200
p-2
w-full
"
:href="`${$config.forum_url}/c/${cat.slug}/${cat.id}`"
target="_blank"
rel="noopener noreferrer"
>
......@@ -51,4 +58,7 @@ export default {
margin-right: 5px;
display: inline-block;
}
.hamburger-menu .menu-forum {
display: none;
}
</style>
components/layout/LayoutHeaderMenuHamburger.vue 0 → 100644
View file @ 59776cad
<script>
export default {
name: 'LayoutHeaderMenuHamburger',
data() {
return {
isOpen: false,
}
},
}
</script>
<template>
<div>
<div
class="hamburger flex flex-col space-between space-y-1.5 p-6 -mx-6"
:class="isOpen ? 'is-open' : ''"
@click="isOpen = !isOpen"
>
<span class="hamburger-item" />
<span class="hamburger-item" />
<span class="hamburger-item" />
</div>
<transition :name="isOpen ? 'slideback' : 'slide'">
<div
v-show="isOpen"
class="hamburger-menu fixed bg-white left-0 top-0 w-min z-10 shadow p-8"
>
<slot />
</div>
</transition>
</div>
</template>
<style lang="postcss" scoped>
.hamburger-item {
@apply block w-6 h-0.5 bg-gray-800 dark:bg-gray-300 transition;
}
.is-open.hamburger > span:nth-child(1) {
transform: translate(0, 0.5rem) rotate(45deg);
}
.is-open.hamburger > span:nth-child(2) {
opacity: 0;
}
.is-open.hamburger > span:nth-child(3) {
transform: translate(0, -0.5rem) rotate(-45deg);
}
.hamburger-menu {
top: 65px;
height: calc(100vh - 65px);
}
.slide-leave-active,
.slide-enter-active {
transition: 0.5s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
.slideback-leave-active,
.slideback-enter-active {
transition: 0.5s;
}
.slideback-enter {
transform: translate(-100%, 0);
}
.slideback-leave-to {
transform: translate(100%, 0);
}
</style>
components/layout/LayoutHeaderMenuSearch.vue
View file @ 59776cad
......@@ -5,7 +5,7 @@
v-model="query"
:class="!isVisible && 'hidden'"
type="search"
:placeholder="$t('search') + ' (ctrl + F)'"
:placeholder="$t('search') + ` [${isMac ? 'cmd' : 'ctrl'} K]`"
class="pl-12 w-full text-base rounded-full"
@keyup.enter="search()"
@blur="isVisible = false"
......@@ -32,6 +32,7 @@ export default {
return {
query: '',
isVisible: false,
isMac: false,
}
},
watch: {
......@@ -46,6 +47,9 @@ export default {
},
mounted() {
this.isMac = /(macintosh|macintel|macppc|mac68k|macos)/i.test(
navigator.userAgentData.platform
)
document.addEventListener('keydown', this.searchShortcut)
},
beforeDestroy() {
......@@ -60,11 +64,10 @@ export default {
}
},
searchShortcut(e) {
if (e.key === 'f' && e.ctrlKey) {
// (e.ctrlKey || e.metaKey)) {
if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
e.preventDefault() // present "Save Page" from getting triggered.
this.setVisible()
this.isVisible = !this.isVisible
}
},
},
......