css fix long file names.
This commit is contained in:
parent
ac822a2531
commit
ad5abb6054
@ -7,7 +7,7 @@
|
|||||||
<div class="files-list">
|
<div class="files-list">
|
||||||
<div v-for="item in files" :key="item.name" class="files-list-item">
|
<div v-for="item in files" :key="item.name" class="files-list-item">
|
||||||
<i :class="fileIcon(item)" />
|
<i :class="fileIcon(item)" />
|
||||||
<p>{{ item.name }}</p>
|
<p class="file-name" :title="item.name">{{ item.name }}</p>
|
||||||
<p class="file-size">{{ fileSize(item.size) }}</p>
|
<p class="file-size">{{ fileSize(item.size) }}</p>
|
||||||
<i v-if="item.type !== 'dir'" class="fas fa-download download" @click="download(item)" />
|
<i v-if="item.type !== 'dir'" class="fas fa-download download" @click="download(item)" />
|
||||||
</div>
|
</div>
|
||||||
@ -29,7 +29,7 @@
|
|||||||
'fa-warning': download.status === 'failed',
|
'fa-warning': download.status === 'failed',
|
||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
<p>{{ download.name }}</p>
|
<p class="file-name" :title="download.name">{{ download.name }}</p>
|
||||||
<p class="file-size">{{ Math.min(100, Math.round((download.progress / download.size) * 100)) }}%</p>
|
<p class="file-size">{{ Math.min(100, Math.round((download.progress / download.size) * 100)) }}%</p>
|
||||||
<i class="fas fa-xmark remove-transfer" @click="removeTransfer(download)"></i>
|
<i class="fas fa-xmark remove-transfer" @click="removeTransfer(download)"></i>
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +58,7 @@
|
|||||||
'fa-warning': upload.status === 'failed',
|
'fa-warning': upload.status === 'failed',
|
||||||
}"
|
}"
|
||||||
></i>
|
></i>
|
||||||
<p>{{ upload.name }}</p>
|
<p class="file-name" :title="upload.name">{{ upload.name }}</p>
|
||||||
<p class="file-size">{{ Math.min(100, Math.round((upload.progress / upload.size) * 100)) }}%</p>
|
<p class="file-size">{{ Math.min(100, Math.round((upload.progress / upload.size) * 100)) }}%</p>
|
||||||
<i class="fas fa-xmark remove-transfer" @click="removeTransfer(upload)"></i>
|
<i class="fas fa-xmark remove-transfer" @click="removeTransfer(upload)"></i>
|
||||||
</div>
|
</div>
|
||||||
@ -164,10 +164,17 @@
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.file-size {
|
.file-size {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
color: rgba($color: #fff, $alpha: 0.4);
|
color: rgba($color: #fff, $alpha: 0.4);
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.refresh:hover,
|
.refresh:hover,
|
||||||
|
Reference in New Issue
Block a user