Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Homepage and Footer Upgrade #739

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Homepage and Footer Upgrade #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
237db6f
Homepage and Footer Upgrade
akshaaatt Dec 7, 2021
953b90c
Homepage and Footer Upgrade
akshaaatt Dec 7, 2021
679ee47
Merge branch 'master' into akshat/homepage_and_footer
akshaaatt Jan 25, 2022
7c84625
Merge branch 'master' of https://github.com/bookbrainz/bookbrainz-sit…
akshaaatt Mar 2, 2022
43a9cb8
Fix footer.js
akshaaatt Mar 2, 2022
d4f38db
Fix footer.js
akshaaatt Mar 2, 2022
a04de3a
FIx lint issues
akshaaatt Mar 2, 2022
717e803
FIx lint issues
akshaaatt Mar 2, 2022
f92f7ec
FIx lint warnings
akshaaatt Mar 2, 2022
6be2700
Finalize footer.js and update background gradient color
akshaaatt Mar 2, 2022
fa6b7b8
Merge branch 'master' into akshat/homepage_and_footer
akshaaatt Apr 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 95 additions & 62 deletions src/client/components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,74 +18,107 @@
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/

import * as bootstrap from 'react-bootstrap';

import PropTypes from 'prop-types';
import React from 'react';


const {Col, Container, Row} = bootstrap;

