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

Commit ea48e5b

Browse files
victorbvictorb
committed
first pass of improving design and ux of example
- 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
1 parent ac866e7 commit ea48e5b

File tree

5 files changed

+214
-114
lines changed

5 files changed

+214
-114
lines changed

‎examples/transfer-files/complete/public/css/app.css

Lines changed: 113 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
1-
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
2-
31
body {
4-
font-family: 'Roboto', sans-serif;
5-
font-size: 1.0em;
6-
font-weight: 400;
2+
height: 100vh;
3+
font-family: sans-serif;
4+
color: white;
5+
background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
6+
}
7+
8+
.id {
9+
margin-top: 30px;
10+
font-size: 14px;
11+
}
12+
13+
.id strong {
14+
font-size: 17px;
15+
}
16+
17+
#restart {
18+
position: absolute;
19+
top: 20px;
20+
right: 20px;
721
}
822

923
h1 {
@@ -13,7 +27,7 @@ h1 {
1327
}
1428

1529
h2 {
16-
font-size: 1.25em;
30+
font-size: 25px;
1731
font-weight: 700;
1832
}
1933

@@ -22,6 +36,14 @@ h3 {
2236
font-weight: 700;
2337
}
2438

39+
p {
40+
font-size: 17px;
41+
}
42+
43+
.center {
44+
text-align: center;
45+
}
46+
2547
label {
2648
margin-right: 1em;
2749
}
@@ -44,29 +66,94 @@ input {
4466
color: red;
4567
}
4668

47-
.center {
48-
display: flex;
49-
justify-content: center;
69+
.wrapper {
70+
position: relative;
71+
margin: 50px auto;
72+
padding-top: 50px;
73+
padding-bottom: 50px;
74+
width: 500px;
75+
background-color: rgba(255, 255, 255, 0.05);
76+
border-radius: 1px;
5077
}
5178

52-
.ipfs {
53-
min-width: 22em;
54-
max-width: 44em;
55-
flex-grow: 1;
56-
flex-basis: 22em;
57-
border: 1px dashed grey;
58-
padding: 1em;
59-
overflow: auto;
79+
.introduction {
80+
width: 70%;
81+
margin: 0px auto;
82+
text-align: center;
6083
}
6184

62-
.buttons {
63-
margin-top: 1em;
85+
.on-off-button {
86+
position: absolute;
87+
top: 10px;
88+
right: 10px;
6489
}
6590

66-
.picture {
67-
margin-top: 1em;
68-
width: 100%;
69-
background-color: rgba(196, 196, 196, 0.1);
70-
/*padding: 0.25em;*/
71-
/*font-size: 1.2em;*/
72-
}
91+
#directory {
92+
text-align: center;
93+
}
94+
95+
#directory .group {
96+
margin: 30px;
97+
}
98+
99+
#directory label {
100+
font-size: 18px;
101+
display: block;
102+
}
103+
104+
textarea, input, button {
105+
outline: none;
106+
}
107+
108+
button:focus, input:focus {
109+
outline: 5px solid #6acad1;
110+
}
111+
112+
#peers {
113+
margin: 10px;
114+
text-align: left;
115+
font-size: 14px;
116+
word-break: break-all;
117+
}
118+
119+
.peer-item {
120+
margin-bottom: 15px;
121+
}
122+
123+
#logo-link {
124+
position: absolute;
125+
top: 20px;
126+
left: 20px;
127+
width: 32px;
128+
overflow: hidden;
129+
}
130+
131+
.button {
132+
background-color: rgba(0,0,0,0.2);
133+
color: #6acad1;
134+
border: 2px solid #6acad1;
135+
font-size: 15px;
136+
padding: 10px 25px 10px 25px;
137+
border-radius: 2px;
138+
}
139+
140+
button:hover {
141+
color: white;
142+
border: 2px solid white;
143+
cursor: pointer;
144+
}
145+
146+
#directory input {
147+
width: 70%;
148+
font-size: 16px;
149+
border: 2px solid #444;
150+
color: black;
151+
padding: 10px;
152+
border-radius: 2px;
153+
font-family: monospace;
154+
}
155+
156+
.group-item {
157+
display: inline;
158+
line-height: 30px;
159+
}

