Merge cc3609d into 7bab33f

ctsit · Aug 20, 2015 · 91fc5a8 · 91fc5a8
2 parents 7bab33f + cc3609d
commit 91fc5a8
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 152 deletions.
diff --git a/app/redidropper/static/css/layout.css b/app/redidropper/static/css/layout.css
@@ -22,7 +22,7 @@
 }
 
 .red-background {
-    background-color: #a51a11;
+    background-color: #993333;
 }
 
 a.logo-name:hover, a.logo-name:active,
@@ -61,7 +61,7 @@ table.borderless td, table.borderless th {
 .login-form-container {
     margin-top: 3em;
     padding: 3em;
-    background-color: #a51a11;
+    background-color: #993333;
 }
 
 .footer {

diff --git a/app/redidropper/static/css/parallax.css b/app/redidropper/static/css/parallax.css
@@ -11,11 +11,51 @@ This stylesheet and the associated (x)html may be modified in any way to fit you
   padding: 50px 0;
 }
 
+.go-down {
+  border: 2px solid;
+  border-radius: 50%;
+  display: inline-block;
+  font-size: 28px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  vertical-align: middle;
+  width: 60px;
+}
+
+.grey-color {
+  color: #D8D8D8;
+}
+
 /* additional sections */
 #home {
   background: url(/static/img/bottles.jpg) no-repeat center center fixed; 
   display: table;
-  height: 50vh;
+  height: 45vh;
+  position: relative;
+  width: 100%;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+#image2 {
+  background: url(/static/img/oil.jpg) no-repeat center center fixed;
+  display: table;
+  height: 45vh;
+  position: relative;
+  width: 100%;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+#image3 {
+  background: url(/static/img/red-oil-flipped.jpg) no-repeat center center fixed;
+  display: table;
+  height: 45vh;
   position: relative;
   width: 100%;
   -webkit-background-size: cover;
@@ -25,11 +65,22 @@ This stylesheet and the associated (x)html may be modified in any way to fit you
 }
 
 #about {
+  height: 55vh;
+}
+
+#scrolldownicon a {
+  color: #000000;
 }
 
 #services {
-  background-color: #a51a11;
+  background-color: #993333;
   color: #ffffff;
+  height: 100vh;
+}
+
+#services .container {
+  position: relative;
+  top: 20vh;
 }
 
 #services .glyphicon {
@@ -44,14 +95,53 @@ This stylesheet and the associated (x)html may be modified in any way to fit you
   width: 140px;
 }
 
-#information {
-  background: url(/static/img/oil.jpg) no-repeat center center fixed; 
+#services a {
+  color: #FFFFFF;
+}
+
+#information .container {
+  background: url(/static/img/translucent-oil.jpg) no-repeat center center fixed; 
+  height: 100vh;
   display: table;
-  height: 300px;
   position: relative;
   width: 100%;
   background-size: cover;
 }
-#information .panel {
-  opacity: 0.85;
+
+#stardiv {
+  position: relative;
+  top: 20vh;
+}
+
+#gettingstarted {
+  height: 100vh;
+}
+
+#gettingstarted .container {
+  position: relative;
+  top: 10%;
+}
+
+#faq {
+  background-color: #993333;
+  color: #ffffff;
+  height: 100vh;
+}
+
+#faq .container {
+  position: relative;
+  top: 10%;
+}
+
+#support {
+  height: 100vh;
+}
+
+#support .container {
+  position: relative;
+  top: 5%;
+}
+
+#support button {
+  color: #FFFFFF;
 }
diff --git a/app/redidropper/static/img/red-oil-flipped.jpg b/app/redidropper/static/img/red-oil-flipped.jpg
diff --git a/app/redidropper/static/img/translucent-oil.jpg b/app/redidropper/static/img/translucent-oil.jpg
diff --git a/app/redidropper/static/js/jquery.anchor.js b/app/redidropper/static/js/jquery.anchor.js
@@ -0,0 +1,39 @@
+/*******
+
+	***	Anchor Slider by Cedric Dugas   ***
+	*** Http://www.position-absolute.com ***
+	
+	Never have an anchor jumping your content, slide it.
+
+	Don't forget to put an id to your anchor !
+	You can use and modify this script for any project you want, but please leave this comment as credit.
+	
+*****/
+
+
+
+$(document).ready(function() {
+	$("a.anchorLink").anchorAnimate()
+});
+
+jQuery.fn.anchorAnimate = function(settings) {
+
+ 	settings = jQuery.extend({
+		speed : 1100
+	}, settings);	
+
+	return this.each(function(){
+		var caller = this
+		$(caller).click(function (event) {	
+			event.preventDefault()
+			var locationHref = window.location.href
+			var elementClick = $(caller).attr("href")
+
+			var destination = $(elementClick).offset().top;
+			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
+				window.location.hash = elementClick
+			});
+		  	return false;
+		})
+	})
+}
diff --git a/app/redidropper/static/js/sidebar.js b/app/redidropper/static/js/sidebar.js
@@ -3,5 +3,10 @@ $(document).ready(function() {
     $("#menu-toggle").click(function(e) {
         e.preventDefault();
         $("#wrapper").toggleClass("toggled");
+        var icon = $(this).parent().find(".fa")
+        if (icon.hasClass('fa-angle-left'))
+            icon.removeClass('fa-angle-left').addClass("fa-angle-right");
+        else
+            icon.removeClass('fa-angle-right').addClass("fa-angle-left");
     });
 });
