Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new sections #108

Merged
merged 12 commits into from
Aug 20, 2015
Merged

Add new sections #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c1e2caa
Add sections for getting started, faq and support
Aug 18, 2015
03f2e39
Add smooth scrolling on clicking link to the new sections
Aug 19, 2015
756f229
Increase the size of all the sections
Aug 19, 2015
095fed9
Position the text so that it is not sticking to the top of the page
Aug 19, 2015
f905688
Change the color and add information under support section
Aug 19, 2015
1d1a104
Add temporary content to FAQ section
Aug 19, 2015
bbfb1cc
Add new sections to login page used in production
Aug 19, 2015
5a6037f
Eliminate duplication of parallax code
Aug 19, 2015
de14517
Change the icon for toggling the sidebar
Aug 20, 2015
7e9467f
Make FAQ have two columns
Aug 20, 2015
da275de
Merge branch 'develop' into feature/ADD-MORE-SECTIONS
Aug 20, 2015
cc3609d
Merge branch 'feature/ADD-MORE-SECTIONS' into develop
Aug 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/redidropper/static/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.red-background {
background-color: #a51a11;
background-color: #993333;
}

a.logo-name:hover, a.logo-name:active,
Expand Down Expand Up @@ -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 {
Expand Down
104 changes: 97 additions & 7 deletions app/redidropper/static/css/parallax.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
Binary file added app/redidropper/static/img/red-oil-flipped.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/redidropper/static/img/translucent-oil.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions app/redidropper/static/js/jquery.anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
})
})
}
5 changes: 5 additions & 0 deletions app/redidropper/static/js/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
});
73 changes: 1 addition & 72 deletions app/redidropper/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
3 changes: 2 additions & 1 deletion app/redidropper/templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
71 changes: 1 addition & 70 deletions app/redidropper/templates/login_shib.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Loading