split/monofile
1
0
Fork 0
mirror of https://github.com/mollersuite/monofile.git synced 2024-10-06 12:06:26 -07:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

file menu wip

Browse source
This commit is contained in:
split / May 2023-03-17 12:07:03 -07:00
parent a72f7afab9
commit 52e5de2450
3 changed files with 81 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/style/app/pulldown/accounts.scss
View file

@ -139,10 +139,18 @@
.loggedIn {
position:absolute;
left:10px;
top:10px;
/*
left:10px;
top:10px;
*/
left:0px;
top:0px;
width:calc( 100% - 20px );
height:calc( 100% - 20px );
padding:10px;
overflow-y:auto;
h1 {

69
src/style/app/pulldown/files.scss
View file

@ -31,4 +31,73 @@
}
}
}
.loggedIn {
display: flex;
flex-direction: column;
max-height:100%;
overflow:hidden;
.searchBar {
transition-duration:150ms;
background-color:#171717;
width:100%;
padding:8px;
color:#dddddd;
border:none;
border-bottom: 1px solid #aaaaaa;
outline: none;
border-radius:0px;
font-size:14px;
&:focus {
transition-duration:150ms;
border-bottom: 1px solid #dddddd;
}
@media screen and (max-width: 500px) {
padding:12px;
font-size:16px;
}
}
.fileList {
overflow-y:auto;
overflow-x:hidden;
padding:5px 0;
.flFile {
padding: 3px 8px;
@media screen and (max-width: 500px) {
padding:7px 12px;
}
.detail {
color:#777777;
font-size:14px;
@media screen and (max-width: 500px) {
font-size:16px;
}
}
h2 {
font-size:18px;
text-overflow:ellipsis;
overflow:hidden;
font-weight:600;
@media screen and (max-width: 500px) {
font-size:20px;
}
}
p, h2 {
margin:0 0 0 0;
white-space: nowrap;
}
}
}
}
}

5
src/svelte/elem/pulldowns/Files.svelte
View file

@ -16,14 +16,13 @@
</div>
{:else}
<div class="loggedIn">
<input type="text" placeholder={`Search ${$files.length} file(s)`}>
<input type="text" placeholder={`Search ${$files.length} file(s)`} class="searchBar">
<div class="fileList">
{#each $files as file (file.id)}
<div class="flFile">
<p class="detail">{file.id}</p>
<h2>{file.filename}</h2>
<p class="detail"><span class="number">{file.mime.split(";")[0]}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.sizeDisplay}</span></p>
<p class="detail"><span class="number">{file.id}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span></p>
</div>
{/each}
</div>