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

Commit f66aac8

Browse files
hacdiasdaviddias
authored andcommitted
docs: Improve Transfer Files Example (#1140)
1 parent b9f8b22 commit f66aac8

File tree

4 files changed

+247
-237
lines changed

4 files changed

+247
-237
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
public/js/ipfs.js
2+
*.lock
Lines changed: 142 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,19 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
15
body {
2-
height: 100vh;
6+
min-height: 100vh;
37
font-family: sans-serif;
48
color: white;
59
background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
610
pointer-events: auto;
7-
}
8-
9-
.dragover-popup {
10-
position: absolute;
11-
top: 10px; right: 10px; bottom: 10px; left: 10px;
12-
background-color: rgba(0, 0, 0, 0.5);
13-
text-align: center;
14-
padding-top: 30%;
15-
display: none;
16-
pointer-events: none;
17-
}
18-
19-
.wrapper {
20-
width: 900px;
21-
margin: 0 auto;
22-
/* filter: blur(5px); */
23-
}
24-
25-
.header {
26-
text-align: center;
27-
/* filter: blur(5px); */
28-
}
29-
30-
#filesStatus {
31-
padding: 10px;
11+
padding: 0;
12+
margin: 0;
3213
}
3314

3415
h1, h2, h3 {
35-
margin: 0px;
16+
margin: 0;
3617
}
3718

