streaper2/maaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A11Y and engagement tweaks

Browse Source
This commit is contained in:
Michael Dausmann
2023-05-21 15:32:38 +10:00
parent 17e3166f13
commit 565d951304
4 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/AppHeader.vue
View File

@@ -56,15 +56,16 @@
<li v-if="user"><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
<li><NuxtLink to="/pricing">Pricing</NuxtLink></li>
<li v-if="!user"><NuxtLink to="/signin">Sign In</NuxtLink></li>
<li v-if="!user"><a href="https://github.com/JavascriptMick/nuxt3-boilerplate"><Icon name="mdi:github"/></a></li>
<li v-if="!user"><NuxtLink to="/signup">Start for free</NuxtLink></li>
<li v-if="!user"><a title="github" href="https://github.com/JavascriptMick/nuxt3-boilerplate"><Icon name="mdi:github"/></a></li>
</ul>
</div>
<div class="navbar-end" v-if="user">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<img v-if="user.user_metadata.avatar_url" :src="user.user_metadata.avatar_url" />
<img v-else src="~/assets/images/avatar.svg"/>
<img v-if="user.user_metadata.avatar_url" :src="user.user_metadata.avatar_url" alt="avatar image"/>
<img v-else src="~/assets/images/avatar.svg" alt="default avatar image"/>
</div>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">

8
nuxt.config.ts
View File

@@ -11,6 +11,14 @@ export default defineNuxtConfig({
imports: {
dirs: ['./stores'],
},
app:{
head: {
htmlAttrs: {
lang: 'en',
},
title: 'Nuxt 3 SAAS Boilerplate',
},
},
runtimeConfig:{
stripeSecretKey: process.env.STRIPE_SECRET_KEY,
stripeEndpointSecret: process.env.STRIPE_ENDPOINT_SECRET,

6
pages/dashboard.vue
View File

@@ -37,11 +37,11 @@
<textarea v-model="newNoteText" type="text" class="w-full rounded-l-md py-2 px-4 border-gray-400 border-2 focus:outline-none focus:border-blue-500" rows="5" placeholder="Add a note..."/>
<div class="flex justify-evenly">
<button @click.prevent="addNote()" type="button"
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
Add
</button>
<button v-if="activeMembership.account.features.includes('SPECIAL_FEATURE')" @click.prevent="genNote()" type="button"
class="px-4 py-2 text-white bg-orange-500 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50">
class="px-4 py-2 text-white bg-purple-600 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50">
Gen
<Icon name="mdi:magic" class="h-6 w-6"/>
</button>
@@ -53,7 +53,7 @@
<p class="text-gray-600 mb-4">{{ note.note_text }}</p>
<button @click.prevent="notesStore.deleteNote(note.id)"
v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.ADMIN || activeMembership.access === ACCOUNT_ACCESS.OWNER)"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Delete
</button>
</div>

18
pages/pricing.vue
View File

@@ -22,6 +22,12 @@
<h3 class="text-2xl font-bold text-gray-900 mb-4">Free Plan</h3>
<p class="text-gray-600 mb-4">Single user, 10 notes</p>
<p class="text-3xl font-bold text-gray-900 mb-4">$0<span class="text-gray-600 text-lg">/mo</span></p>
<button
v-if="!activeMembership"
@click.prevent="navigateTo('/signup')"
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Start for free
</button>
</div>
<!-- Personal Plan -->
@@ -39,7 +45,7 @@
<input type="hidden" name="account_id" :value="activeMembership?.account_id" />
<button
type="submit"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Subscribe
</button>
</form>
@@ -47,8 +53,8 @@
<button
v-if="!activeMembership"
@click.prevent="navigateTo('/signup')"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Sign Up
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Get started
</button>
</div>
@@ -67,7 +73,7 @@
<input type="hidden" name="account_id" :value="activeMembership?.account_id" />
<button
type="submit"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Subscribe
</button>
</form>
@@ -75,8 +81,8 @@
<button
v-if="!activeMembership"
@click.prevent="navigateTo('/signup')"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Sign Up
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Get started
</button>
</div>
</div>