Work on new ui layout

three_d_viewer/static/three_d_viewer/css/styles.css

@@ -8,11 +8,11 @@
 
 @font-face {
     font-family: 'quicksandbold';
-    src: url('fonts/qcksnd-bold-webfont.eot');
-    src: url('fonts/qcksnd-bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-bold-webfont.woff') format('woff'),
-         url('fonts/qcksnd-bold-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-bold-webfont.svg#quicksandbold') format('svg');
+    src: url('../fonts/qcksnd-bold-webfont.eot');
+    src: url('../fonts/qcksnd-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-bold-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-bold-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-bold-webfont.svg#quicksandbold') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -23,11 +23,11 @@
 
 @font-face {
     font-family: 'quicksandbold_italic';
-    src: url('fonts/qcksnd-bolditalic-webfont.eot');
-    src: url('fonts/qcksnd-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-bolditalic-webfont.woff') format('woff'),
-         url('fonts/qcksnd-bolditalic-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-bolditalic-webfont.svg#quicksandbold_italic') format('svg');
+    src: url('../fonts/qcksnd-bolditalic-webfont.eot');
+    src: url('../fonts/qcksnd-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-bolditalic-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-bolditalic-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-bolditalic-webfont.svg#quicksandbold_italic') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -38,11 +38,11 @@
 
 @font-face {
     font-family: 'quicksanddash';
-    src: url('fonts/qcksnd-dash-webfont.eot');
-    src: url('fonts/qcksnd-dash-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-dash-webfont.woff') format('woff'),
-         url('fonts/qcksnd-dash-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-dash-webfont.svg#quicksanddash') format('svg');
+    src: url('../fonts/qcksnd-dash-webfont.eot');
+    src: url('../fonts/qcksnd-dash-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-dash-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-dash-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-dash-webfont.svg#quicksanddash') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -53,11 +53,11 @@
 
 @font-face {
     font-family: 'quicksanditalic';
-    src: url('fonts/qcksnd-italic-webfont.eot');
-    src: url('fonts/qcksnd-italic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-italic-webfont.woff') format('woff'),
-         url('fonts/qcksnd-italic-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-italic-webfont.svg#quicksanditalic') format('svg');
+    src: url('../fonts/qcksnd-italic-webfont.eot');
+    src: url('../fonts/qcksnd-italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-italic-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-italic-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-italic-webfont.svg#quicksanditalic') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -68,11 +68,11 @@
 
 @font-face {
     font-family: 'quicksandlight';
-    src: url('fonts/qcksnd-light-webfont.eot');
-    src: url('fonts/qcksnd-light-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-light-webfont.woff') format('woff'),
-         url('fonts/qcksnd-light-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-light-webfont.svg#quicksandlight') format('svg');
+    src: url('../fonts/qcksnd-light-webfont.eot');
+    src: url('../fonts/qcksnd-light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-light-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-light-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-light-webfont.svg#quicksandlight') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -83,11 +83,11 @@
 
 @font-face {
     font-family: 'quicksandlight_italic';
-    src: url('fonts/qcksnd-lightitalic-webfont.eot');
-    src: url('fonts/qcksnd-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-lightitalic-webfont.woff') format('woff'),
-         url('fonts/qcksnd-lightitalic-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-lightitalic-webfont.svg#quicksandlight_italic') format('svg');
+    src: url('../fonts/qcksnd-lightitalic-webfont.eot');
+    src: url('../fonts/qcksnd-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-lightitalic-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-lightitalic-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-lightitalic-webfont.svg#quicksandlight_italic') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -98,11 +98,11 @@
 
 @font-face {
     font-family: 'quicksandregular';
-    src: url('fonts/qcksnd-regular-webfont.eot');
-    src: url('fonts/qcksnd-regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/qcksnd-regular-webfont.woff') format('woff'),
-         url('fonts/qcksnd-regular-webfont.ttf') format('truetype'),
-         url('fonts/qcksnd-regular-webfont.svg#quicksandregular') format('svg');
+    src: url('../fonts/qcksnd-regular-webfont.eot');
+    src: url('../fonts/qcksnd-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-regular-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-regular-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-regular-webfont.svg#quicksandregular') format('svg');
     font-weight: normal;
     font-style: normal;
 
@@ -115,7 +115,7 @@ html, body {
 }
 
 body {
-	background-image:url('images/background_tile_lightest.jpg');
+	background-image:url('../images/background_tile_lightest.jpg');
 	background-repeat: repeat;
 	background-attachment: scroll;
 }
@@ -186,7 +186,7 @@ body {
 #container {
 	width: 100%;
 	height:91.2vh;
-	background-image:url('images/background_tile_lightest.jpg');
+	background-image:url('../images/background_tile_lightest.jpg');
 	background-repeat: repeat;
 	background-attachment: scroll;
 }
@@ -879,3 +879,4 @@ img.example {
     border-color: #fff;
   }
 }
+

three_d_viewer/templates/three_d_viewer/base.html

@@ -20,18 +20,18 @@
     	<div id="menuContainer">
             <div id='cssmenu'>
             <ul>
-               <li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
+               <li class='active mainitem'><a href="{% url 'three_d_viewer:home' %}"><span>Home</span></a></li>
                <li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
                   <ul>
-                     <li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
+                     <li class='has-sub'><a href="{% url 'three_d_viewer:minerals_theory' %}"><span>Theory</span></a>
                         <ul>
-                           <li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
-                           <li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
-                           <li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
+                           <li><a href="{% url 'three_d_viewer:minerals_theory' %}"><span>Structure of Earth</span></a></li>
+                           <li><a href="{% url 'three_d_viewer:minerals_theory' %}"><span>Pressure and temperature</span></a></li>
+                           <li class='last'><a href="{% url 'three_d_viewer:minerals_theory' %}"><span>Bowen's reaction series</span></a></li>
                         </ul>
                      </li>
-                     <li><a href='minerals_practice.html'><span>Practice</span></a></li>
-                     <li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
+                     <li><a href="{% url 'three_d_viewer:minerals_practice' %}"><span>Practice</span></a></li>
+                     <li class='last'><a href="{% url 'three_d_viewer:minerals_selftest' %}"><span>Self Test</span></a></li>
                   </ul>
                </li>
                <li class="mainitem"><a href='#'><span>Rocks</span></a></li>
@@ -41,14 +41,8 @@
     </div><!-- CLOSE MENUCONTAINER !-->
     </div><!-- HEADER !-->
     <div id="content">
-    <div id="pushDown"></div>
-    	<div id="mainText">
-        <p>Line of placeholder text for introduction to 3DVOL</p>
-        <p>Line of placeholder text</p>
-        <p>Line of placeholder text</p>
-        <p>Line of placeholder text</p>
-        <p>Line of placeholder text</p>
-        </div><!-- CLOSE MAINTEXT !-->
+        {% block content %}
+        {% endblock %}
     </div><!-- CLOSE CONTENT !-->
 </div><!-- CLOSE CONTAINER !-->
 <div id="push"></div><!-- CLOSE PUSH !-->
@@ -61,3 +55,4 @@
 </ul>
 </div><!-- CLOSE FOOTER !-->
 </body>
+</html>

three_d_viewer/templates/three_d_viewer/home.html

@@ -1,62 +1,28 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>3DVOL - 3D Virtual Object Library</title>
-<link rel='stylesheet' type='text/css' href='styles.css' />
-<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-<script type='text/javascript' src='menu_jquery.js'></script>
-</head>
+{% extends "three_d_viewer/base.html" %}
 
-<body>
-<div id="wrapper">
-<div id="container">
-	<div id="header">
-        <div id="logo">
-        <p>3D VOL</p>
-        </div><!-- CLOSE LOGO !-->
-    	<div id="menuContainer">
-            <div id='cssmenu'>
-            <ul>
-               <li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
-               <li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
-                  <ul>
-                     <li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
-                        <ul>
-                           <li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
-                           <li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
-                           <li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
-                        </ul>
-                     </li>
-                     <li><a href='minerals_practice.html'><span>Practice</span></a></li>
-                     <li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
-                  </ul>
-               </li>
-               <li class="mainitem"><a href='#'><span>Rocks</span></a></li>
-               <li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
-            </ul>
-            </div><!-- CLOSE CSSMENU !-->
-    </div><!-- CLOSE MENUCONTAINER !-->
-    </div><!-- HEADER !-->
-    <div id="content">
-    <div id="pushDown"></div>
+{% block content %}
+        <div id="pushDown"></div>
     	<div id="mainText">
-        <p>Line of placeholder text for introduction to 3DVOL</p>
-        <p>Line of placeholder text</p>
-        <p>Line of placeholder text</p>
-        <p>Line of placeholder text</p>
-        <p>Line of placeholder text</p>
+        <p><h3>Welcome to 3DVOL – Minerals.</h3><br><br>
+						This website contains a three-dimensional virtual object library of the most important rock-forming minerals making up planet Earth. You will find information on:<br>
+						<ul>
+						  <li>Which are the most common minerals on Earth?</li>
+						  <li>What are their most important physical and chemical properties?</li>
+						<li>Where in the Earth and under which physical conditions do they form?</li>
+						<li>How can they be identified in hand specimen?</li>
+						</ul>
+						A mineral is typically defined as an inorganic solid with a particular chemical composition and a characteristic, periodic atomic structure.
+						This characteristic atomic make-up is often reflected in the macroscopic crystalline structure of a mineral.
+						The 3D models presented on this website will help you to visualise, study, and memorise these beautiful and often
+						complex crystal structures as well as other diagnostic features of minerals.
+						<br>
+						We hope that you enjoy using 3DVOL.
+						<br><br>
+						Your 3DVOL team
+						<br><br>
+						Acknowledgements
+						<br>
+						3DVOL is funded by the QUT Teaching and Learning Unit and the School of Earth, Environmental, and Biological Sciences. QUT High Performance Computing provides technical support.
+					  </p>
         </div><!-- CLOSE MAINTEXT !-->
-    </div><!-- CLOSE CONTENT !-->
-</div><!-- CLOSE CONTAINER !-->
-<div id="push"></div><!-- CLOSE PUSH !-->
-</div><!-- CLOSE WRAPPER !-->
-<div id="footer">
-<ul>
-	<li><a href="#">Glossary</a></li>
-    <li>&nbsp; - &nbsp;</li>
-    <li><a href="#">Acknowledgements</a></li>
-</ul>
-</div><!-- CLOSE FOOTER !-->
-</body>
-</html>
+{% endblock %}

three_d_viewer/templates/three_d_viewer/minerals_practice.html

@@ -1,54 +1,7 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>3DVOL - Minerals/Practice</title>
-<link rel='stylesheet' type='text/css' href='styles.css' />
-<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-<script type='text/javascript' src='menu_jquery.js'></script>
-<script>
-	$(document).ready(function(){
+{% extends "three_d_viewer/base.html" %}
 
-	$('a').click(function () {
-	var divname= this.name;
-	$("#"+divname).show("slow").siblings().hide("slow");
-	});
-	
-	});
-</script> 
-</head>
-
-<body>
-<div id="wrapper">
-<div id="container">
-	<div id="header">
-        <div id="logo">
-        <p>3D VOL</p>
-        </div>
-    	<div id="menuContainer">
-            <div id='cssmenu'>
-            <ul>
-               <li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
-               <li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
-                  <ul>
-                     <li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
-                        <ul>
-                           <li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
-                           <li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
-                           <li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
-                        </ul>
-                     </li>
-                     <li><a href='#'><span>Practice</span></a></li>
-                     <li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
-                  </ul>
-               </li>
-               <li class="mainitem"><a href='#'><span>Rocks</span></a></li>
-               <li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
-            </ul>
-            </div>
-    </div>
-    <div id="content">
-		<div id="sidebar">
+{% block content %}
+<div id="sidebar">
                             <div id='mineralMenu'>
                             <ul>
                                 <li class="has-sub mainitem"><a href="#">Select a mineral</a>
@@ -95,20 +48,6 @@
         <div id="virtualObject">
 
         	<img src="images/rock_example.jpeg" class="example" />
-        
         </div>
-    </div>
-</div>
 
-<div id="push"></div><!-- CLOSE PUSH !-->
-</div><!-- CLOSE WRAPPER !-->
-<div id="footer">
-<ul>
-	<li><a href="#">Glossary</a></li>
-    <li>&nbsp; - &nbsp;</li>
-    <li><a href="#">Acknowledgements</a></li>
-</ul>
-</div><!-- CLOSE FOOTER !-->
-
-</body>
-</html>
+{% endblock %}

three_d_viewer/templates/three_d_viewer/minerals_selftest.html

@@ -1,43 +1,5 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>3DVOL - Minerals/Self Test</title>
-<link rel='stylesheet' type='text/css' href='styles.css' />
-<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-<script type='text/javascript' src='menu_jquery.js'></script>
-</head>
-
-<body>
-<div id="wrapper">
-<div id="container">
-	<div id="header">
-        <div id="logo">
-        <p>3D VOL</p>
-        </div>
-    	<div id="menuContainer">
-            <div id='cssmenu'>
-            <ul>
-               <li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
-               <li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
-                  <ul>
-                     <li class='has-sub'><a href='minerals_theory.html'><span>Theory</span></a>
-                        <ul>
-                           <li><a href='minerals_theory.html#structureofearth'><span>Structure of Earth</span></a></li>
-                           <li><a href='minerals_theory.html#pressureandtemp'><span>Pressure and temperature</span></a></li>
-                           <li class='last'><a href='minerals_theory.html#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
-                        </ul>
-                     </li>
-                     <li><a href='minerals_practice.html'><span>Practice</span></a></li>
-                     <li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
-                  </ul>
-               </li>
-               <li class="mainitem"><a href='#'><span>Rocks</span></a></li>
-               <li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
-            </ul>
-            </div>
-    </div>
-    <div id="content">
+{% extends "three_d_viewer/base.html" %}
+{% block content %}
     <div id="pushDownTwo"></div>
     	<div id="mainText">
         <h1 class="subHeadings">Self Test</h1>
@@ -48,19 +10,4 @@
         <p>Line of placeholder text</p>
         <div id="pushDownThree"></div>
         </div>
-        
-    </div>
-</div>
-
-<div id="push"></div><!-- CLOSE PUSH !-->
-</div><!-- CLOSE WRAPPER !-->
-<div id="footer">
-<ul>
-	<li><a href="#">Glossary</a></li>
-    <li>&nbsp; - &nbsp;</li>
-    <li><a href="#">Acknowledgements</a></li>
-</ul>
-</div><!-- CLOSE FOOTER !-->
-
-</body>
-</html>
+{% endblock %}

three_d_viewer/templates/three_d_viewer/minerals_theory.html

@@ -1,43 +1,6 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>3DVOL - Minerals/Theory</title>
-<link rel='stylesheet' type='text/css' href='styles.css' />
-<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
-<script type='text/javascript' src='menu_jquery.js'></script>
-</head>
+{% extends "three_d_viewer/base.html" %}
 
-<body>
-<div id="wrapper">
-<div id="container" style="height:auto !important;">
-	<div id="header">
-        <div id="logo">
-        <p>3D VOL</p>
-        </div>
-    	<div id="menuContainer">
-            <div id='cssmenu'>
-            <ul>
-               <li class='active mainitem'><a href='home.html'><span>Home</span></a></li>
-               <li class='has-sub mainitem'><a href='#'><span>Minerals</span></a>
-                  <ul>
-                     <li class='has-sub'><a href='#'><span>Theory</span></a>
-                        <ul>
-                           <li><a href='#structureofearth'><span>Structure of Earth</span></a></li>
-                           <li><a href='#pressureandtemp'><span>Pressure and temperature</span></a></li>
-                           <li class='last'><a href='#bowensreactionseries'><span>Bowen's reaction series</span></a></li>
-                        </ul>
-                     </li>
-                     <li><a href='minerals_practice.html'><span>Practice</span></a></li>
-                     <li class='last'><a href='minerals_selftest.html'><span>Self Test</span></a></li>
-                  </ul>
-               </li>
-               <li class="mainitem"><a href='#'><span>Rocks</span></a></li>
-               <li class='last mainitem'><a href='#'><span>Fossils</span></a></li>
-            </ul>
-            </div>
-    </div>
-    <div id="content">
+{% block content %}
     <div id="pushDownTwo"></div>
     	<div id="mainText">
         <h1 class="subHeadings">Theory</h1>
@@ -59,19 +22,4 @@
         <p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
         <div id="pushDownThree"></div>
         </div>
-        
-    </div>
-</div>
-
-<div id="push"></div><!-- CLOSE PUSH !-->
-</div><!-- CLOSE WRAPPER !-->
-<div id="footer">
-<ul>
-	<li><a href="#">Glossary</a></li>
-    <li>&nbsp; - &nbsp;</li>
-    <li><a href="#">Acknowledgements</a></li>
-</ul>
-</div><!-- CLOSE FOOTER !-->
-
-</body>
-</html>
+{% endblock %}

three_d_viewer/urls.py

@@ -1,10 +1,15 @@
 from django.conf import settings
 from django.conf.urls import patterns, url
+from django.views import generic
 from three_d_viewer import views
 
 urlpatterns = patterns(
     '',
     url(r'^$', views.HomeView.as_view(), name='home'),
+    url(r'^$', generic.TemplateView.as_view(template_name="three_d_viewer/home.html"), name='home'),
+    url(r'^minerals_theory/$', generic.TemplateView.as_view(template_name="three_d_viewer/minerals_theory.html"), name='minerals_theory'),
+    url(r'^minerals_practice/$', generic.TemplateView.as_view(template_name="three_d_viewer/minerals_practice.html"), name='minerals_practice'),
+    url(r'^minerals_selftest/$', generic.TemplateView.as_view(template_name="three_d_viewer/minerals_selftest.html"), name='minerals_selftest'),
     url(r'^(?P<pk>\d+)/$', views.DetailView.as_view(), name='detail'),
     url(r'^minerals/(?P<pk>\d+)/$', views.MineralDetailView.as_view(), name='mineral_detail'),
     url(r'^media/(?P<path>.*)$', 'django.views.static.serve',

three_d_viewer/views.py

@@ -25,6 +25,7 @@ class HomeView(generic.ListView):
         return context
 
 
+
 class DetailView(generic.DetailView):
     """
     Define the view to view the 3D model of a sample