iridium/neko-custom
Archived
2
0
Fork 0
Code Pull Requests Activity

css fix long file names.

Browse Source
This commit is contained in:
Miroslav Šedivý 2022-11-19 20:53:27 +01:00
parent ac822a2531
commit ad5abb6054
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/files.vue
View File

@ -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,