suggestion page & form, mobile styling
parent
2ef03c558b
commit
279830b7aa
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue