refactor and adding view5

peterbe · Dec 15, 2014 · 7851b95 · 7851b95
1 parent 25e14a5
commit 7851b95
Show file tree

Hide file tree

Showing 11 changed files with 600 additions and 335 deletions.
diff --git a/peterbecom/apps/ajaxornot/static/ajaxornot/angular.min.js b/peterbecom/apps/ajaxornot/static/ajaxornot/angular.min.js
diff --git a/peterbecom/apps/ajaxornot/templates/ajaxornot/base.html b/peterbecom/apps/ajaxornot/templates/ajaxornot/base.html
@@ -1,49 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-   <meta charset="utf-8">
-   <title>{% block title %}{% block title_prefix %}{% endblock %} - Experiment{% endblock %}</title>
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <link rel="stylesheet" href="{{ static("css/bootstrap.min.css") }}">
-   <link rel="stylesheet" href="{{ static("css/main.css") }}">
-   <style>
-   .label { margin-right: 2px; }
-   li a.active { font-weight: bold; }
-   </style>
-   {% block extrahead %}
-   {% endblock %}
+  <meta charset="utf-8">
+  <title>{% block title %}{% block title_prefix %}{% endblock %} - Experiment{% endblock %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="{{ static("css/bootstrap.min.css") }}">
+  <link rel="stylesheet" href="{{ static("css/main.css") }}">
+  <style>
+  .label {
+    margin-right: 2px;
+    padding-bottom: 0.2em;
+
+  }
+  li a.active {
+    font-weight: bold;
+  }
+  th.pub-date, td.pub-date {
+    white-space: nowrap;
+  }
+  </style>
+  {% block extrahead %}
+  {% endblock %}
 </head>
 <body>
 <div class="container">
-	<div class="content">
-
-        <img src="{{ static("ajaxornot/ajax-progressive.jpg") }}" width="200" style="float:right">
-        <h3>AJAX or Not?</h3>
-
-        <p>
-          This is an experiment in loading page with content in three different ways:
-        </p>
-        <ol>
-          <li><a href="{{ url('ajaxornot:view1') }}"
-              {% if 'view1' in request.META['PATH_INFO'] %}class="active"{% endif %}>Pure Django template</a></li>
-          <li><a href="{{ url('ajaxornot:view2') }}"
-              {% if 'view2' in request.META['PATH_INFO'] %}class="active"{% endif %}>AJAX load table with innerHTML</a></li>
-          <li><a href="{{ url('ajaxornot:view3') }}"
-              {% if 'view3' in request.META['PATH_INFO'] %}class="active"{% endif %}>AJAX load table with AngularJS</a></li>
-          <li><a href="{{ url('ajaxornot:view4') }}"
-              {% if 'view4' in request.META['PATH_INFO'] %}class="active"{% endif %}>Content as inline javascript JSON</a></li>
-
-        </ol>
-        <p><a href=".">Go back to overview page</a></p>
+  <div class="content">
 
-            <div style="clear: right">
+    <img src="{{ static("ajaxornot/ajax-progressive.jpg") }}" width="200" style="float:right">
+    <h3>AJAX or Not?</h3>
 
-		{% block content %}
-                {% endblock %}
+    <p>
+      This is an experiment in loading page with content in three different ways:
+    </p>
+    <h5>Three Different Versions</h5>
+    <ol>
+      <li><a href="{{ url('ajaxornot:view1') }}"
+          {% if 'view1' in request.META['PATH_INFO'] %}class="active"{% endif %}>Pure Django template</a></li>
+      <li><a href="{{ url('ajaxornot:view2') }}"
+          {% if 'view2' in request.META['PATH_INFO'] %}class="active"{% endif %}>AJAX load table with innerHTML</a></li>
+      <li><a href="{{ url('ajaxornot:view3') }}"
+          {% if 'view3' in request.META['PATH_INFO'] %}class="active"{% endif %}>AJAX load table with AngularJS</a></li>
+    </ol>
+    <h5>Optimization Attempts</h5>
+    <ol>
+      <li><a href="{{ url('ajaxornot:view4') }}"
+          {% if 'view4' in request.META['PATH_INFO'] %}class="active"{% endif %}>Content as inline javascript JSON</a></li>
+      <li><a href="{{ url('ajaxornot:view5') }}"
+          {% if 'view5' in request.META['PATH_INFO'] %}class="active"{% endif %}>Partial server-side, partial AJAX innerHTML</a></li>
 
-            </div>
+    </ol>
+    <p>
+      <a href=".">Go back to overview page</a>
+    </p>
 
-	</div>
+    <div style="clear: right">
+      {% block content %}{% endblock %}
+    </div>
+  </div>
 </div>
 {% block extrajs %}{% endblock %}