Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregpr07
gregpr07 committed Mar 16, 2020
1 parent d871e3b commit 7c23070
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 217 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"prop-types": "^15.7.2",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-countup": "^4.3.3",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"react-paginate": "^6.3.2",
Expand Down
203 changes: 11 additions & 192 deletions src/components/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@ export const Navbar = props => {
const content = [
{
li: "Our Databases",
link: "/",
},
{
li: "About",
link: "/",
link: "/databases",
},
{
li: "Contact",
link: "/",
externalLink: "https://platform.x5gon.org/team",
},
]

Expand Down Expand Up @@ -75,9 +71,15 @@ export const Navbar = props => {
{content.map((li, index) => {
return (
<li className="nav-item active ml-lg-3" key={index}>
<Link className="nav-link mx-md-2 x-xs-1" to={li.link}>
{li.li}
</Link>
{li.link ? (
<Link className="nav-link mx-md-2 x-xs-1" to={li.link}>
{li.li}
</Link>
) : (
<a className="nav-link mx-md-2 x-xs-1" href={li.externalLink}>
{li.li}
</a>
)}
</li>
)
})}
Expand All @@ -86,186 +88,3 @@ export const Navbar = props => {
</nav>
)
}

export const Footer = () => {
const contents = {
"GO-TO": [
{
page: "Products",
link: "/#products",
},
{
page: "Join",
link: "/join",
},
{
page: "Policy",
link: "/policy",
},
{
page: "Team",
link: "/team",
},
],
PRODUCTS: [
{
page: "recommend",
link: "/products/recommend",
},
{
page: "analytics",
link: "/products/analytics",
},
{
page: "discovery",
link: "/products/discovery",
},
{
page: "translate",
link: "/products/translate",
},
{
page: "connect",
link: "/products/connect",
},
{
page: "feed",
link: "/products/feed",
},
],
CONTACT: [
{
page: "General Enquiries",
link: "mailto:info@x5gon.org",
},
{
page: "Partnering Projects",
link: "mailto:partnering@x5gon.org",
},
{
page: "Project Coordination",
link: "mailto:admin@x5gon.org",
},
{
page: "Press Enquiries",
link: "mailto:press@x5gon.org",
},
],
SUPPORT: [
{
page: "Github Repository",
externalLink: "https://github.com/JozefStefanInstitute/x5gon",
},
/* {
page: 'Cookies Subpage',
link: 'Cookies Subpage'
}, */
{
page: "Documentation",
externalLink: "/files/x5gon-docs.pdf",
},
{
page: "Privacy & policy",
link: "/privacy",
},
],
}
const UL = name => {
name = name.name
const style = "d-block footer-li-text"
return (
<div className={"col-6 col-md-3 pl-0 pb-5"}>
<p
style={{
fontSize: "12px",
letterSpacing: "3.4px",
lineHeight: "24px",
fontWeight: "700",
}}
>
{name}
</p>
{contents[name].map((object, index) => {
if (object.externalLink) {
return (
<a
style={{ textTransform: "capitalize" }}
href={object.externalLink}
key={index}
className={style}
target="blank"
>
{object.page}
</a>
)
} else if (name !== "CONTACT") {
return (
<Link
style={{ textTransform: "capitalize" }}
to={object.link}
key={index}
className={style}
>
{object.page}
</Link>
)
} else {
return (
<a
style={{ textTransform: "capitalize" }}
href={object.link}
key={index}
className={style}
>
{object.page}
</a>
)
}
})}
</div>
)
}
return (
<div className="foot bg-black text-white p-md-5">
<div className="maxer mx-auto row py-5 px-4">
<div className="col-md-3 col-lg-4 col-12 pl-0 pb-4 pb-md-0 px-1 mt-5 mt-md-0">
<Link to="/">
<img
src={"/imgs/logo/x5gon_logo_dark.svg"}
height="22px"
alt="logo"
></img>
</Link>
</div>
<div className="col-md-9 col-lg-8 col-12 mt-4 mt-md-0 pl-3 ml-1 pl-md-0 ml-md-0">
<div className="row border-bottom flex-row-reverse flex-md-row">
<UL name="GO-TO"></UL>
<UL name="PRODUCTS"></UL>
<UL name="CONTACT"></UL>
<UL name="SUPPORT"></UL>
</div>
<div className="row mt-5">
<div className="col-2 m-0 pl-0">
<img
alt="flag"
src="/imgs/euflag.png"
width="100%"
className="m-0"
/>
</div>
<div className="col-9 m-0 col-xl-7">
<p
className="my-auto m-0 p-0 footer-li-text"
style={{ lineHeight: "20px" }}
>
This project has received funding from the European Union’s
Horizon new policy 2020 research and innovation programme under
grant agreement No 761758.
</p>
</div>
</div>
</div>
</div>
</div>
)
}
114 changes: 89 additions & 25 deletions src/pages/databases.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,109 @@ import { Layout, Navbar } from "../components/layout"
import list from "../images/icons/list.svg"
import nantes from "../images/nantes.png"

import CountUp from "react-countup"

const Provider = provider => (
<div className="row p-5 mb-3 bg-white">
<div className="col-4">
<img src={nantes} alt="list" height={64} className="my-auto" />
</div>
<div className="row p-3 py-2 mb-3 bg-white mx-3">
<div className="col">
<p className="p2 mb-0">{provider.provider}</p>
<p className="mb-0">1260 Materials</p>
<a href={provider.provider.link}>
<p className="p2 mb-0">{provider.provider.name}</p>
</a>
<p className="mb-0">{provider.provider.number_materials} Materials</p>
</div>
<div className="col-1">
<img src={list} alt="list" height={32} className="my-auto" />
<div className="col-2 col-sm-1">
<img src={list} alt="list" height={32} className="mt-3" />
</div>
</div>
)

const providers = [
"Université de Nantes",
"nantes",
"farewell",
"data",
"through",
"api",
{
name: "Videolectures.NET",
link: "http://videolectures.net/",
number_materials: 1260,
},
{
name: "UNIVERSITAT POLITÈCNICA DE VALÈNCIA",
link: "https://media.upv.es",
number_materials: 1100,
},
]

const Stats = () => {
const stats = [
{
name: "OER Materials",
value: 118,
suffix: "k",
},
{
name: "User Activities",
value: 10.9,
suffix: "M",
},
{
name: "Unique Users",
value: 2.25,
suffix: "M",
},
]
return (
<div className="row text-center p-64">
{stats.map((stat, index) => {
return (
<div className="col-sm-4 my-3 my-sm-0">
<div className="stats">
<h4 className="">
<CountUp
end={stat.value}
suffix={stat.suffix}
decimals={index}
/>
</h4>
<p className="stats__label">
<span>{stat.name}</span>
</p>
</div>
</div>
)
})}
</div>
)
}

const repos = () => (
<Layout>
<Navbar light={true} />
<div className="bg-light-gray p-128">
<div className="maxer mx-auto text-light-dark">
<p className="text-ecosystem pb-0 mb-0 pl-1">CONNECTED DATABASES</p>
<h2 className="py-4 text-black">Connected Databases</h2>
<h4 className="pl-1 maxer-800">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet
pretium ipsum.
</h4>
<div className="p-64">
{providers.map(item => (
<Provider provider={item} key={item} />
))}
<div className="maxer-880 mx-auto text-purple px-4 px-md-5 px-lg-0">
<div className="col">
<h2 className="">Database Statistics</h2>
<Stats />
<p className="information">
The basic X5GON database statistics - showing the number of OER
materials, user activity data (visits) and number of unique users
that accessed the registered OER repositories in the X5GON network.
</p>
</div>

<div className="maxer mx-auto text-light-dark p-64">
<h4 className="pl-1 maxer-800">Connected providers</h4>
<div className="mt-5">
{providers.map(item => (
<Provider provider={item} key={item} />
))}
</div>
<p className="mt-5">
Check statistics about your database{" "}
<a
className="text-green"
href="https://platform.x5gon.org/oer_provider/"
>
here
</a>
.
</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 7c23070

Please sign in to comment.