Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

Commit b33167d9 authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

adjust homepage map and navbar

parent 40ca0c72
import React from "react"
import Img from "gatsby-image"
const ImpactUsage = ({impactUsage}) => {
return (
<div>
<h2>{impactUsage.heading}</h2>
<a href="/impact">
<figure><Img fluid={impactUsage.image.childImageSharp.fluid} alt="map" className="map-image"/></figure>
<p>{impactUsage.description}</p>
<p>{impactUsage.totalBooks}</p>
<p>{impactUsage.totalViews}</p>
</a>
<div className="map-container">
<h2>{impactUsage.heading}</h2>
<div className="stats">
<span className="book-total text-center">
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#333333"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 4h2v5l-1-.75L9 9V4zm9 16H6V4h1v9l3-2.25L13 13V4h5v16z"/></svg>
{impactUsage.totalBooks} <br/> Books</span>
<span className="web-views text-center">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="#333333"><g><rect fill="none" height="24" width="24"/><path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M12,10.5 c1.84,0,3.48,0.96,4.34,2.5c-0.86,1.54-2.5,2.5-4.34,2.5S8.52,14.54,7.66,13C8.52,11.46,10.16,10.5,12,10.5 M12,9 c-2.73,0-5.06,1.66-6,4c0.94,2.34,3.27,4,6,4s5.06-1.66,6-4C17.06,10.66,14.73,9,12,9L12,9z M12,14.5c-0.83,0-1.5-0.67-1.5-1.5 s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S12.83,14.5,12,14.5z"/></g></svg>
{impactUsage.totalViews} <br/> Views in last year</span>
</div>
<div className="visualize text-center my-4">
<a href="/impact">Visualize ACLS HEB's impact and engagement...</a>
</div>
</div>
)
}
......
......@@ -21,13 +21,13 @@ const Navbar = () => {
<div className="header-nav-container">
<header>
<div className="container py-3">
<div className="row flex-nowrap justify-content-end">
<div className="col-8">
<div className="row justify-content-end">
<div className="col-md-8">
<a href="/" className="navbar-brand">
<img src="/assets/HEB-REDBLACK_NOFILL_CROP.svg" alt="" height="70" width="auto" className="navbar-brand-logo"/> <h1>ACLS<br/> Humanities EBook</h1>
</a>
</div>
<div className="col-4 pt-3">
<div className="col-md-4 pt-3">
<form className="search-form navbar-left navbar-form" action="https://fulcrum.org/heb?locale=en" acceptCharset="UTF-8" method="get">
<fieldset>
<div className="input-group">
......
......@@ -44,6 +44,7 @@ h5 {
@include proxima-nova;
font-weight: 700;
color:$heb-brand-color;
text-transform: uppercase;
}
h2 {
......@@ -174,6 +175,8 @@ header {
};
.card-body {
justify-content: space-around;
margin: 0 !important;
flex-wrap: nowrap;
}
h3 {
......@@ -225,15 +228,33 @@ header {
}
// impact
.map {
height: 60%;
}
.map-container a:hover {
text-decoration: none;
img {
filter: grayscale(80%);
filter: contrast(50%);
.map-container {
background: url(/assets/impact-usage.png) no-repeat;
background-size: cover;
height: 100%;
overflow: auto;
padding-top: 1.5rem;
padding-bottom: 4rem;
.stats {
display: flex;
justify-content: space-evenly;
@include proxima-nova;
font-weight: 600;
font-size: 25px;
margin-top: 6.5rem;
margin-bottom: 6.5rem;
svg {
display: block;
margin: 0 auto;
width: 80%;
}
}
a {
font-size: 25px;
}
}
......
......@@ -6,6 +6,6 @@ description: >-
download.
buttonLabel: Download Now
buttonUrl: 'https://umich.app.box.com/folder/125094031896'
cardImage: assets/owls.jpg
cardImage: /assets/marc.png
date: 2021-04-04T13:25:21.341Z
---
---
templateKey: home-page
taglineSection:
buttonLabel: A Button Label
buttonUrl: 'http://fulcrum.org'
buttonLabel: Learn More
buttonUrl: /about
text: >-
ACLS Humanites Ebook (ACLS HEB) is a digital collection of over 5,700
foundational books in the humanities and social sciences, presented in
......@@ -15,14 +15,10 @@ firstCallToActionSection:
secondCallToActionSection:
description: Learn how your press content can be included in the collection
buttonLabel: How to Contribute
buttonUrl: link to publishers page
buttonUrl: /publishers
thirdCallToActionSection:
description: Third Call To Action
buttonLabel: Third
buttonUrl: 'http://fulcrum.org'
thridCallToActionSection:
description: Bring the ACLS HEB collection to your library
buttonUrl: Link to Librarians page
buttonUrl: /librarians
buttonLabel: Subscribe Here
impactUsageSection:
heading: Global Reach and Impact
......
---
templateKey: quick-link
title: Link 1
pageUrl: 'http://fulcrum.org/heb'
title: Help/FAQ
pageUrl: '/help'
order: 1
---
---
templateKey: quick-link
title: Page 2
pageUrl: 'http://fulcrum.org/'
title: Title List
pageUrl: 'https://umich.app.box.com/s/v71e4fpcuok3q8amypjhm4tuipdmd5pr'
order: 2
---
......@@ -92,11 +92,11 @@ const IndexPage = ({data}) => {
<section className="tagline-container">
<div className="container">
<div className="row">
<div className="tagline col-md-7">
<div className="tagline col-md-8">
<Tagline text={tagline.text} />
</div>
<div className="cta-tagline col-md-3">
<a className="btn btn-secondary" href={tagline.buttonUrl}>{tagline.buttonLabel}</a>
<a className="btn btn-lg btn-secondary" href={tagline.buttonUrl}>{tagline.buttonLabel}</a>
</div>
</div>
</div>
......@@ -116,8 +116,8 @@ const IndexPage = ({data}) => {
</div>
</div>
</section>
<section className="video-impact-container">
<div className="container map-container">
<section className="impact-container">
<div className="container">
<ImpactUsage impactUsage={impactUsage} />
</div>
</section>
......
......@@ -24,13 +24,13 @@ const Impact = ({data}) => {
<div className="readership-map">
<ReactMarkdown source={readershipMapDescription} />
<div className="readership-map-embed">
<iframe title="Lever Press Readership Map" frameborder="0" height="650" width="100%" src="https://maps.publishing.umich.edu/readership-map/?filter.view=123826825"></iframe>
<iframe title="ACLS HEB Readership Map" frameborder="0" height="650" width="100%" src="https://maps.publishing.umich.edu/readership-map/?filter.view=22140843"></iframe>
</div>
</div>
<div className="google-data-studio">
<ReactMarkdown source={googleDataStudioDescription} />
<div className="embed-responsive embed-responsive-1by1">
<iframe title="Lever Press Usage Report" className="embed-responsive-item" src="https://datastudio.google.com/embed/reporting/1djx_faORhrRCGEWHUuYfXrMAp453Rbqs/page/9LCE"></iframe>
<iframe title="ACLS HEB Usage Report" className="embed-responsive-item" src="https://datastudio.google.com/embed/reporting/1QyXFnCGW2UCxC0UBhToAtLfanWC9w00-/page/9LCE"></iframe>
</div>
</div>
</div>
......
Markdown is supported
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