Skip to content
This repository was archived by the owner on Sep 4, 2025. It is now read-only.

Commit f121fdd

Browse files
WrathfulSpatulaWrathfulSpatula
authored
Merge pull request #860 from unitaryfund/homepage_mockup
Homepage mockup
2 parents 5253c01 + dd107f7 commit f121fdd

25 files changed

+849
-520
lines changed

‎src/App.css‎

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
.App {
22
text-align: center;
33
font-family: Arial, Helvetica, sans-serif;
4-
background-color: #F6F6F6;
54
}
65

76
.centered-tabs > nav {
87
display: flex;
98
flex-direction: row;
10-
justify-content: center;
9+
/* justify-content: center; */
1110
}
1211

1312
textarea {
@@ -26,6 +25,14 @@ textarea {
2625
padding-top: 10px;
2726
}
2827

28+
.search-accent {
29+
outline: solid !important;
30+
outline-width: 4px !important;
31+
outline-color: #68D0F4 !important;
32+
border-radius: 4px;
33+
padding: 0;
34+
}
35+
2936
.main-search-bar {
3037
display: inline-block;
3138
padding-top: 8px;
@@ -74,6 +81,7 @@ textarea {
7481
.metriq-header {
7582
margin-top: 16px;
7683
font-family: 'Arial', sans-serif;
84+
color: #04165D
7785
}
7886

7987
.metriq-navbar h2 {
@@ -110,7 +118,7 @@ textarea {
110118
.nav-tabs {
111119
display: flex;
112120
flex-direction: row;
113-
justify-content: center;
121+
/* justify-content: center;*/
114122
}
115123

116124
.metriq-navbar-spacer {
@@ -158,6 +166,8 @@ textarea {
158166
#metriq-main-content {
159167
min-height: 700px;
160168
padding-top: 20px;
169+
padding-left: 32px;
170+
padding-right: 32px;
161171
}
162172

163173
@keyframes App-logo-spin {
@@ -213,15 +223,39 @@ form > span > .row > label {
213223
padding: 12px;
214224
}
215225

226+
.view-header {
227+
color: #04165D
228+
}
229+
230+
.task {
231+
padding: 32px;
232+
box-shadow: 0 3px 12px rgba(33,33,33,.2);
233+
}
234+
235+
.submission-cell {
236+
padding: 8px;
237+
min-width: 256px;
238+
}
239+
216240
.submission {
217-
border-radius: 16px;
218-
margin: 6px;
219241
padding: 8px;
242+
margin: 6px;
220243
background-color: #FFFFFF;
221244
}
222245

223246
.submission:hover {
224-
box-shadow: 0 0 16px rgba(33,33,33,.2);
247+
box-shadow: 0 3px 16px rgba(33,33,33,.2);
248+
}
249+
250+
.submission-large {
251+
border-radius: 16px;
252+
box-shadow: 0 3px 12px rgba(33,33,33,.2);
253+
}
254+
255+
.category-item-box {
256+
display: inline-block;
257+
height: 128px;
258+
padding: 12px;
225259
}
226260

227261
.delete-button {
@@ -266,6 +300,27 @@ form > span > .row > label {
266300
padding: 8px;
267301
}
268302

303+
.submission-image-small {
304+
display: inline-block;
305+
vertical-align: -40px;
306+
width: 60px;
307+
height: auto;
308+
max-width: 120px;
309+
max-height: 120px;
310+
padding-top: 16px;
311+
padding-bottom: 16px;
312+
}
313+
314+
.submission-heading-small {
315+
padding-top: 16px;
316+
padding-bottom: 16px;
317+
}
318+
319+
.top-submitters-card {
320+
padding: 8px 16px 8px 16px;
321+
box-shadow: 0 3px 12px rgba(33,33,33,.2);
322+
}
323+
269324
.submission-detail-image {
270325
display: inline-block;
271326
vertical-align: -128px;
@@ -307,6 +362,17 @@ form > span > .row > label {
307362
text-align: left;
308363
}
309364

365+
.category-item-icon {
366+
width: 22%;
367+
display: inline-block;
368+
padding-left: 24px;
369+
}
370+
371+
.platforms-more-button {
372+
background-color: #68D0F4;
373+
margin-left: 24px;
374+
}
375+
310376
.edit-button {
311377
width: 80px;
312378
height: 40px;
@@ -351,7 +417,7 @@ form > span > .row > label {
351417
color: white;
352418
}
353419

354-
.container .submission a {
420+
.submission a {
355421
color: #000000;
356422
text-decoration: none;
357423
}
@@ -378,6 +444,12 @@ form > span > .row > label {
378444
width: 100%;
379445
}
380446

447+
.sota-preview {
448+
display: inline-block;
449+
height: 256px;
450+
width: 256px;
451+
}
452+
381453
iframe {
382454
display: block;
383455
border-style:none;

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SimpleReactFooter from './components/simple-react-footer/SimpleReactFoote
44

55
const App = () =>
66
<div className='App'>
7-
<MainRouter id='metriq-main-content' />
7+
<MainRouter />
88
<SimpleReactFooter
99
title='metriq'
1010
description='Quantum computing benchmarks by community contributors'

‎src/MainRouter.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import axios from 'axios'
33
import React, { useState } from 'react'
44
import config from './config'
55
import Home from './views/Home'
6+
import Submissions from './views/Submissions'
67
import LogIn from './views/LogIn'
78
import Register from './views/Register'
89
import Delete from './views/Delete'
@@ -60,31 +61,31 @@ const MainRouter = (props) => {
6061
exact
6162
path='/'
6263
>
63-
<Tasks isLoggedIn={isLoggedIn} isHomepage />
64+
<Home isLoggedIn={isLoggedIn} isHomepage />
6465
</Route>
6566
<Route
6667
exact
6768
path='/Submissions/'
6869
>
69-
<Home isLoggedIn={isLoggedIn} />
70+
<Submissions isLoggedIn={isLoggedIn} />
7071
</Route>
7172
<Route
7273
exact
7374
path='/Submissions/Trending'
7475
>
75-
<Home isLoggedIn={isLoggedIn} tabKey='Trending' />
76+
<Submissions isLoggedIn={isLoggedIn} tabKey='Trending' />
7677
</Route>
7778
<Route
7879
exact
7980
path='/Submissions/Popular'
8081
>
81-
<Home isLoggedIn={isLoggedIn} tabKey='Popular' />
82+
<Submissions isLoggedIn={isLoggedIn} tabKey='Popular' />
8283
</Route>
8384
<Route
8485
exact
8586
path='/Submissions/Latest'
8687
>
87-
<Home isLoggedIn={isLoggedIn} tabKey='Latest' />
88+
<Submissions isLoggedIn={isLoggedIn} tabKey='Latest' />
8889
</Route>
8990
<Route
9091
exact
@@ -207,22 +208,22 @@ const MainRouter = (props) => {
207208
<Route
208209
exact
209210
path='/Tag/:tag'
210-
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag />}
211+
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag />}
211212
/>
212213
<Route
213214
exact
214215
path='/Tag/:tag/Trending'
215-
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Trending' />}
216+
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Trending' />}
216217
/>
217218
<Route
218219
exact
219220
path='/Tag/:tag/Popular'
220-
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Popular' />}
221+
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Popular' />}
221222
/>
222223
<Route
223224
exact
224225
path='/Tag/:tag/Latest'
225-
render={(p) => <Home {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Latest' />}
226+
render={(p) => <Submissions {...p} isLoggedIn={isLoggedIn} onLogin={handleLogin} isTag tabKey='Latest' />}
226227
/>
227228
<Route
228229
exact

‎src/components/CategoryItemBox.js‎

Lines changed: 33 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import React, { useState } from 'react'
2-
import axios from 'axios'
1+
import React from 'react'
32
import CategoryItemIcon from './CategoryItemIcon'
43
import SubscribeButton from './SubscribeButton'
5-
import { useHistory, Link } from 'react-router-dom'
4+
import { Link } from 'react-router-dom'
65
import { library } from '@fortawesome/fontawesome-svg-core'
76
import { faHeart, faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons'
8-
import config from '../config'
9-
import ErrorHandler from './ErrorHandler'
107
import { renderLatex } from '../components/RenderLatex'
118

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

2825
const CategoryItemBox = (props) => {
29-
const history = useHistory()
30-
const [isSubscribed, setIsSubscribed] = useState(props.item.isSubscribed)
31-
32-
const handleLoginRedirect = (type) => {
33-
if (type === 'tag') {
34-
history.push('/Login/Tags')
35-
} else if (type === 'task') {
36-
history.push('/Login/Tasks')
37-
} else if (type === 'method') {
38-
history.push('/Login/Methods')
39-
} else if (type === 'platform') {
40-
history.push('/Login/Platforms')
41-
}
42-
}
43-
44-
const handleSubscribe = () => {
45-
if (props.isLoggedIn) {
46-
axios.post(config.api.getUriPrefix() + '/' + props.type + '/' + (props.type === 'tag' ? encodeURIComponent(props.item.name) : props.item.id) + '/subscribe', {})
47-
.then(res => {
48-
if (props.type === 'tag') {
49-
setIsSubscribed(res.data.data)
50-
} else {
51-
setIsSubscribed(!!res.data.data.isSubscribed)
52-
}
53-
})
54-
.catch(err => {
55-
window.alert('Error: ' + ErrorHandler(err) + '\nSorry! Check your connection and login status, and try again.')
56-
})
57-
} else {
58-
handleLoginRedirect(props.type)
59-
}
60-
}
61-
6226
return (
63-
<tr>
64-
<td>
65-
<div className='row submission'>
66-
<div className='col-12 col-md-7'>
67-
<Link to={pickDetailUrl(props.type, props.item)}>
68-
{props.type !== 'tag' && props.item.description &&
69-
<div>
70-
<div className='submission-heading'>
71-
{props.item.name}
72-
{props.type === 'task' && qedcIds.includes(parseInt(props.item.id)) &&
73-
<span> <Link to='/QEDC'><span className='link'>(QED-C)</span></Link></span>}
74-
</div>
75-
<div className='submission-description'>{renderLatex(props.item.description)}</div>
76-
</div>}
77-
{(props.type === 'tag' || !props.item.description) &&
78-
<div className='submission-heading-only'>{props.item.name}</div>}
79-
</Link>
80-
</div>
81-
<div className='col-12 col-md-2 text-center'>
82-
<SubscribeButton isSubscribed={isSubscribed} typeLabel={props.type} onSubscribe={handleSubscribe} />
83-
</div>
84-
<CategoryItemIcon count={props.item.resultCount} type={props.type} word='results' icon={faChartLine} />
85-
<CategoryItemIcon count={props.item.submissionCount} type={props.type} word='submissions' icon={faExternalLinkAlt} />
86-
<CategoryItemIcon count={props.item.upvoteTotal} type={props.type} word='up-votes' icon={faHeart} />
87-
</div>
88-
</td>
89-
</tr>
27+
<div className={'col-lg-4 col ' + (props.isPreview ? '' : 'submission-cell')}>
28+
<div className='submission submission-large'>
29+
<Link to={pickDetailUrl(props.type, props.item)} className='category-item-box'>
30+
{props.type !== 'tag' && props.item.description &&
31+
<div>
32+
<div className='submission-heading'>
33+
{props.item.name}
34+
{props.type === 'task' && qedcIds.includes(parseInt(props.item.id)) &&
35+
<span> <Link to='/QEDC'><span className='link'>(QED-C)</span></Link></span>}
36+
</div>
37+
<div className='submission-description'>{renderLatex(
38+
!props.item.description
39+
? ''
40+
: ((!props.isPreview && (props.item.description.length > 128))
41+
? (props.item.description.substring(0, 125) + '...')
42+
: props.item.description))}
43+
</div>
44+
</div>}
45+
{(props.type === 'tag' || !props.item.description) &&
46+
<div className='submission-heading-only'>{props.item.name}</div>}
47+
</Link>
48+
<br />
49+
<SubscribeButton item={props.item} type={props.type} isLoggedIn={props.isLoggedIn} />
50+
{!props.isPreview &&
51+
<span>
52+
<CategoryItemIcon count={props.item.resultCount} type={props.type} word='results' icon={faChartLine} />
53+
<CategoryItemIcon count={props.item.submissionCount} type={props.type} word='submissions' icon={faExternalLinkAlt} />
54+
<CategoryItemIcon count={props.item.upvoteTotal} type={props.type} word='up-votes' icon={faHeart} />
55+
</span>}
56+
</div>
57+
</div>
9058
)
9159
}
9260

‎src/components/CategoryItemIcon.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import TooltipTrigger from './TooltipTrigger'
44

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

1210
export default CategoryItemIcon

0 commit comments

Comments
 (0)