Skip to content
Snippets Groups Projects
Commit fe9e760c authored by Bowen Lin's avatar Bowen Lin
Browse files

Updated UI and added contacts page

parent fa31b89a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 269 additions and 47 deletions
src/App.js
+ 2
− 0
View file @ fe9e760c
...@@ -10,6 +10,7 @@ import Home from "./components/Home"; ...@@ -10,6 +10,7 @@ import Home from "./components/Home";
import Logo from './components/Logo'; import Logo from './components/Logo';
import Abort from './components/AbortionInfo'; import Abort from './components/AbortionInfo';
import About from './components/About'; import About from './components/About';
import Contact from './components/Contact'
function App() { function App() {
return ( return (
...@@ -20,6 +21,7 @@ function App() { ...@@ -20,6 +21,7 @@ function App() {
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/abort" element={<Abort />} /> <Route path="/abort" element={<Abort />} />
<Route path="/about" element={<About />} /> <Route path="/about" element={<About />} />
<Route path="/contacts" element={<Contact />} />
</Routes> </Routes>
</Router> </Router>
</> </>
......
src/components/About.js
+ 92
− 1
View file @ fe9e760c
import Menu from "./Menu.js"; import Menu from "./Menu.js";
import '../styles/Body.css'; import '../styles/Body.css';
import '../styles/Abort.css';
function Abort() { function Abort() {
return( return(
<div className="App"> <div className="App">
<Menu current="About Us" /> <Menu current="About Us" />
<div className="Body"> <div className="Body">
asdf <div className="et_pb_row et_pb_row_0">
<div className="et_pb_column et_pb_column_4_4 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div className="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
<div className="et_pb_text_inner">
<h2>
Our&nbsp;Story
</h2>
<p>
The Sexual Health Options, Resources &amp; Education – SHORE Centre was founded in 1972 and originally named Planned Parenthood Kitchener-Waterloo, followed by Planned Parenthood Waterloo Region. The Centre grew out of the Birth Control Centre at the University of Waterloo in order to provide all residents of our community with sexual health information and support. SHORE Centre’s&nbsp;founders included a librarian, a social worker, a doctor and nurse, Catherine “Kitty” Francis. Watch&nbsp;the video below to hear Kitty Francis tell our founding story.
</p>
<p>
&nbsp;
</p>
</div>
</div>
<div className="et_pb_module et_pb_video et_pb_video_0">
<div className="et_pb_video_box">
<div className="fluid-width-video-wrapper">
<iframe title="Promoting Choice for 45 Years" src="https://www.youtube.com/embed/4hJyt9hykMY?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" name="fitvid0">
</iframe>
</div>
</div>
</div>
</div>
</div>
<div className="et_pb_row et_pb_row_1">
<div className="et_pb_column et_pb_column_2_3 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough">
<div className="et_pb_module et_pb_text et_pb_text_1 et_pb_text_align_left et_pb_bg_layout_light">
<div className="et_pb_text_inner">
<h2>
Our Vision
</h2>
<p>
SHORE Centre imagines a community that values sexual health and&nbsp;reproductive freedom as essential for people to live their best lives.
</p>
<h2>
Our Mission
</h2>
<p>
SHORE Centre offers exceptional and inclusive sexual and reproductive&nbsp;health services in our community that uphold the dignity of everyone.
</p>
<h2>
Our&nbsp;Values
</h2>
<p>
<strong>
Accessible:
</strong> We strive to make our programs and services welcoming to all&nbsp;and barrier-free.
</p>
<p>
<strong>
Inclusive:
</strong> We celebrate diversity and respect the unique lived experiences of&nbsp;every person in our community. We are sex positive and value sexual and&nbsp;gender diversity.
</p>
<p>
<strong>
Accurate:
</strong> Our programs and services are modeled on scientific evidence&nbsp;and best-practices as well as the lived experience of the people we work&nbsp;with.
</p>
<p>
<strong>
Courageous:
</strong> We fearlessly advocate for the human right of bodily&nbsp;autonomy and boldly defend choice as we adapt to policy and system&nbsp;changes.
<span className="abort">
&nbsp;
</span>
</p>
<p>
SHORE Centre is affiliated to the <a href="http://www.ippf.org/">International Planned Parenthood Federation</a> through our membership with <a href="http://www.sexualhealthandrights.ca/">Action Canada for Sexual Health and Rights</a>&nbsp;and are members of the <a href="http://www.nafcanada.org/" target="_blank" rel="noopener noreferrer">National Abortion Federation</a>. For more information about SHORE Centre’s work, please review our <a href="https://www.shorecentre.ca/wp-content/uploads/2020-21-Annual-Report.pdf" target="_blank" rel="noopener noreferrer">Annual Report</a>, <a href="https://www.shorecentre.ca/wp-content/uploads/Strategic-Plan-2020-2023.pdf" rel="attachment wp-att-14801">Strategic Plan, </a>and <a href="https://www.shorecentre.ca/wp-content/uploads/2021-Financial-Statements.pdf">Audited Financial Statements</a>.
</p>
</div>
</div>
</div>
<div className="et_pb_column et_pb_column_1_3 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div className="et_pb_module et_pb_image et_pb_image_0 et-animated et_had_animation">
<span className="et_pb_image_wrap "><img src="https://www.shorecentre.ca/wp-content/uploads/inclusive.jpg" alt="" title="" height="auto" width="auto" srcSet="https://www.shorecentre.ca/wp-content/uploads/inclusive.jpg 600w, https://www.shorecentre.ca/wp-content/uploads/inclusive-300x227.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" className="wp-image-2050"/></span>
</div>
<div className="et_pb_module et_pb_text et_pb_text_2 et_pb_text_align_left et_pb_bg_layout_light">
<div className="et_pb_text_inner">Our office is barrier-free and interpretation is available upon request.&nbsp;Our programs, services and policies are inclusive of all genders, orientations, abilities, ages and cultures.</div>
</div>
<div className="et_pb_module et_pb_text et_pb_text_3 et_pb_text_align_left et_pb_bg_layout_light">
<div className="et_pb_text_inner"><a href="https://livingwagewr.org/" target="_blank" rel="noopener noreferrer"><img className="size-medium wp-image-986 alignleft" src="https://www.shorecentre.ca/wp-content/uploads/LWWR-Logo-300x229.png" alt="LWWR Logo" width="300" height="229" srcSet="https://www.shorecentre.ca/wp-content/uploads/LWWR-Logo-300x229.png 300w, https://www.shorecentre.ca/wp-content/uploads/LWWR-Logo.png 448w" sizes="(max-width: 300px) 100vw, 300px"/></a><p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>We are proud to be a Living Wage Employer.</p></div>
</div>
</div>
</div>
</div> </div>
</div> </div>
) )
......
src/components/Contact.js 0 → 100644
+ 41
− 0
View file @ fe9e760c
import Menu from './Menu.js'
import '../styles/Contact.css'
import constants from '../constants/constants'
function newTab(url) {
window.open(url, "_blank")
}
function Contact() {
var key = 0;
var contactItems = constants.contactItems.map((tuple) =>
<div key={key++} className="small-12 referral-results-clinic">
<h3>{tuple.name}</h3>
{tuple.description === "" ? null : <h5>{tuple.description}</h5>}
<span>Website: </span>
<span className="link" onClick={() => newTab(tuple.website)}>
{tuple.website}
</span>
<p className="phone">
Phone: {tuple.phoneNumber}
</p>
<p>
Email: {tuple.email}
</p>
</div>
)
return (
<div className="App">
<Menu current="Contacts" />
<div className="Body">
<h1>Contacts</h1>
<p>Contacts for questions or more information. Links on this page will open a new tab.</p>
<div className="contacts-container">
{contactItems}
</div>
</div>
</div>
)
}
export default Contact;
\ No newline at end of file
src/components/Home.js
+ 22
− 28
View file @ fe9e760c
...@@ -3,41 +3,23 @@ import '../styles/Body.css'; ...@@ -3,41 +3,23 @@ import '../styles/Body.css';
import '../styles/App.css'; import '../styles/App.css';
function Home() { function Home() {
function Start() {
window.open("https://www.choiceconnect.ca", "_self")
}
return ( return (
<div className="App"> <div className="App">
<Menu current="Homepage"/> <Menu current="Homepage"/>
<div className="Body"> <div className="Body">
<div class="loc-link" id="fr-CA">Utilisez ce site en Français</div> <div className="loc-link" id="fr-CA">Utilisez ce site en Français</div>
<div> <div>
Choice Connect helps you find your nearest abortion provider based on your needs. The app features detailed referral information for more than 120 abortion providers and clinics across Canada. The web app is anonymous and free to use. Choice Connect helps you find your nearest abortion provider based on your needs. The app features detailed referral information for more than 120 abortion providers and clinics across Canada. The web app is anonymous and free to use.
</div> </div>
<div> <div>
<br/> <br />
By answering the following questions, you will be provided with the contact information for the abortion providers who best meet your needs. If you are not certain about your decision to have an abortion or would like to speak with a support worker, please contact In order to use the app, some information must be obtained. A pregnancy test and an ultrasound must have been taken prior to using this app. If you have not obtained results from other, please consult with your pharmacy and ultrasound clinic to get the results.
<a href="http://www.sexualhealthandrights.ca/about-us/#contact" target="_blank" rel="noopener"> </div>
<strong> <div>
Action Canada for Sexual Health &amp; Rights
</strong>
</a>
<strong>
'
</strong>
Access Line at
<span class="phoneNumber">
1-888-642-2725
</span>
. If you are located in BC, please call
<a href="https://www.optionsforsexualhealth.org/sex-sense/" target="_blank" rel="noopener">
<strong>
Sex Sense
</strong>
</a>
at
<span class="phoneNumber">
1-800-739-7367
</span>
for information and resources related to abortion care.&nbsp;
<br/>
<br/> <br/>
Please be aware that due to the recent COVID-19 outbreak, many clinics are adjusting their policies and procedures to ensure the health and safety of both staff and patients. Please reach out to individual abortion providers, but be aware that some clinics are having to change the services they are able to provide. Please be aware that due to the recent COVID-19 outbreak, many clinics are adjusting their policies and procedures to ensure the health and safety of both staff and patients. Please reach out to individual abortion providers, but be aware that some clinics are having to change the services they are able to provide.
</div> </div>
...@@ -45,7 +27,7 @@ function Home() { ...@@ -45,7 +27,7 @@ function Home() {
<br/> <br/>
This tool is designed for people who live in Canada. If you live in the United States, please contact the This tool is designed for people who live in Canada. If you live in the United States, please contact the
<strong> </strong> <strong> </strong>
<a href="https://prochoice.org/think-youre-pregnant/find-a-provider/" target="_blank" rel="noopener"> <a href="https://prochoice.org/think-youre-pregnant/find-a-provider/" target="_blank" rel="noreferrer">
<strong>National Abortion Federation</strong> <strong>National Abortion Federation</strong>
</a> </a>
<strong> <strong>
...@@ -53,6 +35,18 @@ function Home() { ...@@ -53,6 +35,18 @@ function Home() {
</strong> </strong>
<br/> <br/>
</div> </div>
<div>
If you would like your clinic added to Choice Connect or changes made to your listing, please contact choiceconnect@shorecentre.ca.
<br/>
<br />
If you have any questions or concerns, please visit the contacts section to find someone to contact. Visit the locations section if you would like to get in touch with an abortion clinic.
<br />
<br/>
Want to help keep Choice Connect running? Donate today by visiting: <a href="https://www.shorecentre.ca/cc/" target="_blank" rel="noreferrer">www.shorecentre.ca/cc</a>
</div>
<div id="nav" className="row-center medium-8-center large-6 columns text-center">
<input id="next-btn" type="button" className="button" value="Start Now" aria-label="Start Now" onClick={Start}/>
</div>
</div> </div>
</div> </div>
); );
......
src/components/Menu.js
+ 2
− 15
View file @ fe9e760c
import '../styles/Menu.css' import '../styles/Menu.css'
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import constants from '../constants/constants';
function Menu(current) { function Menu(current) {
var key = 0; var key = 0;
var menuTuple = [ var listItems = constants.menuItems.map((tuple) =>
{
name: "Homepage",
path: "/"
},
{
name: "Abortion Information",
path: "/abort"
},
{
name: "About Us",
path: "/about"
}
]
var listItems = menuTuple.map((tuple) =>
<li key={key++} className={(current.current === tuple.name ? "current" : "false")}> <li key={key++} className={(current.current === tuple.name ? "current" : "false")}>
<Link to={tuple.path} className={"menuLink "}> <Link to={tuple.path} className={"menuLink "}>
{tuple.name} {tuple.name}
......
src/constants/constants.js 0 → 100644
+ 54
− 0
View file @ fe9e760c
const constants = {
menuItems: [
{
name: "Homepage",
path: "/"
},
{
name: "Abortion Information",
path: "/abort"
},
{
name: "About Us",
path: "/about"
},
{
name: "Contacts",
path: "/contacts"
},
{
name: "Locations",
path: "/locations"
}
],
contactItems: [
{
name: "SHORE Centre",
website: "https://www.shorecentre.ca/",
phoneNumber: "519-743-9360",
email: "info@shorecentre.ca"
},
{
name: "Sex Sense",
description: "For Those in BC",
website: "https://www.optionsforsexualhealth.org/",
phoneNumber: "1-800-739-7367",
email: "info@optbc.org"
},
{
name: "Action Canada for Sexual Health & Rights",
website: "https://www.actioncanadashr.org/",
phoneNumber: "1-888-642-2725",
email: "info@actioncanadaSHR.org"
},
{
name: "National Abortion Federation",
description: "For those in the US",
website: "https://prochoice.org/",
phoneNumber: "202-667-5881",
email: "naf@prochoice.org"
}
]
}
export default constants;
\ No newline at end of file
src/styles/About.css 0 → 100644
+ 3
− 0
View file @ fe9e760c
.fluid-width-video-wrapper {
padding-top: 56.2963%;
}
\ No newline at end of file
src/styles/App.css
+ 29
− 0
View file @ fe9e760c
...@@ -37,3 +37,32 @@ ...@@ -37,3 +37,32 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.button, [type=button], [type=submit] {
border-radius: 0.25em;
}
input {
background-color: #2199e8;
padding: 0.85em 1em;
border: 1px solid transparent;
color: #fefefe;
cursor: pointer;
}
.row-center {
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 40em) {
.small-12-center {
width: 100%;
}
}
@media screen and (min-width: 40em) {
.medium-8-center {
width: 33.3333%;
}
}
src/styles/Contact.css 0 → 100644
+ 14
− 0
View file @ fe9e760c
.referral-results-clinic {
border-bottom: 1px solid #ccc;
padding-bottom: 1rem;
}
.contacts-container {
border-top: 1px solid #ccc;
}
.link {
color: blue;
cursor: pointer;
text-decoration: underline;
}
\ No newline at end of file
src/styles/Menu.css
+ 9
− 2
View file @ fe9e760c
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
margin-top: 1em; margin-top: 1em;
} }
li:hover {
background-color: #0975c7;
}
ul { ul {
display: block; display: block;
list-style-type: none; list-style-type: none;
...@@ -47,14 +51,17 @@ ul { ...@@ -47,14 +51,17 @@ ul {
a.menuLink { a.menuLink {
display: block; display: block;
text-align: left; text-align: left;
margin-left: 1em; padding-top: 1em;
padding-left: 1em;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: 24px;
height: 3.1em;
} }
li { li {
height: 2em; height: 5em;
} }
li.hidden { li.hidden {
......
src/styles/Panic.css
+ 1
− 1
View file @ fe9e760c
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
} }
#panic-button-top { #panic-button-top {
background-color: #F00; background-color: rgb(203, 81, 81);
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 2em; font-size: 2em;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment