Skip to content

Commit

Permalink
merge layouts, update theme-ui styles for combined layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@raykyri
raykyri committed May 21, 2023
1 parent 93b48a0 commit 7cf0d5c
Show file tree
Hide file tree
Showing 23 changed files with 307 additions and 411 deletions.
4 changes: 2 additions & 2 deletions client/src/actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export const doSignin = (attrs) => {
// Force page to load so we can be sure the password is cleared from memory
// delay a bit so the cookie has time to set
dispatch({ type: "signin completed successfully" })
window.location.assign("/")
window.location.assign("/conversations")
}, 3000)
},
(err) => dispatch(signinError(err))
Expand Down Expand Up @@ -617,7 +617,7 @@ export const doSignout = (dest) => {
setTimeout(() => {
// Force page to load so we can be sure the old user"s state is cleared from memory
// delay a bit so the cookies have time to clear too.
window.location = dest || "/home"
window.location = dest || "/"
}, 1000)
},
(err) => dispatch(signoutError(err))
Expand Down
205 changes: 84 additions & 121 deletions client/src/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
/** @jsx jsx */

import React from "react"
Expand All @@ -13,8 +12,13 @@ import _ from "lodash"
import { Switch, Route, Link, Redirect } from "react-router-dom"
import { Flex, Box, jsx } from "theme-ui"

import Header from "./pages/header"
import Footer from "./pages/footer"

/* public home page */
import Home from "./pages/home"

/* landing pages */
import Home from "./pages/landing/home"
import TOS from "./pages/landing/tos"
import Privacy from "./pages/landing/privacy"
import PasswordReset from "./pages/landing/password-reset"
Expand All @@ -24,7 +28,7 @@ import SignIn from "./pages/landing/signin"
import SignOut from "./pages/landing/signout"
import CreateUser from "./pages/landing/createuser"

/* manage */
/* conversations */
import Conversations from "./pages/manage/conversations"
import ConversationAdmin from "./pages/manage/admin"
import Account from "./pages/manage/account"
Expand Down Expand Up @@ -127,129 +131,88 @@ class App extends React.Component<
<React.Fragment>
<Switch>
<Redirect from="/:url*(/+)" to={location.pathname.slice(0, -1)} />
<Route exact path="/home" component={Home} />
<Route
exact
path="/signin"
render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
/>
<Route
exact
path="/signin/*"
render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
/>
<Route
exact
path="/signin/**/*"
render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
/>
<Route exact path="/signout" component={SignOut} />
<Route exact path="/signout/*" component={SignOut} />
<Route exact path="/signout/**/*" component={SignOut} />
<Route exact path="/createuser" component={CreateUser} />
<Route exact path="/createuser/*" component={CreateUser} />
<Route exact path="/createuser/**/*" component={CreateUser} />

<Route exact path="/pwreset" component={PasswordReset} />
<Route path="/pwreset/*" component={PasswordReset} />
<Route exact path="/pwresetinit" component={PasswordResetInit} />

<Route exact path="/pwresetinit/done" component={PasswordResetInitDone} />
<Route exact path="/tos" component={TOS} />
<Route exact path="/privacy" component={Privacy} />

