Skip to content

Commit

Permalink
Merge branch 'develop-landing-page' into develop-landing-page-landing…
Browse files Browse the repository at this point in the history
…-page-header-#121

# Conflicts:
#	src/ctree-app/ctree-landing.html
  • Loading branch information
CSchmitz81 committed May 21, 2020
2 parents 8a2a649 + b53d7e4 commit e64b97c
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 42 deletions.
Binary file added images/looping-arrows.png
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 images/magnifying-glass.png
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 images/pencil.png
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 images/shared-hands.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 17 additions & 42 deletions src/ctree-app/ctree-landing.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@

<link rel="import" href="ctree-app-icon.html">
<link rel="import" href="icons.html">
<link rel="import" href="features-section.html">

<link rel="import" href="../ctree-testimonials/ctree-testimonials.html">

Expand All @@ -79,6 +80,8 @@
display: block;
--app-primary-color: #5F9F00;
--app-secondary-color: black;
--app-header-padding-fix: 65px;
--app-header-margin-fix: -65px;
}
#mainLayout app-toolbar {
padding: 15px 10px 10px 15px;
Expand Down Expand Up @@ -115,7 +118,13 @@
height: 6%;
}
app-header paper-icon-button {

--paper-icon-button-ink-color: white;
}
#navDrawer {
display: none;
}
paper-tab {
width: 0;
}


Expand Down Expand Up @@ -171,10 +180,6 @@
font-size: 4em;
}

#features-horizontal-line {
margin-top: -35px;
}

/* social media icon bar stuff */
#social-media-icon-bar ul {
list-style: none;
Expand Down Expand Up @@ -314,6 +319,9 @@
#headerTitle, #menuButton {
display: inline-block;
}
#navDrawer {
display: block;
}
h1 {
font-size: 4em;
text-align: center;
Expand All @@ -323,12 +331,8 @@
text-align: center;
}
#features {
font-size: .75em;
text-align: center;
}
#features-horizontal-line {
margin-top: -15px;
}
#ctree {
font-size: .75em;
text-align: center;
Expand Down Expand Up @@ -426,10 +430,6 @@
background-color: #DBE8DE;
color: #63A375;
}
#features.section-styling {
background-color: #FFFFFF;
color: #196848;
}
#ctree.section-styling {
background-color: #196848;
color: #FFFFFF;
Expand Down Expand Up @@ -558,34 +558,9 @@
<div id="feedback" class="section-styling">
<ctree-testimonials></ctree-testimonials>
</div>
<div id="features" class="section-styling">
<div class= "center-div">
<h1 align="center">Features</h1>
<hr id="features-horizontal-line"/>
<!-- grid layout to be added here with icons and descriptions. -->
</div>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
<p>W</p>
</div>

<features-section id="features"></features-section>

<div id="ctree" class="section-styling">
<p>W</p>
<p>W</p>
Expand Down Expand Up @@ -659,7 +634,7 @@ <h2>Test Collaboration Tree!</h2>
</div>
</app-header-layout>

<app-drawer id="navDrawer" class="nav-drawer" align="right" position="right" swipe-open>
<app-drawer id="navDrawer" align="right" position="right" swipe-open>
<ul>
<li>
<a href="[[rootPath]]?section=overview" on-click="_toggleDrawer">
Expand Down
154 changes: 154 additions & 0 deletions src/ctree-app/features-section.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!--
@license
Copyright (c) 2017 Foundation For an Innovative Future (InnovativeFuture.org)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or any
later version.
Foundation For an Innovative Future reserves the right to release the
covered work, in part or in whole, under a different open source
license and/or with specific copyleft exclusions. Such a release
would not invalidate the license for this project, although the
project released with a modified license would not be considered
part of this covered work or subject to the copyleft portions of this
license even if the projects are identical.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Please email [email protected] for inquiries related to
this license.
-->

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/dom-repeat.html">
<link rel="import" href="../ctree-icons/ctree-landing-icons.html">

<dom-module id="features-section">
<template>
<style>
:host {
display: block;
background-color: #FFFFFF;
color: #196848;
padding-top: var(--app-header-padding-fix);
margin-top: var(--app-header-margin-fix);
}
iron-icon {
--iron-icon-width: 100px;
--iron-icon-height: 100px;
}
h1 {
color: #62A374;
text-align: center;
font-size: 2.9em;
letter-spacing: .02em;
}
h3 {
font-size: 1.25em;
color: #62A374;
text-transform: capitalize;
margin-top: 0;
}
p {
color: #000000;
font-size: 0.85em;
letter-spacing: .027em;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 25px 0 75px 0;
}
.item {
display: flex;
width: 400px;
margin-bottom: 75px;
}
.image {
margin-right: 50px;
}
/* Mobile Phones */
@media (max-width: 500px) {
.container {
padding: 0;
}
h3 {
margin-top: 20px;
}
div p {
margin: 0 45px;
}
div .item {
display: block;
width: 90%;
}
div .image {
margin-right: 0;
}
}
</style>

<h1>Features</h1>
<div class="container">
<dom-repeat items="[[sections]]" as="section">
<template>
<div class="item">
<div class="image">
<iron-icon src="../../images/[[section.image_name]].png"></iron-icon>
</div>
<div>
<h3>[[section.name]]</h3>
<p>
[[section.description]]
</p>
</div>
</div>
</template>
</dom-repeat>
</div>
</template>

<script>

class FeaturesSection extends Polymer.Element {

static get is() { return 'features-section'; }

static get properties() {
return {
sections: {
type: Array,
value: () => [
{name: 'collaboration',
description: 'Connect with like-minded passionate individuals to solve problems for a cause.',
image_name: 'pencil'},
{name: 'search',
description: 'Discover non-profits and other causes doing good for the world!',
image_name: 'magnifying-glass'},
{name: 'share',
description: 'Promote other helpful thoughts and discussions to avoid seeing the same answers over and over again',
image_name: 'shared-hands'},
{name: 'review',
description: 'Edit and Vote for the most helpful version of ideas and solutions',
image_name: 'looping-arrows'}
]
}
};
}
}

window.customElements.define(FeaturesSection.is, FeaturesSection);
</script>
</dom-module>
39 changes: 39 additions & 0 deletions src/ctree-icons/ctree-landing-icons.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!--
@license
Copyright (c) 2017 Foundation For an Innovative Future (InnovativeFuture.org)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or any
later version.
Foundation For an Innovative Future reserves the right to release the
covered work, in part or in whole, under a different open source
license and/or with specific copyleft exclusions. Such a release
would not invalidate the license for this project, although the
project released with a modified license would not be considered
part of this covered work or subject to the copyleft portions of this
license even if the projects are identical.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Please email [email protected] for inquiries related to
this license.
-->

<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="icons" size="24">
<svg><defs>
<g id="magnifying-glass"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></g>
<g id="pencil"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
<g id="looping-arrows"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"></path></g>
</defs></svg>
</iron-iconset-svg>

0 comments on commit e64b97c

Please sign in to comment.