feat(base): create detail view templates

purpose is to aid in the development of a detail form

#22 #24 #226

app/project-static/content.css

@@ -65,6 +65,119 @@ input[type=submit] {
   height: 30px;
   margin: 10px;
 }
+
+
+
+
+/* Style the navigation tabs at the top of a content page */
+.content-navigation-tabs {
+  display: block;
+  overflow: hidden;
+  border-bottom: 1px solid #ccc;
+  /* background-color: #f1f1f1; */
+  width: 100%;
+  text-align: left;
+  padding: 0px;
+  margin: 0px
+}
+
+
+.content-navigation-tabs-link {
+  border: 0px;
+  margin: none;
+  padding: none;
+}
+
+/* Style the buttons that are used to open the tab content */
+.content-navigation-tabs button {
+  display: inline;
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  margin: 0px;
+  padding: 0px;
+  padding: 14px 16px;
+  transition: 0.3s;
+  font-size: inherit;
+  color: #6a6e73;
+}
+
+
+/* Change background color of buttons on hover */
+.content-navigation-tabs button:hover {
+  /* background-color: #ddd; */
+  border-bottom: 3px solid #ccc;
+}
+
+
+/* Create an active/current tablink class */
+.content-navigation-tabs button.active {
+  /* background-color: #ccc; */
+  border-bottom: 3px solid #177ee6;
+}
+
+
+
+/* Style content for each tab */
+.content-tab {
+  width: 100%;
+  display: none;
+  padding-bottom: 0px;
+  border: none;
+  border-top: none;
+}
+
+.content-tab hr {
+  border: none;
+  border-top: 1px solid #ccc;
+}
+
+.content-tab pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+/* Style for section fields on details page */
+.detail-view-field {
+  display: unset;
+  height: 30px;
+  line-height: 30px;
+  padding: 0px 20px 40px 20px;
+
+}
+
+.detail-view-field label {
+  display: inline-block;
+  font-weight: bold;
+  width: 200px;
+  margin: 10px;
+  height: 30px;
+  line-height: 30px;
+
+}
+
+.detail-view-field span {
+  display: inline-block;
+  width: 340px;
+  margin: 10px;
+  border-bottom: 1px solid #ccc;
+  height: 30px;
+  line-height: 30px;
+
+}
+
+
+
+
+
+
+
+
+
+
+
 /*******************************************************************************
 
 EoF refactored
@@ -124,61 +237,6 @@ input[type=checkbox]:checked::after {
 
 
 
-/* Style the tab */
-.tab {
-  display: block;
-  overflow: hidden;
-  border-bottom: 1px solid #ccc;
-  /* background-color: #f1f1f1; */
-  width: 100%;
-  text-align: left;
-  padding: 0px;
-  margin: 0px
-}
-
-.tablinks {
-  border: 0px;
-  margin: none;
-  padding: none;
-}
-
-/* Style the buttons that are used to open the tab content */
-.tab button {
-  display: inline;
-  background-color: inherit;
-  float: left;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  margin: 0px;
-  padding: 0px;
-  padding: 14px 16px;
-  transition: 0.3s;
-  font-size: inherit;
-  color: #6a6e73;
-}
-
-/* Change background color of buttons on hover */
-.tab button:hover {
-  /* background-color: #ddd; */
-  border-bottom: 3px solid #ccc;
-}
-
-/* Create an active/current tablink class */
-.tab button.active {
-  /* background-color: #ccc; */
-  border-bottom: 3px solid #177ee6;
-}
-
-/* Style the tab content */
-.tabcontent {
-  width: 100%;
-  display: none;
-  /* padding: 6px 12px; */
-  padding-bottom: 0px;
-  border: none;
-  border-top: none;
-}
 
 table {
   width: 100%;

app/project-static/functions.js

@@ -0,0 +1,16 @@
+function openContentNavigationTab(evt, TabName) {
+    var i, tabcontent, tablinks;
+
+    tabcontent = document.getElementsByClassName("content-tab");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+    }
+
+    tablinks = document.getElementsByClassName("content-navigation-tabs-link");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+
+    document.getElementById(TabName).style.display = "block";
+    evt.currentTarget.className += " active";
+}

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 %}