Fine Uploaderを見やすく調整してみた

LaunchCartで使用しているFine Uploaderだが、デフォルトの見た目だと少し操作性が悪いとおもっており、調整してみた

変更点は以下

■テンプレート


&lt;script type="text/template" id="qq-template-image"&gt;
  &lt;div class="qq-uploader-selector qq-uploader"&gt;
    &lt;div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone&gt;
      &lt;span&gt;ここにファイルをドラッグアンドドロップしてください&lt;/span&gt;
    &lt;/div&gt;
    &lt;p class="qq-upload-button-selector qq-upload-button"&gt;
     ファイルを選択
    &lt;/p&gt;
    &lt;span class="qq-drop-processing-selector qq-drop-processing"&gt;
      &lt;span&gt;処理中...&lt;/span&gt;
      &lt;span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;ul class="qq-upload-list-selector qq-upload-list"&gt;
      &lt;li&gt;
        &lt;div class="qq-progress-bar-container-selector"&gt;
          &lt;div class="qq-progress-bar-selector qq-progress-bar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;span class="qq-upload-spinner-selector qq-upload-spinner"&gt;&lt;/span&gt;
        &lt;img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale&gt;
        &lt;span class="qq-edit-filename-icon-selector qq-edit-filename-icon"&gt;&lt;/span&gt;
        &lt;span class="qq-upload-file-selector qq-upload-file"&gt;&lt;/span&gt;
        &lt;input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"&gt;
        &lt;span class="qq-upload-size-selector qq-upload-size"&gt;&lt;/span&gt;
        &lt;a class="qq-upload-cancel-selector qq-upload-cancel" href="#"&gt;キャンセル&lt;/a&gt;
        &lt;a class="qq-upload-retry-selector qq-upload-retry" href="#"&gt;リトライ&lt;/a&gt;
        &lt;a class="qq-upload-delete-selector qq-upload-delete" href="#"&gt;削除&lt;/a&gt;
        &lt;span class="qq-upload-status-text-selector qq-upload-status-text"&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/script&gt;

<span>ここにファイルをドラッグアンドドロップしてください</span>

</div>

ファイルを選択

</p>

</span>

<li>

</div>

<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">キャンセル</a>

</li>

</ul>

</div>

</script>

日本語化したのと、CSS、JSに合わせて構造を少し変更

■CSS


.qq-uploader {
    /*position: relative;*/
    width: 100%;
}

.qq-uploader {

/*position: relative;*/

width: 100%;

}

position: relativeを取ることで、ドロップエリアが前画面になる


.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;
}

.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;

}

ボタンを調整


.qq-upload-drop-area-active {
	background: #2291e6;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	overflow: hidden;
}

.qq-upload-drop-area-active {

background: #2291e6;

filter: alpha(opacity=80);

-moz-opacity:0.8;

opacity:0.8;

overflow: hidden;

}

ドロップエリアを調整


.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;
}