function Footer(props) {
const {repositoryUrl, siteRevision} = props;

function Footer() {
return (
<footer className="footer">
<Container fluid>
<Row>
<Col xs={4}>
<small>{'Tested with '}
<a
href="https://www.browserstack.com/"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="BrowserStack Logo"
height="25"
src="/images/BrowserStack.png"
/>
</a>
</small>
</Col>
<Col className="text-center" xs={4}>
<small>Cover image by{' '}
<a href="https://commons.wikimedia.org/wiki/File:Bookshelf.jpg">
Stewart Butterfield
</a> (
<a href="https://creativecommons.org/licenses/by/2.0/deed.en">
CC-BY-2.0
</a>)
</small>
</Col>
<Col className="text-right" xs={4}>
<small>
<a href="/privacy">
Privacy & Terms
</a>
</small>
</Col>
</Row>
<div className="text-center">
<small>
Alpha Software —{' '}
<a href={`${repositoryUrl}tree/${siteRevision}`}>
{siteRevision}
</a> —&nbsp;
<a href="https://tickets.metabrainz.org/projects/BB/issues/">
Report a Bug
</a>
</small>
<section className="section-footer">
<div className="container">
<div className="row">
<div className="col-sm-12 col-md-6">
<h3>
<img alt="BookBrainz" src="/images/BookBrainz_logo.svg" width="180"/>
</h3>
<br/>
<p className="color-gray">
BookBrainz is a project to create an online database
of information about every single book, magazine, journal
and other publication ever written.
</p>
<ul className="list-unstyled">
<li className="color-a">
<span className="color-gray">Development IRC: </span> <a href="https://kiwiirc.com/nextclient/irc.libera.chat/?#metabrainz" rel="noopener noreferrer" target="_blank" > #metabrainz</a>
</li>
<li className="color-a">
<span className="color-gray">Discussion IRC: </span> <a href="https://kiwiirc.com/nextclient/irc.libera.chat/?#bookbrainz" rel="noopener noreferrer" target="_blank" > #bookbrainz</a>
</li>
<li className="color-a" >
<span className="color-gray">Email: </span> <a href="mailto:[email protected]">[email protected] </a>
</li>
</ul>
</div>
<div className="col-sm-12 col-md-3">
<h3 className="w-title-a text-brand">Useful Links</h3>
<ul className="list-unstyled">
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <a href="https://metabrainz.org/donate" rel="noopener noreferrer" target="_blank" >Donate</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <a href="https://wiki.musicbrainz.org/Main_Page" rel="noopener noreferrer" target="_blank" >Wiki</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <a href="https://community.metabrainz.org/" rel="noopener noreferrer" target="_blank" >Community</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <a href="https://blog.metabrainz.org/" rel="noopener noreferrer" target="_blank" >Blog</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <a href="https://www.redbubble.com/people/metabrainz/shop" rel="noopener noreferrer" target="_blank" >Shop</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <a href="https://metabrainz.org/" rel="noopener noreferrer" target="_blank" >MetaBrainz</a>
</li>

</ul>
</div>
<div className="col-sm-12 col-md-3">
<h3 className="w-title-a text-brand">Fellow Projects</h3>
<ul className="list-unstyled">
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <img alt="image" height="24" src="/images/meb-icons/MusicBrainz.svg" width="24"/> <a href="https://musicbrainz.org/" rel="noopener noreferrer" target="_blank" >MusicBrainz</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <img alt="image" height="24" src="/images/meb-icons/ListenBrainz.svg" width="24"/> <a href="https://listenbrainz.org/" rel="noopener noreferrer" target="_blank" >ListenBrainz</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <img alt="image" height="24" src="/images/meb-icons/CritiqueBrainz.svg" width="24"/> <a href="https://critiquebrainz.org/" rel="noopener noreferrer" target="_blank" >CritiqueBrainz</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <img alt="image" height="24" src="/images/meb-icons/Picard.svg" width="24"/> <a href="https://picard.musicbrainz.org/" rel="noopener noreferrer" target="_blank" >Picard</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <img alt="image" height="24" src="/images/meb-icons/AcousticBrainz.svg" width="24"/> <a href="https://acousticbrainz.org/" rel="noopener noreferrer" target="_blank" >AcousticBrainz</a>
</li>
<li className="item-list-a">
<img height="18" src="/images/icons/angle_double_right_icon.svg" width="18"/> <img alt="image" height="24" src="/images/meb-icons/CoverArtArchive.svg" width="24"/> <a href="https://coverartarchive.org" rel="noopener noreferrer" target="_blank" >Cover Art Archive</a>
</li>
</ul>
</div>
</div>
<div className="row center-p">
<div className="col-md-3 d-none d-md-block">
<p className="color-gray section-line">
OSS Geek? <a href="https://github.com/metabrainz/bookbrainz-site" rel="noopener noreferrer" target="_blank" > <span className="color-a"> Contribute Here </span> </a>
</p>
</div>
<div className="col-md-6">
<p className="section-line">
Brought to you by
<img alt="image" height="30" src="/images/meb-icons/MetaBrainz.svg" width="30"/>
<span className="color-a"> MetaBrainz Foundation </span>
</p>
</div>
<div className="col-md-3 d-none d-md-block">
<p className="color-gray section-line">
Found an Issue?
<a href="https://tickets.metabrainz.org/" rel="noopener noreferrer" target="_blank" > <span className="color-a"> Report Here </span></a>
</p>
</div>
</div>
</Container>
</footer>
</div>
</section>
);
}

Footer.displayName = 'Footer';
Footer.propTypes = {
repositoryUrl: PropTypes.string.isRequired,
siteRevision: PropTypes.string.isRequired
};

export default Footer;
Binary file removed src/client/stylesheets/Bookshelf.jpg
View file
Open in desktop
Binary file not shown.
35 changes: 28 additions & 7 deletions src/client/stylesheets/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ $disabled-color: lighten($disabled-bg,15%);
// The following prevents menu items from wrapping to two lines (icon on top text on the bottom)
// in browsers sizes between collapsed menu and enough horizontal space for all menu items
white-space: nowrap;

& > .disabled > a {
color: $disabled-color;
background: $disabled-bg;
Expand Down Expand Up @@ -238,11 +238,32 @@ html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
width: 100%;
background-color: #f5f5f5;
bottom: 0;
/* Footer */
.section-footer {
background: #ffffff;
color: #000000;
padding-bottom: 10px;
margin-top: 2rem;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ddd;
}
.section-footer ul {
line-height: 2;
}
.section-footer .item-list-a i {
font-size: 18px;
padding-right: 4px;
color: #000000;
}
.center-p{
color: #000000;
text-align: center;
padding-top: 20px;
}
.section-line{
padding-top: 30px;
border-top: 1px solid #ddd;
}
.contact-text {
color: rgb(180, 180, 180);
Expand All @@ -257,7 +278,7 @@ a.contact-text:visited {
/* index page */
/* ========== */
#background-image {
background:url(./Bookshelf.jpg);
background: linear-gradient(to right, #483a28 0%, #000000 100%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Expand Down