feat(base): create detail view templates

purpose is to aid in the development of a detail form

#22 #24 #226

app/templates/base.html.j2

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="{% static 'base.css' %}">
   <link rel="stylesheet" href="{% static 'code.css' %}">
   <link rel="stylesheet" href="{% static 'content.css' %}">
+  <script src="{% static 'functions.js' %}"></script>
   {% endif %}
 
 </head>

app/templates/content/field.html.j2

@@ -0,0 +1,72 @@
+{% load json %}
+{% load markdown %}
+
+{% if field.widget_type == 'textarea' or field.label == 'Notes' %}
+
+    {% if field.name in section.json and field.value %}
+
+    <pre style="width: 80%; text-align: left; display:inline; border: 1px solid #ccc; padding: 22px;">{{ field.value.strip | json_pretty | safe }}</pre>
+
+    {% elif field.name in section.markdown or field.label == 'Notes' %}
+
+        {% if field.label == 'Notes' %}
+
+            <div>
+                <label style="font-weight: bold; width: 100%; border-bottom: 1px solid #ccc; display: block; text-align: inherit;">
+                {{ field.label }}
+                </label>
+
+                <div style="display: inline-block; text-align: left;">
+                    {% if field.value %}
+                    {{ field.value | markdown | safe }}
+                    {% else %}
+                    &nbsp;
+                    {% endif %}
+                </div>
+            </div>
+
+        {% else %}
+
+            {% if field.value %}
+
+                {{ field.value | markdown | safe }}
+
+            {% else %}
+
+                &nbsp;
+
+            {% endif %}
+
+        {% endif %}
+
+    {% elif not field.value %}
+
+        &nbsp;
+
+    {% endif %}
+
+
+{% else %}
+
+
+    <div class="detail-view-field">
+        <label>{{ field.label }}</label>
+        <span>
+        {% if field.field.choices %} {# Display the selected choice text value #}
+            {% for id, value in field.field.choices %}
+
+                {% if field.value == id %}
+
+                    {{ value }}
+
+                {% endif %}
+
+            {%endfor%}
+
+        {% else %}
+            {{ field.value }}
+        {% endif %}
+        </span>
+    </div>
+
+{% endif %}

app/templates/content/section.html.j2

@@ -0,0 +1,93 @@
+{% load json %}
+{% load markdown %}
+
+{% for section in tab.sections %}
+
+
+    {% if forloop.first %}
+
+        <h3>{{ tab.name }}</h3>
+
+    {% else %}
+
+        <hr />
+        <h3>{{ section.name }}</h3>
+
+    {% endif %}
+
+<div style="align-items:flex-start; align-content: center; display: flexbox; width: 100%">
+
+    {% if section.layout == 'single' %}
+
+        {% for section_field in section.fields %}
+        {% for field in form %}
+
+            {% if field.name in section_field %}
+
+                {% include 'content/field.html.j2' %}
+
+            {% endif %}
+
+        {% endfor %}
+        {% endfor %}
+
+    {% elif section.layout == 'double' %}
+
+        {% if section.left  %}
+
+        <div style="display: inline; width: 40%; margin: 30px;">
+
+            {% for section_field in section.left %}
+            {% for field in form %}
+
+                {% if field.name in section_field %}
+                
+                    {% include 'content/field.html.j2' %}
+
+                {% endif %}
+
+            {% endfor %}
+            {% endfor %}
+
+        </div>
+
+        {% endif %}
+
+
+        {% if section.right %}
+
+        <div style="display: inline; width: 40%; margin: 30px; text-align: left;">
+
+            {% for section_field in section.right %}
+            {% for field in form %}
+
+                {% if field.name in section_field %}
+                
+                    {% include 'content/field.html.j2' %}
+
+                {% endif %}
+
+            {% endfor %}
+            {% endfor %}
+
+        </div>
+
+        {% endif %}
+
+    {% endif %}
+
+    {% if forloop.first %}
+
+        {% if tab.edit_url %}
+
+            <div style="display:block;">
+                <input type="button" value="Edit" onclick="window.location='{{ tab.edit_url }}';">
+            </div>
+
+        {% endif %}
+
+    {% endif %}
+
+</div>
+
+{% endfor %}

app/templates/detail.html.j2

@@ -0,0 +1,33 @@
+{% extends 'base.html.j2' %}
+
+{% block content %}
+
+<div class="content-navigation-tabs">
+
+    <button onclick="window.location='{% url 'ITIM:Services' %}';" style="vertical-align: middle; padding: auto; margin: 0px">
+        <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="25px"
+            style="vertical-align: middle; margin: 0px; padding: 0px border: none; " fill="#6a6e73">
+            <path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z" />
+        </svg>
+        Back to Services
+    </button>
+
+    {% for key, tab in form.tabs.items %}
+
+        {% if forloop.first %}
+
+            <button id="defaultOpen" class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>
+
+        {% else %}
+
+            <button class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>
+
+        {% endif %}
+
+    {% endfor %}
+
+</div>
+
+{% block tabs %}{% endblock %}
+
+{% endblock %}