Skip to content
This repository has been archived by the owner on Feb 12, 2024. It is now read-only.

Commit

Permalink
first pass of improving design and ux of example
Browse files Browse the repository at this point in the history 
- nicer colors
- include logo
- fancier buttons
- easier flow to start daemon
- less information after starting daemon
- use dns signal server
- larger font size
- removal of unused features
- removal of duplicated script references
- more explanation
- and probably something more I forgot
  • Loading branch information
@victorb
victorb committed Jan 27, 2017
1 parent ac866e7 commit ea48e5b
Show file tree
Hide file tree
Showing 5 changed files with 214 additions and 114 deletions.
139 changes: 113 additions & 26 deletions examples/transfer-files/complete/public/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');

body {
font-family: 'Roboto', sans-serif;
font-size: 1.0em;
font-weight: 400;
height: 100vh;
font-family: sans-serif;
color: white;
background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
}

.id {
margin-top: 30px;
font-size: 14px;
}

.id strong {
font-size: 17px;
}

#restart {
position: absolute;
top: 20px;
right: 20px;
}

h1 {
Expand All @@ -13,7 +27,7 @@ h1 {
}

h2 {
font-size: 1.25em;
font-size: 25px;
font-weight: 700;
}

Expand All @@ -22,6 +36,14 @@ h3 {
font-weight: 700;
}

p {
font-size: 17px;
}

.center {
text-align: center;
}

label {
margin-right: 1em;
}
Expand All @@ -44,29 +66,94 @@ input {
color: red;
}

.center {
display: flex;
justify-content: center;
.wrapper {
position: relative;
margin: 50px auto;
padding-top: 50px;
padding-bottom: 50px;
width: 500px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 1px;
}

.ipfs {
min-width: 22em;
max-width: 44em;
flex-grow: 1;
flex-basis: 22em;
border: 1px dashed grey;
padding: 1em;
overflow: auto;
.introduction {
width: 70%;
margin: 0px auto;
text-align: center;
}

.buttons {
margin-top: 1em;
.on-off-button {
position: absolute;
top: 10px;
right: 10px;
}

.picture {
margin-top: 1em;
width: 100%;
background-color: rgba(196, 196, 196, 0.1);
/*padding: 0.25em;*/
/*font-size: 1.2em;*/
}
#directory {
text-align: center;
}

#directory .group {
margin: 30px;
}

#directory label {
font-size: 18px;
display: block;
}

textarea, input, button {
outline: none;
}

button:focus, input:focus {
outline: 5px solid #6acad1;
}

#peers {
margin: 10px;
text-align: left;
font-size: 14px;
word-break: break-all;
}

.peer-item {
margin-bottom: 15px;
}

#logo-link {
position: absolute;
top: 20px;
left: 20px;
width: 32px;
overflow: hidden;
}

.button {
background-color: rgba(0,0,0,0.2);
color: #6acad1;
border: 2px solid #6acad1;
font-size: 15px;
padding: 10px 25px 10px 25px;
border-radius: 2px;
}

button:hover {
color: white;
border: 2px solid white;
cursor: pointer;
}

#directory input {
width: 70%;
font-size: 16px;
border: 2px solid #444;
color: black;
padding: 10px;
border-radius: 2px;
font-family: monospace;
}

.group-item {
display: inline;
line-height: 30px;
}
81 changes: 53 additions & 28 deletions examples/transfer-files/complete/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,67 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/app.css">

<script src="js/ipfs.js"></script>
<script src="js/create-node.js"></script>
<title>IPFS - Transfer Files Example</title>
</head>

<body>
<a href="https://ipfs.io" target="_blank" id="logo-link">
<img src="ipfs-logo.svg" height="32" id="logo">
</a>
<button id="restart" class="button" type="button" onclick="window.location.href = window.location.href">Restart</button>
<div class="center">
<div id="ipfs" class="ipfs" ondragover="event.preventDefault()">
<h1 id="state" class="center"></h1>
<div id="ipfs" class="wrapper" ondragover="event.preventDefault()">
<h1 id="state" class="center">IPFS not running yet</h1>
<div>
<div id="buttons" class="buttons center">
<button id="start" type="button">Start</button>
<button id="stop" type="button">Stop</button>
<div id="buttons" class="on-off-button">
</div>
<div id="directory">
<h2>IPFS Settings</h2>
<label for="dir">Data Directory</label>
<input id="dir" type="text" placeholder="IPFS data directory"/>
<br><br>
<label for="signalServerInput">Signal Server</label>
<input id="signalServerInput" type="text" value="188.166.203.82:20000"/>
<h2>Setup</h2>
<div class="introduction">
<p>
Here you can configure where to keep your IPFS configuration
and which signaling server to use.
</p>
<p>
When you're ready, click "Go Online" to start the IPFS daemon
in the background
</p>
</div>
<div class="group">
<div class="group-item">
<label for="dir">Data Directory:</label>
</div>
<div class="group-item">
<input id="dir" type="text" placeholder="IPFS data directory"/>
</div>
</div>
<div class="group">
<div class="group-item">
<label for="signalServerInput">Signal Server:</label>
</div>
<div class="group-item">
<input id="signalServerInput" type="text" value="star-signal.cloud.ipfs.team"/>
</div>
</div>
<button id="start" class="button" type="button">Go Online</button>
</div>
</div>
<div id="details"></div>
<div id="peers"></div>
<div id="files">
<h2>Files</h2>
<div id="filesStatus"></div>
<br>
<label for="multihash">Mutihash</label>
<input id="multihash" type="text" placeholder="Multihash"/>
<button id="cat" type="button">Cat</button>
<img id="picture" alt=""/>
<div id="details" class="hidden"></div>
<div id="peers" class="hidden"></div>
<div id="files" class="hidden">
<div>
<label for="multihash">Mutihash</label>
<input id="multihash" type="text" placeholder="Multihash"/>
<button id="cat" type="button">Cat</button>
</div>
<div>
<label for="connect-peer">Connect peer</label>
<input class="connect-peer" type="text" placeholder="Multiaddr: ex /ip4/192.168.1.131/tcp/9999/ws "/>
<button class="connect-peer" type="button">Connect</button>
</div>
</div>
<pre id="errors"></pre>
<pre id="errors" class="hidden"></pre>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions examples/transfer-files/complete/public/ipfs-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit ea48e5b

Please sign in to comment.