pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use border-box everywhere and use svelte loop keying

Browse Source
This commit is contained in:
Fornax
2021-11-27 10:16:32 +01:00
parent a7b98f3b5d
commit b7038be202
14 changed files with 10 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
res/include/style/layout.css
View File

@@ -48,6 +48,9 @@
a > svg { vertical-align: middle; }
/* Page rendering configuration */
*, *::before, *::after {
box-sizing: border-box;
}
html, body { overflow-x: hidden; }
body{
margin: 0;
@@ -106,7 +109,6 @@ body, .checkers {
background-color: #1c1c1c;
background-color: var(--layer_1_color);
padding: 20px 0 0.5em 0;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
@@ -147,7 +149,6 @@ body, .checkers {
background-color: #212121;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 12px 0 var(--shadow_color);
box-sizing: border-box;
clear: both;
}
.limit_width {
@@ -157,7 +158,6 @@ body, .checkers {
width: 100%;
height: auto;
padding: 0;
box-sizing: border-box;
text-align: left;
clear: both;
}
@@ -171,7 +171,6 @@ body, .checkers {
.page_navigation a {
float: none;
display: block;
box-sizing: border-box;
color: #b2b2b2; /* Fallback */
color: var(--text_color);
text-align: center;
@@ -213,7 +212,6 @@ body, .checkers {
position: relative;
width: auto;
height: auto;
box-sizing: border-box;
overflow: hidden;
text-align: center;
padding: 4px;
@@ -344,7 +342,6 @@ tr > td, tr > th {padding: 0.3em 0.6em;}
@media(max-width: 30em) {
/* Forms will be stacked on small screens */
tr.form > td {
box-sizing: border-box;
float: left;
width: 100%;
padding: 0.5em;
@@ -359,7 +356,6 @@ pre {
.file_button{
position: relative;
box-sizing: border-box;
width: 400px;
max-width: 90%;
height: 3.6em;
@@ -435,7 +431,6 @@ input[type="button"],
input[type="color"],
select {
display: inline-block;
box-sizing: border-box;
border-radius: 8px;
border: none;
margin: 3px;
@@ -513,7 +508,6 @@ select:disabled , select.disabled {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
box-sizing: border-box;
text-align: center;
background-color: var(--layer_1_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
@@ -546,7 +540,6 @@ input[type="date"]{
display: inline-block;
margin: 3px; /* Same as button, to make them align nicely */
border: none;
box-sizing: border-box;
border-radius: 8px;
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 1px 1px 4px -2px var(--shadow_color);

1
res/include/style/modal.css
View File

@@ -21,7 +21,6 @@
left: 50%;
transform: translate(-50%, -20%);
padding: 0;
box-sizing: border-box;
text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px;
border-radius: 20px 20px 8px 8px;

5
res/static/misc/pdf-viewer/web/viewer.css
View File

@@ -118,7 +118,6 @@
.annotationLayer .buttonWidgetAnnotation.radioButton input {
background-color: rgba(0, 54, 255, 0.13);
border: 1px solid transparent;
box-sizing: border-box;
font-size: 9px;
height: 100%;
margin: 0;
@@ -298,7 +297,6 @@
text-align: inherit;
text-decoration: inherit;
vertical-align: inherit;
box-sizing: border-box;
background: transparent;
}
@@ -1538,7 +1536,6 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
-moz-user-select: none;
user-select: none;
cursor: default;
box-sizing: border-box;
}
html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
@@ -1840,7 +1837,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
min-width: 100%;
white-space: normal;
border-radius: 0;
box-sizing: border-box;
}
html[dir="ltr"] .secondaryToolbarButton {
padding-left: 36px;
@@ -2420,7 +2416,6 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
background-color: rgba(255, 255, 0, 0.1);
color: rgba(0, 0, 0, 1);
border: solid 1px rgba(255, 0, 0, 0.5);
box-sizing: border-box;
}
#viewer.textLayer-hover .textLayer span:hover {

2
svelte/src/admin_panel/AbuseReporters.svelte
View File

@@ -144,7 +144,7 @@ onMount(get_reporters);
<td>Created</td>
<td></td>
</tr>
{#each reporters as reporter}
{#each reporters as reporter (reporter.email)}
<tr>
<td>{reporter.email}</td>
<td>{reporter.name}</td>

4
svelte/src/admin_panel/AbuseReports.svelte
View File

@@ -109,14 +109,14 @@ onMount(() => {
</div>
<h2>Pending</h2>
{#each reports_pending as report}
{#each reports_pending as report (report.id)}
{#if report.status === "pending"}
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}
{/each}
<h2>Resolved</h2>
{#each reports_processed as report}
{#each reports_processed as report (report.id)}
{#if report.status !== "pending"}
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}

2
svelte/src/admin_panel/IPBans.svelte
View File

@@ -149,7 +149,7 @@ onMount(get_bans);
<td>Offences</td>
<td></td>
</tr>
{#each rows as row}
{#each rows as row (row.address)}
<tr>
<td>{row.address}</td>
<td>{row.reason}</td>

6
svelte/src/file_viewer/GalleryView.svelte
View File

@@ -110,7 +110,7 @@ const drop = (e, index) => {
</script>
<div class="gallery">
{#each list.files as file, index (file)}
{#each list.files as file, index (file.id)}
<div
class="file"
on:click={() => {click_file(index)}}
@@ -148,16 +148,14 @@ const drop = (e, index) => {
<style>
.gallery{
padding: 16px;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
}
.file{
position: relative;
box-sizing: border-box;
width: 200px;
max-width: 40%;
max-width: 45%;
height: 200px;
margin: 8px;
padding: 0;

1
svelte/src/file_viewer/viewers/Text.svelte
View File

@@ -115,7 +115,6 @@ const code = () => {
font-size: 0.9em;
line-height: 1.5em;
padding: 5px 5px 5px 20px;
box-sizing: border-box;
overflow-y: scroll;
overflow-x: hidden;
}

3
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -215,7 +215,6 @@ const toggle_select = () => {
width: 100%;
margin: 16px 0 0 0;
padding: 0;
box-sizing: border-box;
justify-content: center;
}
.toolbar > * { flex: 0 0 auto; }
@@ -237,7 +236,6 @@ const toggle_select = () => {
text-align: left;
background-color: var(--layer_1_color);
box-shadow: 1px 1px 5px var(--shadow_color);
box-sizing: border-box;
border-collapse: collapse;
}
.directory > * { display: table-row; }
@@ -247,7 +245,6 @@ const toggle_select = () => {
text-decoration: none;
color: var(--text-color);
padding: 6px;
box-sizing: border-box;
}
.directory :global(.node:not(:last-child)) {
border-bottom: 1px solid var(--layer_2_color);

3
svelte/src/home_page/HomePage.svelte
View File

@@ -564,7 +564,6 @@ const keydown = (e) => {
.instruction {
border-top: 1px solid var(--layer_2_color_border);
border-bottom: 1px solid var(--layer_2_color_border);
box-sizing: border-box;
margin: 1.5em 0;
padding: 5px;
}
@@ -574,7 +573,6 @@ const keydown = (e) => {
line-height: 1em;
text-align: center;
display: inline-block;
box-sizing: border-box;
background-color: var(--highlight_color);
color: var(--highlight_text_color);
border-radius: 30px;
@@ -588,7 +586,6 @@ const keydown = (e) => {
margin: 0.1em;
font-size: 1.5em;
display: inline;
box-sizing: border-box;
vertical-align: middle;
}
.stats_box {

1
svelte/src/home_page/UploadProgressBar.svelte
View File

@@ -235,7 +235,6 @@ const add_upload_history = id => {
.upload_task{
position: relative;
box-sizing: border-box;
width: 440px;
max-width: 95%;
height: 4em;

8
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -353,7 +353,6 @@ const node_click = (index) => {
display: inline-block;
margin: 4px 10px;
padding: 4px;
box-sizing: border-box;
border-bottom: 1px solid var(--input_color);
cursor: pointer;
}
@@ -375,12 +374,8 @@ const node_click = (index) => {
padding: 0;
overflow-x: auto;
text-align: left;
box-sizing: border-box;
}
#node_container {
/* Required because we use padding for moving the nodes down when items
above are out of view*/
box-sizing: border-box;
display: block;
min-width: 850px;
}
@@ -402,7 +397,6 @@ const node_click = (index) => {
control over the size.
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
margin: 0;
box-sizing: border-box;
color: var(--text_color);
text-decoration: none;
}
@@ -420,14 +414,12 @@ const node_click = (index) => {
overflow: hidden;
margin: auto 10px;
padding: 4px;
box-sizing: border-box;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.node > div > span {
margin: auto;
box-sizing: border-box;
display: block;
text-overflow: ellipsis;
white-space: nowrap;

2
svelte/src/user_home/APIKeys.svelte
View File

@@ -121,7 +121,7 @@ const logout = async (key) => {
<td>IP address</td>
<td></td>
</tr>
{#each rows as row}
{#each rows as row (row.auth_key)}
<tr style="border-bottom: none;">
<td>{row.auth_key}</td>
<td>{formatDate(row.creation_time, true, true, false)}</td>

1
svelte/src/util/Modal.svelte
View File

@@ -84,7 +84,6 @@ const keydown = e => {
padding: 0;
border-radius: 20px 20px 8px 8px;
overflow: hidden;
box-sizing: border-box;
text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px;
}