Commit 4f1950d4 authored by buttle's avatar buttle

Removed lots of style attribs from html and replaced with classes in gngforms.css

parent a221b86e
......@@ -32,7 +32,7 @@ babel = Babel(app)
csrf = CSRFProtect()
csrf.init_app(app)
app.config['APP_VERSION'] = 40
app.config['APP_VERSION'] = 41
app.config['SCHEMA_VERSION'] = 13
app.config['RESERVED_SLUGS'] = ['login', 'static', 'admin', 'admins', 'user', 'users',
......
......@@ -130,6 +130,10 @@ class User(db.Document):
def forms(self):
return Form.findAll(editor=str(self.id))
@property
def authored_forms(self):
return Form.findAll(author_id=str(self.id))
def isAdmin(self):
return True if self.admin['isAdmin']==True else False
......
......@@ -32,7 +32,67 @@ hr { margin-top: 5px }
font-style: italic;
}
.formDataConsent { padding: 1em 0 2em 0 }
.returnToForm {
font-size: 1.5em;
padding-bottom: 0.25em;
border-bottom: 1px solid #eee;
margin-bottom: 0.5em;
}
.title_1 {
font-size: 1.5em;
margin-bottom: 1em;
}
.title_2 {
font-size: 1.25em;
margin-bottom: 0.65em;
}
.title_3 {
font-size: 1.15em;
margin-bottom: 0.4em;
}
.delimited {
border-bottom: 1px solid #eee;
padding-bottom: 0.25em;
}
.app_radios label {
margin-left: 1em;
}
.app_radios input[type="radio"] {
margin-left: 0;
}
input[type="date"], input[type="number"], input[type="time"] {
width: auto !important;
}
input[type="checkbox"] {
vertical-align:-3px;
}
.sm-input {
height: 28px;
}
.horzizontal-inputs > input {
display: inline;
vertical-align: top;
}
.td-controls td:first-child {
text-align: center;
}
.cell-editor {
white-space:nowrap;
}
.cell-editor > input[type="text"] {
width: 70%;
}
.link {
color:#337ab7;
cursor:pointer;
}
.dataConsent {
padding: 1em 0 2em 0;
}
.highlightedText {
color: #d9534f;
}
/* ######### Flash messages ######### */
......@@ -121,9 +181,6 @@ hr { margin-top: 5px }
/* ######### formBuilder fixes ######### */
input[type="date"], input[type="number"] {
width: auto !important;
}
.required-asterisk {
visibility: hidden;
}
......
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row col-md-3"></div>
<div class="row col-md-7" style="font-size:1.5em">
<input class="btn-primary btn btn-sm" type="button" value="{%trans%}Return to form{%endtrans%}" onClick="location.href='/forms/view/{{ form.id }}'">
{{ form.slug }}
<hr />
</div>
<div class="row col-md-2"></div>
</div>
<div class="container">
<div class="row col-md-3"></div>
<div class="row col-md-5">
<div style="font-size:1.5em; padding-bottom:1em;">
{%trans%}Change author{%endtrans%}
<div class="returnToForm">
<input class="btn-primary btn btn-sm" type="button" value="{%trans%}Return to form{%endtrans%}" onClick="location.href='/forms/view/{{ form.id }}'">
{{ form.slug }}
</div>
<div class="title_1">{%trans%}Change author{%endtrans%}</div>
<table class="table table-striped table-condensed">
{% if g.isRootUser %}
......@@ -48,15 +40,11 @@
{% set editors=form.getEditors() %}
{% if editors|length > 1 %}
<p>&nbsp;</p>
<div style="font-size:1.5em;">
{%trans%}Editors{%endtrans%}
</div>
<div>
{%trans%}Users listed here have the <b>same permissions</b> as the author{%endtrans%}
</div>
<div class="title_2">{%trans%}Editors{%endtrans%}</div>
<p>
{%trans%}Users listed here have the <b>same permissions</b> as the author{%endtrans%}
</p>
<p style="padding-top:1.2em;"></p>
<table class="table table-condensed">
{% for editor in editors %}
<tr>
......
......@@ -5,10 +5,7 @@
<div class="row col-md-4"></div>
<div class="row col-md-4">
<div style="font-size:1.5em">
{%trans%}Change email address{%endtrans%}
</div>
<hr />
<div class="title_1 delimited">{%trans%}Change email address{%endtrans%}</div>
<form method="POST">
{{ wtform.csrf_token }}
......
......@@ -7,22 +7,19 @@
<div class="row col-md-4">
<div style="font-size:1.5em">
{%trans%}Change language{%endtrans%}
</div>
<hr />
<div class="title_1 delimited">{%trans%}Change language{%endtrans%}</div>
<p></p>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<div class="app_radios">
{% for key in config['LANGUAGES'] %}
<div style="font-size:1.1em" class="radio radio-info">
<input style="margin-left:0;" type="radio" name="language" value="{{ key }}" {% if key == g.current_user.language %}checked{% endif %} >
<label class="language" style="margin-left:1em;">{{ config['LANGUAGES'][key][0] }}</label>
<div class="radio radio-info">
<input type="radio" name="language" value="{{ key }}" {% if key == g.current_user.language %}checked{% endif %} >
<label>{{ config['LANGUAGES'][key][0] }}</label>
</div>
{% endfor %}
</div>
<br />
<p></p>
<input class="btn-success btn" type="submit" value="{%trans%}Submit{%endtrans%}">
</form>
......@@ -33,7 +30,7 @@
<script>
jQuery(".language").click(function(){
jQuery("label").click(function(){
$(this).prev('input').prop("checked", true);
});
</script>
......
......@@ -7,21 +7,18 @@
<div class="row col-md-4">
<div style="font-size:1.5em">
<div class="title_1 delimited">
{%trans%}Change site favicon{%endtrans%}
<img src="{{g.site.faviconURL()}}" width=24 height=24 />
</div>
<hr />
<p></p>
<form method="POST" enctype=multipart/form-data >
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<label>{%trans%}Upload image{%endtrans%}</label>
<br />
<span class="hint">{%trans%}A small, square PNG image{%endtrans%}</span>
<br />
<p>
<label>{%trans%}Upload image{%endtrans%}</label><br />
<span class="hint">{%trans%}A small, square PNG image{%endtrans%}</span><br />
<input type=file name=file><br />
<p></p>
</p>
<input class="btn-success btn" type="submit" value="{%trans%}Upload{%endtrans%}">
<input class="btn-primary btn" type="button" value="{%trans%}Use default{%endtrans%}" onClick="location.href='/site/reset-favicon'">
<input class="btn-primary btn" type="button" value="{%trans%}Cancel{%endtrans%}" onClick="location.href='/user/{{g.current_user.username}}#site_settings'">
......
......@@ -7,18 +7,14 @@
<div class="row col-md-4">
<div style="font-size:1.5em">
{%trans%}Change site name{%endtrans%}
</div>
<hr />
<div class="title_1 delimited">{%trans%}Change site name{%endtrans%}</div>
<p></p>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<label>{%trans%}New site name{%endtrans%}</label>
<br />
<p>
<label>{%trans%}New site name{%endtrans%}</label><br />
<input type="text" name="sitename" class="form-control" value="{{site.siteName }}" required ><br />
<p></p>
</p>
<input class="btn-success btn" type="submit" value="{%trans%}Submit{%endtrans%}">
</form>
......
{% extends "base.html" %}
{% block content %}
<div style="margin: 0 0 1em 0; background-color:red;color:white">
<span style="font-size:2em;padding:0.5em">List of forms</span>
</div>
<div class="container">
<p>
<input class="btn-primary btn" type="button" value="Download" onClick="location.href='/control/csv/{{ slug }}'">
</p>
<table class="table table-striped table-condensed">
<thead>
<tr>
{% for fieldName in fieldNames %}
<th>{{ fieldName }}</th>
{% endfor %}
</tr>
</thead>
{% for entry in entries %}
<tr>
{% for fieldName in fieldNames %}
<td style="border-right: 1px solid #ccc;">{{ entry[fieldName] }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
{% endblock %}
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row col-md-4"></div>
<div class="row col-md-4">
<div style="font-size:1.5em">
{%trans%}Delete entries{%endtrans%}
</div>
<hr />
<span style="font-size:1.15em">{%trans%}Form{%endtrans%}: {{ form.slug }}</span>
<p></p>
<div class="title_1 delimited">{%trans%}Delete entries{%endtrans%}</div>
<div class="title_2">{%trans%}Form{%endtrans%}: {{ form.slug }}</div>
{%trans%}You are going to delete{%endtrans%}
{{form.totalEntries}} {%trans%}entries{%endtrans%}.
<br />
{%trans%}Write the total number of entries below{%endtrans%}.
<p></p>
<span style="font-size:1.15em">{{form.totalEntries}}</span>
<p></p>
<div class="title_3">{{form.totalEntries}}</div>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
......@@ -31,6 +27,7 @@
</form>
</div>
<div class="row col-md-4"></div></div>
<div class="row col-md-4"></div>
</div>
{% endblock %}
......@@ -3,28 +3,32 @@
<div class="container">
<div class="row col-md-4"></div>
<div class="row col-md-3"></div>
<div class="row col-md-4">
<div class="row col-md-5">
<div style="font-size:1.5em">
<div class="returnToForm">
<input class="btn-primary btn btn-sm" type="button" value="{%trans%}Return to form{%endtrans%}" onClick="location.href='/forms/view/{{ form.id }}'">
{{ form.slug }}
</div>
<div class="title_1">
{%trans%}Delete form{%endtrans%}
</div>
<hr />
{%trans%}You are going to delete this form and{%endtrans%}
{{form.totalEntries}} {%trans%}entries{%endtrans%}.
<span class="highlightedText">{{form.totalEntries}} {%trans%}entries{%endtrans%}</span>.
<br />
{%trans%}Write the name of the form below{%endtrans%}.
<p></p>
<span style="font-size:1.15em">{{form.slug}}</span>
<p></p>
<div class="title_3">{{form.slug}}</div>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="text" name="slug" class="form-control" required ><br />
<p></p>
<input class="btn-danger btn" type="submit" value="{%trans%}Delete{%endtrans%}">
<input class="btn-primary btn" type="button" value="{%trans%}Cancel{%endtrans%}" onClick="location.href='/forms/view/{{form.id}}'">
</form>
</div>
......
......@@ -7,29 +7,27 @@
<div class="row col-md-4">
<div style="font-size:1.5em">
{%trans%}Delete site{%endtrans%}
</div>
<hr />
<div>
<div class="title_1 delimited">{%trans%}Delete site{%endtrans%}</div>
<p>
{%trans%}You are going to delete this Site{%endtrans%}.
<br />
</p>
<p>
{%trans%}Including{%endtrans%} ...
<br />
{{ site.totalUsers }} {%trans%}users{%endtrans%}
<br />
{{ site.totalForms }} {%trans%}forms{%endtrans%} + {%trans%}entries{%endtrans%}
<p>&nbsp;</p>
</p>
<p>
{%trans%}Write the name of the site below{%endtrans%}.
</div>
<p></p>
<span style="font-size:1.15em">{{site.hostname}}</span>
<p></p>
</p>
<div class="title_2">{{site.hostname}}</div>
<form method="POST">
<p>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="text" name="hostname" class="form-control" required ><br />
<p></p>
</p>
<input class="btn-danger btn" type="submit" value="{%trans%}Delete{%endtrans%}">
<input class="btn-primary btn" type="button" value="{%trans%}Cancel{%endtrans%}" onClick="location.href='/admin/sites/edit/{{site.hostname}}'">
</form>
......
......@@ -5,27 +5,47 @@
<div class="container">
<div class="row col-md-4"></div>
<div class="row col-md-4">
<div class="row col-md-5">
<div style="font-size:1.5em">
{%trans%}Delete user{%endtrans%}
</div>
<hr />
{% set formCount=user.forms|length %}
<div class="title_1 delimited">{%trans%}Delete user{%endtrans%}</div>
{% set formCount=user.authored_forms|length %}
<p>
{%trans%}You are going to delete a user{%endtrans%}
{% if formCount %}
{%trans%}and their forms{%endtrans%}
{% endif %}
<br />
</p>
{% if formCount %}
<div class="title_2">{%trans%}Forms{%endtrans%}</div>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>{%trans%}Name{%endtrans%}</th>
<th>{%trans%}Editors{%endtrans%}</th>
<th>{%trans%}Entries{%endtrans%}</th>
</tr>
</thead>
{% for form in user.authored_forms %}
<tr>
<td>{{form.slug}}</td>
<td>{{form.editors|length}}</td>
<td>{{form.entries|length}}</td>
</tr>
{% endfor %}
</table>
{% endif %}
<p>
{%trans%}Write the name of the user below{%endtrans%}.
<p></p>
<span style="font-size:1.15em">{{user.username}}</span>
<p></p>
</p>
<div class="title_3">{{user.username}}</div>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<p>
<input type="text" name="username" class="form-control" required ><br />
<p></p>
</p>
{% if formCount %}
<input class="btn-danger btn" type="submit" value="{%trans%}Delete user and forms{%endtrans%}">
{% else %}
......@@ -36,7 +56,7 @@
</div>
<div class="row col-md-4"></div>
<div class="row col-md-3"></div>
</div>
......
......@@ -8,35 +8,33 @@
<div class="container">
<div class="row col-md-12">
<div style="font-size:1.3em">
<div class="title_1 delimited">
{% if session['form_id'] %}
1. {%trans%}Edit form{%endtrans%} {{ session['slug'] }}
{% else %}
1. {%trans%}Build your form here{%endtrans%}
{% endif %}
</div>
<hr />
<div id="fb-editor"></div>
</div>
<div class="row col-md-8">
<p>&nbsp;</p>
<form id="result" action="/forms/edit{% if session['form_id'] %}/{{ session['form_id'] }}{% endif %}" method="post" style="padding-bottom:0.5em;">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<div style="font-size:1.3em">
<div class="title_2 delimited">
{%trans%}2. Say something to the user after the form has been submitted{%endtrans%}
</div>
<hr />
<form id="result" method="POST" action="/forms/edit{% if session['form_id'] %}/{{ session['form_id'] }}{% endif %}" >
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
{%trans%}This is a markdown editor, an easy way to write HTML.{%endtrans%}
<a href="https://www.markdownguide.org/basic-syntax" target="_blank">{%trans%}Learn more{%endtrans%}</a>
<textarea id="sm-editor" name="afterSubmitTextMD">{{ session['afterSubmitTextMD'] }}</textarea>
<p></p>
<div style="font-size:1.3em">
<div class="title_2 delimited">
{%trans%}3. Your form will have this address{%endtrans%}
</div>
<hr />
<input type="hidden" id="structure" name="structure" />
{{ host_url }}
......@@ -89,12 +87,6 @@ jQuery(function($) {
};
const formBuilder = $(fbEditor).formBuilder(options);
/*
formBuilder.promise.then(function(fb) {
formBuilderFixes(fb.formData);
});
*/
document.getElementById('result').addEventListener('submit', function(evt){
evt.preventDefault();
if ( {{ session['form_id'] | tojson }} == null ){
......@@ -143,13 +135,6 @@ jQuery(function($) {
$('.slug-alert').hide();
});
});
function formBuilderFixes(renderedData){
//console.log(renderedData);
return
// Populate Max and Min fields.
//var max = $("#fb-editor").find(".field-{{field}}-preview").parent().find("input.fld-max[type=number]");
}
</script>
{% endblock %}
......@@ -6,11 +6,7 @@
<div class="row col-md-3"></div>
<div class="row col-md-6">
<div style="font-size:1.5em; padding-bottom:0.5em;">
{{ site.hostname }}
</div>
<hr />
<p></p>
<div class="title_1 delimited">{{ site.hostname }}</div>
<table class="table table-striped table-condensed">
<tr>
......@@ -35,16 +31,13 @@
</tr>
</table>
<div style="font-size:1.25em; padding-bottom:0.5em;">
{%trans%}Public link creation{%endtrans%}
</div>
<p></p>
<div style="font-size:1.15em;">
<span style="color:#337ab7; cursor:pointer;">
<div class="title_2">{%trans%}Public link creation{%endtrans%}</div>
<div class="title_3 link">
<span id="site_scheme">{{site.scheme}}</span>://{{ site.hostname }}<span id="site_port" {% if not site.port %}style="display:none"{% endif %}>:{{ site.port }}</span>/xxxx
</span>
</div>
<table class="table table-striped table-condensed" style="margin-top: 1em">
<table class="table table-striped table-condensed">
<tr>
<td>{%trans%}Scheme{%endtrans%}</td>
<td></td>
......
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row col-md-3"></div>
<div class="row col-md-6" style="font-size:1.5em">
<div class="row col-md-3"></div>
<div class="row col-md-5">
<div class="returnToForm">
<input class="btn-primary btn btn-sm" type="button" value="{%trans%}Return to form{%endtrans%}" onClick="location.href='/forms/view/{{ form.id }}'">
{{ form.slug }}
<hr style="margin-bottom:5px" />
</div>
<div class="row col-md-3"></div>
</div>
<div class="container">
<div class="row col-md-3"></div>
<div class="row col-md-6">
<div id="toggle_notification" class="btn-group btn-toggle">
<button id="notification_true" class="btn btn-xs btn-default {% if form.editors[g.current_user.id|string]['notification']['expiredForm'] %}btn-success{% endif %}">{%trans%}True{%endtrans%}</button>
<button id="notification_false" class="btn btn-xs btn-default {% if not form.editors[g.current_user.id|string]['notification']['expiredForm'] %}btn-primary{% endif %}">{%trans%}False{%endtrans%}</button>
......@@ -23,59 +18,53 @@
{%trans%}Notify me when this form expires{%endtrans%}
<p>&nbsp;</p>
<div style="font-size:1.5em">
<div class="title_1">
{%trans%}Expiration conditions{%endtrans%}
</div>
<p>&nbsp;</p>
<div style="font-size:1.25em">
<div class="title_2">
{%trans%}Date / Time{%endtrans%}
</div>
<br />
<style>
#date_time > input {display: inline; vertical-align: top;}
</style>
<form id="date_time" method="POST">
<form class="horzizontal-inputs" method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input id="date" name="date" type="date" class="form-control" onchange="js:dateSet(event);">
&nbsp;
<input id="time" name="time" type="time" class="form-control" style="width:auto">
<input id="time" name="time" type="time" class="form-control">
&nbsp;
<input id="date-button" class="btn" type="submit" value="{%trans%}Save changes{%endtrans%}">
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
{% if form.getAvailableNumberTypeFields() %}
<div style="font-size:1.25em">
{%trans%}Conditionals{%endtrans%}
</div>
<br />
<table class="table table-condensed">
{% for field_name, values in form.getAvailableNumberTypeFields().items() %}
<tr>
<td>
{{ form.getFieldLabel(field_name)|safe }}
</td>
<td>
{% if values.type=="number" %}
<input id="{{field_name}}" class="condition form-control" style="height:28px" type="number" value="{{values.condition|safe}}" />
{% endif %}
</td>
<td class="text-right">
{% if values.type=="number" %}
<input id="button-{{field_name}}" type="button" class="{%if values.condition %}btn-success{% else %}btn-primary{% endif %} btn btn-xs" value="{%trans%}Save max.{%endtrans%}" onClick="js:setMaxValue('{{field_name}}');">
{% endif %}
</td>
</tr>
{%endfor %}
</table>
{% endif %}
{% if form.getAvailableNumberTypeFields() %}
<div class="title_2">
{%trans%}Conditionals{%endtrans%}
</div>
<table class="table table-condensed">
{% for field_name, values in form.getAvailableNumberTypeFields().items() %}
<tr>
<td>
{{ form.getFieldLabel(field_name)|safe }}
</td>
<td>
{% if values.type=="number" %}
<input id="{{field_name}}" class="condition form-control sm-input" type="number" value="{{values.condition|safe}}" />
{% endif %}
</td>
<td class="text-right">
{% if values.type=="number" %}
<input id="button-{{field_name}}" type="button" class="{%if values.condition %}btn-success{% else %}btn-primary{% endif %} btn btn-xs" value="{%trans%}Save max.{%endtrans%}" onClick="js:setMaxValue('{{field_name}}');">
{% endif %}
</td>
</tr>
{%endfor %}
</table>
{% endif %}
</div>
<div class="row col-md-3"></div>
<div class="row col-md-4"></div>
</div>
......
......@@ -7,25 +7,22 @@
<div class="row col-md-3"></div>
<div class="row col-md-6">
<div style="font-size:1.5em">
{%trans%}Form templates{%endtrans%}
<hr />
</div>
<div class="title_1 delimited">{%trans%}Form templates{%endtrans%}</div>
<div style="font-size:1.1em">
<p>
{%trans%}We've put together some forms you can use to get started.{%endtrans%}
<br />
{%trans%}Choose the template that best suits your needs and edit it to fit.{%endtrans%}
</div>
<p>&nbsp;</p>
</p>
{% for template in templates %}
<a style="font-size:1.15em" href="#{{template.id}}">{{template.name}}</a>
<p>
<a class="title_3" href="#{{template.id}}">{{template.name}}</a>
<br />
{{template.description}}
<br />
<br />
</p>