From 85022cf36ad4307f5e9140e964a9f108f17fe058 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Fri, 20 Apr 2018 17:21:18 -0700
Subject: [PATCH] add and style menu button
---
src/assets/stylesheets/footer.scss | 21 +++++++++++----------
src/react-components/footer.js | 9 ++++++---
2 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss
index 604c10640..d80edef08 100644
--- a/src/assets/stylesheets/footer.scss
+++ b/src/assets/stylesheets/footer.scss
@@ -3,16 +3,18 @@
width: 100%;
background-color: rgba(0, 0, 0, 0.35);
bottom: 0;
- display: grid;
+ display: flex;
font-size: 1.3em;
height: 48px;
}
:local(.hub-info) {
- grid-column: 1;
- grid-row: 1;
+ flex: 1;
margin: 8px;
}
-:local(.share-button) {
+:local(.menu) {
+ margin: 8px;
+}
+:local(.menu-button) {
background: none;
border: 3px solid white;
border-radius: 16px;
@@ -20,16 +22,15 @@
margin: 0 8px;
pointer-events: auto;
cursor: pointer;
- width: 32px;
- height: 32px;
+ width: 33px;
+ height: 33px;
}
-:local(.share-button__icon) {
- margin-bottom: 1px;
+:local(.menu-button__icon) {
margin-left: -1px;
+ margin-bottom: 1px;
}
:local(.hub-stats) {
- grid-column: 3;
- grid-row: 1;
+ flex: 1;
text-align: right;
margin: 8px;
}
diff --git a/src/react-components/footer.js b/src/react-components/footer.js
index 86728e614..c6d87c757 100644
--- a/src/react-components/footer.js
+++ b/src/react-components/footer.js
@@ -1,7 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
-import faShare from "@fortawesome/fontawesome-free-solid/faShare";
+import faEllipsisH from "@fortawesome/fontawesome-free-solid/faEllipsisH";
+import faShareAlt from "@fortawesome/fontawesome-free-solid/faShareAlt";
import faUsers from "@fortawesome/fontawesome-free-solid/faUsers";
import styles from "../assets/stylesheets/footer.scss";
@@ -16,8 +17,10 @@ export default class Footer extends Component {
<div className={styles.container}>
<div className={styles.hubInfo}>
<span className={styles.hubName}>{this.props.hubName}</span>
- <button className={styles.shareButton} onClick={this.emitChangeToPrevious}>
- <FontAwesomeIcon icon={faShare} className={styles.shareButtonIcon} />
+ </div>
+ <div className={styles.menu}>
+ <button className={styles.menuButton}>
+ <FontAwesomeIcon icon={faEllipsisH} className={styles.menuButtonIcon} />
</button>
</div>
<div className={styles.hubStats}>
--
GitLab