minor ui fixes
This commit is contained in:
Emily
parent
49b9a1f452
commit
4ee497a83f
8 changed files with 58 additions and 38 deletions
14
app/base.css
14
app/base.css
|
|
@ -26,7 +26,7 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -48,7 +48,7 @@ a {
|
|||
box-sizing: border-box;
|
||||
min-height: 500px;
|
||||
max-height: 800px;
|
||||
height: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stripedBox {
|
||||
|
|
@ -58,7 +58,8 @@ a {
|
|||
margin-top: 32px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 0 3px rgba(12, 12, 13, 0.2);
|
||||
border: 3px solid rgba(12, 12, 12, 0.2);
|
||||
background-clip: padding-box;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
white,
|
||||
|
|
@ -88,7 +89,9 @@ a {
|
|||
|
||||
.uploads {
|
||||
flex: 0 0 262px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-top: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.noscript {
|
||||
|
|
@ -276,13 +279,14 @@ a {
|
|||
}
|
||||
|
||||
.stripedBox {
|
||||
margin-top: 72;
|
||||
margin-top: 72px;
|
||||
min-height: 400px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uploads {
|
||||
flex: none;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ function body(template) {
|
|||
return function(state, emit) {
|
||||
const b = html`<body class="background ${activeBackground(state)}">
|
||||
${banner(state, emit)}
|
||||
${signupPromo(state)}
|
||||
<main class="main">
|
||||
<noscript>
|
||||
<div class="noscript">
|
||||
|
|
@ -35,6 +34,7 @@ function body(template) {
|
|||
<p>${state.translate('enableJavascript')}</p>
|
||||
</div>
|
||||
</noscript>
|
||||
${signupPromo(state)}
|
||||
<div class="stripedBox">
|
||||
<div class="mainContent">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
.fileToast {
|
||||
margin: 13px 0 0;
|
||||
flex: none;
|
||||
display: block;
|
||||
margin: 6px 0 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: var(--lightTextColor);
|
||||
background-color: var(--pageBGColor);
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 3px rgba(12, 12, 12, 0.2);
|
||||
border: 3px solid rgba(12, 12, 12, 0.2);
|
||||
background-clip: padding-box;
|
||||
box-sizing: border-box;
|
||||
height: 53px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fileToast__content {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -61,33 +65,35 @@
|
|||
}
|
||||
|
||||
.fileToast .fileIcon {
|
||||
margin: 2px 8px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.fileToast {
|
||||
height: 32px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.fileToast__content {
|
||||
display: flex;
|
||||
line-height: 13px;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fileData {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-left: 8px;
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.fileInfo {
|
||||
flex-shrink: 0;
|
||||
flex: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fileToast .fileIcon {
|
||||
margin: 0;
|
||||
flex: none;
|
||||
transform: scale(0.5);
|
||||
color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,23 +20,23 @@ module.exports = function(file, state) {
|
|||
|
||||
const activeClass = isOnSharePage() ? 'fileToast--active' : '';
|
||||
return html`
|
||||
<a href=${toastClick()}>
|
||||
<li class="fileToast ${activeClass}" id="${file.id}">
|
||||
<div class="fileToast__content">
|
||||
${fileIcon(file.name, file._hasPassword)}
|
||||
<div class="fileData">
|
||||
<p class="fileName">${fileName}</p>
|
||||
<p class="fileInfo">
|
||||
<span>${bytes(file.size)}</span> ·
|
||||
<span>${state.translate('downloadCount', {
|
||||
num: `${number(totalDownloads)} / ${number(downloadLimit)}`
|
||||
})}</span>
|
||||
<span>${remainingTime}</span>
|
||||
</p>
|
||||
<li id="${file.id}">
|
||||
<a class="fileToast ${activeClass}" href=${toastClick()}>
|
||||
<div class="fileToast__content">
|
||||
${fileIcon(file.name, file._hasPassword)}
|
||||
<div class="fileData">
|
||||
<p class="fileName">${fileName}</p>
|
||||
<p class="fileInfo">
|
||||
<span>${bytes(file.size)}</span> ·
|
||||
<span>${state.translate('downloadCount', {
|
||||
num: `${number(totalDownloads)} / ${number(downloadLimit)}`
|
||||
})}</span>
|
||||
<span>${remainingTime}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</a>
|
||||
`;
|
||||
|
||||
function toastClick() {
|
||||
|
|
|
|||
|
|
@ -25,4 +25,5 @@
|
|||
font-size: 7px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,28 @@
|
|||
.fileList {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
padding: 0;
|
||||
width: 262px;
|
||||
max-height: 80%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
overflow: scroll;
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
}
|
||||
|
||||
/* hack because justify-content:flex-end and overflow:scroll doesn't work together */
|
||||
.fileList > :first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.fileList {
|
||||
flex: none;
|
||||
position: static;
|
||||
width: 400px;
|
||||
width: 406px;
|
||||
max-height: 160px;
|
||||
margin: 6px 0 0 -3px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.fxPromo {
|
||||
flex: none;
|
||||
padding: 0 15px;
|
||||
height: 48px;
|
||||
background-color: #efeff1;
|
||||
|
|
|
|||
|
|
@ -7,4 +7,5 @@
|
|||
align-content: center;
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue