2015/10/21
Fine Uploaderを見やすく調整してみた
LaunchCartで使用しているFine Uploaderだが、デフォルトの見た目だと少し操作性が悪いとおもっており、調整してみた
変更点は以下
■テンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script type="text/template" id="qq-template-image"> <div class="qq-uploader-selector qq-uploader"> <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> <span>ここにファイルをドラッグアンドドロップしてください</span> </div> <p class="qq-upload-button-selector qq-upload-button"> ファイルを選択 </p> <span class="qq-drop-processing-selector qq-drop-processing"> <span>処理中...</span> <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> </span> <ul class="qq-upload-list-selector qq-upload-list"> <li> <div class="qq-progress-bar-container-selector"> <div class="qq-progress-bar-selector qq-progress-bar"></div> </div> <span class="qq-upload-spinner-selector qq-upload-spinner"></span> <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale> <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span> <span class="qq-upload-file-selector qq-upload-file"></span> <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> <span class="qq-upload-size-selector qq-upload-size"></span> <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">キャンセル</a> <a class="qq-upload-retry-selector qq-upload-retry" href="#">リトライ</a> <a class="qq-upload-delete-selector qq-upload-delete" href="#">削除</a> <span class="qq-upload-status-text-selector qq-upload-status-text"></span> </li> </ul> </div> </script> |
日本語化したのと、CSS、JSに合わせて構造を少し変更
■CSS
|
1 2 3 4 | .qq-uploader { /*position: relative;*/ width: 100%; } |
position: relativeを取ることで、ドロップエリアが前画面になる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .qq-upload-button { padding: 2px 10px; border: solid 2px #2291e6; border-radius: 4px; background: #fff; color: #2291e6; text-align: center; } .qq-upload-button-hover { color: #fff; background: #2291e6; } |
ボタンを調整
|
1 2 3 4 5 6 7 | .qq-upload-drop-area-active { background: #2291e6; filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; overflow: hidden; } |
ドロップエリアを調整
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .qq-upload-list { margin: 20px 0 0 0; padding: 0; list-style: none; } .qq-upload-list li { margin: 0; padding: 9px; clear: both; overflow: hidden; } .qq-upload-list li img { float: left; margin-right: 10px; } .qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-retry, .qq-upload-failed-text, .qq-upload-delete, .qq-upload-pause, .qq-upload-continue { margin-right: 12px; display: inline; font-size: 11px; } |
結果部分を調整
装飾が足りない気がするが、見やすくはなったかと思われる
Author Profile
SHARE