diff --git a/app/redidropper/templates/index.html b/app/redidropper/templates/index.html
@@ -24,77 +24,6 @@
                     type='hidden') }}
     {% endcall %}
 {% endblock %}
-
 {% block content %}
-
-    <!-- first section - login -->
-    <div id="home">
-    </div>
-    <!-- /first section -->
-
-    <!-- second section - About -->
-    <div id="about" class="pad-section">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 text-center">
-                    <h2>What is RED-I Dropper?</h2>
-                    <p class="lead">
-                    RED-I Dropper is a web-based application used to assist in the secure transport of data from one location to another. This transfer can include both sensitive and non-sensitive data.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- /second section -->
-
-    <!-- third section - Services -->
-    <div id="services" class="pad-section">
-        <div class="container">
-            <h2 class="text-center">Dropper Resources</h2> <hr />
-            <div class="row text-center">
-                <div class="col-sm-4 col-xs-6">
-                    <i class="glyphicon glyphicon-cloud"> </i>
-                    <h4>Getting Started</h4>
-                    <p></p>
-                </div>
-                <div class="col-sm-4 col-xs-6">
-                    <i class="glyphicon glyphicon-phone-alt"> </i>
-                    <h4>Support</h4>
-                    <p></p>
-                </div>
-                <div class="col-sm-4 col-xs-6">
-                    <i class="glyphicon glyphicon-bullhorn"> </i>
-                    <h4>FAQ</h4>
-                    <p></p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- /third section -->
-
-    <!-- fourth section - Information -->
-    <div id="information" class="pad-section">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h2 class="panel-title">STAR</h2>
-                        </div>
-                        <div class="panel-body lead">
-                            RED-I Dropper is a component of the Software Toolset for Alzheimer's
-                            Research (STAR) system created in conjunction with the Alzheimer's
-                            Disease Research Consortium. STAR is a cloud of technology services
-                            created by CTSI-IT that serves to orchestrate the capture of data and
-                            metadata as it flows from each consortium member to form a dataset
-                            for analysis that will advance the understanding of Alzheimer's
-                            Disease.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- /fourth section -->
-
-
+    {% include 'parallax.html' %}
 {% endblock %}
diff --git a/app/redidropper/templates/layout.html b/app/redidropper/templates/layout.html
@@ -31,6 +31,7 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"> </script>
+    <script src="{{ url_for('static', filename='js/jquery.anchor.js') }}"></script>
 <!--
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot" charset="utf-8">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg" charset="utf-8">
@@ -67,7 +68,7 @@
                             {% if current_user.is_authenticated() %}
                                 <i id="menu-toggle"
                                     title="Logged in as {{ current_user.email }}"
-                                    class="fa fa-bars fa-lg icon-white cursor-pointer"></i>
+                                    class="fa fa-angle-left fa-lg icon-white cursor-pointer"></i>
                             {% endif %}
                             <a class="logo-name" href="/">Redi Dropper</a>
                         </div>

diff --git a/app/redidropper/templates/login_shib.html b/app/redidropper/templates/login_shib.html
@@ -11,74 +11,5 @@
 {% endblock %}
 
 {% block content %}
-
-    <!-- first section - Home -->
-    <div id="home">
-    </div>
-    <!-- /first section -->
-
-    <!-- second section - About -->
-    <div id="about" class="pad-section">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 text-center">
-                    <h2>What is RED-I Dropper?</h2>
-                    <p class="lead">
-                    RED-I Dropper is a web-based application used to assist in the secure transport of data from one location to another. This transfer can include both sensitive and non-sensitive data.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- /second section -->
-
-    <!-- third section - Services -->
-    <div id="services" class="pad-section">
-        <div class="container">
-            <h2 class="text-center">Dropper Resources</h2> <hr />
-            <div class="row text-center">
-                <div class="col-sm-4 col-xs-6">
-                    <i class="glyphicon glyphicon-cloud"> </i>
-                    <h4>Getting Started</h4>
-                    <p></p>
-                </div>
-                <div class="col-sm-4 col-xs-6">
-                    <i class="glyphicon glyphicon-phone-alt"> </i>
-                    <h4>Support</h4>
-                    <p></p>
-                </div>
-                <div class="col-sm-4 col-xs-6">
-                    <i class="glyphicon glyphicon-bullhorn"> </i>
-                    <h4>FAQ</h4>
-                    <p></p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- /third section -->
-
-    <!-- fourth section - Information -->
-    <div id="information" class="pad-section">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h2 class="panel-title">STAR</h2>
-                        </div>
-                        <div class="panel-body lead">
-                            RED-I Dropper is a component of the Software Toolset for Alzheimer's
-                            Research (STAR) system created in conjunction with the Alzheimer's
-                            Disease Research Consortium. STAR is a cloud of technology services
-                            created by CTSI-IT that serves to orchestrate the capture of data and
-                            metadata as it flows from each consortium member to form a dataset
-                            for analysis that will advance the understanding of Alzheimer's
-                            Disease.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- /fourth section -->
-
+    {% include 'parallax.html' %}
 {% endblock %}