Skip to content

Commit

Permalink
Merge pull request #860 from unitaryfund/homepage_mockup
Browse files Browse the repository at this point in the history 
Homepage mockup
  • Loading branch information
@WrathfulSpatula
WrathfulSpatula authored Jul 24, 2023
2 parents 5253c01 + dd107f7 commit f121fdd
Show file tree
Hide file tree
Showing 25 changed files with 849 additions and 520 deletions.
86 changes: 79 additions & 7 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
.App {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #F6F6F6;
}

.centered-tabs > nav {
display: flex;
flex-direction: row;
justify-content: center;
/* justify-content: center; */
}

textarea {
Expand All @@ -26,6 +25,14 @@ textarea {
padding-top: 10px;
}

.search-accent {
outline: solid !important;
outline-width: 4px !important;
outline-color: #68D0F4 !important;
border-radius: 4px;
padding: 0;
}

.main-search-bar {
display: inline-block;
padding-top: 8px;
Expand Down Expand Up @@ -74,6 +81,7 @@ textarea {
.metriq-header {
margin-top: 16px;
font-family: 'Arial', sans-serif;
color: #04165D
}

.metriq-navbar h2 {
Expand Down Expand Up @@ -110,7 +118,7 @@ textarea {
.nav-tabs {
display: flex;
flex-direction: row;
justify-content: center;
/* justify-content: center;*/
}

.metriq-navbar-spacer {
Expand Down Expand Up @@ -158,6 +166,8 @@ textarea {
#metriq-main-content {
min-height: 700px;
padding-top: 20px;
padding-left: 32px;
padding-right: 32px;
}

@keyframes App-logo-spin {
Expand Down Expand Up @@ -213,15 +223,39 @@ form > span > .row > label {
padding: 12px;
}

.view-header {
color: #04165D
}

.task {
padding: 32px;
box-shadow: 0 3px 12px rgba(33,33,33,.2);
}

.submission-cell {
padding: 8px;
min-width: 256px;
}

.submission {
border-radius: 16px;
margin: 6px;
padding: 8px;
margin: 6px;
background-color: #FFFFFF;
}

.submission:hover {
box-shadow: 0 0 16px rgba(33,33,33,.2);
box-shadow: 0 3px 16px rgba(33,33,33,.2);
}

.submission-large {
border-radius: 16px;
box-shadow: 0 3px 12px rgba(33,33,33,.2);
}

.category-item-box {
display: inline-block;
height: 128px;
padding: 12px;
}

.delete-button {
Expand Down Expand Up @@ -266,6 +300,27 @@ form > span > .row > label {
padding: 8px;
}

.submission-image-small {
display: inline-block;
vertical-align: -40px;
width: 60px;
height: auto;
max-width: 120px;
max-height: 120px;
padding-top: 16px;
padding-bottom: 16px;
}

.submission-heading-small {
padding-top: 16px;
padding-bottom: 16px;
}

.top-submitters-card {
padding: 8px 16px 8px 16px;
box-shadow: 0 3px 12px rgba(33,33,33,.2);
}

.submission-detail-image {
display: inline-block;
vertical-align: -128px;
Expand Down Expand Up @@ -307,6 +362,17 @@ form > span > .row > label {
text-align: left;
}

.category-item-icon {
width: 22%;
display: inline-block;
padding-left: 24px;
}

.platforms-more-button {
background-color: #68D0F4;
margin-left: 24px;
}

.edit-button {
width: 80px;
height: 40px;
Expand Down Expand Up @@ -351,7 +417,7 @@ form > span > .row > label {
color: white;
}

.container .submission a {
.submission a {
color: #000000;
text-decoration: none;
}
Expand All @@ -378,6 +444,12 @@ form > span > .row > label {
width: 100%;
}

.sota-preview {
display: inline-block;
height: 256px;
width: 256px;
}

iframe {
display: block;
border-style:none;
Expand Down
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SimpleReactFooter from './components/simple-react-footer/SimpleReactFoote

const App = () =>
<div className='App'>
<MainRouter id='metriq-main-content' />
<MainRouter />
<SimpleReactFooter
title='metriq'
description='Quantum computing benchmarks by community contributors'
Expand Down
19 changes: 10 additions & 9 deletions src/MainRouter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import axios from 'axios'
import React, { useState } from 'react'
import config from './config'
import Home from './views/Home'
import Submissions from './views/Submissions'
import LogIn from './views/LogIn'
import Register from './views/Register'
import Delete from './views/Delete'
Expand Down Expand Up @@ -60,31 +61,31 @@ const MainRouter = (props) => {
exact
path='/'
>
<Tasks isLoggedIn={isLoggedIn} isHomepage />
<Home isLoggedIn={isLoggedIn} isHomepage />
</Route>
<Route
exact
path='/Submissions/'
>
<Home isLoggedIn={isLoggedIn} />
<Submissions isLoggedIn={isLoggedIn} />
</Route>
<Route
exact
path='/Submissions/Trending'
>
<Home isLoggedIn={isLoggedIn} tabKey='Trending' />
<Submissions isLoggedIn={isLoggedIn} tabKey='Trending' />
</Route>
<Route
exact
path='/Submissions/Popular'
>
<Home isLoggedIn={isLoggedIn} tabKey='Popular' />
<Submissions isLoggedIn={isLoggedIn} tabKey='Popular' />
</Route>
<Route
exact
path='/Submissions/Latest'
>
<Home isLoggedIn={isLoggedIn} tabKey='Latest' />
<Submissions isLoggedIn={isLoggedIn} tabKey='Latest' />
</Route>
<Route
exact
Expand Down Expand Up @@ -207,22 +208,22 @@ const MainRouter = (props) => {
<Route
exact
path='/Tag/:tag'
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag />}
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag />}
/>
<Route
exact
path='/Tag/:tag/Trending'
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Trending' />}
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Trending' />}
/>
<Route
exact
path='/Tag/:tag/Popular'
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Popular' />}
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Popular' />}
/>
<Route
exact
path='/Tag/:tag/Latest'
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Latest' />}
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Latest' />}
/>
<Route
exact
Expand Down
98 changes: 33 additions & 65 deletions src/components/CategoryItemBox.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React, { useState } from 'react'
import axios from 'axios'
import React from 'react'
import CategoryItemIcon from './CategoryItemIcon'
import SubscribeButton from './SubscribeButton'
import { useHistory, Link } from 'react-router-dom'
import { Link } from 'react-router-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHeart, faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons'
import config from '../config'
import ErrorHandler from './ErrorHandler'
import { renderLatex } from '../components/RenderLatex'

library.add(faHeart, faExternalLinkAlt, faChartLine)
Expand All @@ -26,67 +23,38 @@ const pickDetailUrl = (type, item) => {
}

const CategoryItemBox = (props) => {
const history = useHistory()
const [isSubscribed, setIsSubscribed] = useState(props.item.isSubscribed)

const handleLoginRedirect = (type) => {
if (type === 'tag') {
history.push('/Login/Tags')
} else if (type === 'task') {
history.push('/Login/Tasks')
} else if (type === 'method') {
history.push('/Login/Methods')
} else if (type === 'platform') {
history.push('/Login/Platforms')
}
}

const handleSubscribe = () => {
if (props.isLoggedIn) {
axios.post(config.api.getUriPrefix() + '/' + props.type + '/' + (props.type === 'tag' ? encodeURIComponent(props.item.name) : props.item.id) + '/subscribe', {})
.then(res => {
if (props.type === 'tag') {
setIsSubscribed(res.data.data)
} else {
setIsSubscribed(!!res.data.data.isSubscribed)
}
})
.catch(err => {
window.alert('Error: ' + ErrorHandler(err) + '\nSorry! Check your connection and login status, and try again.')
})
} else {
handleLoginRedirect(props.type)
}
}

return (
<tr>
<td>
<div className='row submission'>
<div className='col-12 col-md-7'>
<Link to={pickDetailUrl(props.type, props.item)}>
{props.type !== 'tag' && props.item.description &&
<div>
<div className='submission-heading'>
{props.item.name}
{props.type === 'task' && qedcIds.includes(parseInt(props.item.id)) &&
<span> <Link to='/QEDC'><span className='link'>(QED-C)</span></Link></span>}
</div>
<div className='submission-description'>{renderLatex(props.item.description)}</div>
</div>}
{(props.type === 'tag' || !props.item.description) &&
<div className='submission-heading-only'>{props.item.name}</div>}
</Link>
</div>
<div className='col-12 col-md-2 text-center'>
<SubscribeButton isSubscribed={isSubscribed} typeLabel={props.type} onSubscribe={handleSubscribe} />
</div>
<CategoryItemIcon count={props.item.resultCount} type={props.type} word='results' icon={faChartLine} />
<CategoryItemIcon count={props.item.submissionCount} type={props.type} word='submissions' icon={faExternalLinkAlt} />
<CategoryItemIcon count={props.item.upvoteTotal} type={props.type} word='up-votes' icon={faHeart} />
</div>
</td>
</tr>
<div className={'col-lg-4 col ' + (props.isPreview ? '' : 'submission-cell')}>
<div className='submission submission-large'>
<Link to={pickDetailUrl(props.type, props.item)} className='category-item-box'>
{props.type !== 'tag' && props.item.description &&
<div>
<div className='submission-heading'>
{props.item.name}
{props.type === 'task' && qedcIds.includes(parseInt(props.item.id)) &&
<span> <Link to='/QEDC'><span className='link'>(QED-C)</span></Link></span>}
</div>
<div className='submission-description'>{renderLatex(
!props.item.description
? ''
: ((!props.isPreview && (props.item.description.length > 128))
? (props.item.description.substring(0, 125) + '...')
: props.item.description))}
</div>
</div>}
{(props.type === 'tag' || !props.item.description) &&
<div className='submission-heading-only'>{props.item.name}</div>}
</Link>
<br />
<SubscribeButton item={props.item} type={props.type} isLoggedIn={props.isLoggedIn} />
{!props.isPreview &&
<span>
<CategoryItemIcon count={props.item.resultCount} type={props.type} word='results' icon={faChartLine} />
<CategoryItemIcon count={props.item.submissionCount} type={props.type} word='submissions' icon={faExternalLinkAlt} />
<CategoryItemIcon count={props.item.upvoteTotal} type={props.type} word='up-votes' icon={faHeart} />
</span>}
</div>
</div>
)
}

Expand Down
8 changes: 3 additions & 5 deletions src/components/CategoryItemIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import TooltipTrigger from './TooltipTrigger'

const CategoryItemIcon = (props) =>
<div className='col-4 col-md-1'>
<TooltipTrigger message={'Count of ' + props.word + ', with ' + props.type}>
<span><FontAwesomeIcon icon={props.icon} /><br />{props.count}</span>
</TooltipTrigger>
</div>
<TooltipTrigger message={'Count of ' + props.word + ', with ' + props.type}>
<div className='category-item-icon'><FontAwesomeIcon icon={props.icon} /> {props.count}</div>
</TooltipTrigger>

export default CategoryItemIcon
Loading

0 comments on commit f121fdd

Please sign in to comment.