add tabs to project form

liqd · Sep 7, 2016 · 47b204d · 47b204d
1 parent 3455826
commit 47b204d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/euth/dashboard/templates/euth_dashboard/project_form.html b/euth/dashboard/templates/euth_dashboard/project_form.html
@@ -6,22 +6,41 @@ <h1>{% trans 'Edit a project' %}</h1>
 
 <div class="general-form">
     <form enctype="multipart/form-data" action="{{ request.path }}" method="post">
-      {% csrf_token %}
-      {% for field in form %}
-      <div class="form-group{% if field.errors %} has-error{% endif %}">
-        <label>{{ field.label }}</label>
-        {% render_field field class="form-control" %}
-        {% for error in field.errors %}
-        <span class="help-block">{{ error }}</span>
-        {% endfor %}
-      </div>
-      {% endfor %}
+        {% csrf_token %}
 
-      {% if project.is_draft %}
-      <button type="submit" name="save_draft" class="submit-button">{% trans 'save draft' %}</button>
-      {% else %}
-      <button type="submit" name="save_draft" class="submit-button">{% trans 'unpublish' %}</button>
-      {% endif %}
-      <button type="submit" name="publish" class="submit-button">{% trans 'save and publish' %}</button>
+        <nav class="tabs">
+            <ul>
+                <li class="col-md-4 {% if not view.project.active_phase %} active {% endif %}"><a
+                    href="#information" data-toggle="tab" class="tab">{% trans "Information" %}</a></li>
+                <li class="col-md-4 {% if view.project.active_phase %} active {% endif %}">
+                    <a href="#participation" data-toggle="tab" class="tab">{% trans "Participation" %}</a></li>
+                <li class="col-md-4"><a href="#result" data-toggle="tab" class="tab">{% trans "Result" %}</a></li>
+            </ul>
+        </nav>
+        <article id="information" class="tab-panel {% if not view.project.active_phase %} active {% endif %}">
+            <h3 class="tab-panel-title">{% trans "info" %}</h3>
+            {% for field in form %}
+            <div class="form-group{% if field.errors %} has-error{% endif %}">
+                <label>{{ field.label }}</label>
+                {% render_field field class="form-control" %}
+                {% for error in field.errors %}
+                <span class="help-block">{{ error }}</span>
+                {% endfor %}
+            </div>
+            {% endfor %}
+        </article>
+        <article id="participation" class="tab-panel {% if view.project.active_phase %} active {% endif %}">
+            Stuff!
+        </article>
+        <article id="result" class="tab-panel">
+            Even more stuff!
+        </article>
+
+        {% if project.is_draft %}
+        <button type="submit" name="save_draft" class="submit-button">{% trans 'save draft' %}</button>
+        {% else %}
+        <button type="submit" name="save_draft" class="submit-button">{% trans 'unpublish' %}</button>
+        {% endif %}
+        <button type="submit" name="publish" class="submit-button">{% trans 'save and publish' %}</button>
 
 {% endblock %}
diff --git a/euth_wagtail/static/scss/core/_tabs.scss b/euth_wagtail/static/scss/core/_tabs.scss
@@ -1,5 +1,11 @@
 .tabs {
     background-color: $gray-lighter;
+    @include clearfix;
+    @include rem(margin-top, 20px);
+
+    .euth-hero-unit + & {
+        margin-top: 0;
+    }
 
     .container-narrow {
         margin: 0 auto;