허진호 / cloud_computing_fileshell

Go to a project
Toggle navigation Toggle navigation pinning
진창엽
119d9e9a 1 parent c3a936e1

Modify Layout

Inline Side-by-side
Showing 11 changed files with 750 additions and 97 deletions
...@@ -140,4 +140,4 @@ SECRET_KEY = secret_key ...@@ -140,4 +140,4 @@ SECRET_KEY = secret_key
140 #AWS Access 140 #AWS Access
141 AWS_ACCESS_KEY_ID = key_id 141 AWS_ACCESS_KEY_ID = key_id
142 AWS_SECRET_ACCESS_KEY = secret_access_key 142 AWS_SECRET_ACCESS_KEY = secret_access_key
143 -AWS_STORAGE_BUCKET_NAME ='fileshell-test' 143 +AWS_STORAGE_BUCKET_NAME ='fileshell-test-jincy'
......
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
9 } 9 }
10 .dropzone { 10 .dropzone {
11 position: relative; 11 position: relative;
12 - border: 1px solid rgba(0,0,0,0.08); 12 + border: 2px dashed #000000;
13 + margin-left: 50px;
13 background: rgba(0,0,0,0.02); 14 background: rgba(0,0,0,0.02);
14 padding: 1em; 15 padding: 1em;
15 } 16 }
...@@ -42,7 +43,7 @@ ...@@ -42,7 +43,7 @@
42 display: inline-block; 43 display: inline-block;
43 margin: 17px; 44 margin: 17px;
44 vertical-align: top; 45 vertical-align: top;
45 - border: 1px solid #acacac; 46 + border: 2px dashed #000000;
46 padding: 6px 6px 6px 6px; 47 padding: 6px 6px 6px 6px;
47 } 48 }
48 .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail], 49 .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
...@@ -154,7 +155,7 @@ ...@@ -154,7 +155,7 @@
154 display: block; 155 display: block;
155 } 156 }
156 .dropzone { 157 .dropzone {
157 - border: 1px solid rgba(0,0,0,0.03); 158 + border: 6px dashed #000000;
158 min-height: 360px; 159 min-height: 360px;
159 -webkit-border-radius: 3px; 160 -webkit-border-radius: 3px;
160 border-radius: 3px; 161 border-radius: 3px;
......
1 body { 1 body {
2 font-family: "Roboto", sans-serif; 2 font-family: "Roboto", sans-serif;
3 } 3 }
4 - 4 +::placeholder{
5 + color : #FFFFFF;
6 +}
7 +.shiftleft{
8 + margin-left: 50px;
9 +}
5 .search_form{ 10 .search_form{
6 - float:right; 11 + float:left;
12 + width: 1500px;
13 + vertical-align: middle;
14 + white-space: nowrap;
15 + position: relative;
16 +}
17 +.search_form input#dir_name{
18 + width: 1300px;
19 + height: 50px;
20 + background: #6b6b6b;
21 + border: none;
22 + font-size: 10pt;
23 + float: left;
24 + color: #ffffff;
25 + padding-left: 45px;
26 + -webkit-border-radius: 5px;
27 + -moz-border-radius: 5px;
28 + border-radius: 5px;
29 +}
30 +.search_form input#search_button {
31 + width: 55px;
32 + height: 50px;
33 + background: #2b303b;
34 + border: none;
35 + font-size: 10pt;
36 + float: left;
37 + color: #ffffff;
38 +
39 + margin-left: 50px;
40 + -webkit-border-radius: 5px;
41 + -moz-border-radius: 5px;
42 + border-radius: 5px;
43 + text-align: center;
44 +}
45 +.add_folder_form{
46 +
47 +}
48 +.add_folder_form input#dir_name {
49 + width: 150px;
50 + height: 50px;
51 + background: #6b6b6b;
52 + border: none;
53 + font-size: 10pt;
54 + float: left;
55 + color: #ffffff;
56 + padding-left: 45px;
57 + -webkit-border-radius: 5px;
58 + -moz-border-radius: 5px;
59 + border-radius: 5px;
60 +}
61 +.add_folder_form input#add_button {
62 + margin-left: 300px;
7 } 63 }
8 .drop{ 64 .drop{
9 width:200px; 65 width:200px;
...@@ -16,7 +72,7 @@ body { ...@@ -16,7 +72,7 @@ body {
16 .left_bar { 72 .left_bar {
17 float:left; 73 float:left;
18 width:200px; 74 width:200px;
19 - height:900px; 75 + height:1500px;
20 background-color: #2b2d3d; 76 background-color: #2b2d3d;
21 } 77 }
22 .nav { 78 .nav {
...@@ -48,16 +104,18 @@ body { ...@@ -48,16 +104,18 @@ body {
48 .nav-link:hover { 104 .nav-link:hover {
49 } 105 }
50 .frame { 106 .frame {
51 - width: 1800px; 107 + width: 2000px;
52 - margin: 0 auto; 108 +
53 - border: 1px solid #aaa;
54 } 109 }
55 .header { 110 .header {
56 - height : 60px; 111 + height : 40px;
57 padding:40px 10px; 112 padding:40px 10px;
58 text-align: center; 113 text-align: center;
59 - background: #eee; 114 + background: #ffffff;
115 + margin-left: 250px;
116 + margin-right: 50px;
60 margin-bottom: 20px; 117 margin-bottom: 20px;
118 + border-bottom: 1px solid #73acbc;
61 } 119 }
62 .profile_icon { 120 .profile_icon {
63 float:right; 121 float:right;
...@@ -76,12 +134,14 @@ body { ...@@ -76,12 +134,14 @@ body {
76 padding: 0 8px; 134 padding: 0 8px;
77 } 135 }
78 .container { 136 .container {
137 +
79 overflow: hidden; 138 overflow: hidden;
80 } 139 }
81 140
82 .content { 141 .content {
83 float: left; 142 float: left;
84 width: 1600px; 143 width: 1600px;
144 +
85 } 145 }
86 .right_bar { 146 .right_bar {
87 float:right; 147 float:right;
......
1 +/* ------------------
2 + styling for the tables
3 + ------------------ */
4 +
5 +
6 +body
7 +{
8 + line-height: 1.6em;
9 +}
10 +
11 +#hor-minimalist-a
12 +{
13 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
14 + font-size: 12px;
15 + background: #fff;
16 + margin: 45px;
17 + width: 480px;
18 + border-collapse: collapse;
19 + text-align: left;
20 +}
21 +#hor-minimalist-a th
22 +{
23 + font-size: 14px;
24 + font-weight: normal;
25 + color: #039;
26 + padding: 10px 8px;
27 + border-bottom: 2px solid #6678b1;
28 +}
29 +#hor-minimalist-a td
30 +{
31 + color: #669;
32 + padding: 9px 8px 0px 8px;
33 +}
34 +#hor-minimalist-a tbody tr:hover td
35 +{
36 + color: #009;
37 +}
38 +
39 +
40 +#hor-minimalist-b
41 +{
42 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
43 + font-size: 16px;
44 + background: #fff;
45 + margin: 45px;
46 + width: 1600px;
47 + border-collapse: collapse;
48 + text-align: left;
49 +}
50 +#hor-minimalist-b th
51 +{
52 + font-size: 18px;
53 + font-weight: normal;
54 + color: #2b2d3d;
55 + padding: 10px 8px;
56 + border-bottom: 2px solid #2b2d3d;
57 +}
58 +#hor-minimalist-b td
59 +{
60 + border-bottom: 1px solid #ccc;
61 + color: #669;
62 + padding: 6px 8px;
63 +}
64 +#hor-minimalist-b tbody tr:hover td
65 +{
66 + color: #2b2d3d;
67 +}
68 +
69 +
70 +#ver-minimalist
71 +{
72 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
73 + font-size: 12px;
74 + margin: 45px;
75 + width: 480px;
76 + text-align: left;
77 + border-collapse: collapse;
78 +}
79 +#ver-minimalist th
80 +{
81 + padding: 8px 2px;
82 + font-weight: normal;
83 + font-size: 14px;
84 + border-bottom: 2px solid #6678b1;
85 + border-right: 30px solid #fff;
86 + border-left: 30px solid #fff;
87 + color: #039;
88 +}
89 +#ver-minimalist td
90 +{
91 + padding: 12px 2px 0px 2px;
92 + border-right: 30px solid #fff;
93 + border-left: 30px solid #fff;
94 + color: #669;
95 +}
96 +
97 +
98 +#box-table-a
99 +{
100 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
101 + font-size: 12px;
102 + margin: 45px;
103 + width: 480px;
104 + text-align: left;
105 + border-collapse: collapse;
106 +}
107 +#box-table-a th
108 +{
109 + font-size: 13px;
110 + font-weight: normal;
111 + padding: 8px;
112 + background: #b9c9fe;
113 + border-top: 4px solid #aabcfe;
114 + border-bottom: 1px solid #fff;
115 + color: #039;
116 +}
117 +#box-table-a td
118 +{
119 + padding: 8px;
120 + background: #e8edff;
121 + border-bottom: 1px solid #fff;
122 + color: #669;
123 + border-top: 1px solid transparent;
124 +}
125 +#box-table-a tr:hover td
126 +{
127 + background: #d0dafd;
128 + color: #339;
129 +}
130 +
131 +
132 +#box-table-b
133 +{
134 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
135 + font-size: 12px;
136 + margin: 45px;
137 + width: 480px;
138 + text-align: center;
139 + border-collapse: collapse;
140 + border-top: 7px solid #9baff1;
141 + border-bottom: 7px solid #9baff1;
142 +}
143 +#box-table-b th
144 +{
145 + font-size: 13px;
146 + font-weight: normal;
147 + padding: 8px;
148 + background: #e8edff;
149 + border-right: 1px solid #9baff1;
150 + border-left: 1px solid #9baff1;
151 + color: #039;
152 +}
153 +#box-table-b td
154 +{
155 + padding: 8px;
156 + background: #e8edff;
157 + border-right: 1px solid #aabcfe;
158 + border-left: 1px solid #aabcfe;
159 + color: #669;
160 +}
161 +
162 +
163 +#hor-zebra
164 +{
165 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
166 + font-size: 12px;
167 + margin: 45px;
168 + width: 480px;
169 + text-align: left;
170 + border-collapse: collapse;
171 +}
172 +#hor-zebra th
173 +{
174 + font-size: 14px;
175 + font-weight: normal;
176 + padding: 10px 8px;
177 + color: #039;
178 +}
179 +#hor-zebra td
180 +{
181 + padding: 8px;
182 + color: #669;
183 +}
184 +#hor-zebra .odd
185 +{
186 + background: #e8edff;
187 +}
188 +
189 +
190 +#ver-zebra
191 +{
192 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
193 + font-size: 12px;
194 + margin: 45px;
195 + width: 480px;
196 + text-align: left;
197 + border-collapse: collapse;
198 +}
199 +#ver-zebra th
200 +{
201 + font-size: 14px;
202 + font-weight: normal;
203 + padding: 12px 15px;
204 + border-right: 1px solid #fff;
205 + border-left: 1px solid #fff;
206 + color: #039;
207 +}
208 +#ver-zebra td
209 +{
210 + padding: 8px 15px;
211 + border-right: 1px solid #fff;
212 + border-left: 1px solid #fff;
213 + color: #669;
214 +}
215 +.vzebra-odd
216 +{
217 + background: #eff2ff;
218 +}
219 +.vzebra-even
220 +{
221 + background: #e8edff;
222 +}
223 +#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
224 +{
225 + background: #d0dafd;
226 + border-bottom: 1px solid #c8d4fd;
227 +}
228 +#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
229 +{
230 + background: #dce4ff;
231 + border-bottom: 1px solid #d6dfff;
232 +}
233 +
234 +
235 +#one-column-emphasis
236 +{
237 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
238 + font-size: 12px;
239 + margin: 45px;
240 + width: 480px;
241 + text-align: left;
242 + border-collapse: collapse;
243 +}
244 +#one-column-emphasis th
245 +{
246 + font-size: 14px;
247 + font-weight: normal;
248 + padding: 12px 15px;
249 + color: #039;
250 +}
251 +#one-column-emphasis td
252 +{
253 + padding: 10px 15px;
254 + color: #669;
255 + border-top: 1px solid #e8edff;
256 +}
257 +.oce-first
258 +{
259 + background: #d0dafd;
260 + border-right: 10px solid transparent;
261 + border-left: 10px solid transparent;
262 +}
263 +#one-column-emphasis tr:hover td
264 +{
265 + color: #339;
266 + background: #eff2ff;
267 +}
268 +
269 +
270 +#newspaper-a
271 +{
272 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
273 + font-size: 12px;
274 + margin: 45px;
275 + width: 480px;
276 + text-align: left;
277 + border-collapse: collapse;
278 + border: 1px solid #69c;
279 +}
280 +#newspaper-a th
281 +{
282 + padding: 12px 17px 12px 17px;
283 + font-weight: normal;
284 + font-size: 14px;
285 + color: #039;
286 + border-bottom: 1px dashed #69c;
287 +}
288 +#newspaper-a td
289 +{
290 + padding: 7px 17px 7px 17px;
291 + color: #669;
292 +}
293 +#newspaper-a tbody tr:hover td
294 +{
295 + color: #339;
296 + background: #d0dafd;
297 +}
298 +
299 +
300 +#newspaper-b
301 +{
302 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
303 + font-size: 12px;
304 + margin: 45px;
305 + width: 480px;
306 + text-align: left;
307 + border-collapse: collapse;
308 + border: 1px solid #69c;
309 +}
310 +#newspaper-b th
311 +{
312 + padding: 15px 10px 10px 10px;
313 + font-weight: normal;
314 + font-size: 14px;
315 + color: #039;
316 +}
317 +#newspaper-b tbody
318 +{
319 + background: #e8edff;
320 +}
321 +#newspaper-b td
322 +{
323 + padding: 10px;
324 + color: #669;
325 + border-top: 1px dashed #fff;
326 +}
327 +#newspaper-b tbody tr:hover td
328 +{
329 + color: #339;
330 + background: #d0dafd;
331 +}
332 +
333 +
334 +#newspaper-c
335 +{
336 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
337 + font-size: 12px;
338 + margin: 45px;
339 + width: 480px;
340 + text-align: left;
341 + border-collapse: collapse;
342 + border: 1px solid #6cf;
343 +}
344 +#newspaper-c th
345 +{
346 + padding: 20px;
347 + font-weight: normal;
348 + font-size: 13px;
349 + color: #039;
350 + text-transform: uppercase;
351 + border-right: 1px solid #0865c2;
352 + border-top: 1px solid #0865c2;
353 + border-left: 1px solid #0865c2;
354 + border-bottom: 1px solid #fff;
355 +}
356 +#newspaper-c td
357 +{
358 + padding: 10px 20px;
359 + color: #669;
360 + border-right: 1px dashed #6cf;
361 +}
362 +
363 +
364 +#rounded-corner
365 +{
366 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
367 + font-size: 12px;
368 + margin: 45px;
369 + width: 480px;
370 + text-align: left;
371 + border-collapse: collapse;
372 +}
373 +#rounded-corner thead th.rounded-company
374 +{
375 + background: #b9c9fe url('left.png') left -1px no-repeat;
376 +}
377 +#rounded-corner thead th.rounded-q4
378 +{
379 + background: #b9c9fe url('right.png') right -1px no-repeat;
380 +}
381 +#rounded-corner th
382 +{
383 + padding: 8px;
384 + font-weight: normal;
385 + font-size: 13px;
386 + color: #039;
387 + background: #b9c9fe;
388 +}
389 +#rounded-corner td
390 +{
391 + padding: 8px;
392 + background: #e8edff;
393 + border-top: 1px solid #fff;
394 + color: #669;
395 +}
396 +#rounded-corner tfoot td.rounded-foot-left
397 +{
398 + background: #e8edff url('botleft.png') left bottom no-repeat;
399 +}
400 +#rounded-corner tfoot td.rounded-foot-right
401 +{
402 + background: #e8edff url('botright.png') right bottom no-repeat;
403 +}
404 +#rounded-corner tbody tr:hover td
405 +{
406 + background: #d0dafd;
407 +}
408 +
409 +
410 +#background-image
411 +{
412 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
413 + font-size: 12px;
414 + margin: 45px;
415 + width: 480px;
416 + text-align: left;
417 + border-collapse: collapse;
418 + background: url('blurry.jpg') 330px 59px no-repeat;
419 +}
420 +#background-image th
421 +{
422 + padding: 12px;
423 + font-weight: normal;
424 + font-size: 14px;
425 + color: #339;
426 +}
427 +#background-image td
428 +{
429 + padding: 9px 12px;
430 + color: #669;
431 + border-top: 1px solid #fff;
432 +}
433 +#background-image tfoot td
434 +{
435 + font-size: 11px;
436 +}
437 +#background-image tbody td
438 +{
439 + background: url('back.png');
440 +}
441 +* html #background-image tbody td
442 +{
443 + /*
444 + ----------------------------
445 + PUT THIS ON IE6 ONLY STYLE
446 + AS THE RULE INVALIDATES
447 + YOUR STYLESHEET
448 + ----------------------------
449 + */
450 + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='back.png',sizingMethod='crop');
451 + background: none;
452 +}
453 +#background-image tbody tr:hover td
454 +{
455 + color: #339;
456 + background: none;
457 +}
458 +
459 +
460 +#gradient-style
461 +{
462 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
463 + font-size: 12px;
464 + margin: 45px;
465 + width: 480px;
466 + text-align: left;
467 + border-collapse: collapse;
468 +}
469 +#gradient-style th
470 +{
471 + font-size: 13px;
472 + font-weight: normal;
473 + padding: 8px;
474 + background: #b9c9fe url('gradhead.png') repeat-x;
475 + border-top: 2px solid #d3ddff;
476 + border-bottom: 1px solid #fff;
477 + color: #039;
478 +}
479 +#gradient-style td
480 +{
481 + padding: 8px;
482 + border-bottom: 1px solid #fff;
483 + color: #669;
484 + border-top: 1px solid #fff;
485 + background: #e8edff url('gradback.png') repeat-x;
486 +}
487 +#gradient-style tfoot tr td
488 +{
489 + background: #e8edff;
490 + font-size: 12px;
491 + color: #99c;
492 +}
493 +#gradient-style tbody tr:hover td
494 +{
495 + background: #d0dafd url('gradhover.png') repeat-x;
496 + color: #339;
497 +}
498 +
499 +
500 +#pattern-style-a
501 +{
502 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
503 + font-size: 12px;
504 + margin: 45px;
505 + width: 480px;
506 + text-align: left;
507 + border-collapse: collapse;
508 + background: url('pattern.png');
509 +}
510 +#pattern-style-a thead tr
511 +{
512 + background: url('pattern-head.png');
513 +}
514 +#pattern-style-a th
515 +{
516 + font-size: 13px;
517 + font-weight: normal;
518 + padding: 8px;
519 + border-bottom: 1px solid #fff;
520 + color: #039;
521 +}
522 +#pattern-style-a td
523 +{
524 + padding: 8px;
525 + border-bottom: 1px solid #fff;
526 + color: #669;
527 + border-top: 1px solid transparent;
528 +}
529 +#pattern-style-a tbody tr:hover td
530 +{
531 + color: #339;
532 + background: #fff;
533 +}
534 +
535 +
536 +#pattern-style-b
537 +{
538 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
539 + font-size: 12px;
540 + margin: 45px;
541 + width: 480px;
542 + text-align: left;
543 + border-collapse: collapse;
544 + background: url('patternb.png');
545 +}
546 +#pattern-style-b thead tr
547 +{
548 + background: url('patternb-head.png');
549 +}
550 +#pattern-style-b th
551 +{
552 + font-size: 13px;
553 + font-weight: normal;
554 + padding: 8px;
555 + border-bottom: 1px solid #fff;
556 + color: #039;
557 +}
558 +#pattern-style-b td
559 +{
560 + padding: 8px;
561 + border-bottom: 1px solid #fff;
562 + color: #669;
563 + border-top: 1px solid transparent;
564 +}
565 +#pattern-style-b tbody tr:hover td
566 +{
567 + color: #339;
568 + background: #cdcdee;
569 +}
...\ No newline at end of file ...\ No newline at end of file

3.3 KB | W: | H:

13.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -35,7 +35,7 @@ class MediaStorage(S3Boto3Storage): ...@@ -35,7 +35,7 @@ class MediaStorage(S3Boto3Storage):
35 'response-content-type': 'application/force-download', 35 'response-content-type': 'application/force-download',
36 'response-content-disposition': 'attachment;filename="%s"' % filename 36 'response-content-disposition': 'attachment;filename="%s"' % filename
37 } 37 }
38 - url = s3.generate_presigned_url('get_object', Params={'Bucket': 'fileshell-test', 'Key': bucketPath}, 38 + url = s3.generate_presigned_url('get_object', Params={'Bucket': AWS_STORAGE_BUCKET_NAME, 'Key': bucketPath},
39 ExpiresIn=100) 39 ExpiresIn=100)
40 return url 40 return url
41 41
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
6 <title> FileShell</title> 6 <title> FileShell</title>
7 <link rel="stylesheet" href="{% static 'css/layout_base.css' %}"> 7 <link rel="stylesheet" href="{% static 'css/layout_base.css' %}">
8 <link rel="stylesheet" href="{% static 'css/dropzone.css' %}"> 8 <link rel="stylesheet" href="{% static 'css/dropzone.css' %}">
9 + <link rel="stylesheet" href="{% static 'css/style.css' %}">
9 </head> 10 </head>
10 <body> 11 <body>
11 12
...@@ -21,14 +22,15 @@ ...@@ -21,14 +22,15 @@
21 </div> 22 </div>
22 <div class="header"> 23 <div class="header">
23 <a href="{% url 'logout' %}"> <img class = 'logout_icon' src= "{% static 'resources/logout.png' %}" width="50" height="50" align="right"/></a> 24 <a href="{% url 'logout' %}"> <img class = 'logout_icon' src= "{% static 'resources/logout.png' %}" width="50" height="50" align="right"/></a>
25 + <!--
24 <a href="{% url 'profile' %}"> <img class = 'profile_icon' src= "{% static 'resources/profile.png' %}" width="50" height="50" align="right"/></a> 26 <a href="{% url 'profile' %}"> <img class = 'profile_icon' src= "{% static 'resources/profile.png' %}" width="50" height="50" align="right"/></a>
27 + -->
25 <div class="search_form"> 28 <div class="search_form">
26 <form id='search' action="" onsubmit="yourFunction()" method="post" enctype="multipart/form-data" >{% csrf_token %} 29 <form id='search' action="" onsubmit="yourFunction()" method="post" enctype="multipart/form-data" >{% csrf_token %}
27 <input type="dir_name" name="dir_name" id="dir_name" required="required" placeholder="검색할 파일이나 폴더 이름"> 30 <input type="dir_name" name="dir_name" id="dir_name" required="required" placeholder="검색할 파일이나 폴더 이름">
28 - <input type = "submit"> 31 + <input type = "IMAGE" name="search_button" id= "search_button" src="{% static 'resources/search_icon.png'%}" width="30" height="50">
29 </form> 32 </form>
30 </div> 33 </div>
31 - <h1> FileShell</h1>
32 </div> 34 </div>
33 {% block content %} 35 {% block content %}
34 {% endblock %} 36 {% endblock %}
......
...@@ -3,16 +3,17 @@ ...@@ -3,16 +3,17 @@
3 {% block content %} 3 {% block content %}
4 <div> 4 <div>
5 <div class="right_bar"> 5 <div class="right_bar">
6 - <li class="nav-item1"><a href="" class="nav-link-right"> <img class = 'add_folder_icon' src= "{% static 'resources/upload.png' %}" width="30" height="30"/> 파일 업로드</a></li> 6 +
7 - <form action={% url 'upload' %} method="post" enctype="multipart/form-data" novalidate>{% csrf_token %} 7 + <div class="add_folder_form">
8 - <input type ="file" name = "file"> 8 + <form id='add_folder' action="{% url 'add_folder' %}" method="post"
9 - <input type = "submit"> 9 + enctype="multipart/form-data">{% csrf_token %}
10 - </form> 10 +
11 - <li class="nav-item1"><a href="" class="nav-link-right"> <img class = 'add_folder_icon' src= "{% static 'resources/add_folder.png' %}" width="30" height="30"/> 새 폴더</a></li> 11 + <input type="IMAGE" name="add_button" src="{% static 'resources/add_folder.png' %}" width="200" height="50"
12 - <form action="{% url 'add_folder' %}" method="post" enctype="multipart/form-data">{% csrf_token %} 12 + align="center" value="폴더 추가하기">
13 - <input type="dir_name" name="dir_name" id="dir_name" required="required" placeholder="New Folder Name"> 13 + <input type="dir_name" name="dir_name" id="dir_name" required="required"
14 - <input type = "submit"> 14 + placeholder="New Folder Name">
15 - </form> 15 + </form>
16 + </div>
16 </div> 17 </div>
17 </div> 18 </div>
18 <div class="frame"> 19 <div class="frame">
...@@ -20,49 +21,61 @@ ...@@ -20,49 +21,61 @@
20 <div class="container"> 21 <div class="container">
21 <!-- //nav --> 22 <!-- //nav -->
22 <div class="content"> 23 <div class="content">
23 - <table cellspacing=1 width=700 border=1> 24 + <table id="hor-minimalist-b" width = 1000px>
25 + <thead>
24 <tr> 26 <tr>
27 + <th scope="col", >제목</th>
28 + <th scope="col", >등록 시간</th>
29 + <th scope="col", >최근 열람 시간</th>
30 + <th scope="col", >즐겨찾기</th>
31 + <th scope="col", >파일 크기</th>
32 + <th scope="col", >파일 삭제</th>
33 + <!--
25 <td width=300><p align=center>제목</p></td> 34 <td width=300><p align=center>제목</p></td>
26 <td width=350><p align=center>등록 시간</p></td> 35 <td width=350><p align=center>등록 시간</p></td>
27 <td width=350><p align=center>최근 열람 시간</p></td> 36 <td width=350><p align=center>최근 열람 시간</p></td>
28 <td width=200><p align=center>즐겨찾기</p></td> 37 <td width=200><p align=center>즐겨찾기</p></td>
29 <td width=200><p align=center>파일 크기</p></td> 38 <td width=200><p align=center>파일 크기</p></td>
30 <td width=200><p align=center>파일 삭제</p></td> 39 <td width=200><p align=center>파일 삭제</p></td>
40 + -->
31 </tr> 41 </tr>
42 + </thead>
43 +
32 {% if folderList %} 44 {% if folderList %}
33 - <ul> 45 + <tbody>
34 - {% for folderRow in folderList %} 46 + {% for folderRow in folderList %}
35 - <tr> 47 + <tr>
36 - <td width=50><a href="/{{ folderRow.dir_name }}", align=center>{{ folderRow.dir_name }}</a></td> 48 + <td><a href="/{{ folderRow.dir_name }}", align=center>{{ folderRow.dir_name }}</a></td>
37 - <td width=100><p href="", align=center>{{ folderRow.uploaded_TM }}</p></td> 49 + <td><p href="", >{{ folderRow.uploaded_TM }}</p></td>
38 - <td width=100><p href="", align=center>{{ folderRow.last_view_TM }}</p></td> 50 + <td><p href="", >{{ folderRow.last_view_TM }}</p></td>
39 - <td width=100><p href="", align=center>{{ folderRow.isFavor }}</p></td> 51 + <td ><p href="",>{{ folderRow.isFavor }}</p></td>
40 - <td width=100><p href="", align=center>{{ folderRow.fileSize }}</p></td> 52 + <td ><p href="",>{{ folderRow.fileSize }}</p></td>
41 - </tr> 53 + <td ><p href="",></p></td>
42 - {% endfor %} 54 + </tr>
43 - </ul> 55 + {% endfor %}
56 + </tbody>
44 {% else %} 57 {% else %}
45 <p>No Folder.</p> 58 <p>No Folder.</p>
46 {% endif %} 59 {% endif %}
47 {% if fileList %} 60 {% if fileList %}
48 - <ul> 61 + <tbody>
49 {% for fileRow in fileList %} 62 {% for fileRow in fileList %}
50 <tr> 63 <tr>
51 - <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td> 64 + <td><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td>
52 - <td width=100><p href="", align=center>{{ fileRow.uploaded_TM }}</p></td> 65 + <td><p href="", >{{ fileRow.uploaded_TM }}</p></td>
53 - <td width=100><p href="", align=center>{{ fileRow.last_view_TM }}</p></td> 66 + <td><p href="", >{{ fileRow.last_view_TM }}</p></td>
54 - <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td> 67 + <td><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" style="text-align:center;">{{ fileRow.isFavor }}</a></td>
55 - <td width=100><p href="", align=center>{{ fileRow.fileSize }}</p></td> 68 + <td><p href="", >{{ fileRow.fileSize }}</p></td>
56 - <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td> 69 + <td><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td>
57 70
58 </tr> 71 </tr>
59 {% endfor %} 72 {% endfor %}
60 - </ul> 73 + </tbody>
61 {% else %} 74 {% else %}
62 <p>No File.</p> 75 <p>No File.</p>
63 {% endif %} 76 {% endif %}
64 </table> 77 </table>
65 - <form action="{% url 'upload' %}" id="dropzone" class="dropzone" method="post" enctype="multipart/form-data">{% csrf_token %} 78 + <form action="{% url 'upload' %}" id="dropzone" class="dropzone" method="post" enctype="multipart/form-data" >{% csrf_token %}
66 <div class="fallback"> 79 <div class="fallback">
67 <input class="fall_back" name="source-file" type="file"/> 80 <input class="fall_back" name="source-file" type="file"/>
68 </div> 81 </div>
......
...@@ -6,59 +6,65 @@ ...@@ -6,59 +6,65 @@
6 <div class="container"> 6 <div class="container">
7 <!-- //nav --> 7 <!-- //nav -->
8 <div class="content"> 8 <div class="content">
9 - <h2>즐겨찾기</h2> 9 + <div class = "shiftleft">
10 - <table cellspacing=1 width=700 border=1> 10 + <h2>즐겨찾기</h2>
11 + </div>
12 + <table id="hor-minimalist-b" width = 1000px>
13 + <thead>
11 <tr> 14 <tr>
12 - <td width=300><p align=center>제목</p></td> 15 + <td width=300><p>제목</p></td>
13 - <td width=350><p align=center>등록 시간</p></td> 16 + <td width=350><p>등록 시간</p></td>
14 - <td width=350><p align=center>최근 열람 시간</p></td> 17 + <td width=350><p>최근 열람 시간</p></td>
15 - <td width=200><p align=center>즐겨찾기</p></td> 18 + <td width=100><p>즐겨찾기</p></td>
16 - <td width=200><p align=center>파일 크기</p></td> 19 + <td width=100><p>파일 크기</p></td>
17 - <td width=200><p align=center>파일 삭제</p></td> 20 + <td width=100><p>파일 삭제</p></td>
18 </tr> 21 </tr>
19 - {% if favorList %} 22 + </thead>
20 - <ul> 23 + {% if favorList %} <tbody>
21 {% for fileRow in favorList %} 24 {% for fileRow in favorList %}
22 <tr> 25 <tr>
23 - <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td> 26 + <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" valign=center>{{ fileRow.title }}</a></td>
24 - <td width=100><p href="", align=center>{{ fileRow.uploaded_TM }}</p></td> 27 + <td width=100><p href="", >{{ fileRow.uploaded_TM }}</p></td>
25 - <td width=100><p href="", align=center>{{ fileRow.last_view_TM }}</p></td> 28 + <td width=100><p href="",>{{ fileRow.last_view_TM }}</p></td>
26 <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td> 29 <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td>
27 - <td width=100><p href="", align=center>{{ fileRow.fileSize }}</p></td> 30 + <td width=100><p href="", >{{ fileRow.fileSize }}</p></td>
28 <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td> 31 <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td>
29 32
30 </tr> 33 </tr>
31 {% endfor %} 34 {% endfor %}
32 - </ul> 35 + </tbody>
33 {% else %} 36 {% else %}
34 <p>No File.</p> 37 <p>No File.</p>
35 {% endif %} 38 {% endif %}
36 </table> 39 </table>
37 - 40 + <div class = "shiftleft">
38 - <h2>최근 항목</h2> 41 + <h2>최근 항목</h2>
39 - <table cellspacing=1 width=700 border=1> 42 + </div>
43 + <table id="hor-minimalist-b" width = 1000px>
44 + <thead>
40 <tr> 45 <tr>
41 - <td width=300><p align=center>제목</p></td> 46 + <td width=300><p >제목</p></td>
42 - <td width=350><p align=center>등록 시간</p></td> 47 + <td width=350><p >등록 시간</p></td>
43 - <td width=350><p align=center>최근 열람 시간</p></td> 48 + <td width=350><p >최근 열람 시간</p></td>
44 - <td width=100><p align=center>즐겨찾기</p></td> 49 + <td width=100><p >즐겨찾기</p></td>
45 - <td width=100><p align=center>파일 크기</p></td> 50 + <td width=100><p >파일 크기</p></td>
46 - <td width=100><p align=center>파일 삭제</p></td> 51 + <td width=100><p >파일 삭제</p></td>
47 </tr> 52 </tr>
53 + </thead>
48 {% if recentList %} 54 {% if recentList %}
49 - <ul> 55 + <tbody>
50 {% for fileRow in recentList %} 56 {% for fileRow in recentList %}
51 <tr> 57 <tr>
52 <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td> 58 <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td>
53 - <td width=100><p href="", align=center>{{ fileRow.uploaded_TM }}</p></td> 59 + <td width=100><p href="", >{{ fileRow.uploaded_TM }}</p></td>
54 - <td width=100><p href="", align=center>{{ fileRow.last_view_TM }}</p></td> 60 + <td width=100><p href="", >{{ fileRow.last_view_TM }}</p></td>
55 <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td> 61 <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td>
56 - <td width=100><p href="", align=center>{{ fileRow.fileSize }}</p></td> 62 + <td width=100><p href="",>{{ fileRow.fileSize }}</p></td>
57 <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td> 63 <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td>
58 64
59 </tr> 65 </tr>
60 {% endfor %} 66 {% endfor %}
61 - </ul> 67 + </tbody>
62 {% else %} 68 {% else %}
63 <p>No File.</p> 69 <p>No File.</p>
64 {% endif %} 70 {% endif %}
......
...@@ -6,45 +6,47 @@ ...@@ -6,45 +6,47 @@
6 <div class="container"> 6 <div class="container">
7 <!-- //nav --> 7 <!-- //nav -->
8 <div class="content"> 8 <div class="content">
9 - <table cellspacing=1 width=700 border=1> 9 + <table id="hor-minimalist-b" width = 1000px>
10 - <tr> 10 + <thead>
11 - <td width=300><p align=center>제목</p></td> 11 + <tr>
12 - <td width=350><p align=center>등록 시간</p></td> 12 + <td width=300><p >제목</p></td>
13 - <td width=350><p align=center>최근 열람 시간</p></td> 13 + <td width=350><p >등록 시간</p></td>
14 - <td width=200><p align=center>즐겨찾기</p></td> 14 + <td width=350><p >최근 열람 시간</p></td>
15 - <td width=200><p align=center>파일 크기</p></td> 15 + <td width=200><p >즐겨찾기</p></td>
16 - <td width=200><p align=center>파일 삭제</p></td> 16 + <td width=200><p >파일 크기</p></td>
17 - </tr> 17 + <td width=200><p >파일 삭제</p></td>
18 + </tr>
19 + </thead>
18 {% if folderList %} 20 {% if folderList %}
19 - <ul> 21 + <tbody>
20 {% for folderRow in folderList %} 22 {% for folderRow in folderList %}
21 <tr> 23 <tr>
22 <td width=50><a href="/{{ folderRow.dir_name }}", align=center>{{ folderRow.dir_name }}</a></td> 24 <td width=50><a href="/{{ folderRow.dir_name }}", align=center>{{ folderRow.dir_name }}</a></td>
23 - <td width=100><p href="", align=center>{{ folderRow.uploaded_TM }}</p></td> 25 + <td width=100><p href="",>{{ folderRow.uploaded_TM }}</p></td>
24 - <td width=100><p href="", align=center>{{ folderRow.last_view_TM }}</p></td> 26 + <td width=100><p href="",>{{ folderRow.last_view_TM }}</p></td>
25 - <td width=100><p href="", align=center>{{ folderRow.isFavor }}</p></td> 27 + <td width=100><p href="",>{{ folderRow.isFavor }}</p></td>
26 - <td width=100><p href="", align=center>{{ folderRow.fileSize }}</p></td> 28 + <td width=100><p href="",>{{ folderRow.fileSize }}</p></td>
27 </tr> 29 </tr>
28 {% endfor %} 30 {% endfor %}
29 - </ul> 31 + </tbody>
30 {% else %} 32 {% else %}
31 - <p>No Folder.</p> 33 +
32 {% endif %} 34 {% endif %}
33 {% if fileList %} 35 {% if fileList %}
34 - <ul> 36 + <tbody>
35 {% for fileRow in fileList %} 37 {% for fileRow in fileList %}
36 <tr> 38 <tr>
37 <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td> 39 <td width=50><a href="/download/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>{{ fileRow.title }}</a></td>
38 - <td width=100><p href="", align=center>{{ fileRow.uploaded_TM }}</p></td> 40 + <td width=100><p href="", >{{ fileRow.uploaded_TM }}</p></td>
39 - <td width=100><p href="", align=center>{{ fileRow.last_view_TM }}</p></td> 41 + <td width=100><p href="", >{{ fileRow.last_view_TM }}</p></td>
40 <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td> 42 <td width=100><a href="/changeFavor/{{ fileRow.bucketPath }}/{{ fileRow.title }}" align=center>{{ fileRow.isFavor }}</a></td>
41 - <td width=100><p href="", align=center>{{ fileRow.fileSize }}</p></td> 43 + <td width=100><p href="", >{{ fileRow.fileSize }}</p></td>
42 <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td> 44 <td width=100><a href="/delete/{{ fileRow.bucketPath }}{{ fileRow.title }}//{{ fileRow.title }}//{{ fileRow.bucketPath }}" align=center>파일 삭제</a></td>
43 </tr> 45 </tr>
44 {% endfor %} 46 {% endfor %}
45 - </ul> 47 + </tbody>
46 {% else %} 48 {% else %}
47 - <p>No File.</p> 49 +
48 {% endif %} 50 {% endif %}
49 51
50 </table> 52 </table>
......