chore: some HTML/CSS cleanup

This commit is contained in:
Floorb 2023-06-02 15:37:06 -04:00
parent 17fbaee878
commit f2efc54d0a
15 changed files with 222 additions and 313 deletions

View file

@ -72,14 +72,6 @@ const globalSetup = () => {
}); });
} }
const preloader = $('.preloader');
const main = $('main');
if (preloader && main) {
preloader.remove();
main.id = '';
}
// CAPTCHA refresh // CAPTCHA refresh
const captchaContainer = $('.captcha_container'); const captchaContainer = $('.captcha_container');

View file

@ -15,7 +15,7 @@ class TagsInput {
this.element.style.display = 'none'; this.element.style.display = 'none';
this.containerNode = makeEl('<div class="tags-input"></div>'); this.containerNode = makeEl('<div class="tags-input"></div>');
this.inputNode = makeEl('<input class="input" type="text" placeholder="32 tags maximum" value="" />'); this.inputNode = makeEl('<input class="input" type="text" placeholder="Type a comma to separate each tag..." value="" />');
this.containerNode.appendChild(this.inputNode); this.containerNode.appendChild(this.inputNode);
this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling); this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);

View file

@ -333,7 +333,7 @@ class TagsInput {
this.element.style.display = 'none'; this.element.style.display = 'none';
this.containerNode = makeEl('<div class="tags-input"></div>'); this.containerNode = makeEl('<div class="tags-input"></div>');
this.inputNode = makeEl('<input class="input" type="text" placeholder="32 tags maximum" value="" />'); this.inputNode = makeEl('<input class="input" type="text" placeholder="Type a comma to separate each tag..." value="" />');
this.containerNode.appendChild(this.inputNode); this.containerNode.appendChild(this.inputNode);
this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling); this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);
@ -501,14 +501,6 @@ const globalSetup = () => {
}); });
} }
const preloader = $('.preloader');
const main = $('main');
if (preloader && main) {
preloader.remove();
main.id = '';
}
// CAPTCHA refresh // CAPTCHA refresh
const captchaContainer = $('.captcha_container'); const captchaContainer = $('.captcha_container');

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -54,7 +54,7 @@ class TagsInput {
this.element.style.display = 'none'; this.element.style.display = 'none';
this.containerNode = makeEl('<div class="tags-input"></div>'); this.containerNode = makeEl('<div class="tags-input"></div>');
this.inputNode = makeEl('<input class="input" type="text" placeholder="32 tags maximum" value="" />'); this.inputNode = makeEl('<input class="input" type="text" placeholder="Type a comma to separate each tag..." value="" />');
this.containerNode.appendChild(this.inputNode); this.containerNode.appendChild(this.inputNode);
this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling); this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);
@ -222,14 +222,6 @@ const globalSetup = () => {
}); });
} }
const preloader = $('.preloader');
const main = $('main');
if (preloader && main) {
preloader.remove();
main.id = '';
}
// CAPTCHA refresh // CAPTCHA refresh
const captchaContainer = $('.captcha_container'); const captchaContainer = $('.captcha_container');

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -333,7 +333,7 @@ class TagsInput {
this.element.style.display = 'none'; this.element.style.display = 'none';
this.containerNode = makeEl('<div class="tags-input"></div>'); this.containerNode = makeEl('<div class="tags-input"></div>');
this.inputNode = makeEl('<input class="input" type="text" placeholder="32 tags maximum" value="" />'); this.inputNode = makeEl('<input class="input" type="text" placeholder="Type a comma to separate each tag..." value="" />');
this.containerNode.appendChild(this.inputNode); this.containerNode.appendChild(this.inputNode);
this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling); this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);
@ -501,14 +501,6 @@ const globalSetup = () => {
}); });
} }
const preloader = $('.preloader');
const main = $('main');
if (preloader && main) {
preloader.remove();
main.id = '';
}
// CAPTCHA refresh // CAPTCHA refresh
const captchaContainer = $('.captcha_container'); const captchaContainer = $('.captcha_container');

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -282,3 +282,55 @@ code {
.flex--space-between { .flex--space-between {
justify-content: space-between; justify-content: space-between;
} }
.paginator > a {
margin: 0.25rem;
}
.paginator > a.disabled {
pointer-events: none;
color: gray;
}
.paginator__sort > th {
cursor: pointer;
}
.paginator__sort--down, .paginator__sort--up {
background-color: lightblue;
}
.paginator__sort--down:after {
padding-left: 0.25rem;
content: '▼';
}
.paginator__sort--up:after {
padding-left: 0.25rem;
content: '▲';
}
.hidden {
display: none;
visibility: hidden;
opacity: 0;
}
table.hidden + .loading_container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 99999999;
background-image: url('/assets/img/loader/<?= random_int(1, 3) ?>.gif');
background-repeat: no-repeat;
background-color: #FFF;
background-position: center;
}
.pp-width-auto {
width: auto;
}