‎examples/transfer-files/complete/public/index.html

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,67 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23
<head>
3-
<meta charset="utf-8">
4+
<meta charset="UTF-8">
45
<link rel="stylesheet" href="css/app.css">
5-
6-
<script src="js/ipfs.js"></script>
7-
<script src="js/create-node.js"></script>
6+
<title>IPFS - Transfer Files Example</title>
87
</head>
9-
108
<body>
9+
<a href="https://ipfs.io" target="_blank" id="logo-link">
10+
<img src="ipfs-logo.svg" height="32" id="logo">
11+
</a>
12+
<button id="restart" class="button" type="button" onclick="window.location.href = window.location.href">Restart</button>
1113
<div class="center">
12-
<div id="ipfs" class="ipfs" ondragover="event.preventDefault()">
13-
<h1 id="state" class="center"></h1>
14+
<div id="ipfs" class="wrapper" ondragover="event.preventDefault()">
15+
<h1 id="state" class="center">IPFS not running yet</h1>
1416
<div>
15-
<div id="buttons" class="buttons center">
16-
<button id="start" type="button">Start</button>
17-
<button id="stop" type="button">Stop</button>
17+
<div id="buttons" class="on-off-button">
1818
</div>
1919
<div id="directory">
20-
<h2>IPFS Settings</h2>
21-
<label for="dir">Data Directory</label>
22-
<input id="dir" type="text" placeholder="IPFS data directory"/>
23-
<br><br>
24-
<label for="signalServerInput">Signal Server</label>
25-
<input id="signalServerInput" type="text" value="188.166.203.82:20000"/>
20+
<h2>Setup</h2>
21+
<div class="introduction">
22+
<p>
23+
Here you can configure where to keep your IPFS configuration
24+
and which signaling server to use.
25+
</p>
26+
<p>
27+
When you're ready, click "Go Online" to start the IPFS daemon
28+
in the background
29+
</p>
30+
</div>
31+
<div class="group">
32+
<div class="group-item">
33+
<label for="dir">Data Directory:</label>
34+
</div>
35+
<div class="group-item">
36+
<input id="dir" type="text" placeholder="IPFS data directory"/>
37+
</div>
38+
</div>
39+
<div class="group">
40+
<div class="group-item">
41+
<label for="signalServerInput">Signal Server:</label>
42+
</div>
43+
<div class="group-item">
44+
<input id="signalServerInput" type="text" value="star-signal.cloud.ipfs.team"/>
45+
</div>
46+
</div>
47+
<button id="start" class="button" type="button">Go Online</button>
2648
</div>
2749
</div>
28-
<div id="details"></div>
29-
<div id="peers"></div>
30-
<div id="files">
31-
<h2>Files</h2>
32-
<div id="filesStatus"></div>
33-
<br>
34-
<label for="multihash">Mutihash</label>
35-
<input id="multihash" type="text" placeholder="Multihash"/>
36-
<button id="cat" type="button">Cat</button>
37-
<img id="picture" alt=""/>
50+
<div id="details" class="hidden"></div>
51+
<div id="peers" class="hidden"></div>
52+
<div id="files" class="hidden">
53+
<div>
54+
<label for="multihash">Mutihash</label>
55+
<input id="multihash" type="text" placeholder="Multihash"/>
56+
<button id="cat" type="button">Cat</button>
57+
</div>
58+
<div>
59+
<label for="connect-peer">Connect peer</label>
60+
<input class="connect-peer" type="text" placeholder="Multiaddr: ex /ip4/192.168.1.131/tcp/9999/ws "/>
61+
<button class="connect-peer" type="button">Connect</button>
62+
</div>
3863
</div>
39-
<pre id="errors"></pre>
64+
<pre id="errors" class="hidden"></pre>
4065
</div>
4166
</div>
4267

‎examples/transfer-files/complete/public/ipfs-logo.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)