autonomic-cooperative/ojuso-map
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign form selector screen

Browse Source
This commit is contained in:
Anna Sidwell 2018-10-12 19:51:59 -04:00
parent c21a06d5c8
commit b0aea72c12
2 changed files with 98 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
apps/map/templates/map/form-selector.html
View File

@ -1,4 +1,4 @@
{% extends "base_page.html" %}
{% extends "base.html" %}
{% load bootstrap3 %}
{% load compress %}
{% load i18n %}
@ -7,41 +7,101 @@
{% block stylesheets %}
{{ block.super }}
<style>
a.btn-jumbo {
color: navy;
width:320px;
height:240px;
border: 1px solid black;
border-radius: 5px;
white-space: normal;
line-height:55px;
padding:80px 20px;
margin: 20px;
}
a.btn-jumbo > * {
vertical-align: middle;
display: inline-block;
line-height:20px;
}
div.btn-jumbo-group {
text-align: center;
}
.container { min-height: 60vh; }
.form-selector {
max-width: 50em;
margin: auto;
margin-top: 2em;
}
.subhead {
font-size: 120%;
margin-bottom: 2em;
}
.entry {
display: flex;
align-items: center;
margin-bottom: 1em;
color: black;
background-color: #eee;
border-radius: 10px;
}
.entry:hover {
text-decoration: none;
background-color: #ddd;
}
.entry-title {
font-size: 120%;
font-weight: 900;
margin-top: 1.4rem;
}
.entry-desc {
margin-bottom: 1em;
}
.entry-icon {
font-size: 2em;
width: 2em;
display: block;
text-align: center;
}
.ojuso-red { color: #ea4639; }
.ojuso-green { color: #4ac95d; }
.ojuso-yellow { color: #f9db3c; }
.ojuso-blue { color: #008ad5; }
</style>
{% endblock %}
{% block title %}{% trans "How much time do you have?" %}{% endblock %}
{% block description %}
{% trans "A complete picture is always more helpful but sometimes you don't have the time" %}
{% endblock %}
{% block inner %}
<div class="btn-jumbo-group">
<a class="btn btn-block btn-warning" href="{% url 'long-form' %}" role="button">
<h2>20+ Minutes</h2>
<p>Full Form (Preferred)</p>
{% block content %}
<div class="container">
<div class="col-sm-12">
<div class="form-selector">
<h1>{% trans "Create a new entry" %}</h1>
<p class="subhead">{% trans "What kind of entry do you want to create?" %}</p>
<a class="entry" href="{% url 'long-form' %}">
<i class="entry-icon ojuso-green fa fa-file-text-o"></i>
<div>
<h3 class="entry-title">{% trans "Case study" %}</h3>
<p class="entry-desc">
{% trans "A collection of data about a particular land-based project" %}
</p>
</div>
</a>
<a class="btn btn-block btn-info" href="{% url 'short-form' %}" role="button">
<h2>5-10 Minutes</h2>
<p>Express Form</p>
<a class="entry" href="{% url 'short-form' %}">
<i class="entry-icon ojuso-red fa fa-bolt"></i>
<div>
<h3 class="entry-title">{% trans "Case study (short)" %}</h3>
<p class="entry-desc">
{% trans "For when you have less information or less time" %}
</p>
</div>
</a>
<a class="entry" href="/">
<i class="entry-icon ojuso-blue fa fa-thumb-tack"></i>
<div>
<h3 class="entry-title">{% trans "Point of interest" %}</h3>
<p class="entry-desc">
{% trans "Marking somewhere as being of interest to the renewable energy transition" %}
</p>
</div>
</a>
</div>
{% endblock %}
</div>
</div>
{% endblock %}

6
ojusomap/templates/base.html
View File

@ -102,7 +102,11 @@
</form>
</li>
{% if user.is_authenticated %}
<a class="btn btn-primary navbar-btn" href="{% url 'create' %}"><i class="fa fa-plus" aria-hidden="true"></i> New Case Study</a>
<a class="btn btn-primary navbar-btn" href="{% url 'create' %}">
<i class="fa fa-plus" aria-hidden="true"></i> Contribute
</a>
<li class="dropdown">
<a style="margin:-10px 0 -10px 0" class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="{% avatar_url user %}" class="img-circle" width="40" height="40" style="position:relative;margin-right:5px"/><span>{{user}}</span>