suggestion page & form, mobile styling

main
Ryan Moon 2023-11-30 02:48:17 -05:00
parent 2ef03c558b
commit 279830b7aa
13 changed files with 11743 additions and 9050 deletions

View File

@ -58,6 +58,7 @@ a {
@import 'pages/index';
@import 'pages/pages';
@import 'pages/event';
@import 'pages/suggest';
@import 'pages/guide';
@import 'pages/auth';
@import 'pages/404';

View File

@ -1,5 +1,6 @@
.about,
.workshop,
.suggest,
.privacy,
.terms {
padding: 4rem 8rem;
@ -55,6 +56,7 @@
@media only screen and (max-width: 768px) {
.about,
.workshop,
.suggest,
.privacy,
.terms {
padding: 1rem .5rem;

View File

@ -0,0 +1,15 @@
.suggest {
@import 'suggest/form';
@import 'suggest/poll';
.success {
text-align: center;
margin: 8rem 6rem;
}
}
@media only screen and (max-width: 600px) {
.suggest .success {
margin: 4rem 1rem;
}
}

View File

@ -1,5 +1,5 @@
.hero {
padding: calc(50vh - 240px) 0 10vh 0;
padding: calc(50vh - 280px) 0 14vh 0;
h3 {
color: $f-color;
@ -24,6 +24,12 @@
}
}
@media only screen and (max-width: 1440px) {
.hero {
padding: calc(50vh - 240px) 0 10vh 0;
}
}
@media only screen and (max-width: 768px) {
.hero {
padding: 18vh 0;

View File

@ -0,0 +1,84 @@
form {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 1rem 0;
label {
display: block;
color: $fs-color;
font-family: $p-font;
font-size: .85rem;
font-weight: 300;
margin: 1rem .75rem .25rem .25rem;
text-transform: uppercase;
sub {
display: inline-block;
font-size: .65rem;
opacity: .65;
padding: 0 0 0 .25rem;
}
}
button,
textarea,
input {
width: 100%;
color: $w-color;
background: $b-color;
font-family: $p-font;
box-shadow: none;
}
textarea,
input {
font-size: 1rem;
font-weight: 400;
padding: .5rem 1rem;
margin: .25rem 0;
border: 1px solid $i-color;
&:focus {
border-color: $s-color;
outline: .1rem solid $s-color;
}
&::placeholder {
font-family: $p-font;
font-size: 1rem;
opacity: .4;
}
}
textarea {
min-height: 10rem;
font-family: $p-font;
padding: .75rem;
resize: vertical;
}
.message {
grid-column: 1;
}
button {
grid-column: 1/3;
font-size: .9rem;
font-weight: 500;
padding: .5rem 1rem .6rem 1rem;
margin: 1.5rem 0 0 0;
border: 1px solid $s-color;
text-align: center;
&:hover {
cursor: pointer;
background: $sh-color;
}
}
}
@media only screen and (max-width: 600px) {
form {
display: block;
}
}

View File

@ -0,0 +1,78 @@
form .poll {
grid-row: 1/3;
grid-column: 2;
padding: 0 0 0 2rem;
input,
label {
display: inline-block;
}
.check{
display: block;
position: absolute;
border: .15rem solid #AAAAAA;
border-radius: 100%;
height: 1rem;
width: 1rem;
top: .5rem;
left: .5rem;
}
.group {
display: block;
position: relative;
margin: .5rem 0;
.check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: .40rem;
width: .40rem;
top: .18rem;
left: .2rem;
}
@-moz-document url-prefix() {
.check::before {
height: .35rem;
width: .35rem;
top: .2rem;
left: .2rem;
}
}
label {
font-size: .9rem;
padding: .25rem 0 0 2rem;
margin: 0;
text-transform: none;
vertical-align: middle;
}
}
input[type=radio] {
position: absolute;
visibility: hidden;
&:checked ~ .check {
border: .15rem solid $s-color;
}
&:checked ~ .check::before{
background: $s-color;
}
&:checked ~ label{
color: $s-color;
}
}
}
@media only screen and (max-width: 600px) {
form .poll {
padding: 1rem 0;
}
}

View File

@ -15,7 +15,7 @@
<li><h5>Community</h5></li>
<li><NuxtLink to="/#events">Events</NuxtLink></li>
<li><NuxtLink to="/workshop">Workshops</NuxtLink></li>
<li><NuxtLink to="/forms">Suggestions</NuxtLink></li>
<li><NuxtLink to="/suggest">Suggestions</NuxtLink></li>
</ul>
<ul class="social">
<li><h5>Follow us</h5></li>

View File

@ -1,8 +1,7 @@
<script setup>
const { isDesktopOrTablet } = useDevice();
const user = useDirectusUser();
const { logout } = useDirectusAuth()
const user = false
/* <NuxtLink to="/" class="logo"><h1>Capital <br/>Region <br/>Bitcoin <br/>Network</h1></NuxtLink> */
/* <a @click="logout" ><h2>Logout</h2></a> */
@ -27,7 +26,7 @@
<NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
</div>
<div class="user" v-if="user">
<NuxtLink :to="'/u/' + user.external_identifier"><h2>{{user.first_name}}</h2></NuxtLink>
<!-- <NuxtLink :to="'/u/' + user.external_identifier"><h2>{{user.first_name}}</h2></NuxtLink> -->
</div>
</div>
</header>

View File

@ -5,14 +5,20 @@ export default defineNuxtConfig({
modules: [
'@nuxt/content',
'@nuxtjs/device',
'nuxt-directus',
],
directus: {
url: process.env.DIRECTUS_URL,
token: process.env.DIRECTUS_TOKEN,
autoFetch: true,
['nuxt-mail', {
message: {
to: process.env.EMAIL,
},
smtp: {
host: process.env.SMTP_HOST,
port: process.env.SMTP_PORT,
auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASS,
},
},
}],
],
css: [
"~/assets/style/main.scss",

20549
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -12,16 +12,15 @@
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/content": "^2.7.0",
"@nuxt/content": "^2.9.0",
"@nuxt/devtools": "latest",
"@nuxtjs/device": "^3.1.0",
"@types/node": "^18.16.19",
"nuxt": "^3.6.2",
"nuxt-directus": "^5.5.0"
"@nuxtjs/device": "^3.1.1",
"@types/node": "^20.10.0",
"nuxt": "^3.8.2"
},
"dependencies": {
"date-fns": "^2.30.0",
"sass": "^1.63.6",
"vee-validate": "^4.10.8"
"nuxt-mail": "^4.0.2",
"sass": "^1.69.5"
}
}

View File

@ -8,38 +8,6 @@
},
],
})
import { Form, Field, ErrorMessage } from 'vee-validate';
function required(value) {
return value ? true : 'This field is required';
}
const goodEmail = (email) => {
if (!email) {
return 'This field is required'
}
}
const { login } = useDirectusAuth()
const onSubmit = async (values) => {
try {
await login({
email: values.email,
password: values.password,
role: process.env.DIRECTUS_ROLE
})
// Redirect on success
navigateTo('/')
} catch (e) {
console.log(e)
}
}
</script>
<template>
@ -48,21 +16,19 @@
<h4 class="policy">By continuing, you agree to our <NuxtLink to="/terms">Terms of
use</NuxtLink> and <NuxtLink to="/privacy">Privacy policy</NuxtLink>.</h4>
<Form v-slot="{ errors }" @submit="onSubmit" >
<form @submit="onSubmit" >
<div class="input">
<label>Email</label>
<Field name="email" :rules="required" placeholder="Enter your email" />
<ErrorMessage name="email" />
<input name="email" placeholder="Enter your email" />
</div>
<div class="input">
<label>Password</label>
<Field name="password" :rules="required" placeholder="********" type="password" />
<ErrorMessage name="password" />
<input name="password" placeholder="********" type="password" />
</div>
<button>Sign in</button>
</Form>
</form>
<p class="newbie">Don't have an account? <NuxtLink to="/register">Create account</NuxtLink></p>
<p class="reset">Forgot password? <NuxtLink to="/reset">Reset password</NuxtLink></p>

148
pages/suggest.vue 100644
View File

@ -0,0 +1,148 @@
<script setup>
useHead({
title: 'Suggestions - Capital Region Bitcoin Network',
meta: [
{
name: 'description',
content: `Do you have any advice or proposals to improve the meetup, fill
out the form below and we will try to create a better experience.`
},
],
})
const mail = useMail()
const info = reactive({
name: undefined,
message: undefined,
poll: undefined,
test: undefined,
sent: false
})
async function onSubmit () {
let workshop = ""
switch (info.poll) {
case "node":
workshop = "Setting up a full node"
break;
case "wallets":
workshop = "Software/Hardware wallet comparisons"
break;
case "business":
workshop = "Accepting Bitcoin for businesses"
break;
case "lightning":
workshop = "What is the lightning network"
break;
case "shopping":
workshop = "Places to use Bitcoin"
break;
default:
workshop = "undefined";
}
/*
if (info.poll === "node") {
workshop = "Setting up a full node"
} else if (info.poll === "wallets") {
workshop = "Software/Hardware wallet comparisons"
} else if (info.poll === "business") {
workshop = "Accepting Bitcoin for businesses"
} else if (info.poll === "lightning") {
workshop = "What is the lightning network"
} else if (info.poll === "shopping") {
workshop = "Places to use Bitcoin"
} else {
workshop = "undefined"
}
*/
let details = `
${ info.name } has sent a suggestion.
Next Workshop: ${ workshop }
${ info.message }
`
if (info.test === undefined) {
mail.send({
from: 'suggest@crbtc.org',
subject: info.name + ' - Suggestion for Meetup',
text: details,
})
info.sent = true
}
}
</script>
<template>
<div class="suggest">
<h1>Meetup Suggestions</h1>
<p>Do you have any advice or proposals to improve the meetup, fill out
the form below and we will try to create a better experience.</p>
<form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
<div class="group">
<label for="name">Name</label>
<input name="name" v-model="info.name" type="text" placeholder="Your name" required="true" />
</div>
<!--
<div class="group">
<label for="email">Email <sub>(optional)</sub></label>
<input name="email" v-model="info.email" type="email" placeholder="Email address" required="true" />
</div>
-->
<div class="group message">
<label for="message">Message</label>
<textarea name="message" v-model="info.message" placeholder="Suggestion..." ></textarea>
</div>
<div class="group poll">
<label>Next Workshop</label>
<div class="group">
<input id="node" value="node" v-model="info.poll" type="radio" checked />
<label for="node">Setting up a full node</label>
<div class="check"></div>
</div>
<div class="group">
<input id="wallets" value="wallets" v-model="info.poll" type="radio" />
<label for="wallets" >Software/Hardware wallet comparisons</label>
<div class="check"></div>
</div>
<div class="group">
<input id="business" value="business" v-model="info.poll" type="radio" />
<label for="business">Accepting Bitcoin for businesses</label>
<div class="check"></div>
</div>
<div class="group">
<input id="lightning" value="lightning" v-model="info.poll" type="radio" />
<label for="lightning">What is the lightning network</label>
<div class="check"></div>
</div>
<div class="group">
<input id="shopping" value="shopping" v-model="info.poll" type="radio" />
<label for="shopping">Places to use Bitcoin</label>
<div class="check"></div>
</div>
</div>
<button type="submit" >Submit</button>
</form>
<p v-if="info.sent" class="success">Your suggestion has been submitted. Thank you for supporting the Capital Region Bitcoin Network.</p>
</div>
</template>