View file

@ -1,55 +1,3 @@
<style>
.paginator > a {
margin: 0.25rem;
}
.paginator > a.disabled {
pointer-events: none;
color: gray;
}
.paginator__sort > th {
cursor: pointer;
}
.paginator__sort--down, .paginator__sort--up {
background-color: lightblue;
}
.paginator__sort--down:after {
padding-left: 0.25rem;
content: '▼';
}
.paginator__sort--up:after {
padding-left: 0.25rem;
content: '▲';
}
.hidden {
display: none;
visibility: hidden;
opacity: 0;
}
table.hidden + .loading_container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 99999999;
background-image: url('/assets/img/loader/<?= random_int(1, 3) ?>.gif');
background-repeat: no-repeat;
background-color: #FFF;
background-position: center;
}
</style>
<main class="bd-main"> <main class="bd-main">
<div class="container"> <div class="container">
<div class="bd-duo"> <div class="bd-duo">

View file

@ -1,219 +1,182 @@
<link rel="stylesheet" href="theme/bulma/css/bulma-tagsinput.min.css"/> <link rel="stylesheet" href="theme/bulma/css/bulma-tagsinput.min.css"/>
<main class="bd-main"> <main class="container">
<div class="container"> <div class="bd-duo">
<div class="bd-duo"> <div class="bd-lead">
<div class="bd-lead"> <?php if (isset($global_site_info['banner'])): ?>
<?php if (isset($global_site_info['banner'])): ?> <div class="notification is-primary">
<div class="notification is-primary"> <?= $global_site_info['banner'] /* Intentionally not escaped to allow HTML */ ?>
<?= $global_site_info['banner'] /* Intentionally not escaped to allow HTML */ ?> </div>
</div> <?php endif; ?>
<?php endif; ?> <!-- Paste Panel -->
<!-- Paste Panel --> <?php if ($_SERVER['REQUEST_METHOD'] == 'POST') {
<?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { if (isset($error)) { ?>
if (isset($error)) { ?> <!-- Error Panel -->
<!-- Error Panel --> <i class="fa fa-exclamation-circle" aria-hidden="true"></i> <?php echo $error; ?>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i> <?php echo $error; ?> <?php }
<?php } }
} ?>
?> <?php outputFlashes($flashes); ?>
<?php outputFlashes($flashes); ?> <h1 class="subtitle is-4">
<h1 class="subtitle is-4"> New Paste
New Paste </h1>
</h1> <form method="POST">
<form method="POST"> <div class="level">
<nav class="level"> <div class="level-left">
<div class="level-left"> <!-- Title -->
<!-- Title --> <div class="level-item is-pulled-left" style="margin-right: 5px;">
<div class="level-item is-pulled-left" style="margin-right: 5px;"> <p class="control has-icons-left">
<p class="control has-icons-left"> <input type="text" class="input" name="title" placeholder="Title"
<input type="text" class="input" name="title" placeholder="Title" value="<?php echo (isset($_POST['title'])) ? pp_html_escape($_POST['title']) : ''; ?>">
value="<?php echo (isset($_POST['title'])) ? pp_html_escape($_POST['title']) : ''; ?>"> <span class="icon is-small is-left">
<span class="icon is-small is-left">
<i class="fa fa-font"></i> <i class="fa fa-font"></i>
</span> </span>
</p> </p>
</div>
<!-- Format -->
<div class="level-item is-pulled-left mx-1">
<div class="select">
<select name="format">
<?php
foreach (PP_HIGHLIGHT_FORMATS as $code => $name) {
if (isset($_POST['format'])) {
$sel = ($_POST['format'] == $code) ? 'selected="selected"' : ''; // Pre-populate if we come here on an error
} else {
$sel = ($code == "markdown") ? 'selected="selected"' : '';
}
echo '<option ' . $sel . ' value="' . $code . '">' . $name . '</option>';
}
?>
</select>
</div> </div>
<!-- Format --> </div>
<div class="level-item is-pulled-left mx-1"> <div class="level-item is-pulled-left mx-1">
<div class="select"> <a class="button" onclick="highlight(document.getElementById('code')); return false;"><i
<select data-live-search="true" name="format"> class="fas fa-indent"></i>&nbsp;Highlight</a>
</div>
<div class="level-item is-pulled-left mx-1">
<input class="button is-info" type="submit" name="submit" id="submit" value="Paste"/>
</div>
</div>
</div>
<!-- Text area -->
<textarea class="textarea" rows="15" id="code" name="paste_data" onkeyup="countChars(this);"
onkeydown="return catchTab(this,event)"
placeholder="Paste Or Drop Text File Here."><?php echo (isset($_POST['paste_data'])) ? pp_html_escape($_POST['paste_data']) : ''; ?></textarea>
<p id="charNum"><b>File Size: </b><span style="color: green;">1000/1000Kb</span></p>
<!-- Tag system -->
<div class="field">
<label class="label" for="field_tags">Tags</label>
<div class="control">
<input name="tag_input" class="input js-tag-input" id="field_tags"
value="<?= (isset($_POST['tag_input'])) ? pp_html_escape($_POST['tag_input']) : ''; ?>"/>
</div>
<p class="help">32 tags maximum.</p>
</div>
<!-- This whole hack is just to get the "Expiry" and "Visibility" fields on the same line -->
<div class="level">
<div class="level-left">
<div class="level-item is-pulled-left mr-1">
<div class="field">
<label class="label" for="paste_expire_date">Expiry</label>
<div class="control">
<div class="select">
<?php <?php
foreach (PP_HIGHLIGHT_FORMATS as $code => $name) { $post_expire = "";
if (isset($_POST['format'])) { if ($_POST) {
$sel = ($_POST['format'] == $code) ? 'selected="selected"' : ''; // Pre-populate if we come here on an error if (isset($_POST['paste_expire_date'])) {
} else { $post_expire = $_POST['paste_expire_date'];
$sel = ($code == "markdown") ? 'selected="selected"' : '';
} }
echo '<option ' . $sel . ' value="' . $code . '">' . $name . '</option>';
} }
?> ?>
</select> <select name="paste_expire_date" id="paste_expire_date">
<?= optionsForSelect(
['Never', 'View Once', '10 minutes', '1 hour', '1 day', '1 week', '2 weeks', '1 month'],
['N', 'self', '0Y0M0DT0H10M', '1H', '1D', '1W', '2W', '1M'],
$post_expire
); ?>
</select>
</div>
</div> </div>
</div> </div>
<div class="level-item is-pulled-left mx-1">
<a class="button" onclick="highlight(document.getElementById('code')); return false;"><i
class="fas fa-indent"></i>&nbsp;Highlight</a>
</div>
<div class="level-item is-pulled-left mx-1">
<input class="button is-info" type="submit" name="submit" id="submit" value="Paste"/>
</div>
</div> </div>
</nav> <div class="level-item is-pulled-left mx-1">
<!-- Text area --> <div class="field">
<textarea class="textarea" rows="15" id="code" name="paste_data" onkeyup="countChars(this);" <label class="label" for="visibility">Visibility</label>
onkeydown="return catchTab(this,event)" <div class="control">
placeholder="Paste Or Drop Text File Here."><?php echo (isset($_POST['paste_data'])) ? pp_html_escape($_POST['paste_data']) : ''; ?></textarea> <div class="select">
<p id="charNum"><b>File Size: </b><span style="color: green;">1000/1000Kb</span></p> <?php
<br> $post_visibility = "";
<!-- Tag system --> if ($_POST) {
<div class='rows'> if (isset($_POST['visibility'])) {
<div class='row is-full'> $post_visibility = $_POST['visibility'];
<div class="columns"> }
<div class="column"> }
<div class="field"> ?>
<label class="label" for="field_tags">Tags</label> <select name="visibility" id="visibility">
<small>Type a comma to separate each tag.</small> <option
<div class="control"> value="0" <?php echo ($post_visibility == "0") ? 'selected="selected"' : ''; ?>>
<input name="tag_input" class="input js-tag-input" id="field_tags" Public
value="<?= (isset($_POST['tag_input'])) ? pp_html_escape($_POST['tag_input']) : ''; ?>"/> </option>
</div> <option
value="1" <?php echo ($post_visibility == "1") ? 'selected="selected"' : ''; ?>>
Unlisted
</option>
<?php if ($current_user) { ?>
<option
value="2" <?php echo ($post_visibility == "2") ? 'selected="selected"' : ''; ?>>
Private
</option>
<?php } else { ?>
<option disabled>Private</option>
<?php } ?>
</select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="field">
<div class="control">
<input type="text" class="input pp-width-auto" name="pass" id="pass"
placeholder="Password (optional)" autocomplete="new-password"
value="<?php echo (isset($_POST['pass'])) ? pp_html_escape($_POST['pass']) : ''; ?>"/>
</div>
</div>
<div class="field">
<div class="control">
<input class="is-checkradio is-info has-background-color" id="encrypt"
checked="checked" disabled="disabled" type="checkbox">
<label for="encrypt">
Encrypt on Server (always enabled)
</label>
</div>
</div>
<div class='row is-full'> <?php if ($captcha_enabled && $current_user === null): ?>
<div class="columns"> <div class="is-one-quarter">
<div class="column is-5"> <div class="captcha_container">
<nav class="level"> <img src="/captcha?t=<?= $captcha_token = setupCaptcha() ?>"
<div class="level-left"> alt="CAPTCHA Image"/>
<div class="level-item is-pulled-left mr-1"> <span style="height: 100%;">
<div class="field"> <a href="javascript:void(0)">
<div class="subtitle has-text-weight-semibold " <i class="fa fa-refresh" style="height: 100%;"></i>
style="margin-left: 2px; margin-bottom: 0.6rem; font-size: 1rem;"> </a>
Expiry </span>
</div> <input type="hidden" name="captcha_token" value="<?= $captcha_token ?>"/>
<div class="control"> <input type="text" class="input" name="captcha_answer"
<div class="select"> placeholder="Enter the CAPTCHA"/>
<?php <p class="is-size-6 has-text-grey-light has-text-left mt-2">and press
$post_expire = ""; "Enter"</p>
if ($_POST) {
if (isset($_POST['paste_expire_date'])) {
$post_expire = $_POST['paste_expire_date'];
}
}
?>
<select name="paste_expire_date">
<?= optionsForSelect(
['Never', 'View Once', '10 minutes', '1 hour', '1 day', '1 week', '2 weeks', '1 month'],
['N', 'self', '0Y0M0DT0H10M', '1H', '1D', '1W', '2W', '1M'],
$post_expire
); ?>
</select>
</div>
</div>
</div>
</div>
<div class="level-item is-pulled-left mx-1">
<div class="field">
<div class="subtitle has-text-weight-semibold "
style="margin-left: 2px; margin-bottom: 0.6rem; font-size: 1rem;">
Visibility
&nbsp;&nbsp;
</div>
<div class="control">
<div class="select">
<?php
$post_visibility = "";
if ($_POST) {
if (isset($_POST['visibility'])) {
$post_visibility = $_POST['visibility'];
}
}
?>
<select name="visibility">
<option
value="0" <?php echo ($post_visibility == "0") ? 'selected="selected"' : ''; ?>>
Public
</option>
<option
value="1" <?php echo ($post_visibility == "1") ? 'selected="selected"' : ''; ?>>
Unlisted
</option>
<?php if ($current_user) { ?>
<option
value="2" <?php echo ($post_visibility == "2") ? 'selected="selected"' : ''; ?>>
Private
</option>
<?php } else { ?>
<option disabled>Private</option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav>
<div class="level-left">
<!-- Password -->
<div class="columns">
<div class="column">
<input type="text" class="input" name="pass" id="pass"
placeholder="Password" autocomplete="new-password"
value="<?php echo (isset($_POST['pass'])) ? pp_html_escape($_POST['pass']) : ''; ?>"/>
</div>
</div>
</div>
</nav>
<br>
<nav>
<div class="level-left">
<!-- Encrypted -->
<div class="field">
<input class="is-checkradio is-info has-background-color" id="encrypt"
checked="checked" disabled="disabled" type="checkbox">
<label for="encrypt">
Encrypt on Server (always enabled)
</label>
</div>
</div>
</nav>
</div>
<div class="column is-3">
</div>
<div class="column is-4">
<!-- CAPTCHA -->
<?php if ($captcha_enabled && $current_user === null): ?>
<div class="is-one-quarter">
<div class="captcha_container">
<img src="/captcha?t=<?= $captcha_token = setupCaptcha() ?>"
alt="CAPTCHA Image"/>
<span style="height: 100%;">
<a href="javascript:void(0)">
<i class="fa fa-refresh" style="height: 100%;"></i>
</a>
</span>
<input type="hidden" name="captcha_token" value="<?= $captcha_token ?>"/>
<input type="text" class="input" name="captcha_answer"
placeholder="Enter the CAPTCHA"/>
<p class="is-size-6 has-text-grey-light has-text-left mt-2">and press
"Enter"</p>
</div>
</div>
<?php endif; ?>
<?php if (isset($csrf_token)): ?>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>"/>
<?php endif; ?>
</div>
</div> </div>
</div> </div>
</form> <?php endif; ?>
</div> <?php if (isset($csrf_token)): ?>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>"/>
<?php endif; ?>
</form>
</div> </div>
</div> </div>
</main> </main>

View file

@ -21,35 +21,13 @@
<?php if ($using_highlighter): ?> <?php if ($using_highlighter): ?>
<link rel="stylesheet" href="/vendor/scrivo/highlight.php/styles/default.css"/> <link rel="stylesheet" href="/vendor/scrivo/highlight.php/styles/default.css"/>
<?php endif; ?> <?php endif; ?>
<?php
$protocol = paste_protocol();
$bg = array('/img/loader.gif', '/img/loader2.gif', '/img/loader3.gif'); // array of filenames
$i = rand(0, count($bg) - 1); // generate random number size of the array
$selectedloader = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<style> <style>
.preloader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 99999999;
background-image: url('<?= $selectedloader ?>'); /* your icon gif file path */
background-repeat: no-repeat;
background-color: #FFF;
background-position: center;
}
#stop-scrolling { #stop-scrolling {
height: 100% !important; height: 100% !important;
overflow: hidden !important; overflow: hidden !important;
} }
</style> </style>
<main class="bd-main" id="dstop-scrolling"> <main class="bd-main" id="stop-scrolling">
<div class="container"> <div class="container">
<div class="bd-duo"> <div class="bd-duo">
<div class="bd-lead"> <div class="bd-lead">