status-im/sourcecred
2
0
Fork 0
mirror of https://github.com/status-im/sourcecred.git synced 2025-02-17 06:56:36 +00:00
Code Issues Projects Releases Wiki Activity

Frontend visual cleanup (#21)

Browse Source 
* Use font roboto

* Change title.

* Add grid gap

* Restyle app; blue header, and css->inline.

* Further visual cleanup.

- Apply consistent formatting to the two plugin panes.
- Add scroll to the User Explorer.
- Both have white backgrounds with centered titles.
This commit is contained in:
Dandelion Mané 2018-02-18 02:00:11 -08:00 committed by GitHub
parent 167289a75a
commit de359dbaa4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
explorer/public/index.html
View File

@ -10,6 +10,7 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
@ -19,7 +20,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>SourceCred Explorer</title>
</head>
<body>
<noscript>

22
explorer/src/App.css
View File

@ -6,16 +6,13 @@
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 4px;
width: 100%;
}
html, body, #root, .App {
height: 100%;
}
.App-header {
text-align: center;
font-family: Roboto, sans-serif;
}
.anchor-button:visited {
@ -26,11 +23,8 @@ html, body, #root, .App {
background-color: #ddd;
}
.App-header {
background-color: #222;
padding: 5px;
color: white;
grid-area: header;
.App-intro {
font-size: large;
}
.App-title {
@ -41,11 +35,15 @@ html, body, #root, .App {
font-size: large;
}
.plugin-pane {
overflow: scroll;
background-color: white;
border-radius: 5px;
margin: 8px;
}
.file-explorer {
grid-area: fileexplorer;
background-color: #aea;
overflow: scroll;
}
.user-explorer {

18
explorer/src/App.js
View File

@ -16,9 +16,21 @@ class App extends Component<{}, AppState> {
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">SourceCred Explorer</h1>
<div className="App" style={{backgroundColor: "#eeeeee"}}>
<header
style={{
backgroundColor: "#01579B",
color: "white",
gridArea: "header",
textAlign: "center",
boxShadow: "0px 2px 2px #aeaeae",
}}
>
<h1
style={{fontSize: "1.5em"}}
>SourceCred Explorer
</h1>
</header>
<FileExplorer
className="file-explorer"

25
explorer/src/FileExplorer.js
View File

@ -19,19 +19,18 @@ export class FileExplorer extends Component<{
}
this.props.onSelectPath(path);
}
return <div className="file-explorer" style={{
fontFamily: "monospace",
textAlign: "left",
}}>
<h3>File Explorer</h3>
<FileEntry
alwaysExpand={true}
name=""
path="."
tree={tree}
onSelectPath={selectPath}
selectedPath={`./${this.props.selectedPath}`}
/>
return <div className="file-explorer plugin-pane">
<h3 style={{textAlign: "center"}}>File Explorer</h3>
<div style={{fontFamily: "monospace"}}>
<FileEntry
alwaysExpand={true}
name=""
path="."
tree={tree}
onSelectPath={selectPath}
selectedPath={`./${this.props.selectedPath}`}
/>
</div>
</div>
}
}

10
explorer/src/UserExplorer.js
View File

@ -20,9 +20,13 @@ export class UserExplorer extends Component<{
const [author, weight] = authorWeight;
return <UserEntry userId={author} weight={weight} key={author}/>
});
return <div className="user-explorer">
<h3> User Explorer </h3>
{entries}
return <div
className="user-explorer plugin-pane"
>
<h3 style={{textAlign: "center"}}> User Explorer </h3>
<div style={{marginLeft: 8, marginRight: 8}}>
{entries}
</div>
</div>
}