3819
h1 {
@@ -50,92 +31,72 @@ h3 {
5031
font-weight: 700;
5132
}
5233

53-
54-
.header h1 {
55-
margin-top: 20px;
56-
margin-bottom: 20px;
34+
main,
35+
header {
36+
filter: none;
5737
}
5838

59-
.hidden {
39+
.dragover-popup {
40+
position: fixed;
41+
top: 0.5em;
42+
left: 0.5em;
43+
width: calc(100% - 1em);
44+
height: calc(100% - 1em);
45+
background-color: rgba(0, 0, 0, 0.5);
6046
display: none;
47+
pointer-events: none;
6148
}
6249

63-
.visible {
64-
display: inherit;
65-
font-size: 0.8em;
50+
.dragover-popup h1 {
51+
position: fixed;
52+
top: 50%;
53+
left: 50%;
54+
transform: translate(-50%, -50%)
6655
}
6756

68-
.error {
69-
font-style: italic;
70-
color: red;
57+
body.dragging main,
58+
body.dragging header {
59+
filter: blur(5px);
7160
}
7261

73-
.ipfs {
74-
padding-bottom: 50px;
75-
border-radius: 1px;
76-
box-sizing: border-box;
62+
body.dragging .dragover-popup {
63+
display: block;
7764
}
7865

79-
#details {
80-
padding: 10px;
81-
width: 100%;
82-
box-sizing: border-box;
66+
header {
67+
text-align: center;
68+
display: flex;
69+
justify-content: center;
70+
align-items: center;
71+
padding: 3em 0;
8372
}
8473

8574
ul {
86-
margin: 0px; padding: 0px;
75+
margin: 0;
76+
padding: 0;
8777
list-style: none;
88-
font-size: 11px;
8978
}
9079

9180
ul li {
92-
margin-top: 10px;
93-
margin-bottom: 10px;
94-
font-size: 9px;
81+
margin: 1em 0;
82+
font-size: 0.7em;
83+
font-family: monospace;
9584
word-wrap: break-word;
9685
}
9786

9887
button {
9988
background-color: rgba(0,0,0,0.2);
10089
color: #6acad1;
10190
border: 2px solid #6acad1;
102-
font-size: 15px;
103-
padding: 10px 25px 10px 25px;
104-
border-radius: 2px;
105-
margin: 5px;
106-
}
107-
108-
.multihash-wrapper input {
109-
width: 80%;
110-
float: left;
111-
height: 40px;
112-
margin-left: 1%;
113-
font-size: 16px;
114-
box-sizing: border-box;
91+
font-size: 1em;
92+
padding: 0.625em 1.5em;
93+
border-radius: 0.125em;
94+
margin: .5em 0;
11595
}
11696

117-
.multihash-wrapper button {
118-
width: 17%;
119-
float: left;
120-
height: 40px;
121-
margin: 0px;
122-
margin-left: 1%;
123-
}
124-
125-
.file-list {
126-
display: block;
127-
margin: 10px;
128-
}
129-
130-
.file-list a {
131-
font-size: 16px;
132-
color: white;
133-
display: block;
134-
}
135-
136-
button.connect-peer {
137-
margin: 0px;
138-
margin-top: 2px;
97+
button.full {
98+
margin-right: 0;
99+
margin-left: 0;
139100
width: 100%;
140101
}
141102

@@ -149,101 +110,138 @@ button:hover {
149110
font-family: monospace
150111
}
151112

113+
.disabled *,
114+
input:disabled,
152115
button:disabled {
153116
opacity: 0.2;
154117
}
155-
input:disabled {
156-
opacity: 0.2;
157-
}
158-
.disabled {
159-
opacity: 0.2;
160-
}
161118

162119
input {
163120
width: 100%;
164-
border: 2px solid #444;
121+
border: 2px solid rgba(0,0,0,0.2);
165122
color: black;
166-
padding: 7px;
123+
padding: 0.7em;
167124
border-radius: 2px;
168-
font-size: 9px;
169-
box-sizing: border-box;
170125
}
171126

172-
textarea, input, button {
127+
input:hover, input:focus, input:active {
128+
border-color: #6acad1;
129+
}
130+
131+
input, button {
173132
outline: none;
174133
}
175134

176-
button:focus, input:focus {
177-
outline: 3px solid #6acad1;
135+
main {
136+
width: 90%;
137+
margin: 0 auto;
178138
}
179139

180-
.picture {
181-
margin-top: 1em;
182-
width: 100%;
183-
background-color: rgba(196, 196, 196, 0.1);
184-
/*padding: 0.25em;*/
185-
/*font-size: 1.2em;*/
140+
.buttons,
141+
.columns {
142+
display: flex;
143+
flex-direction: row;
144+
justify-content: space-between;
186145
}
187146

188-
.settings {
189-
padding: 15px;
147+
.buttons > button,
148+
.columns > div {
149+
width: calc(50% - 0.5em);
190150
}
191151

192-
.left {
193-
box-sizing: border-box;
194-
/* background-color: red; */
152+
.buttons > button {
153+
margin: 0 0 1em;
195154
}
196155

197-
.right {
198-
/* background-color: green; */
156+
.box {
157+
background-color: rgba(255, 255, 255, 0.05);
158+
padding: 1em;
159+
margin-bottom: 1em;
199160
}
200161

201-
.setting-item {
202-
margin-top: 20px;
162+
.box > h2 {
163+
display: block;
164+
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
165+
border-right: 0;
166+
border-left: 0;
167+
text-align: center;
168+
padding-bottom: 0.5em;
169+
margin-bottom: 1em;
203170
}
204171

205-
.left, .right {
206-
width: 48%;
207-
float: left;
208-
background-color: rgba(255, 255, 255, 0.05);
209-
box-sizing: border-box;
210-
margin: 1%;
211-
padding: 10px;
172+
#peers i {
173+
display: none;
174+
margin-top: 5px;
175+
margin-bottom: 5px;
176+
font-size: 14px;
177+
}
178+
179+
#peers.waiting i {
180+
display: block;
181+
}
182+
183+
#errors {
184+
grid-area: errors;
185+
color: red;
186+
font-style: italic;
187+
font-size: 1.125em;
188+
display: block;
189+
margin: 0 0 1em;
212190
}
213191

192+
#errors.hidden {
193+
display: none;
194+
}
214195

196+
#note {
197+
position: absolute;
198+
top: 1em;
199+
right: 1em;
200+
font-size: 0.625em;
201+
}
215202

216-
#files {
217-
padding-top: 10px;
218-
background-color: rgba(255, 255, 255, 0.05);
219-
margin: 1%;
203+
#file-status {
204+
font-style: italic;
205+
color: cyan;
206+
font-size: 0.8em;
207+
margin: 1em 0;
220208
}
221209

222-
.left.centered {
223-
float: none;
224-
margin: 0px auto;
225-
text-align: center;
210+
table {
211+
width: 100%;
212+
margin: 1em 0;
213+
word-break: break-all;
214+
border-collapse: collapse;
226215
}
227216

228-
.clear {
229-
clear: both;
217+
table thead {
218+
background-color: rgba(255, 255, 255, 0.1);
219+
font-weight: normal
230220
}
231221

232-
.note {
233-
position: absolute;
234-
top: 10px;
235-
right: 10px;
236-
font-size: 10px;
237-
font-size: 10px;
222+
table th, table td {
223+
padding: 0.5em 0;
238224
}
239225

240-
#peers i {
241-
display: block;
242-
margin-top: 5px;
243-
margin-bottom: 5px;
244-
font-size: 14px;
226+
table td:last-child,
227+
table th:last-child {
228+
width: 20%;
229+
text-align: center;
245230
}
246231

247-
.error {
248-
font-size: 18px;
232+
table td:first-child {
233+
width: 45%;
249234
}
235+
236+
table td:nth-child(2) {
237+
width: 35%;
238+
font-family: monospace;
239+
}
240+
241+
table tr:hover {
242+
background-color: rgba(0, 0, 0, 0.2)
243+
}
244+
245+
table a {
246+
color: inherit;
247+
}

0 commit comments

Comments
 (0)