Initial About Page Solution

tethysplatform · May 7, 2020 · f96bfbf · f96bfbf
1 parent df82679
commit f96bfbf
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 7 deletions.
diff --git a/tethysapp/earth_engine/app.py b/tethysapp/earth_engine/app.py
@@ -44,6 +44,11 @@ def url_maps(self):
                 url='earth-engine/viewer/get-time-series-plot',
                 controller='earth_engine.controllers.get_time_series_plot'
             ),
+            UrlMap(
+                name='about',
+                url='earth-engine/about',
+                controller='earth_engine.controllers.about'
+            )
         )
 
         return url_maps
diff --git a/tethysapp/earth_engine/controllers.py b/tethysapp/earth_engine/controllers.py
@@ -22,6 +22,15 @@ def home(request):
     return render(request, 'earth_engine/home.html', context)
 
 
+@login_required()
+def about(request):
+    """
+    Controller for the app about page.
+    """
+    context = {}
+    return render(request, 'earth_engine/about.html', context)
+
+
 @login_required()
 def viewer(request):
     """

diff --git a/tethysapp/earth_engine/public/css/about.css b/tethysapp/earth_engine/public/css/about.css
@@ -0,0 +1,24 @@
+.page-header h1 {
+  text-align: center;
+  font-size: 48pt;
+  color: black;
+}
+
+.about-img {
+  width: 100%;
+  max-width: 360px;
+  margin-bottom: 20px;
+}
+
+.about-footer-content {
+  text-align: center;
+  margin: 50px 0 100px 0;
+}
+
+.about-footer-content h3 {
+  margin-bottom: 26px;
+}
+
+.about-footer-content img {
+  margin: 0 5px;
+}
diff --git a/tethysapp/earth_engine/public/css/disclaimer_modal.css b/tethysapp/earth_engine/public/css/disclaimer_modal.css
@@ -0,0 +1,20 @@
+#disclaimer-container {
+  height: 400px;
+  overflow-y: auto;
+}
+
+#sponsors-container {
+  text-align: left;
+}
+
+#sponsors-container img {
+  height: 50px;
+  width: 50px;
+  margin-right: 10px;
+  border-radius: 5px;
+}
+
+#sponsors-container h6 {
+    display: inline-block;
+    margin-right: 10px;
+}
diff --git a/tethysapp/earth_engine/templates/earth_engine/about.html b/tethysapp/earth_engine/templates/earth_engine/about.html
@@ -0,0 +1,57 @@
+{% extends "earth_engine/base.html" %}
+{% load static %}
+
+{% block styles %}
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'earth_engine/css/no_nav.css' %}" />
+  <link rel="stylesheet" href="{% static 'earth_engine/css/about.css' %}" />
+{% endblock %}
+
+{% block app_navigation_override %}
+{% endblock %}
+
+{% block app_content %}
+  <div class="container">
+    <div class="page-header">
+      <h1>About Earth Engine</h1>
+      <h1><small>Sit Amet Consectetur Adipiscing</small></h1>
+    </div>
+    <div class="row">
+      <!-- Left Column -->
+      <div class="col-md-8">
+        <div class="about-content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Congue quisque egestas diam in arcu cursus euismod. Auctor neque vitae tempus quam pellentesque nec nam. Erat imperdiet sed euismod nisi porta lorem. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed blandit libero volutpat sed cras ornare. Convallis tellus id interdum velit laoreet id. Amet mauris commodo quis imperdiet massa tincidunt. Mi bibendum neque egestas congue quisque egestas diam in. Enim nec dui nunc mattis enim ut tellus elementum sagittis. Cursus mattis molestie a iaculis at erat pellentesque. Ut tellus elementum sagittis vitae et leo.</p>
+          <h6>Eu Consequat ac Felis</h6>
+          <p>Eu consequat ac felis donec et odio. Eget arcu dictum varius duis at consectetur lorem. Lorem ipsum dolor sit amet consectetur. Turpis egestas integer eget aliquet nibh praesent. Mattis rhoncus urna neque viverra justo nec. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Convallis posuere morbi leo urna molestie at elementum eu. Fermentum et sollicitudin ac orci phasellus egestas tellus. Convallis aenean et tortor at risus. Morbi tristique senectus et netus et malesuada fames ac. Sed vulputate mi sit amet mauris commodo quis. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Id cursus metus aliquam eleifend mi in nulla. Proin fermentum leo vel orci porta non pulvinar neque laoreet. Lobortis mattis aliquam faucibus purus in massa tempor. Varius vel pharetra vel turpis nunc.</p>
+          <p><b>Mauris rhoncus aenean vel elit:</b> Blandit aliquam etiam erat velit. Auctor neque vitae tempus quam pellentesque nec nam. Augue mauris augue neque gravida in fermentum et. Tempus urna et pharetra pharetra. Vel turpis nunc eget lorem. Vitae nunc sed velit dignissim. Enim tortor at auctor urna nunc id. Pellentesque habitant morbi tristique senectus et netus et. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus.</p>
+          <p><b>Blandit turpis cursus in hac habitasse platea:</b> Tellus elementum sagittis vitae et leo duis ut diam quam. Amet nisl purus in mollis nunc sed. Ac feugiat sed lectus vestibulum. Suscipit adipiscing bibendum est ultricies integer quis. Tortor pretium viverra suspendisse potenti nullam ac tortor. Blandit turpis cursus in hac. Id porta nibh venenatis cras sed felis eget velit. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Aliquet enim tortor at auctor urna nunc id. Fringilla ut morbi tincidunt augue interdum velit euismod in. In arcu cursus euismod quis viverra nibh. Vulputate ut pharetra sit amet. Purus in massa tempor nec. Pellentesque massa placerat duis ultricies lacus sed. Integer feugiat scelerisque varius morbi enim. Vitae tempus quam pellentesque nec nam.</p>
+          <p><b>Sed cras ornare arcu dui vivamus arcu:</b> Pellentesque adipiscing commodo elit at. Fusce id velit ut tortor pretium viverra. Nunc vel risus commodo viverra. Dui faucibus in ornare quam viverra orci sagittis eu volutpat. Aliquet nibh praesent tristique magna. Purus sit amet volutpat consequat. Gravida neque convallis a cras. Aenean euismod elementum nisi quis eleifend. At tellus at urna condimentum mattis pellentesque id nibh tortor. Sit amet massa vitae tortor. Volutpat lacus laoreet non curabitur gravida arcu ac. Vulputate dignissim suspendisse in est ante. Tempor commodo ullamcorper a lacus vestibulum. Quis vel eros donec ac odio tempor. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Metus aliquam eleifend mi in.</p>'
+        </div>
+      </div>
+      <!-- End Left Column -->
+      <!-- Right Column -->
+      <div class="col-md-4">
+        <div class="about-imgs">
+          <img class="about-img" src="http://placeimg.com/360/200/nature">
+          <img class="about-img" src="http://placeimg.com/360/250/nature">
+          <img class="about-img" src="http://placeimg.com/360/300/nature">
+        </div>
+      </div>
+      <!-- End Right Column -->
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <div class="about-footer-content">
+          <h3>Sponsors</h3>
+          <img src="https://via.placeholder.com/50/0000ff/000000?text=1">
+          <img src="https://via.placeholder.com/50/00ff00/000000?text=2">
+          <img src="https://via.placeholder.com/50/ff0000/000000?text=3">
+          <img src="https://via.placeholder.com/50/00ffff/000000?text=4">
+          <img src="https://via.placeholder.com/50/ffff00/000000?text=5">
+          <img src="https://via.placeholder.com/50/ff8800/000000?text=6">
+          <img src="https://via.placeholder.com/50/8800ff/000000?text=7">
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}
diff --git a/tethysapp/earth_engine/templates/earth_engine/base.html b/tethysapp/earth_engine/templates/earth_engine/base.html
@@ -12,6 +12,19 @@
 {# The name you provided in your app.py is accessible through the tethys_app.name context variable #}
 {% block app_title %}{{ tethys_app.name }}{% endblock %}
 
+{% block header_buttons %}
+  {{ block.super }}
+  <div class="header-button glyphicon-button">
+    <a href="{% url 'earth_engine:home' %}" title="Home"><span class="glyphicon glyphicon-home"></span></a>
+  </div>
+  <div class="header-button glyphicon-button">
+    <a href="{% url 'earth_engine:about' %}" title="About"><span class="glyphicon glyphicon-info-sign"></span></a>
+  </div>
+  <div class="header-button glyphicon-button">
+    <a data-toggle="modal" data-target="#disclaimer-modal" title="Disclaimer"><span class="glyphicon glyphicon-warning-sign"></span></a>
+  </div>
+{% endblock %}
+
 {% block app_navigation_items %}
   <li class="title">App Navigation</li>
   <li class="active"><a href="">Home</a></li>
@@ -34,9 +47,48 @@
 {% block content_dependent_styles %}
   {{ block.super }}
   <link href="{% static 'earth_engine/css/main.css' %}" rel="stylesheet"/>
+  <link href="{% static 'earth_engine/css/disclaimer_modal.css' %}" rel="stylesheet"/>
 {% endblock %}
 
 {% block scripts %}
   {{ block.super }}
   <script src="{% static 'earth_engine/js/main.js' %}" type="text/javascript"></script>
-{% endblock %}
+{% endblock %}
+
+{# Use the after_app_content block for modals #}
+{% block after_app_content %}
+  {{ block.super }}
+  <!-- Info Modal -->
+  <div class="modal fade" id="disclaimer-modal" tabindex="-1" role="dialog" aria-labelledby="disclaimer-modal-label">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h2 class="modal-title" id="disclaimer-modal-label">Disclaimer</h2>
+        </div>
+        <div class="modal-body">
+          <div id="disclaimer-container">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed ipsum mollis, congue metus vitae, fringilla tortor. Cras non magna tempus, pretium nibh a, accumsan sapien. Quisque quis diam justo. Mauris ut diam molestie, scelerisque nibh ac, convallis mauris. Sed risus ex, blandit eu lectus vitae, vulputate fermentum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pretium sagittis arcu at aliquet. Quisque quis sodales urna. Suspendisse nisl odio, facilisis ac iaculis quis, accumsan non justo. Nunc eu porttitor neque.</p>
+            <p>Sed vel nisl leo. Quisque venenatis erat nec erat laoreet, ac vulputate magna sodales. Ut in enim finibus, finibus orci sit amet, feugiat erat. Vivamus id lorem arcu. Integer lacus lorem, rhoncus vitae elit eu, vestibulum placerat nibh. Ut eget lectus in quam blandit molestie nec et leo. Ut augue libero, commodo id ligula sit amet, placerat molestie enim. Cras justo odio, vulputate id odio non, ultricies mollis sem. Integer et vestibulum erat, eu dictum nunc. Donec eu diam ac ligula aliquam egestas in non lectus. Nullam quis arcu eget massa feugiat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis urna efficitur, sagittis ante eget, accumsan nulla.</p>
+            <p>Pellentesque tempor neque in odio ullamcorper, a varius lectus euismod. Donec odio nunc, mollis aliquam imperdiet eget, lacinia sit amet dui. Morbi quis pellentesque lorem. Nam volutpat vestibulum ex vel interdum. Etiam accumsan luctus felis gravida sodales. Praesent malesuada lectus tortor, at maximus velit fringilla sed. Ut consequat nisl ut pretium egestas.</p>
+            <p>Quisque tincidunt ex a sem sagittis molestie. Nunc pellentesque et tortor quis lobortis. Etiam eget justo risus. Nunc a lobortis quam, id varius ante. Maecenas at rhoncus enim. Maecenas aliquam non elit quis tempor. Morbi eu ligula imperdiet, imperdiet neque non, faucibus eros. Vivamus ac sollicitudin nunc. Vivamus sagittis ut orci eu auctor. Nulla sit amet facilisis felis, eu tincidunt sapien. Nulla sit amet dignissim nisi. Cras pellentesque rutrum rhoncus. Nulla nibh erat, congue sit amet feugiat in, eleifend at massa. Maecenas risus massa, placerat non velit vel, laoreet cursus nunc.</p>
+            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ultricies accumsan elit vel volutpat. Proin nec nibh ac dolor tempor sollicitudin. Praesent nisi elit, placerat eget diam nec, viverra euismod felis. Nunc accumsan nulla non eros bibendum, mollis hendrerit enim cursus. In ex lorem, hendrerit ut nibh nec, vestibulum placerat massa. Proin at odio non nisl eleifend venenatis ut at tortor.</p>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <div id="sponsors-container">
+            <h6>Sponsors:</h6>
+            <img src="https://via.placeholder.com/50/0000ff/000000?text=1">
+            <img src="https://via.placeholder.com/50/00ff00/000000?text=2">
+            <img src="https://via.placeholder.com/50/ff0000/000000?text=3">
+            <img src="https://via.placeholder.com/50/00ffff/000000?text=4">
+            <img src="https://via.placeholder.com/50/ffff00/000000?text=5">
+            <img src="https://via.placeholder.com/50/ff8800/000000?text=6">
+            <img src="https://via.placeholder.com/50/8800ff/000000?text=7">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- End Info Modal -->
+{% endblock %}
diff --git a/tethysapp/earth_engine/templates/earth_engine/viewer.html b/tethysapp/earth_engine/templates/earth_engine/viewer.html
@@ -12,12 +12,6 @@
   {% import_gizmo_dependency plotly_view %}
 {% endblock %}
 
-{% block header_buttons %}
-  <div class="header-button glyphicon-button">
-    <a href="{% url 'earth_engine:home' %}" title="Home"><span class="glyphicon glyphicon-home"></span></a>
-  </div>
-{% endblock %}
-
 {% block app_navigation_items %}
   <li class="title">Select Dataset</li>
   {% gizmo platform_select %}
@@ -39,6 +33,7 @@
 
 {# Use the after_app_content block for modals #}
 {% block after_app_content %}
+  {{ block.super }}
   <!-- Plot Modal -->
   <div class="modal fade" id="plot-modal" tabindex="-1" role="dialog" aria-labelledby="plot-modal-label">
     <div class="modal-dialog" role="document">