<Box>
<Box
sx={{
margin: `0 auto`,
maxWidth: "45em",
padding: `0 1.0875rem 1.45rem`,
}}
>
<Header user={this.props.user} />
<Box
sx={{
width: "100%",
backgroundColor: "primary",
color: "background",
zIndex: 1000,
py: [3],
px: [4],
display: "flex",
alignItems: "center",
justifyContent: "space-between",
pt: "1px", // prevent margins from spilling over
pb: "1em",
minHeight: "calc(100vh - 10.2em)",
}}
>
<Link sx={{ variant: "links.header" }} to="/">
<Logomark
style={{ marginRight: 10, position: "relative", top: 6 }}
fill={"white"}
/>
Polis
</Link>
<Box sx={{ flex: 1 }}></Box>
{this.props.user ? (
<Link sx={{ variant: "links.header" }} to="/signout">
Sign out
</Link>
) : (
<Link sx={{ variant: "links.header" }} to="/signin">
Sign in
</Link>
)}
</Box>
<Route
render={(routeProps) => {
if (routeProps.location.pathname.split("/")[1] === "m") {
return null
}
return (
<Flex>
<Box sx={{ mr: [5], p: [4], flex: "0 0 auto" }}>
<Box sx={{ mb: [3] }}>
<Link sx={{ variant: "links.nav" }} to={`/`}>
Conversations
</Link>
</Box>
<Box sx={{ mb: [3] }}>
<Link sx={{ variant: "links.nav" }} to={`/account`}>
Account
</Link>
<Route exact path="/" render={() => <Home user={this.props.user} />} />
<Route
exact
path="/signin"
render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
/>
<Route
exact
path="/signin/*"
render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
/>
<Route
exact
path="/signin/**/*"
render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
/>
<Route exact path="/signout" component={SignOut} />
<Route exact path="/signout/*" component={SignOut} />
<Route exact path="/signout/**/*" component={SignOut} />
<Route exact path="/createuser" component={CreateUser} />
<Route exact path="/createuser/*" component={CreateUser} />
<Route exact path="/createuser/**/*" component={CreateUser} />

<Route exact path="/pwreset" component={PasswordReset} />
<Route path="/pwreset/*" component={PasswordReset} />
<Route exact path="/pwresetinit" component={PasswordResetInit} />

<Route exact path="/pwresetinit/done" component={PasswordResetInitDone} />
<Route exact path="/tos" component={TOS} />
<Route exact path="/privacy" component={Privacy} />

<Route
render={(routeProps) => {
if (routeProps.location.pathname.split("/")[1] === "m") {
return null
}
return (
<Flex>
<Box>
<PrivateRoute
isLoading={this.isLoading()}
authed={this.isAuthed()}
exact
path="/conversations"
component={Conversations}
/>
<PrivateRoute
isLoading={this.isLoading()}
authed={this.isAuthed()}
exact
path="/account"
component={Account}
/>
<Route path="/c/:conversation_id" component={Survey} />
</Box>
</Box>
<Box
sx={{
p: [4],
flex: "0 0 auto",
maxWidth: "35em",
mx: [4],
}}
>
<PrivateRoute
isLoading={this.isLoading()}
authed={this.isAuthed()}
exact
path="/"
component={Conversations}
/>
<PrivateRoute
isLoading={this.isLoading()}
authed={this.isAuthed()}
exact
path="/conversations"
component={Conversations}
/>
<PrivateRoute
isLoading={this.isLoading()}
authed={this.isAuthed()}
exact
path="/account"
component={Account}
/>
<Route path="/c/:conversation_id" component={Survey} />
</Box>
</Flex>
)
}}
/>
<PrivateRoute
authed={this.isAuthed()}
isLoading={this.isLoading()}
path="/m/:conversation_id"
component={ConversationAdmin}
/>
</Flex>
)
}}
/>
<PrivateRoute
authed={this.isAuthed()}
isLoading={this.isLoading()}
path="/m/:conversation_id"
component={ConversationAdmin}
/>
</Box>
<Footer />
</Box>
</Switch>
</React.Fragment>
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/landing/lander-footer.tsx → client/src/pages/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Box, Link, Heading, jsx } from "theme-ui"
class Header extends Component {
render() {
return (
<Box sx={{ mt: [3, null, 4], mb: [2, null, 3], fontFamily: "monospace" }}>
<Box sx={{ fontFamily: "monospace" }}>
(c) {new Date().getFullYear()} Authors
<Link sx={{ ml: 4 }} href="tos">
TOS
Expand Down
48 changes: 48 additions & 0 deletions client/src/pages/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/** @jsx jsx */
import React, { Component } from "react"
import { Flex, Box, jsx } from "theme-ui"

import { Link } from "react-router-dom"
import Logomark from "./widgets/logomark"

const Header: React.FC<{ user? }> = ({ user }) => {
return (
<Box>
<Flex
sx={{
margin: `0 auto`,
width: "100%",
pt: [5],
pb: [6],
justifyContent: "space-between",
fontFamily: "monospace",
}}
>
<Box sx={{ zIndex: 1000 }}>
<Logomark style={{ marginRight: 10, position: "relative", top: 6 }} fill={"#62a6ef"} />
<Link sx={{ variant: "links.nav" }} to={user ? "/conversations" : "/"}>
Polis
</Link>
</Box>
<Box sx={{ mt: [1], mr: [-4] }}>
{user ? (
<React.Fragment>
<Link sx={{ variant: "links.nav" }} to={`/account`}>
Account
</Link>
<Link sx={{ variant: "links.nav" }} to="/signout">
Sign out
</Link>
</React.Fragment>
) : (
<Link sx={{ variant: "links.nav" }} to="/signin">
Sign in
</Link>
)}
</Box>
</Flex>
</Box>
)
}

export default Header
50 changes: 50 additions & 0 deletions client/src/pages/home.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react"
import { Heading, Box, Text, Link, Button } from "theme-ui"

const Index: React.FC<{ user? }> = ({ user }) => {
return (
<React.Fragment>
<Heading
as="h1"
sx={{
fontSize: [5],
lineHeight: 1.2,
mb: [4],
maxWidth: "20em",
}}
>
An open-source platform for collaborative intelligence
</Heading>
<Box sx={{ mb: [4, null, 5] }}>
<Text sx={{ my: 3 }}>
Polis is a tool for gathering and understanding what a group thinks, and a social platform
for ideas. Starting from a prompt, you can contribute and vote on cards that map out the
space around a topic, and explore it with a team, group, or public community.
</Text>
<Text sx={{ my: 3 }}>
Based on a platform developed by the Computational Democracy Project and used by
governments, academics, and citizens around the world.
</Text>
{user ? (
<Box sx={{ mt: [6] }}>
<Link variant="links.button" href="/conversations">
Go to conversations
</Link>
</Box>
) : (
<Box sx={{ mt: [6] }}>
<Link variant="links.button" href="/createuser">
Sign up
</Link>
<Text sx={{ display: "inline", my: [2], fontFamily: "monospace" }}> or </Text>
<Link variant="links.button" href="/signin">
Sign in
</Link>
</Box>
)}
</Box>
</React.Fragment>
)
}

export default Index
Loading

0 comments on commit 7cf0d5c

Please sign in to comment.