+ 
+
*/}
+
+
+
+
+
*/}
+
+ Public Happiness
+
+ 
+
+
+ 
+ if (format === 'speech-bubble') {
+ return (
+
+ {title}
+ history.push(path)}>
+
+ {dcsCount > 0 && badge === 'true' && renderBadge}
+
+
+ )
+ } else if (format === 'text-link') {
+ return (
+ history.push(path)}
+ className={className + ' dcs-link dcs-link-icons' + (dcsSelected ? ' dcs-selected' : '')}
+ >
+ {title}
+ {/* {' '} */}
{dcsCount > 0 && badge === 'true' && renderBadge}
-
- )
-
- else if (format === 'text-link') return (
- history.push(path)}
- className={className + ' dcs-link dcs-link-icons' + (dcsSelected ? ' dcs-selected' : '')}
- >
- {title}
- {/* {' '} */}
- {dcsCount > 0 && badge === 'true' && renderBadge}
-
- )
+ )
+ }
}
}
@@ -92,7 +94,7 @@ class DCSLink extends Component {
const BaseComponent = withRouter(withDcs(DCSLink))
export default class ExtendedComponent extends React.Component {
- render() {
+ render () {
return (
+ 
+ ))}
+
+ );
+};
+
+export default FloatingSlider;
diff --git a/imports/client/ui/components/FloatingSlider/styles.scss b/imports/client/ui/components/FloatingSlider/styles.scss
new file mode 100644
index 000000000..035cd8a15
--- /dev/null
+++ b/imports/client/ui/components/FloatingSlider/styles.scss
@@ -0,0 +1,46 @@
+/* Full-page container */
+.hero-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: white; /* Keeps it clean with white space */
+ overflow: hidden; /* Ensures no scrolling */
+ position: relative;
+}
+
+/* Text in the middle */
+.hero-text {
+ font-size: 3rem;
+ font-weight: bold;
+ color: black;
+ text-align: center;
+ z-index: 10; /* Keeps text above floating images */
+}
+
+/* Floating images */
+.floating-image {
+ position: absolute;
+ // width: 100px; /* Adjust size of floating images */
+ width: 100%;
+ animation: float 10s infinite ease-in-out;
+}
+
+/* Keyframes for floating animation */
+@keyframes float {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 25% {
+ transform: translate(30px, -20px);
+ }
+ 50% {
+ transform: translate(-20px, 30px);
+ }
+ 75% {
+ transform: translate(20px, -30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
\ No newline at end of file
diff --git a/imports/client/ui/components/HoursFormatted/index.js b/imports/client/ui/components/HoursFormatted/index.js
index 1d22a7f16..29cc33f80 100644
--- a/imports/client/ui/components/HoursFormatted/index.js
+++ b/imports/client/ui/components/HoursFormatted/index.js
@@ -33,7 +33,7 @@ const HoursFormatted = ({ data }) => {
)
}
- const isSameDay = startingDate.toDateString() === endingDate.toDateString();
+ const isSameDay = startingDate.toDateString() === endingDate.toDateString()
if (data.repeat) {
const {
@@ -86,10 +86,10 @@ const HoursFormatted = ({ data }) => {
)
const notForeverWeek = (
Welcome to My Hero Banner
+ {randomImages.map((image, index) => (
+
- {(data.repeat && occurences && startingWeekday === endingWeekday)
- && `until ${formatDateWithWords(recurrenceEndDate)}`}
- {(data.repeat && occurences && startingWeekday !== endingWeekday)
- && `until ${formatDateWithWords(adjustedEndDate)}`}
+ {(data.repeat && occurences && startingWeekday === endingWeekday) &&
+ `until ${formatDateWithWords(recurrenceEndDate)}`}
+ {(data.repeat && occurences && startingWeekday !== endingWeekday) &&
+ `until ${formatDateWithWords(adjustedEndDate)}`}
{(data.repeat && until) && `until ${formatDateWithWords(until)}`}
)
diff --git a/imports/client/ui/components/PageLoader/styles.scss b/imports/client/ui/components/PageLoader/styles.scss
index 8aeeed51d..71c127ffb 100644
--- a/imports/client/ui/components/PageLoader/styles.scss
+++ b/imports/client/ui/components/PageLoader/styles.scss
@@ -1,4 +1,4 @@
-@import '/imports/client/stylesheets/variables.scss';
+@import '{}/imports/client/stylesheets/variables.scss';
#loader {
display: flex;
diff --git a/imports/client/ui/components/ScrollToTop/index.js b/imports/client/ui/components/ScrollToTop/index.js
index db5a998f6..ea5c1d8ba 100644
--- a/imports/client/ui/components/ScrollToTop/index.js
+++ b/imports/client/ui/components/ScrollToTop/index.js
@@ -2,9 +2,9 @@ import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
class ScrollToTop extends Component {
- componentDidUpdate(prevProps) {
+ componentDidUpdate (prevProps) {
// Compare only path names, as we don't want to scroll to top when only
- // query params have changed. ALso, don't scroll when there's a Docuss
+ // query params have changed. ALso, don't scroll when there's a Docuss
// triggerId, as we will scroll to that trigger.
if (
this.props.location.pathname !== prevProps.location.pathname &&
@@ -14,7 +14,7 @@ class ScrollToTop extends Component {
}
}
- render() {
+ render () {
return this.props.children
}
}
diff --git a/imports/client/ui/components/SharePanel/index.js b/imports/client/ui/components/SharePanel/index.js
index a059ddfb0..41acae466 100644
--- a/imports/client/ui/components/SharePanel/index.js
+++ b/imports/client/ui/components/SharePanel/index.js
@@ -39,20 +39,18 @@ import './styles.scss'
// const url = window.location <-- set this to a live www. url to test
class SharePanel extends Component {
-
- constructor(props) {
+ constructor (props) {
super(props)
}
- render() {
-
+ render () {
const hoursReactComponent = HoursFormatted({ data: this.props.data })
const hoursText = drillDownToText(hoursReactComponent, '')
const url = window.location
- const string = i18n.Map.eventInfo.socialMedia.messagePre + document.title + "\n" + hoursText + "\n"
+ const string = i18n.Map.eventInfo.socialMedia.messagePre + document.title + '\n' + hoursText + '\n'
const title = string.replace(' Next:', 'Next:').replace(' Repeating:', '\nRepeating:')
-
+
return (
and
setIsHovered(true)} // Pause on hover
+ onMouseLeave={() => setIsHovered(false)} // Resume on mouse leave
+ >
+
+ );
+};
+
+export default SlideshowBanner;
\ No newline at end of file
diff --git a/imports/client/ui/components/SlideBanner/styles.scss b/imports/client/ui/components/SlideBanner/styles.scss
new file mode 100644
index 000000000..0923e4115
--- /dev/null
+++ b/imports/client/ui/components/SlideBanner/styles.scss
@@ -0,0 +1,306 @@
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Playwrite+DE+VA+Guides&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Figtree:ital,wght@0,300..900;1,300..900&family=Playwrite+DE+VA+Guides&display=swap');
+
+html, body {
+ overflow-x: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.slideshow-container {
+ position: relative;
+ width: 100%;
+ max-width: 100%;
+ margin: 0 auto;
+ aspect-ratio: 16/9;
+}
+
+.slideshow-wrapper {
+ display: flex;
+ transition: transform 0.5s ease-in-out; // Slide transition effect
+}
+
+.slideshow-slide {
+ min-width: 100%; // Each slide takes up full width
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ border-bottom: solid 6px orange;
+}
+
+.slide-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover; // Ensure the image covers the area without stretching or distorting
+ background-color: white;
+ aspect-ratio: 16/9;
+}
+
+.mobile-slide-header {
+ margin-top: 1rem;
+ text-align: center;
+ font-family: "Figtree", serif;
+ font-weight: 600;
+ font-size: 6vw;
+ text-align: center;
+ display: block;
+ color: rgb(0, 0, 0);
+ text-shadow: -3px -3px 2px white,
+ 3px -3px 2px white,
+ -3px 3px 2px white,
+ 3px 3px 2px white,
+ 4px 4px 8px white;
+}
+
+.desktop-slide-header {
+ display: none;
+}
+
+.slide-sub-header {
+ margin-top: 1rem;
+ padding: 0 1rem 0 1rem;
+ text-align: center;
+ font-family: "Crimson Text", serif;
+ font-weight: bold;
+ font-size: 4vw;
+}
+
+.slide-cta {
+ text-align: center;
+ padding: 0 0 0.5rem 0;
+ position: relative;
+ z-index: 10;
+}
+
+.slide-cta .cta-button {
+ position: relative;
+ z-index: 10;
+ display: inline-block;
+ pointer-events: auto;
+}
+
+.slideshow-container button {
+ position: absolute;
+ top: 30%;
+ background-color: rgba(0, 0, 0, 0.419);
+ color: white;
+ border: none;
+ padding: 16px;
+ cursor: pointer;
+ font-size: 24px;
+ transform: translateY(-50%);
+}
+
+.prev-button {
+ left: 10px;
+}
+
+.next-button {
+ right: 10px;
+}
+
+.slideshow-container button:hover {
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+/* For very small screens, like phones */
+@media (max-width: 480px) {
+ .slideshow-container button {
+ position: absolute;
+ top: 30%;
+ background-color: rgba(0, 0, 0, 0.419);
+ color: white;
+ border: none;
+ padding: 16px;
+ cursor: pointer;
+ font-size: 24px;
+ transform: translateY(-50%);
+ }
+
+ .prev-button, .next-button {
+ font-size: 18px;
+ padding: 10px;
+ }
+
+ .slideshow-container {
+ position: relative;
+ width: 100%;
+ max-width: 100%;
+ margin: 0 auto;
+ aspect-ratio: 16/9;
+ height: 30rem;
+ }
+
+ .slideshow-slide {
+ min-width: 100%;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+
+ .slide-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover; // Ensure the image covers the area without stretching or distorting
+ background-color: white;
+ aspect-ratio: 16/9;
+ }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+ .slideshow-container button {
+ position: absolute;
+ top: 30%;
+ background-color: rgba(0, 0, 0, 0.419);
+ color: white;
+ border: none;
+ padding: 16px;
+ cursor: pointer;
+ font-size: 24px;
+ transform: translateY(-50%);
+ }
+
+ .slideshow-container {
+ width: 100%; // Changed from 100vw
+ margin-left: 0; // Remove negative margins
+ margin-right: 0;
+ }
+
+ .prev-button, .next-button {
+ font-size: 20px;
+ padding: 12px;
+ }
+
+ .slide-image {
+ object-fit: cover;
+ }
+
+}
+
+@media (min-width: 1024px) {
+ .slideshow-container {
+ aspect-ratio: unset;
+ }
+
+ .slideshow-container button {
+ position: absolute;
+ top: 50%;
+ background-color: rgba(0, 0, 0, 0.419);
+ color: white;
+ border: none;
+ padding: 16px;
+ cursor: pointer;
+ font-size: 24px;
+ transform: translateY(-50%);
+ }
+
+ .slideshow-slide {
+ min-width: 100%; // Each slide takes up full width
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ align-items: center;
+ background-color: white;
+ // border-bottom: solid 6px orange;
+ }
+
+ .mobile-slide-header {
+ display: none;
+ }
+
+ .desktop-slide-header {
+ font-family: "Figtree", serif;
+ font-weight: 600;
+ font-size: 6vw;
+ text-align: center;
+ display: block;
+ color: rgb(0, 0, 0);
+ text-shadow: -3px -3px 2px white,
+ 3px -3px 2px white,
+ -3px 3px 2px white,
+ 3px 3px 2px white,
+ 4px 4px 8px white;
+ z-index: 1;
+ position: relative;
+ }
+
+ .slide-image {
+ width: 90%;
+ object-fit: cover; // Ensure the image covers the area without stretching or distorting
+ aspect-ratio: 16/9;
+ margin-top: -9vw;
+ }
+
+ .slide-sub-header-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ margin-top: -22vw;
+ }
+
+ .slide-sub-header {
+ font-family: "Crimson Text", serif;
+ font-weight: 500;
+ font-size: 4vw;
+ width: 80vw;
+ text-align: center;
+ color: rgb(0, 0, 0);
+ text-shadow: -2px -2px 3px white,
+ 2px -2px 3px white,
+ -2px 2px 3px white,
+ 2px 2px 3px white,
+ 2px 2px 4px white;
+ }
+
+ @media screen and (min-width: 768px) {
+ .slide-sub-header {
+ line-height: 1.1;
+ font-size: 3vw;
+ }
+
+ .slide-cta .cta-button {
+ transform: scale(0.70); // 70% CTA button size on desktop
+ }
+
+ .desktop-slide-header {
+ font-size: 4vw;
+ }
+}
+
+ .slide-cta{
+ padding: 0 0 1rem 0;
+ }
+
+ .slide-cta a {
+ --bs-btn-padding-y: 1rem;
+ --bs-btn-padding-x: 2rem;
+ --bs-btn-font-size: 2rem;
+ }
+}
+
+@media (min-width: 1280px) {
+ main {
+ .background-image {
+ display: block;
+ }
+
+ .mobile-banner {
+ display: none;
+ }
+ }
+}
+
+@media (min-width: 1536px) {
+ main {
+ .background-image {
+ display: block;
+ }
+
+ .mobile-banner {
+ display: none;
+ }
+ }
+}
diff --git a/imports/client/ui/components/Toggle/index.js b/imports/client/ui/components/Toggle/index.js
index 6990855d4..4dfb1f8f3 100644
--- a/imports/client/ui/components/Toggle/index.js
+++ b/imports/client/ui/components/Toggle/index.js
@@ -1,30 +1,30 @@
import React, { Component } from 'react'
-
+
class Toggle extends Component {
- constructor(props) {
- super(props);
- this.state = {
- isShow: false,
- }
+ constructor (props) {
+ super(props)
+ this.state = {
+ isShow: false
+ }
}
- componentDidUpdate(prevProps){
- if (prevProps.isShow !== this.props.isShow){
- this.setState({ isShow: this.props.isShow});
+ componentDidUpdate (prevProps) {
+ if (prevProps.isShow !== this.props.isShow) {
+ this.setState({ isShow: this.props.isShow })
}
}
-
+
toggle = () => {
- this.setState({ isShow: !this.sate.isShow });
+ this.setState({ isShow: !this.sate.isShow })
}
- render() {
- const {componentToToggle} = this.props
- return (
+ render () {
+ const { componentToToggle } = this.props
+ return (
+ {items.map((item, index) => (
+
+
+
+
+ 
+
+ ))}
+
+
+ {item.header}
+
+
+ {item.header}
+
+
+ {item.sub_header}
+
+
+
+
{item.title}
-
+
{item.title}
{item.title}
+
+
+
+
+ {second}
+{third}
+{fourth}
+{fifth}
+{first}
+ +About Us
@@ -21,9 +21,10 @@ class About extends Component {
- {buttons}
-
- )
+ return (
+
+ {buttons}
+
+ )
}
}
-
-export default CancelDeleteBtns;
+export default CancelDeleteBtns
diff --git a/imports/client/ui/pages/Admin/EventsDisplay/CategoryDropDown.js b/imports/client/ui/pages/Admin/EventsDisplay/CategoryDropDown.js
index 3c06e1d69..07be9e287 100644
--- a/imports/client/ui/pages/Admin/EventsDisplay/CategoryDropDown.js
+++ b/imports/client/ui/pages/Admin/EventsDisplay/CategoryDropDown.js
@@ -1,40 +1,40 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
class CategoryDropDown extends Component {
- constructor(props) {
- super(props);
+ constructor (props) {
+ super(props)
this.state = {
- value: "",
- };
- this.change = this.change.bind(this);
+ value: ''
+ }
+ this.change = this.change.bind(this)
}
- componentDidUpdate(prevProps,prevState){
- if (prevState.value !== this.state.value){
- this.props.changeCategory(this.state.value);
+ componentDidUpdate (prevProps, prevState) {
+ if (prevState.value !== this.state.value) {
+ this.props.changeCategory(this.state.value)
}
}
- change(event) {
+ change (event) {
const setValue = {
- value: event.target.value,
+ value: event.target.value
}
- this.setState(setValue);
+ this.setState(setValue)
}
- render() {
- const { allPosibleCategories} = this.props;
- const categoriesForDropDown = [];
- allPosibleCategories.forEach(ele=>{
- categoriesForDropDown.push();
+ render () {
+ const { allPosibleCategories } = this.props
+ const categoriesForDropDown = []
+ allPosibleCategories.forEach(ele => {
+ categoriesForDropDown.push()
})
return (
-
- {deleteBtn}
+ {deleteBtn}
-
+
{events}
-
+
- {EventToDisplay}
-
+ this.props.userEvents.forEach(ele => {
+ categories = categories.concat(ele.categories)
+ })
+
+ categories.forEach(ele => {
+ if (!seen[ele.name]) {
+ seen[ele.name] = true
+ distinctCategories.push(ele.name)
+ }
+ })
+ this.setState({ allPosibleCategories: distinctCategories,
+ allEvents: this.props.userEvents,
+ categoryEvents: this.props.userEvents })
+ }
+
+ render () {
+ const { isAllEvents, deleteAllEvents } = this.props
+ const { categoryEvents, allPosibleCategories, currentCategory } = this.state
+ const EventToDisplay = isAllEvents
+ ?
+ {EventToDisplay}
+
)
}
}
-
-export default EventsDisplay;
\ No newline at end of file
+
+export default EventsDisplay
diff --git a/imports/client/ui/pages/Admin/RoleSelect/index.js b/imports/client/ui/pages/Admin/RoleSelect/index.js
index 2851832c0..be6a5c364 100644
--- a/imports/client/ui/pages/Admin/RoleSelect/index.js
+++ b/imports/client/ui/pages/Admin/RoleSelect/index.js
@@ -1,25 +1,25 @@
-import React, { Component } from 'react';
-import { FormGroup, Label, Input } from 'reactstrap';
-import { roleOptions, user} from "./../RolesPermissions/index"
+import React, { Component } from 'react'
+import { FormGroup, Label, Input } from 'reactstrap'
+import { roleOptions, user } from './../RolesPermissions/index'
export const RadioInput = (props) => {
const { rolesData } = props
- //profile name could have duplication potential for users that sign in through google or facebook.
+ // profile name could have duplication potential for users that sign in through google or facebook.
// using database id would expose it on the front end
// instead generate a unique id and use profile name/email
- let name = generateUniqueId() + props.UserName;
+ let name = generateUniqueId() + props.UserName
return (
- roleOptions.map((role,i) => {
- // if role found set check or no role set to default user
- let checked = (rolesData.indexOf(role) !== -1 || (rolesData.length == 0 && role == user)) ? "checked" :null;
+ roleOptions.map((role, i) => {
+ // if role found set check or no role set to default user
+ let checked = (rolesData.indexOf(role) !== -1 || (rolesData.length == 0 && role == user)) ? 'checked' : null
return (
-
+
)
})
@@ -27,38 +27,36 @@ export const RadioInput = (props) => {
}
class RoleSelect extends Component {
- constructor(props) {
- super(props);
- this.state = { }
+ constructor (props) {
+ super(props)
+ this.state = { }
}
- render() {
- //current database documents do not contain roles yet so this is to check for their existance.
- let rolesData = this.props.rolesData == null ? [] : this.props.rolesData
- return (
+ render () {
+ // current database documents do not contain roles yet so this is to check for their existance.
+ let rolesData = this.props.rolesData == null ? [] : this.props.rolesData
+ return (
{toDisplay}
@@ -11,4 +11,4 @@ const UserDisplay = (props) => { ) } -export default UserDisplay; \ No newline at end of file +export default UserDisplay diff --git a/imports/client/ui/pages/Admin/UserSearch/index.js b/imports/client/ui/pages/Admin/UserSearch/index.js index 45b3adbb2..5ba1c2c28 100644 --- a/imports/client/ui/pages/Admin/UserSearch/index.js +++ b/imports/client/ui/pages/Admin/UserSearch/index.js @@ -1,18 +1,18 @@ -import React, { Component } from 'react'; -import {Form, FormGroup, Input, Button} from 'reactstrap' +import React, { Component } from 'react' +import { Form, FormGroup, Input, Button } from 'reactstrap' class UserSearch extends Component { - constructor(props) { - super(props); - this.userToSearch = React.createRef(); + constructor (props) { + super(props) + this.userToSearch = React.createRef() } searchForUser = (e) => { - e.preventDefault(); - this.props.searchForUser(this.userToSearch.current.value); + e.preventDefault() + this.props.searchForUser(this.userToSearch.current.value) } - render() { - return ( + render () { + return (Looking for answers?
- Take a look at frequently asked questions + Take a look at frequently asked questions
+
+ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+export default Item
diff --git a/imports/client/ui/pages/Home/EventsSection/Item-old/styles.scss b/imports/client/ui/pages/Home/EventsSection/Item-old/styles.scss
new file mode 100644
index 000000000..a9497cff5
--- /dev/null
+++ b/imports/client/ui/pages/Home/EventsSection/Item-old/styles.scss
@@ -0,0 +1,34 @@
+
+#how-to-help-section .item {
+
+ .icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto;
+ background-size: 70%;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ &.smiley {
+ background-image: url('/images/smiley.png');
+ }
+
+ &.friends {
+ background-image: url('/images/friends.png');
+ }
+
+ &.share {
+ background-image: url('/images/share.png');
+ }
+ }
+
+ .item-title {
+ font-size: 22px;
+ margin-bottom: 14px;
+ }
+
+ .item-text {
+ text-align: left;
+ font-size: 18px;
+ }
+}
diff --git a/imports/client/ui/pages/Home/EventsSection/Item/index.js b/imports/client/ui/pages/Home/EventsSection/Item/index.js
new file mode 100644
index 000000000..2b413fd0f
--- /dev/null
+++ b/imports/client/ui/pages/Home/EventsSection/Item/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import './styles.scss';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import {
+ Container,
+ Row,
+ Col,
+ Button,
+ Card,
+ CardBody,
+ CardTitle,
+ CardText,
+ CardSubtitle,
+ CardLink,
+} from 'reactstrap';
+
+const Item = ({ item, loginButton }) => (
+ {item.text}
+ {item.link !== undefined ? loginButton : null} ++ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+
+ {item.title}
+ {/*
+ {item.title}
+ */}
+
+ {item.description}
+
+
+ {item.categories.map((category, i) => (
+
+
+
+ {category.title}
+
+
+ /*
+
+
+ {category.title}
+
+ */
+ ))}
+
+ {title}
+ Couldn't find anything..
}
+ {/**/}
+ {
+ standaloneMode ?
+ Or
+
+ */}
Could not find anything..
} */}
+
+ )
+}
+
+const GatherLinkComponent = ({search, error, isGettingLocation}) => {
+ return (
+
+ Could not find anything..
} */}
+
+ )
+}
+
+const GatherHrefComponent = ({search, error, isGettingLocation}) => {
+ return (
+
+ {Home.first_title}
+ >{Home.first_title}{title}
- {items.map((item, i) => (
- {title}
+ {items.map((item, i) => (
+
+
+ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+export default Item
diff --git a/imports/client/ui/pages/Home/MovementSection/Item-old/styles.scss b/imports/client/ui/pages/Home/MovementSection/Item-old/styles.scss
new file mode 100644
index 000000000..a9497cff5
--- /dev/null
+++ b/imports/client/ui/pages/Home/MovementSection/Item-old/styles.scss
@@ -0,0 +1,34 @@
+
+#how-to-help-section .item {
+
+ .icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto;
+ background-size: 70%;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ &.smiley {
+ background-image: url('/images/smiley.png');
+ }
+
+ &.friends {
+ background-image: url('/images/friends.png');
+ }
+
+ &.share {
+ background-image: url('/images/share.png');
+ }
+ }
+
+ .item-title {
+ font-size: 22px;
+ margin-bottom: 14px;
+ }
+
+ .item-text {
+ text-align: left;
+ font-size: 18px;
+ }
+}
diff --git a/imports/client/ui/pages/Home/MovementSection/Item/index.js b/imports/client/ui/pages/Home/MovementSection/Item/index.js
new file mode 100644
index 000000000..2b413fd0f
--- /dev/null
+++ b/imports/client/ui/pages/Home/MovementSection/Item/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import './styles.scss';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import {
+ Container,
+ Row,
+ Col,
+ Button,
+ Card,
+ CardBody,
+ CardTitle,
+ CardText,
+ CardSubtitle,
+ CardLink,
+} from 'reactstrap';
+
+const Item = ({ item, loginButton }) => (
+ {item.text}
+ {item.link !== undefined ? loginButton : null} ++ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+
+ {item.title}
+ {/*
+ {item.title}
+ */}
+
+ {item.description}
+
+
+ {item.categories.map((category, i) => (
+
+
+
+ {category.title}
+
+
+ /*
+
+
+ {category.title}
+
+ */
+ ))}
+
+ {title}
+
+
+ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+export default Item
diff --git a/imports/client/ui/pages/Home/ProjectsSection/Item-old/styles.scss b/imports/client/ui/pages/Home/ProjectsSection/Item-old/styles.scss
new file mode 100644
index 000000000..a9497cff5
--- /dev/null
+++ b/imports/client/ui/pages/Home/ProjectsSection/Item-old/styles.scss
@@ -0,0 +1,34 @@
+
+#how-to-help-section .item {
+
+ .icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto;
+ background-size: 70%;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ &.smiley {
+ background-image: url('/images/smiley.png');
+ }
+
+ &.friends {
+ background-image: url('/images/friends.png');
+ }
+
+ &.share {
+ background-image: url('/images/share.png');
+ }
+ }
+
+ .item-title {
+ font-size: 22px;
+ margin-bottom: 14px;
+ }
+
+ .item-text {
+ text-align: left;
+ font-size: 18px;
+ }
+}
diff --git a/imports/client/ui/pages/Home/ProjectsSection/Item/index.js b/imports/client/ui/pages/Home/ProjectsSection/Item/index.js
new file mode 100644
index 000000000..2b413fd0f
--- /dev/null
+++ b/imports/client/ui/pages/Home/ProjectsSection/Item/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import './styles.scss';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import {
+ Container,
+ Row,
+ Col,
+ Button,
+ Card,
+ CardBody,
+ CardTitle,
+ CardText,
+ CardSubtitle,
+ CardLink,
+} from 'reactstrap';
+
+const Item = ({ item, loginButton }) => (
+ {item.text}
+ {item.link !== undefined ? loginButton : null} ++ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+
+ {item.title}
+ {/*
+ {item.title}
+ */}
+
+ {item.description}
+
+
+ {item.categories.map((category, i) => (
+
+
+
+ {category.title}
+
+
+ /*
+
+
+ {category.title}
+
+ */
+ ))}
+
+ {title}
+
+ 
+
+
+export default Item
diff --git a/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/Item/styles.scss b/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/Item/styles.scss
new file mode 100644
index 000000000..feb414b60
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/Item/styles.scss
@@ -0,0 +1,24 @@
+
+.c-item {
+
+ .contributor {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto;
+ }
+ img {
+ border-radius: 50%;
+ align-items: center;
+ }
+ .c-name-text {
+ text-align: center;
+ font-size: 12px;
+ }
+
+ @media screen and (max-width: 420px) {
+ .contributor{
+ width: 50px;
+ height: 50px;
+ }
+ }
+}
diff --git a/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/index.js b/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/index.js
new file mode 100644
index 000000000..682699bf9
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/index.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Row, Col } from 'reactstrap'
+import Item from './Item'
+import i18n from '/imports/both/i18n/en'
+import './styles.scss'
+
+const ContributorsI18N = i18n.Home.contributors_section
+
+const {
+ title,
+ content
+} = ContributorsI18N
+
+const {
+ items
+} = content
+
+const ContributorsSection = () => (
+ {item.name}
+
+
+ {items.map((item, i) => (
+
+
+)
+
+export default ContributorsSection
diff --git a/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/styles.scss b/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/styles.scss
new file mode 100644
index 000000000..34f5945bc
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/ContributorsSection/styles.scss
@@ -0,0 +1,28 @@
+@import '{}/imports/client/stylesheets/variables.scss';
+
+#contributors_section {
+ margin-bottom: 0;
+ padding-left: 40px;
+ padding-right: 40px;
+ background: $gray-lighter;
+ text-align: center;
+
+ .container {
+ max-width: 1000px;
+ margin: auto;
+ }
+
+ // Text Color
+ .title, .item-title, .c-item-title {
+ color: $black-lighter;
+ }
+ .c-item-title {
+ margin-bottom: 26px;
+ font-weight: bold;
+ font-size: 1.6em;
+ }
+ .allContButton {
+ margin: 0 auto;
+ text-align: center;
+ }
+}
diff --git a/imports/client/ui/pages/Home/oldhomepage/FirstSection/Find/__tests__/Find.test.js b/imports/client/ui/pages/Home/oldhomepage/FirstSection/Find/__tests__/Find.test.js
new file mode 100644
index 000000000..876675a82
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/FirstSection/Find/__tests__/Find.test.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Find from '../index.js'
+
+describe('{title}
+Couldn't find anything..
}
+ Or
+
+
+
+ {Home.first_title}
+
+
+ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
+
+export default Item
diff --git a/imports/client/ui/pages/Home/oldhomepage/HowToHelpSection/Item/styles.scss b/imports/client/ui/pages/Home/oldhomepage/HowToHelpSection/Item/styles.scss
new file mode 100644
index 000000000..a9497cff5
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/HowToHelpSection/Item/styles.scss
@@ -0,0 +1,34 @@
+
+#how-to-help-section .item {
+
+ .icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto;
+ background-size: 70%;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ &.smiley {
+ background-image: url('/images/smiley.png');
+ }
+
+ &.friends {
+ background-image: url('/images/friends.png');
+ }
+
+ &.share {
+ background-image: url('/images/share.png');
+ }
+ }
+
+ .item-title {
+ font-size: 22px;
+ margin-bottom: 14px;
+ }
+
+ .item-text {
+ text-align: left;
+ font-size: 18px;
+ }
+}
diff --git a/imports/client/ui/pages/Home/oldhomepage/HowToHelpSection/index.js b/imports/client/ui/pages/Home/oldhomepage/HowToHelpSection/index.js
new file mode 100644
index 000000000..564664f09
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/HowToHelpSection/index.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+import { Container, Row, Col, Button } from 'reactstrap'
+import Item from './Item'
+import i18n from '/imports/both/i18n/en'
+import ContributorsSection from '../ContributorsSection'
+import './styles.scss'
+
+const HowToHelpI18N = i18n.Home.how_to_help_section
+const { Home } = i18n
+
+class HowToHelpSection extends Component {
+ render (props) {
+ const {
+ title,
+ content
+ } = HowToHelpI18N
+
+ const {
+ items
+ } = content
+
+ // const isLoggedIn = !!this.props.user
+ const isLoggedIn = this.props.isLoggedIn
+ const loginButton =
+
+ return (
+ {item.text}
+ {item.link !== undefined ? loginButton : null} ++ {item.subText} + {item.link !== undefined && + {item.linktext} + } +
{title}
+ {items.map((item, i) => (
+
+
+
+
+ {item.text}
+
+
+export default Item
diff --git a/imports/client/ui/pages/Home/oldhomepage/SecondSection/Item/styles.scss b/imports/client/ui/pages/Home/oldhomepage/SecondSection/Item/styles.scss
new file mode 100644
index 000000000..17da5ec31
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/SecondSection/Item/styles.scss
@@ -0,0 +1,65 @@
+#second-section .item {
+ position: relative;
+ .icon {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto;
+ background-size: 70%;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ &.smiley {
+ background-image: url("/images/smiley.png");
+ }
+
+ &.friends {
+ background-image: url("/images/friends.png");
+ }
+
+ &.share {
+ background-image: url("/images/share.png");
+ }
+ }
+
+ .item-title {
+ font-size: 22px;
+ margin-bottom: 14px;
+ position: relative;
+
+ .speech-bubble {
+ position: absolute;
+ background: #f57b0081;
+ border-radius: 0.4em;
+ display: inline-block;
+ line-height: 16.8px;
+ height: 19.8px;
+ padding: 3px;
+ top: -40px;
+ left: 60%;
+
+ p {
+ font-size: 0.7rem;
+ }
+ }
+
+ .speech-bubble:after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 30%;
+ width: 0;
+ height: 0;
+ border: 21px solid transparent;
+ border-top-color: #f57b0081;
+ border-bottom: 0;
+ border-left: 0;
+ margin-left: -15.5px;
+ margin-bottom: -21px;
+ }
+ }
+
+ .item-text {
+ text-align: left;
+ font-size: 18px;
+ }
+}
diff --git a/imports/client/ui/pages/Home/oldhomepage/SecondSection/index.js b/imports/client/ui/pages/Home/oldhomepage/SecondSection/index.js
new file mode 100644
index 000000000..ef71d319b
--- /dev/null
+++ b/imports/client/ui/pages/Home/oldhomepage/SecondSection/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Container, Row, Col, Button } from 'reactstrap'
+
+import Item from './Item'
+
+import i18n from '/imports/both/i18n/en'
+import './styles.scss'
+
+const SecondSectionI18N = i18n.Home.second_section
+
+const {
+ title,
+ content
+} = SecondSectionI18N
+
+const {
+ items
+} = content
+
+class SecondSection extends React.Component {
+ render (props) {
+ return (
+
+ Click titles to discuss
}
+
+ {item.text}
+ {title}
+ {i18n.Map.filtersTitle}
-
-
+
+
)
}
-
+
handleItemClick = () => {
- this.props.onItemClick(this.props.item._id)
+ this.props.onItemClick(this.props.item._id)
}
}
ListItem.propTypes = {
item: PropTypes.object.isRequired,
userLocation: PropTypes.any,
- onItemClick: PropTypes.func.isRequired
+ onItemClick: PropTypes.func.isRequired,
}
export default ListItem
diff --git a/imports/client/ui/pages/Map/EventsList/EventsListItem/styles.scss b/imports/client/ui/pages/Map/EventsList/EventsListItem/styles.scss
index ea9815d11..0e5175185 100644
--- a/imports/client/ui/pages/Map/EventsList/EventsListItem/styles.scss
+++ b/imports/client/ui/pages/Map/EventsList/EventsListItem/styles.scss
@@ -1,9 +1,9 @@
-@import '/imports/client/stylesheets/variables.scss';
+@import '{}/imports/client/stylesheets/variables.scss';
.event-list-item {
position: relative;
min-height: 90px;
- max-height: 90px;
+ max-height: fit-content;
border-radius: 0 !important;
border-right: 0;
border-left: 0;
@@ -18,6 +18,7 @@
overflow: hidden;
text-overflow: ellipsis;
}
+
.name {
font-weight: bolder;
@@ -42,7 +43,27 @@
transition: color .15s ease;
&:hover {
- color: $primary-blue-hover;
+ //color: $primary-blue-hover;
}
}
+
+ &.highlighted{
+ font-size: 1.1em;
+ cursor: pointer;
+ transition: box-shadow,font-size .35s ease-in-out;
+ transform: translateY(-1px);
+ box-shadow: rgba(93, 93, 93, 0.10) 0px 30px 40px -12px inset,
+ rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+
+ }
+}
+
+.event-list-item:hover{
+ font-size: 1.1em;
+ cursor: pointer;
+ transition: box-shadow, font-size .35s ease-in-out;
+ transform: translateY(-1px);
+ box-shadow: rgba(93, 93, 93, 0.10) 0px 30px 40px -12px inset,
+ rgba(0, 0, 0, 0.3) 10px 18px 36px -18px inset;
+
}
diff --git a/imports/client/ui/pages/Map/EventsList/MinimizeButton/index.js b/imports/client/ui/pages/Map/EventsList/MinimizeButton/index.js
index 0d9455f10..df4d1b710 100644
--- a/imports/client/ui/pages/Map/EventsList/MinimizeButton/index.js
+++ b/imports/client/ui/pages/Map/EventsList/MinimizeButton/index.js
@@ -3,14 +3,14 @@ import { Button } from 'reactstrap'
import './styles.scss'
export default class MinimizeButton extends React.Component {
- constructor() {
+ constructor () {
super()
this.state = {
minimized: false
}
}
- componentDidMount() {
+ componentDidMount () {
// Comment this out for test failing(MinimizeButton.test). Not sure if will still need?
// document.body.querySelector('#minimize').classList.toggle('minimized')
}
@@ -19,7 +19,7 @@ export default class MinimizeButton extends React.Component {
this.setState({ minimized: !this.state.minimized })
}
- render() {
+ render () {
const { minimized } = this.state
return (
-
-
-
-
-
- {Object.keys(i18n.Team).map(team => {
- return (
-
-
-
-
- )
- })}
-
+const TeamMembers = () => (
+
+
+
+
+
+
+
+
+)
+
+export default FirstSection
diff --git a/imports/client/ui/pages/Template/FirstSection/styles.scss b/imports/client/ui/pages/Template/FirstSection/styles.scss
new file mode 100644
index 000000000..74c111601
--- /dev/null
+++ b/imports/client/ui/pages/Template/FirstSection/styles.scss
@@ -0,0 +1,20 @@
+
+
+#template {
+
+ .first-section {
+
+ .attachment-content {
+
+ iframe {
+ height: 85%;
+ width: 100%;
+ }
+
+ p {
+ font-size: .9em;
+ font-style: italic;
+ }
+ }
+ }
+}
diff --git a/imports/client/ui/pages/Template/SecondSection/index.js b/imports/client/ui/pages/Template/SecondSection/index.js
new file mode 100644
index 000000000..a42cfe493
--- /dev/null
+++ b/imports/client/ui/pages/Template/SecondSection/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
+import i18n from '/imports/both/i18n/en'
+import DCSLink from '/imports/client/ui/components/DCSLink/index.js'
+import './styles.scss'
+
+const { title, content } = i18n.Template.second_section
+const {
+ first,
+ second,
+ third,
+ fourth,
+ fifth,
+ youtubeLink
+} = content
+
+const SecondSection = () => (
+
+
+
+
+
+
+
+
+)
+
+export default SecondSection
diff --git a/imports/client/ui/pages/Template/SecondSection/styles.scss b/imports/client/ui/pages/Template/SecondSection/styles.scss
new file mode 100644
index 000000000..72814a8db
--- /dev/null
+++ b/imports/client/ui/pages/Template/SecondSection/styles.scss
@@ -0,0 +1,10 @@
+
+#template {
+
+ .second-section {
+
+ .row {
+ flex-flow: row-reverse;
+ }
+ }
+}
diff --git a/imports/client/ui/pages/Template/TopImageSection/index.js b/imports/client/ui/pages/Template/TopImageSection/index.js
new file mode 100644
index 000000000..743db32c7
--- /dev/null
+++ b/imports/client/ui/pages/Template/TopImageSection/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
+import i18n from '/imports/both/i18n/en'
+import './styles.scss'
+
+const { content } = i18n.Template.first_section
+const { top_image_url } = content
+
+const TopImageSection = () => (
+
+
+
+ 
+
+
+
+
+)
+
+export default TopImageSection
diff --git a/imports/client/ui/pages/Template/TopImageSection/styles.scss b/imports/client/ui/pages/Template/TopImageSection/styles.scss
new file mode 100644
index 000000000..64652dfe2
--- /dev/null
+++ b/imports/client/ui/pages/Template/TopImageSection/styles.scss
@@ -0,0 +1,15 @@
+#top-image-section {
+ margin-top: 0;
+ padding: 40px;
+ text-align: center;
+
+ .container {
+ max-width: 1000px;
+ margin: auto;
+ }
+
+ .top_image {
+ width: 100%;
+ height: auto;
+ }
+}
diff --git a/imports/client/ui/pages/Template/index.js b/imports/client/ui/pages/Template/index.js
new file mode 100644
index 000000000..4e27667ee
--- /dev/null
+++ b/imports/client/ui/pages/Template/index.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import TopImageSection from './TopImageSection'
+import FirstSection from './FirstSection'
+import SecondSection from './SecondSection'
+import AboutSection from '../Home/SecondSection'
+import i18n from '/imports/both/i18n/en'
+import './styles.scss'
+
+class About extends Component {
+ componentDidMount () {
+ window.__setDocumentTitle('Template')
+ }
+
+ render () {
+ return (
+
+
diff --git a/imports/client/ui/pages/WhitePaper/Intro/SecondSection/style.scss b/imports/client/ui/pages/WhitePaper/Intro/SecondSection/style.scss
index 555b0ba18..62b2067dd 100644
--- a/imports/client/ui/pages/WhitePaper/Intro/SecondSection/style.scss
+++ b/imports/client/ui/pages/WhitePaper/Intro/SecondSection/style.scss
@@ -1,22 +1,32 @@
-
#intro {
.second-section {
+ background: #FFF9EB;
.row {
- flex-flow: row-reverse;
+ flex-flow: row;
}
.attachment-content {
-
iframe {
- height: 85%;
width: 100%;
+ aspect-ratio: 16 / 9;
+ min-height: auto;
}
- p {
+ p.quote {
font-size: .9em;
font-style: italic;
+ margin-top: 10px;
+ text-align: center;
+ }
+ }
+
+ .text-content {
+ text-align: left;
+
+ p {
+ margin-bottom: 10px;
}
}
}
@@ -24,13 +34,10 @@
@media screen and (max-width: 751px) {
#intro {
-
- .second-section {
-
- .row {
- flex-flow: column;
- flex-wrap: wrap;
+ .second-section {
+ .row {
+ flex-flow: column-reverse;
+ }
}
}
}
-}
diff --git a/imports/client/ui/pages/WhitePaper/Intro/ThirdSection/index.js b/imports/client/ui/pages/WhitePaper/Intro/ThirdSection/index.js
new file mode 100644
index 000000000..144bdad06
--- /dev/null
+++ b/imports/client/ui/pages/WhitePaper/Intro/ThirdSection/index.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Container, Row, Col, Button } from 'reactstrap'
+import i18n from '/imports/both/i18n/en/'
+import './style.scss'
+
+const { title, content } = i18n.Whitepaper.Intro.third_section
+const {
+ first,
+ second,
+ third,
+ fourth,
+ youtubeLink,
+ cta
+} = content
+
+const ThirdSection = () => (
+
+
+
+
+ {cta && (
+
+
+ )}
+
+
+)
+
+export default ThirdSection
\ No newline at end of file
diff --git a/imports/client/ui/pages/WhitePaper/Intro/ThirdSection/style.scss b/imports/client/ui/pages/WhitePaper/Intro/ThirdSection/style.scss
new file mode 100644
index 000000000..1eae247b5
--- /dev/null
+++ b/imports/client/ui/pages/WhitePaper/Intro/ThirdSection/style.scss
@@ -0,0 +1,53 @@
+.third-section {
+ background: #fff;
+
+ .text-content {
+ max-width: 100%;
+ margin: 0;
+ text-align: left;
+
+ p {
+ margin-bottom: 10px;
+ }
+ }
+
+ .attachment-content {
+ iframe {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ min-height: auto;
+ }
+
+ p.quote {
+ font-size: .9em;
+ font-style: italic;
+ margin-top: 10px;
+ text-align: center;
+ }
+ }
+
+ .cta-wrapper {
+ margin-top: 30px;
+ text-align: center;
+
+ p {
+ font-weight: 500;
+ }
+
+ .btn {
+ margin-top: 8px;
+ padding: 10px 24px;
+ font-weight: 500;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ .text-content {
+ max-width: 100%;
+ }
+
+ .cta-wrapper {
+ text-align: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/index.js b/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/index.js
index b9dbe6032..848650d85 100644
--- a/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/index.js
+++ b/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/index.js
@@ -1,19 +1,16 @@
import React from 'react'
-import { Container, Row, Col } from 'reactstrap'
+import { Container } from 'reactstrap'
import i18n from '/imports/both/i18n/en/'
import './style.scss'
-const { content } = i18n.Whitepaper.Intro.first_section
-const {top_image_url} = content
+const { top_image_url } = i18n.Whitepaper.Intro
const TopImageSection = () => (
-
+
-
-
+
)
diff --git a/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/style.scss b/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/style.scss
index 64652dfe2..eb5be56a7 100644
--- a/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/style.scss
+++ b/imports/client/ui/pages/WhitePaper/Intro/TopImageSection/style.scss
@@ -13,3 +13,28 @@
height: auto;
}
}
+
+.top-image-section {
+ text-align: center;
+ padding: 20px 0;
+
+ .top-image-wrapper {
+ img {
+ max-width: 100%; /* Ensures image never exceeds container width */
+ height: auto; /* Maintains aspect ratio */
+ width: auto; /* Allows image to scale down naturally */
+ max-height: 150px; /* Limits maximum height */
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ padding: 10px 0;
+
+ .top-image-wrapper {
+ img {
+ max-width: 90%; /* Slightly smaller on mobile */
+ max-height: 100px; /* Smaller height on mobile */
+ }
+ }
+ }
+}
diff --git a/imports/client/ui/pages/WhitePaper/Intro/index.js b/imports/client/ui/pages/WhitePaper/Intro/index.js
index f6dfb7634..d836b17f9 100644
--- a/imports/client/ui/pages/WhitePaper/Intro/index.js
+++ b/imports/client/ui/pages/WhitePaper/Intro/index.js
@@ -6,6 +6,7 @@ import { Container } from 'reactstrap'
import TopImageSection from './TopImageSection'
import FirstSection from './FirstSection'
import SecondSection from './SecondSection'
+import ThirdSection from './ThirdSection'
import NavMenu from '../NavMenu'
// Styles and Other
@@ -26,8 +27,9 @@ class Intro extends Component {
- );
+ )
}
}
diff --git a/imports/client/ui/pages/WhitePaper/Intro/style.scss b/imports/client/ui/pages/WhitePaper/Intro/style.scss
index cac555bbb..044a95738 100644
--- a/imports/client/ui/pages/WhitePaper/Intro/style.scss
+++ b/imports/client/ui/pages/WhitePaper/Intro/style.scss
@@ -1,4 +1,4 @@
-@import '/imports/client/stylesheets/variables.scss';
+@import '{}/imports/client/stylesheets/variables.scss';
#about {
@@ -25,6 +25,12 @@
&.second-section {
background: $gray-lighter;
}
+
+ @media screen and (max-width: 768px) {
+ padding: 20px 0 !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
}
.title {
@@ -51,6 +57,10 @@
font-size: .9em;
font-style: italic;
}
+
+ @media screen and (max-width: 768px) {
+ margin-top: 12px !important;
+ }
}
@media screen and (max-width: 800px) {
@@ -67,7 +77,7 @@
}
.attachment-content {
- margin-top: 32px;
+ margin-top: 16px !important;
}
}
}
diff --git a/imports/client/ui/pages/WhitePaper/NavMenu.js b/imports/client/ui/pages/WhitePaper/NavMenu.js
index d4ba3d43f..73fdcde0d 100644
--- a/imports/client/ui/pages/WhitePaper/NavMenu.js
+++ b/imports/client/ui/pages/WhitePaper/NavMenu.js
@@ -22,7 +22,7 @@ const NavMenu = () => (
{route}
- );
+ )
})}
diff --git a/imports/client/ui/pages/WhitePaper/Why/Content.js b/imports/client/ui/pages/WhitePaper/Why/Content.js
index 9a261a428..18da11a0d 100644
--- a/imports/client/ui/pages/WhitePaper/Why/Content.js
+++ b/imports/client/ui/pages/WhitePaper/Why/Content.js
@@ -32,7 +32,7 @@ const Content = (props) => {
@@ -56,10 +55,10 @@ class EventInfo extends Component {
-
@@ -73,7 +72,7 @@ class EventInfo extends Component {
{event? event.overview : ''}
+ {event ? event.overview : ''}
)
@@ -90,7 +89,7 @@ class EventInfo extends Component {
openMoreInfo = () => {
const {
event,
- openMoreInfo,
+ openMoreInfo
} = this.props
openMoreInfo(event)
diff --git a/imports/client/ui/pages/Map/EventsList/EventInfo/styles.scss b/imports/client/ui/pages/Map/EventsList/EventInfo/styles.scss
index 604e2002f..8c4761e10 100644
--- a/imports/client/ui/pages/Map/EventsList/EventInfo/styles.scss
+++ b/imports/client/ui/pages/Map/EventsList/EventInfo/styles.scss
@@ -1,4 +1,4 @@
-@import '/imports/client/stylesheets/variables.scss';
+@import '{}/imports/client/stylesheets/variables.scss';
#event-info {
position: absolute;
diff --git a/imports/client/ui/pages/Map/EventsList/EventsListItem/index.js b/imports/client/ui/pages/Map/EventsList/EventsListItem/index.js
index 643dd4756..ddd137215 100644
--- a/imports/client/ui/pages/Map/EventsList/EventsListItem/index.js
+++ b/imports/client/ui/pages/Map/EventsList/EventsListItem/index.js
@@ -6,10 +6,12 @@ import './styles.scss'
class ListItem extends Component {
render () {
+
const {
item,
userLocation,
- userGravatar
+ userGravatar,
+ ishovered,
} = this.props
const {
@@ -18,30 +20,35 @@ class ListItem extends Component {
address
} = item
-
+ const listItemClass = `event-list-item clickable-list-item ${
+ ishovered ? "highlighted" : ""
+ }`;
return (
-
- {event? event.name : ''}
+ {event ? event.name : ''}
{categories}
{distance}
-
+
@@ -73,7 +72,7 @@ class EventInfo extends Component {
{i18n_.eventInfo.introTitle}
-
-
-
{name}
- {formatCategories(categories)}
- {formatMilesFromLocation(userLocation, address.location.coordinates)}
+ {name}
+ {formatCategories(categories)}
+ {formatMilesFromLocation(userLocation, address.location.coordinates)}
-
- );
+ )
}
}
-export default Members;
+export default Members
diff --git a/imports/client/ui/pages/Partners/index.js b/imports/client/ui/pages/Partners/index.js
index 536d742ca..5ea6957a6 100644
--- a/imports/client/ui/pages/Partners/index.js
+++ b/imports/client/ui/pages/Partners/index.js
@@ -1,7 +1,7 @@
-import React from "react";
-import { Container, Row, Col } from "reactstrap";
-import i18n from "/imports/both/i18n/en";
-import Members from "./Members";
+import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
+import i18n from '/imports/both/i18n/en'
+import Members from './Members'
const Index = () => (
@@ -11,6 +11,6 @@ const Index = () => (
-);
+)
-export default Index;
+export default Index
diff --git a/imports/client/ui/pages/TeamMembers/Members.js b/imports/client/ui/pages/TeamMembers/Members.js
index d5127afca..ea1e284c3 100644
--- a/imports/client/ui/pages/TeamMembers/Members.js
+++ b/imports/client/ui/pages/TeamMembers/Members.js
@@ -1,25 +1,25 @@
// External Packages
-import React, { Component, Fragment } from "react"
-import PropTypes from "prop-types"
+import React, { Component, Fragment } from 'react'
+import PropTypes from 'prop-types'
import {
- Row,
- Container,
- Col,
- Card,
- CardImg,
- CardText,
- CardBody,
- CardTitle,
- CardSubtitle,
- Button
-} from "reactstrap"
+ Row,
+ Container,
+ Col,
+ Card,
+ CardImg,
+ CardText,
+ CardBody,
+ CardTitle,
+ CardSubtitle,
+ Button
+} from 'reactstrap'
// Styles and Other
-import "./styles.scss"
-import i18n from "../../../../both/i18n/en"
+import './styles.scss'
+import i18n from '../../../../both/i18n/en'
class Members extends Component {
- render() {
+ render () {
const teamData = i18n.Team[this.props.team].members
return (
@@ -32,7 +32,7 @@ class Members extends Component {
- );
+ )
})}
- );
+ )
}
}
@@ -127,4 +127,4 @@ Members.propTypes = {
team: PropTypes.string.isRequired
}
-export default Members;
+export default Members
diff --git a/imports/client/ui/pages/TeamMembers/index.js b/imports/client/ui/pages/TeamMembers/index.js
index fabb9ddd0..ce48f45af 100644
--- a/imports/client/ui/pages/TeamMembers/index.js
+++ b/imports/client/ui/pages/TeamMembers/index.js
@@ -1,41 +1,21 @@
// External Packages
import React, { Fragment } from 'react'
-import { Container} from 'reactstrap'
+import { Container } from 'reactstrap'
// Components
import Members from './Members'
+import NavMenu from '../WhitePaper/NavMenu'
// Styles and Other
import './styles.scss'
import i18n from '/imports/both/i18n/en'
-const Index = () => (
-
@@ -29,7 +29,7 @@ class Members extends Component {
- );
+ )
})}
- @@ -54,7 +54,7 @@ class Members extends Component {
- @@ -65,7 +65,7 @@ class Members extends Component {
- @@ -76,7 +76,7 @@ class Members extends Component {
- @@ -87,7 +87,7 @@ class Members extends Component {
- @@ -98,7 +98,7 @@ class Members extends Component {
- @@ -111,13 +111,13 @@ class Members extends Component {
- @@ -57,7 +57,7 @@ class Members extends Component {
- @@ -68,7 +68,7 @@ class Members extends Component {
- @@ -79,7 +79,7 @@ class Members extends Component {
- @@ -90,7 +90,7 @@ class Members extends Component {
- @@ -101,7 +101,7 @@ class Members extends Component {
- @@ -114,12 +114,12 @@ class Members extends Component {
Meet the Team
-Find out more about the amazing people building this platform and movement
- {Object.keys(i18n.Team).map(team => { - return ( - - {i18n.Team[team].title} - - ) - })} -{i18n.Team[team].title}
-
+
)
-export default Index
+export default TeamMembers
diff --git a/imports/client/ui/pages/Template/FirstSection/index.js b/imports/client/ui/pages/Template/FirstSection/index.js
new file mode 100644
index 000000000..31b7f32bc
--- /dev/null
+++ b/imports/client/ui/pages/Template/FirstSection/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
+import i18n from '/imports/both/i18n/en'
+import DCSLink from '/imports/client/ui/components/DCSLink/index.js'
+import './styles.scss'
+
+const { title, content } = i18n.Template.first_section
+const {
+ first,
+ second,
+ third,
+ fourth,
+ fifth,
+ youtubeLink
+} = content
+
+const FirstSection = () => (
+ Our Team
+
+
+
+
+
+ {second}
+{third}
+{fourth}
+{fifth}
+{first}
+ +
+
+
+
+
+ {second}
+{third}
+{fourth}
+{fifth}
+{first}
+ +
+
+ )
+ }
+}
+
+export default Template
diff --git a/imports/client/ui/pages/Template/styles.scss b/imports/client/ui/pages/Template/styles.scss
new file mode 100644
index 000000000..802e2eeec
--- /dev/null
+++ b/imports/client/ui/pages/Template/styles.scss
@@ -0,0 +1,77 @@
+@import '{}/imports/client/stylesheets/variables.scss';
+
+
+#template {
+
+ &>h2 {
+ margin: 25px 0;
+ padding: 15px 0;
+ text-align: center;
+ }
+
+ &>.header-divider {
+ height: 1px;
+ width: 240px;
+ margin: -25px auto 0 auto;
+ text-align: center;
+ background: #007bff;
+ opacity: .4;
+ }
+
+ section {
+ margin-top: 16px;
+ margin-bottom: 32px;
+ padding: 48px 32px;
+
+ &.second-section {
+ background: $gray-lighter;
+ }
+ }
+
+ .title {
+ margin-bottom: 16px;
+ font-size: 26px;
+ }
+
+ .text-content {
+
+ p {
+ margin-bottom: 10px;
+ }
+ }
+
+ .attachment-content {
+
+ iframe {
+ height: 85%;
+ width: 100%;
+ min-height: 300px;
+ }
+
+ p {
+ font-size: .9em;
+ font-style: italic;
+ }
+ }
+
+ @media screen and (max-width: 800px) {
+ & {
+
+ .container {
+
+ .row {
+ flex-flow: column;
+
+ &>div { // each column
+ width: 100%;
+ max-width: 100%;
+ }
+
+ .attachment-content {
+ margin-top: 32px;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/imports/client/ui/pages/WhitePaper/Intro/FirstSection/index.js b/imports/client/ui/pages/WhitePaper/Intro/FirstSection/index.js
index 1daeccac7..68fa0a59e 100644
--- a/imports/client/ui/pages/WhitePaper/Intro/FirstSection/index.js
+++ b/imports/client/ui/pages/WhitePaper/Intro/FirstSection/index.js
@@ -1,15 +1,13 @@
import React from 'react'
import { Container, Row, Col } from 'reactstrap'
import i18n from '/imports/both/i18n/en/'
-import '././style.scss'
+import './style.scss'
const { title, content } = i18n.Whitepaper.Intro.first_section
const {
first,
second,
third,
- fourth,
- fifth,
youtubeLink
} = content
@@ -22,13 +20,11 @@ const FirstSection = () => (
Template Page
+ +{second}
{third}
-{fourth}
-{fifth}
{first}
+{first}
diff --git a/imports/client/ui/pages/WhitePaper/Intro/FirstSection/style.scss b/imports/client/ui/pages/WhitePaper/Intro/FirstSection/style.scss index 048fef9f9..cee72e1b0 100644 --- a/imports/client/ui/pages/WhitePaper/Intro/FirstSection/style.scss +++ b/imports/client/ui/pages/WhitePaper/Intro/FirstSection/style.scss @@ -1,5 +1,3 @@ - - #intro { .first-section { @@ -7,14 +5,22 @@ .attachment-content { iframe { - height: 85%; width: 100%; + aspect-ratio: 16 / 9; + min-height: auto; } p { font-size: .9em; font-style: italic; } + + p.quote { + font-size: .9em; + font-style: italic; + margin-top: 10px; + text-align: center; + } } } } diff --git a/imports/client/ui/pages/WhitePaper/Intro/SecondSection/index.js b/imports/client/ui/pages/WhitePaper/Intro/SecondSection/index.js index 9981c6434..d20a867f9 100644 --- a/imports/client/ui/pages/WhitePaper/Intro/SecondSection/index.js +++ b/imports/client/ui/pages/WhitePaper/Intro/SecondSection/index.js @@ -1,7 +1,7 @@ import React from 'react' import { Container, Row, Col } from 'reactstrap' import i18n from '/imports/both/i18n/en/' -import '././style.scss' +import './style.scss' const { title, content } = i18n.Whitepaper.Intro.second_section const { @@ -9,7 +9,6 @@ const { second, third, fourth, - fifth, youtubeLink } = content @@ -17,19 +16,18 @@ const SecondSection = () => ({title}
+
- {first}
{second}
{third}
-{fourth}
-{fifth}
+ {fourth &&{fourth}
}{first}
-{title}
+
+
+
+ {first}
+{second}
+{fourth}
+{third}
+ +{cta.text}
+ + +
+ 
+
Longer
@@ -56,10 +56,10 @@ const Content = (props) => {
- Clear
-
-
- {children}
-
-
- )
-
-ErrorsField.contextTypes = BaseField.contextTypes
-
-export default ErrorsField
diff --git a/imports/client/utils/uniforms-custom/InputField.js b/imports/client/utils/uniforms-custom/InputField.js
deleted file mode 100644
index f903e9d26..000000000
--- a/imports/client/utils/uniforms-custom/InputField.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import connectField from 'uniforms/connectField'
-import { FormGroup, Label, Input } from 'reactstrap'
-
-const Text = ({
- className,
- id,
- label,
- name,
- onChange,
- placeholder,
- type,
- value,
- max,
- min,
- customType,
- error,
- ...props
-}) =>
- -
- {schema.getErrorMessages(error).map((message, index) =>
-
- - {message} - - )} -
{`${max - value.length} characters left`}
}
-