From 5de29f0cadc84d00f58027bf581c858493325f52 Mon Sep 17 00:00:00 2001
From: Lukas Puehringer <lukas.puehringer@nyu.edu>
Date: Thu, 6 Apr 2017 18:03:10 -0400
Subject: [PATCH] Adds basic "option group" to versioning template

An option group consists of an image (e.g. a logo), a name and
an input type (radio or checkbox depending on whether multiple
options are possible or not). If a user picks an option
a form will be opened to add additional information for that
option.

An option can be for example a particular version control system,
or a build command. The opened form will be pre-populated with
the appropriate command. The user can then customize or change the
command associated with that option.
---
 static/css/main.css       | 30 ++++++++++++++++++++++++++++++
 templates/versioning.html |  8 +++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index b193bfd..7cf1e4e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -10,3 +10,33 @@ html, body, div, p, span {
   color: #3d4a5c;
   font-family: 'Calibri', 'Myriad Pro', 'Lucida Grande', 'Lucida Sans', Verdana, sans-serif;
 }
+
+label.option-group {
+  width: 100px;
+  display: inline-block;
+  border: 1px solid lightgrey;
+  margin: 0;
+  padding: 0;
+}
+
+label.option-group > img {
+  display: block;
+  margin: 10px auto;
+  height: 50px;
+}
+
+label.option-group > span {
+  display: block;
+  text-align: center;
+  padding: 10px
+}
+
+label.option-group > input {
+  display:none;
+}
+
+label.option-group > input:checked ~ span {
+  font-weight: bolder;
+  background-color: lightgrey;
+}
+
diff --git a/templates/versioning.html b/templates/versioning.html
index 7b5663d..055592f 100644
--- a/templates/versioning.html
+++ b/templates/versioning.html
@@ -8,9 +8,11 @@
   tempor incididunt ut labore et dolore magna aliqua.
 
   <h3>What version control system do you use?</h3>
-  {% for item in range(20) %}
-    {{ loop.index }}
-  {% endfor %}
+  {% for item in range(20) %}<label class="option-group">
+    <img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png">
+    <input type="radio" value="git" name="vcs">
+    <span>git</span>
+  </label>{% endfor %}
 {% endblock %}
 
 {% block links %}