From c3eb0e24c8c11202f7456ceaa2411fd487968076 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 11:23:32 +0000 Subject: [PATCH 01/10] Adding about project page, project sorting and project selection dropdown --- src/App.css | 10 ++ src/App.js | 16 +- src/actions/index.js | 5 + .../Content/Pursuance/PursuanceMenu.js | 8 +- .../Content/Pursuance/PursuancePage.js | 2 + .../Content/Pursuance/views/AboutView.css | 19 ++ .../Content/Pursuance/views/AboutView.js | 22 +++ .../Content/TaskHierarchy/TaskHierarchy.css | 12 -- .../Content/TaskHierarchy/TaskHierarchy.js | 32 ++-- .../Content/TaskStatus/TaskStatus.js | 2 + .../NavBar/JumpToPursuance/JumpToPursuance.js | 73 ++++++++ src/components/NavBar/NavBar.css | 165 ++++++++++++++---- src/components/NavBar/NavBar.js | 12 +- .../PublicPursuances/PublicPursuanceList.js | 42 ++++- .../PublicPursuances/PublicPursuances.css | 68 ++++++++ .../PublicPursuances/PublicPursuances.js | 52 +++++- src/reducers/index.js | 2 + src/reducers/publicOrderReducer.js | 8 + src/reducers/publicPursuancesReducer.js | 5 - 19 files changed, 464 insertions(+), 91 deletions(-) create mode 100644 src/components/Content/Pursuance/views/AboutView.css create mode 100644 src/components/Content/Pursuance/views/AboutView.js create mode 100644 src/components/NavBar/JumpToPursuance/JumpToPursuance.js create mode 100644 src/reducers/publicOrderReducer.js diff --git a/src/App.css b/src/App.css index f29b526..fa6a3c8 100644 --- a/src/App.css +++ b/src/App.css @@ -21,6 +21,16 @@ position: relative; } +/* disable user text highlighting */ +.noselect { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ +} + @media (max-width: 639px) { .hide-xsmall { display: none; diff --git a/src/App.js b/src/App.js index 24fd32b..20fc216 100644 --- a/src/App.js +++ b/src/App.js @@ -15,15 +15,9 @@ class App extends Component { return (
- + - {/* Temporary redirect from /; will use HomePage component */ } + {/* Temporary redirect from /; will use HomePage component */} } /> { return this.props.authenticated @@ -41,10 +35,6 @@ class App extends Component { } } -function mapStateToProps(state) { - return state.user; -} - function mapDispatchToProps(dispatch) { return { removeNotification(id){ @@ -56,4 +46,4 @@ function mapDispatchToProps(dispatch) { } } -export default connect(mapStateToProps, mapDispatchToProps)(App); +export default connect(({ user, currentPursuanceId }) => ({ user, currentPursuanceId }), mapDispatchToProps)(App); diff --git a/src/actions/index.js b/src/actions/index.js index 64d2c13..4be170a 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -46,6 +46,11 @@ export const setTaskFormParentGid = (formId, newParentGid, oldParentGid) => ({ export const getUsers = () => ({ type: 'GET_USERS', payload: getUsersReq() }); +export const setPublicOrder = publicOrder => ({ + type: 'SET_PUBLIC_ORDER', + publicOrder +}); + export const getPursuancesByIds = pursuanceIds => ({ type: 'GET_PURSUANCES_BY_IDS', payload: getPursuancesReq(pursuanceIds) diff --git a/src/components/Content/Pursuance/PursuanceMenu.js b/src/components/Content/Pursuance/PursuanceMenu.js index c856e05..bd75353 100644 --- a/src/components/Content/Pursuance/PursuanceMenu.js +++ b/src/components/Content/Pursuance/PursuanceMenu.js @@ -6,6 +6,7 @@ import PursuanceMenuItem from './PursuanceMenuItem'; import TiFlowChildren from 'react-icons/lib/ti/flow-children'; import FaCheckSquareO from 'react-icons/lib/fa/check-square-o'; import FaCalendar from 'react-icons/lib/fa/calendar'; +import Info from 'react-icons/lib/fa/info-circle'; // import FaSitemap from 'react-icons/lib/fa/sitemap'; import CommentsO from 'react-icons/lib/fa/comments-o'; // import Planet from 'react-icons/lib/io/planet'; @@ -19,6 +20,12 @@ const PursuanceMenu = () => { return (
+ } + /> {/* { /> */} } diff --git a/src/components/Content/Pursuance/PursuancePage.js b/src/components/Content/Pursuance/PursuancePage.js index 2ecc458..3d9c454 100644 --- a/src/components/Content/Pursuance/PursuancePage.js +++ b/src/components/Content/Pursuance/PursuancePage.js @@ -3,6 +3,7 @@ import { connect } from 'react-redux'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { setCurrentPursuance } from '../../../actions'; import PursuanceMenu from './PursuanceMenu'; +import AboutView from './views/AboutView'; import MyTasksView from './views/MyTasksView'; import TaskListView from './views/TaskListView'; import CalendarView from './views/CalendarView'; @@ -31,6 +32,7 @@ class PursuancePage extends Component {
+ diff --git a/src/components/Content/Pursuance/views/AboutView.css b/src/components/Content/Pursuance/views/AboutView.css new file mode 100644 index 0000000..3e3a9cf --- /dev/null +++ b/src/components/Content/Pursuance/views/AboutView.css @@ -0,0 +1,19 @@ +.about { + width: 100%; + padding: 0 80px 0 30px; + overflow: auto; +} + +.about h1, h2, h4 { + color: #fcfcfc; +} + +.about h1 { + text-align: center; +} + +@media (max-width: 768px) { + .about { + padding: 0 65px 0 15px; + } +} \ No newline at end of file diff --git a/src/components/Content/Pursuance/views/AboutView.js b/src/components/Content/Pursuance/views/AboutView.js new file mode 100644 index 0000000..0be8501 --- /dev/null +++ b/src/components/Content/Pursuance/views/AboutView.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import './AboutView.css'; + +class AboutView extends Component { + render() { + const {currentPursuanceId, pursuances} = this.props; + const p = (pursuances[currentPursuanceId] !== undefined) ? + pursuances[currentPursuanceId] : ""; + return ( +
+

About This Pursuance

+

Name: {p.name}

+

Mission: {p.mission}

+
+ ); + } +} + +export default connect(({ currentPursuanceId, pursuances }) => + ({ currentPursuanceId, pursuances }) +)(AboutView); \ No newline at end of file diff --git a/src/components/Content/TaskHierarchy/TaskHierarchy.css b/src/components/Content/TaskHierarchy/TaskHierarchy.css index 7ae38ea..8d0d2bc 100644 --- a/src/components/Content/TaskHierarchy/TaskHierarchy.css +++ b/src/components/Content/TaskHierarchy/TaskHierarchy.css @@ -3,18 +3,6 @@ margin-right: 50px; } -#task-hierarchy-title { - text-align: center; - padding-bottom: 18px; - margin: 8px 0; -} - -#task-hierarchy-title h2 { - display: inline-block; - color: #fcfcfc; - margin: 0; -} - #task-labels { display: flex; padding: 0 3px 3px 40px; diff --git a/src/components/Content/TaskHierarchy/TaskHierarchy.js b/src/components/Content/TaskHierarchy/TaskHierarchy.js index a9f890b..a49dff6 100644 --- a/src/components/Content/TaskHierarchy/TaskHierarchy.js +++ b/src/components/Content/TaskHierarchy/TaskHierarchy.js @@ -35,6 +35,12 @@ class TaskHierarchy extends Component { } } + componentDidUpdate(prevProps) { + if (prevProps.currentPursuanceId !== this.props.currentPursuanceId) { + this.componentDidMount(); + } + } + componentWillUnmount(){ const { showSuccessToast, removeSuccessToast } = this.props; if (showSuccessToast) { @@ -78,6 +84,13 @@ class TaskHierarchy extends Component { } } + getPursuanceName = (pursuances, id) => { + const rawPursuance = pursuances[id]; + if (rawPursuance !== undefined) { + return rawPursuance.name; + } + } + renderHierarchy = () => { const { currentPursuanceId } = this.props; const { rootTaskGids, taskMap } = this.props.tasks; @@ -102,18 +115,9 @@ class TaskHierarchy extends Component { } render() { - const { pursuances, currentPursuanceId } = this.props; return (
-
-

Tasks: 

-

- { - pursuances[currentPursuanceId] && pursuances[currentPursuanceId].name - } -

-
@@ -142,11 +146,11 @@ class TaskHierarchy extends Component {
+ position="top-center" + type="success" + autoClose={4000} + hideProgressBar={false} + newestOnTop={false} /> {this.renderHierarchy()}
diff --git a/src/components/Content/TaskStatus/TaskStatus.js b/src/components/Content/TaskStatus/TaskStatus.js index 9630712..f74d7ea 100644 --- a/src/components/Content/TaskStatus/TaskStatus.js +++ b/src/components/Content/TaskStatus/TaskStatus.js @@ -38,6 +38,8 @@ class TaskStatus extends Component { {this.displayStatus(statusName)} ); + } else { + return false; } }); } diff --git a/src/components/NavBar/JumpToPursuance/JumpToPursuance.js b/src/components/NavBar/JumpToPursuance/JumpToPursuance.js new file mode 100644 index 0000000..4edfecc --- /dev/null +++ b/src/components/NavBar/JumpToPursuance/JumpToPursuance.js @@ -0,0 +1,73 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { DropdownButton, MenuItem } from 'react-bootstrap'; +import { setCurrentPursuance } from '../../../actions'; + +const getCurrentPursuanceName = (pursuances, currentPursuanceId) => { + const rawPursuance = pursuances[currentPursuanceId]; + if (rawPursuance !== undefined) { + return rawPursuance.name; + } else { + return "Jump to a pursuance"; + } +} + +const produceOptions = (pursuances) => { + const pursuanceArr = Object.values(pursuances); + pursuanceArr.sort((p1, p2) => { + return p1.name.toLowerCase().localeCompare(p2.name.toLowerCase()); + }); + + return pursuanceArr.map((pursuance) => ( + + {pursuance.name} + + )); +} + +const onMenuItemSelectAction = (pursuanceId, onMenuItemSelect, history) => { + history.push({ + pathname: `/pursuance/${pursuanceId}` + }); + onMenuItemSelect(pursuanceId); +} + +const renderDropdown = (props) => { + return ( +
+ onMenuItemSelectAction(pursuanceId, props.onMenuItemSelect, props.history) } + > + { produceOptions(props.pursuances) } + +
+ ) +} + +const mapStateToProps = state => { + return { + currentPursuanceId: state.currentPursuanceId, + pursuances: state.pursuances + } +} + +const mapDispatchToProps = dispatch => { + return { + onMenuItemSelect: (pursuanceId) => { + dispatch(setCurrentPursuance(pursuanceId)); + } + } +} + +const JumpToPursuance = connect( + mapStateToProps, + mapDispatchToProps +)(renderDropdown) + +export default JumpToPursuance \ No newline at end of file diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index f7d91d1..cc53fd4 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -1,62 +1,86 @@ .navbar { - position: fixed; + top: 0; + left: 0; + height: 60px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + width: 100%; background-color: #141414; + position: fixed; border-radius: 0px; border: none; margin: 0; - height: 60px; - width: 100%; - top: 0; z-index: 10; } .navbar .container { - align-items: center; width: 100%; - padding: 0 32px 0 32px; + padding: 0 36px 0 132px; +} + +@media (max-width: 1280px) { + .navbar .container { + padding-left: 95px; + } +} + +.navbar > .container .navbar-header .navbar-brand { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + height: 60px; + color: #fcfcfc; + padding-left: 0; + margin-left: 0; } .navbar-collapse { - height: 200px; + height: 200px; } .navbar-collapse.collapse { background-color: black; } -.modal-title { - text-align: center; +.navbar-brand:hover { + color: #8662ea !important; } -.modal-btn-ctn { - text-align: right; - padding-right: 16px; +nav a:hover, a:active, a:link { + text-decoration: none !important; } -.modal-btn-ctn .btn { - margin-left: 10px; +nav li a:hover { + color: #1fc7d3 !important; } -.navbar-header { - height: 100%; +.nav-pull-right { + float: right; } -.navbar-brand { +.navbar-nav li { + height: 60px; +} + +.navbar-nav li a { display: flex; align-items: center; justify-content: center; height: 60px; - color: #fcfcfc !important; - padding-left: 0 !important; - margin-left: 0 !important; + color: #efefef !important; } -.navbar-brand:hover { - color: #8662ea !important; +.navbar-nav li a:hover { + color: #1fc7d3 !important; } -.navbar-nav { - height: 60px; +.navbar-nav li a button { + padding-bottom: 2px; } @media (max-width: 768px) { @@ -67,26 +91,95 @@ } } -.navbar-nav li { - height: 60px; +.modal-title { + text-align: center; } -.navbar-nav li a { +.modal-btn-ctn { + text-align: right; + padding-right: 16px; +} + +.modal-btn-ctn .btn { + margin-left: 10px; +} + +.planet-icon { + margin: 0 5px 3px 5px; +} + +/* Pursuance selector dropdown */ + +#header-pursuance-dropdown { + height: 100%; + width: 100%; + padding: 0; + text-align: left; + background: none; + color: #e0e0e0; + border: none; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; + position: relative; + padding-right: 13px; +} + +.nav-pursuances { + float: right; + position: relative; + display: block; + padding: 0 15px; +} + +.nav-pursuances .caret { + position: absolute; + top: 50%; + right: -3px; + transform: translate(-50%, -50%); +} + +.nav-pursuances .dropdown { + padding: 20px 0 0; + width: 100%; display: flex; - align-items: center; justify-content: center; - height: 60px; - color: #efefef !important; + align-items: center; + overflow: hidden; } -.navbar-nav li a:hover { - color: #1fc7d3 !important; +.nav-pursuances .dropdown > .dropdown-menu { + opacity: 0; + display: block; + transition: opacity 200ms ease-in-out; + max-width: 300px; + overflow: hidden; } -.navbar-nav li a button { - padding-bottom: 2px; +.nav-pursuances .dropdown.open { + overflow: visible; } -.planet-icon { - margin: 0 5px 3px 5px; +.nav-pursuances .dropdown.open > .dropdown-menu { + opacity: 1; +} + +.nav-pursuances .dropdown a { + overflow: hidden; + text-overflow: ellipsis; + color: #262626 !important; +} + +.nav-pursuances .dropdown a:hover { + color: #262626 !important; } + +@media (max-width: 960px) { + #header-pursuance-dropdown { + max-width: 165px; + } + + .nav-pursuances { + padding: 0 10px; + } +} \ No newline at end of file diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js index 1ba6b97..32eba0f 100644 --- a/src/components/NavBar/NavBar.js +++ b/src/components/NavBar/NavBar.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; +import { connect } from 'react-redux'; +import { Link, withRouter } from 'react-router-dom'; import { Navbar, NavItem, Nav, OverlayTrigger, Tooltip } from 'react-bootstrap'; import FaBell from 'react-icons/lib/fa/bell'; import SignUp from './SignUp/SignUp'; @@ -8,6 +9,7 @@ import NotificationsModal from './NotificationsModal/NotificationsModal'; import UserSettingsPopover from './UserSettingsPopover'; import Planet from 'react-icons/lib/io/planet'; import { PROJECT_CAPITAL, THIS_PROJECT_NAME } from '../../constants'; +import JumpToPursuance from './JumpToPursuance/JumpToPursuance'; import './NavBar.css'; class NavBar extends Component { @@ -19,14 +21,13 @@ class NavBar extends Component { ); render() { - const { authenticated, username, contributionPoints } = this.props; + const { authenticated, username, contributionPoints } = this.props.user; return ( {THIS_PROJECT_NAME} -
    @@ -78,6 +79,9 @@ class NavBar extends Component { onIncreaseContributionAmount={this.props.onIncreaseContributionAmount} onRemoveNotification={this.props.onRemoveNotification} /> } + {authenticated && + + } { authenticated && ( @@ -93,4 +97,4 @@ class NavBar extends Component { } } -export default NavBar; +export default withRouter(connect(({ user }) => ({ user }))(NavBar)); diff --git a/src/components/PublicPursuances/PublicPursuanceList.js b/src/components/PublicPursuances/PublicPursuanceList.js index 8298cca..94b24d6 100644 --- a/src/components/PublicPursuances/PublicPursuanceList.js +++ b/src/components/PublicPursuances/PublicPursuanceList.js @@ -22,6 +22,42 @@ class PublicPursuanceList extends Component { getMemberships({ "user_username" : user.username }); } + sortByDateDesc = (p1, p2) => { + p1["created_parsed"] = Date.parse(p1.created); + p2["created_parsed"] = Date.parse(p2.created); + return p2.created_parsed - p1.created_parsed; + } + + sortByDateAsc = (p1, p2) => { + return p1.created_parsed - p2.created_parsed; + } + + sortByNameAsc = (p1, p2) => { + return p1.name.toLowerCase().localeCompare(p2.name.toLowerCase()); + } + + sortByNameDesc = (p1, p2) => { + return p2.name.toLowerCase().localeCompare(p1.name.toLowerCase()); + } + + sortBy = () => { + switch(this.props.publicOrder) { + case "Most Recent": + return this.sortByDateDesc; + case "Oldest": + return this.sortByDateAsc; + case "A to Z": + return this.sortByNameAsc; + case "Z to A": + return this.sortByNameDesc; + case "Most Popular": + // function + break; + default: + return this.sortByDateDesc; + } + } + onChangeTag = (e) => { this.setState({ searchByTag: e.target.value @@ -31,6 +67,7 @@ class PublicPursuanceList extends Component { getPublicPursuanceList = () => { const { user, publicPursuances, postMembership, memberships, deleteMembership } = this.props; const pursuanceArr = Object.values(publicPursuances); + pursuanceArr.sort(this.sortBy()); return pursuanceArr.map((pursuance) => { if (pursuance.name.toLowerCase().indexOf(this.state.searchByTag) === -1 && pursuance.mission.toLowerCase().indexOf(this.state.searchByTag) === -1) { @@ -108,11 +145,10 @@ class PublicPursuanceList extends Component {
) } - } -export default connect(({ publicPursuances, user, memberships }) => - ({ publicPursuances, user, memberships }),{ +export default connect(({ publicPursuances, user, memberships, publicOrder }) => + ({ publicPursuances, user, memberships, publicOrder }),{ postMembership, getMemberships, deleteMembership diff --git a/src/components/PublicPursuances/PublicPursuances.css b/src/components/PublicPursuances/PublicPursuances.css index 1f71271..82befde 100644 --- a/src/components/PublicPursuances/PublicPursuances.css +++ b/src/components/PublicPursuances/PublicPursuances.css @@ -28,3 +28,71 @@ .pursuance-description h3 { color: #50b3fe; } + +/* Sort dropdown */ + +#dashboard .sort { + position: relative; + display: block; + margin: 10px 0 30px; +} + +#dashboard .sort label { + margin-right: 10px; + color: white; + font-weight: normal; + font-weight: bold; +} + +#sort-dropdown { + height: 100%; + width: 100%; + padding: 0; + text-align: left; + background: none; + color: #e0e0e0; + border: none; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; + position: relative; + padding-right: 13px; + font-size: 14px; +} + +#dashboard .sort .caret { + position: absolute; + top: 50%; + right: -3px; + transform: translate(-50%, -50%); +} + +#dashboard .sort .dropdown > .dropdown-menu { + opacity: 0; + display: block; + transition: opacity 200ms ease-in-out; + max-width: calc(100vw - 200px); +} + +#dashboard .sort .dropdown { + overflow: hidden; +} + +#dashboard .sort .dropdown.open { + overflow: visible; +} + +#dashboard .sort .dropdown.open > .dropdown-menu { + opacity: 1; +} + +#dashboard .sort .dropdown a { + overflow: hidden; + text-overflow: ellipsis; +} + +@media (max-width: 639px) { + #dashboard .sort .dropdown > .dropdown-menu { + max-width: calc(100vw - 140px); + } +} \ No newline at end of file diff --git a/src/components/PublicPursuances/PublicPursuances.js b/src/components/PublicPursuances/PublicPursuances.js index b0e9624..fab2d33 100644 --- a/src/components/PublicPursuances/PublicPursuances.js +++ b/src/components/PublicPursuances/PublicPursuances.js @@ -1,9 +1,10 @@ import React, { Component } from 'react'; import PublicPursuanceList from './PublicPursuanceList'; -import { getPublicPursuances } from '../../actions'; +import { getPublicPursuances, setPublicOrder } from '../../actions'; import { connect } from 'react-redux'; import { PROJECTS_CAPITAL } from '../../constants'; - +import { DropdownButton, MenuItem } from 'react-bootstrap'; +import './PublicPursuances.css'; class PublicPursuances extends Component { @@ -11,6 +12,10 @@ class PublicPursuances extends Component { this.props.getPublicPursuances(); } + handleChange = (value) => { + this.props.setPublicOrder(value); + } + render () { return (
@@ -20,6 +25,43 @@ class PublicPursuances extends Component {
+
+ + + + Most Recent + + + Oldest + + + A to Z + + + Z to A + + +
@@ -29,4 +71,8 @@ class PublicPursuances extends Component { } } -export default connect(null, { getPublicPursuances })(PublicPursuances); +export default connect(({publicOrder}) => ({publicOrder}), { + setPublicOrder, + getPublicPursuances + } +)(PublicPursuances); diff --git a/src/reducers/index.js b/src/reducers/index.js index 7a71929..fdf9917 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,6 +2,7 @@ import { combineReducers } from 'redux'; import taskForm from './taskFormReducer'; import users from './usersReducer'; import pursuances from './pursuancesReducer'; +import publicOrder from './publicOrderReducer'; import publicPursuances from './publicPursuancesReducer'; import currentPursuanceId from './currentPursuanceIdReducer'; import tasks from './tasksReducer'; @@ -24,6 +25,7 @@ const rootReducer = combineReducers({ taskForm, users, pursuances, + publicOrder, publicPursuances, currentPursuanceId, tasks, diff --git a/src/reducers/publicOrderReducer.js b/src/reducers/publicOrderReducer.js new file mode 100644 index 0000000..213c86c --- /dev/null +++ b/src/reducers/publicOrderReducer.js @@ -0,0 +1,8 @@ +export default function(state = 'Most Recent', action) { + switch (action.type) { + case 'SET_PUBLIC_ORDER': + return action.publicOrder; + default: + return state; + } +} \ No newline at end of file diff --git a/src/reducers/publicPursuancesReducer.js b/src/reducers/publicPursuancesReducer.js index c935071..3535890 100644 --- a/src/reducers/publicPursuancesReducer.js +++ b/src/reducers/publicPursuancesReducer.js @@ -9,11 +9,6 @@ export default function(state = {}, action) { case 'GET_PUBLIC_PURSUANCES_REJECTED': return state; - case 'POST_PUBLIC_PURSUANCE_FULFILLED': - return Object.assign({}, state, { - [action.payload.id]: action.payload - }); - default: return state; } From cd300d2d006da7ff599a7fa7dc8d37bee2a49255 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 11:28:19 +0000 Subject: [PATCH 02/10] fix navbar padding --- src/components/NavBar/NavBar.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index cc53fd4..30d90f1 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -17,13 +17,7 @@ .navbar .container { width: 100%; - padding: 0 36px 0 132px; -} - -@media (max-width: 1280px) { - .navbar .container { - padding-left: 95px; - } + padding: 0 32px; } .navbar > .container .navbar-header .navbar-brand { From 8eb8feefdefb661cf2e36228658a784ad73056d3 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 11:39:10 +0000 Subject: [PATCH 03/10] Fix page title --- .../Content/TaskHierarchy/TaskHierarchy.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/Content/TaskHierarchy/TaskHierarchy.css b/src/components/Content/TaskHierarchy/TaskHierarchy.css index 8d0d2bc..7ae38ea 100644 --- a/src/components/Content/TaskHierarchy/TaskHierarchy.css +++ b/src/components/Content/TaskHierarchy/TaskHierarchy.css @@ -3,6 +3,18 @@ margin-right: 50px; } +#task-hierarchy-title { + text-align: center; + padding-bottom: 18px; + margin: 8px 0; +} + +#task-hierarchy-title h2 { + display: inline-block; + color: #fcfcfc; + margin: 0; +} + #task-labels { display: flex; padding: 0 3px 3px 40px; From 709dcca5b35370b01ea94dddb79505898b944c09 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 11:40:06 +0000 Subject: [PATCH 04/10] Bring back mobile menu --- src/components/NavBar/NavBar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js index 32eba0f..8425c89 100644 --- a/src/components/NavBar/NavBar.js +++ b/src/components/NavBar/NavBar.js @@ -28,6 +28,7 @@ class NavBar extends Component { {THIS_PROJECT_NAME} +
    From 8d5c06522cb740f56d5883a388e1360eb9793e54 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 11:49:19 +0000 Subject: [PATCH 05/10] Fix mobile menu layout --- src/components/NavBar/NavBar.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 30d90f1..5a5e072 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -5,7 +5,6 @@ width: 100%; display: flex; justify-content: center; - align-items: center; width: 100%; background-color: #141414; position: fixed; @@ -33,10 +32,6 @@ margin-left: 0; } -.navbar-collapse { - height: 200px; -} - .navbar-collapse.collapse { background-color: black; } @@ -57,6 +52,10 @@ nav li a:hover { float: right; } +.navbar-nav:last-child { + margin-bottom: 0; +} + .navbar-nav li { height: 60px; } From 1f8e53d498c189ebd655ce568b88a45bb5d60bf8 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 11:57:42 +0000 Subject: [PATCH 06/10] reorder navbar project dropdown --- src/components/NavBar/NavBar.css | 2 +- src/components/NavBar/NavBar.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 5a5e072..ba983f6 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -119,7 +119,7 @@ nav li a:hover { } .nav-pursuances { - float: right; + float: left; position: relative; display: block; padding: 0 15px; diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js index 8425c89..837a7a8 100644 --- a/src/components/NavBar/NavBar.js +++ b/src/components/NavBar/NavBar.js @@ -61,6 +61,9 @@ class NavBar extends Component { ) } {!authenticated && } + {authenticated && + + } { authenticated && ( @@ -80,9 +83,6 @@ class NavBar extends Component { onIncreaseContributionAmount={this.props.onIncreaseContributionAmount} onRemoveNotification={this.props.onRemoveNotification} /> } - {authenticated && - - } { authenticated && ( From 4ed72326effb468f12a541255d390029ddd1692c Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 20:13:42 +0000 Subject: [PATCH 07/10] use variable for project name --- src/components/Content/Pursuance/views/AboutView.js | 3 ++- src/components/NavBar/JumpToPursuance/JumpToPursuance.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Content/Pursuance/views/AboutView.js b/src/components/Content/Pursuance/views/AboutView.js index 0be8501..6985c2c 100644 --- a/src/components/Content/Pursuance/views/AboutView.js +++ b/src/components/Content/Pursuance/views/AboutView.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import './AboutView.css'; +import { PROJECT_CAPITAL } from '../../../../constants'; class AboutView extends Component { render() { @@ -9,7 +10,7 @@ class AboutView extends Component { pursuances[currentPursuanceId] : ""; return (
    -

    About This Pursuance

    +

    About This {PROJECT_CAPITAL}

    Name: {p.name}

    Mission: {p.mission}

    diff --git a/src/components/NavBar/JumpToPursuance/JumpToPursuance.js b/src/components/NavBar/JumpToPursuance/JumpToPursuance.js index 4edfecc..01268d3 100644 --- a/src/components/NavBar/JumpToPursuance/JumpToPursuance.js +++ b/src/components/NavBar/JumpToPursuance/JumpToPursuance.js @@ -2,13 +2,14 @@ import React from 'react'; import { connect } from 'react-redux'; import { DropdownButton, MenuItem } from 'react-bootstrap'; import { setCurrentPursuance } from '../../../actions'; +import { PROJECT } from '../../../constants'; const getCurrentPursuanceName = (pursuances, currentPursuanceId) => { const rawPursuance = pursuances[currentPursuanceId]; if (rawPursuance !== undefined) { return rawPursuance.name; } else { - return "Jump to a pursuance"; + return "Jump to a " + PROJECT; } } From 76441ee35b92ff439da51cdd0ba18e706b9e586d Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 21:59:00 +0000 Subject: [PATCH 08/10] Fix for project dropdown in mobile menu --- .../NavBar/JumpToPursuance/JumpToPursuance.js | 4 ++-- src/components/NavBar/NavBar.css | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/NavBar/JumpToPursuance/JumpToPursuance.js b/src/components/NavBar/JumpToPursuance/JumpToPursuance.js index 01268d3..d329bf7 100644 --- a/src/components/NavBar/JumpToPursuance/JumpToPursuance.js +++ b/src/components/NavBar/JumpToPursuance/JumpToPursuance.js @@ -39,7 +39,7 @@ const onMenuItemSelectAction = (pursuanceId, onMenuItemSelect, history) => { const renderDropdown = (props) => { return ( -
    +
  • { > { produceOptions(props.pursuances) } -
    • + ) } diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index ba983f6..31a3e1f 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -36,6 +36,10 @@ background-color: black; } +.navbar-collapse.in { + overflow-y: visible; +} + .navbar-brand:hover { color: #8662ea !important; } @@ -167,6 +171,26 @@ nav li a:hover { color: #262626 !important; } +@media (max-width: 768px) { + .nav-pursuances { + float: none; + } + + .navbar-nav .nav-pursuances .dropdown-menu { + position: absolute; + left: 50%; + transform: translateX(-50%); + max-width: 90%; + background-color: #fff; + } +} + +@media (min-width: 768px) and (max-width: 960px) { + .nav-pursuances { + display: none; + } +} + @media (max-width: 960px) { #header-pursuance-dropdown { max-width: 165px; From bc270c65b15aed3a28a990b8b878a481a4ae935a Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sun, 6 Jan 2019 22:03:28 +0000 Subject: [PATCH 09/10] couple more fixes to project dropdown on mobile --- src/components/NavBar/NavBar.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 31a3e1f..26866a5 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -193,7 +193,9 @@ nav li a:hover { @media (max-width: 960px) { #header-pursuance-dropdown { - max-width: 165px; + max-width: none; + width: auto; + padding-right: 25px; } .nav-pursuances { From daca0d6be114e32b9b259004695092a68d450f92 Mon Sep 17 00:00:00 2001 From: 4xdk Date: Sat, 12 Jan 2019 09:54:05 +0000 Subject: [PATCH 10/10] project dropdown CSS adjustments --- src/components/NavBar/NavBar.css | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css index 26866a5..85c92b0 100644 --- a/src/components/NavBar/NavBar.css +++ b/src/components/NavBar/NavBar.css @@ -72,6 +72,10 @@ nav li a:hover { color: #efefef !important; } +.navbar-nav li:last-child a { + padding-right: 0; +} + .navbar-nav li a:hover { color: #1fc7d3 !important; } @@ -117,7 +121,8 @@ nav li a:hover { border: none; overflow: hidden; text-overflow: ellipsis; - max-width: 200px; + max-width: 280px; + min-width: 70px; position: relative; padding-right: 13px; } @@ -145,12 +150,17 @@ nav li a:hover { overflow: hidden; } +.nav-pursuances .dropdown li { + height: auto; +} + .nav-pursuances .dropdown > .dropdown-menu { opacity: 0; display: block; transition: opacity 200ms ease-in-out; max-width: 300px; overflow: hidden; + padding: 0; } .nav-pursuances .dropdown.open { @@ -165,6 +175,10 @@ nav li a:hover { overflow: hidden; text-overflow: ellipsis; color: #262626 !important; + white-space: normal; + height: auto; + padding: 15px 10px; + text-align: center; } .nav-pursuances .dropdown a:hover { @@ -186,7 +200,7 @@ nav li a:hover { } @media (min-width: 768px) and (max-width: 960px) { - .nav-pursuances { + .nav .nav-pursuances { display: none; } } @@ -201,4 +215,10 @@ nav li a:hover { .nav-pursuances { padding: 0 10px; } +} + +@media (max-width: 1024px) { + #header-pursuance-dropdown { + max-width: 200px; + } } \ No newline at end of file