Add feedback form
This commit is contained in:
rubenwardy
parent
fdf8976570
commit
3cd8d52da0
@ -45,7 +45,7 @@ layout: compress
|
||||
{% endif %}
|
||||
|
||||
<style>body,html,nav{background:#333}nav,nav li,nav li a{display:block}body,html,main,nav li{margin:0;padding:0}main,nav{position:absolute;top:0}body,html{font-size:17px;color:#000}#container{width:100%;max-width:1100px;margin:auto;position:relative}nav{left:0;width:280px;list-style:none;color:#fff}nav li a{padding:5px;color:#ccc;text-decoration:none}main{left:280px;right:0}article{background:#fff;padding:0 20px 20px}</style>
|
||||
<link rel="stylesheet" href="{{ page.root }}/static/style.css?v=3">
|
||||
<link rel="stylesheet" href="{{ page.root }}/static/style.css?v=4">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
@ -63,6 +63,41 @@ layout: base
|
||||
<li>{% if next %}<a href="{{ page.root }}{{ next.url}}">{{ next.title }} ></a>{% endif %}</li>
|
||||
</ul>
|
||||
|
||||
{% if language == "en" %}
|
||||
<aside class="feedback">
|
||||
<h2>
|
||||
{% unless page.homepage %}Confused?{% endunless %}
|
||||
Have an idea to make the book better?
|
||||
</h2>
|
||||
<p>
|
||||
Please let me know using the form below.
|
||||
</p>
|
||||
<form method="POST" action="https://api.rubenwardy.com/comment/">
|
||||
<input type="hidden" name="url" value="{{ page.url | absolute_url }}">
|
||||
<input type="hidden" name="redirect_to" value="https://rubenwardy.com/minetest_modding_book/comment_recevied.html">
|
||||
<input type="hidden" name="name" value="Anonymous">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<input type="text" id="username" name="username">
|
||||
<div class="form-group">
|
||||
<label for="message" class="form-label">Mesage</label>
|
||||
<textarea class="form-control" id="message" name="message" rows="3" required="" minlength="5" maxlength="1800"></textarea>
|
||||
<small id="messageHelp" class="form-text text-muted">
|
||||
Max 1800 characters. What is missing? What confused you?
|
||||
What did you find unclear? What other feedback do you have?
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">Email address (optional)</label>
|
||||
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" maxlength="320">
|
||||
<small id="emailHelp" class="form-text text-muted">
|
||||
Optional, if you'd like to receive a response.
|
||||
</small>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Comment</button>
|
||||
</form>
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
<footer>
|
||||
© 2014-{{ site.time | date: '%Y' }}
|
||||
{% if language == "en" %}
|
||||
|
||||
121
_sass/_feedback.scss
Normal file
121
_sass/_feedback.scss
Normal file
@ -0,0 +1,121 @@
|
||||
.feedback {
|
||||
background: white;
|
||||
padding: 1em;
|
||||
|
||||
input[name='username'], label[for='username'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
--color-primary-dark: #007DB8;
|
||||
--color-primary-dark-highlight: #06aed5;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: 0.25rem 0.25rem 0.25rem 0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.25rem;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: white;
|
||||
transition: color 0.15s ease-in-out, filter 0.15s ease-in-out,
|
||||
background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
img.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary-dark);
|
||||
border-color: var(--color-primary-dark);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-dark-highlight);
|
||||
border-color: var(--color-primary-dark-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
button, input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
input, button, select, optgroup, textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(1.5em + 1.5rem + 2px);
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #52575C;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #7A8288 !important;
|
||||
}
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
small, .small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
@ -198,3 +198,10 @@ header span {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "content";
|
||||
@import "code";
|
||||
@import "notice";
|
||||
@import "table";
|
||||
@import "feedback";
|
||||
|
||||
29
comment_received.html
Normal file
29
comment_received.html
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: Thanks for your feedback
|
||||
layout: base
|
||||
root: .
|
||||
sitemap: false
|
||||
noindex: true
|
||||
---
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>Minetest Modding Book</h1>
|
||||
|
||||
<h2>Thanks for sharing your feedback!</h2>
|
||||
|
||||
<p>
|
||||
You're helping to make the modding book better.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="{{ '/index.html' | relative_url }}">
|
||||
Back to the book
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
© 2014-{{ site.time | date: '%Y' }}
|
||||
</footer>
|
||||
</main>
|
||||
@ -19,6 +19,6 @@ root: .
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
© 2014-20
|
||||
© 2014-{{ site.time | date: '%Y' }}
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@ -2,7 +2,3 @@
|
||||
---
|
||||
|
||||
@import "main";
|
||||
@import "content";
|
||||
@import "code";
|
||||
@import "notice";
|
||||
@import "table";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user