Skip to content

Commit 8c26daa

Browse files
AlecRustAlecRust
authored
Refactor add ns buttons (hestiacp#3701)
* Tidy some CSS * Refactor "Add Name Server" button * Tidy more classes
1 parent 57c5087 commit 8c26daa

File tree

15 files changed

+48
-64
lines changed

15 files changed

+48
-64
lines changed

‎web/css/src/themes/dark.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -528,14 +528,6 @@ strong {
528528

529529
.form-link {
530530
color: #09f;
531-
532-
&:hover {
533-
background-color: #3b9de8;
534-
}
535-
536-
&:active {
537-
background-color: #54a6e5;
538-
}
539531
}
540532

541533
.form-link-danger {
@@ -784,10 +776,6 @@ strong {
784776
&[aria-selected="true"] {
785777
color: #ff3478;
786778
}
787-
788-
&:active {
789-
color: #3b9de8;
790-
}
791779
}
792780

793781
.server-console-output {

‎web/css/src/themes/default.css‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1776,18 +1776,20 @@
17761776
);
17771777
}
17781778

1779-
.button-danger:hover {
1780-
background: linear-gradient(to bottom, #fbf2f1 0%, #f6b4ac 51%, #fde6e3 100%);
1781-
color: #f4301a;
1782-
text-shadow: 0 1px rgb(255 255 255 / 50%);
1783-
border-color: #f27e71;
1784-
}
1785-
1786-
.button-danger:active {
1787-
background: linear-gradient(to bottom, #fcd0ca 0%, #f5a69d 50%, #f9e3df 100%);
1788-
color: #ce1500;
1789-
text-shadow: 0 1px 1px rgb(255 255 255 / 20%), 0 -1px 1px rgb(255 255 255 / 60%);
1790-
border-color: #f4301a;
1779+
.button-danger {
1780+
&:hover {
1781+
background: linear-gradient(to bottom, #fbf2f1 0%, #f6b4ac 51%, #fde6e3 100%);
1782+
color: #f4301a;
1783+
text-shadow: 0 1px rgb(255 255 255 / 50%);
1784+
border-color: #f27e71;
1785+
}
1786+
1787+
&:active {
1788+
background: linear-gradient(to bottom, #fcd0ca 0%, #f5a69d 50%, #f9e3df 100%);
1789+
color: #ce1500;
1790+
text-shadow: 0 1px 1px rgb(255 255 255 / 20%), 0 -1px 1px rgb(255 255 255 / 60%);
1791+
border-color: #f4301a;
1792+
}
17911793
}
17921794

17931795
.button-circle {

‎web/css/src/utilities.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,6 @@
111111
padding-top: 10px !important;
112112
}
113113

114-
.u-pt18 {
115-
padding-top: 18px !important;
116-
}
117-
118114
.u-pl30 {
119115
padding-left: 30px !important;
120116
}

‎web/js/src/ftpAccounts.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function handleDeleteAccountClick() {
9393
updateUserNumbers();
9494

9595
if (document.querySelectorAll('.js-active-ftp-accounts .js-ftp-account-nrm').length == 0) {
96-
document.querySelector('.js-add-new-ftp-user-button').style.display = 'none';
96+
document.querySelector('.js-add-ftp-account').style.display = 'none';
9797
document.querySelector('input[name="v_ftp"]').checked = false;
9898
}
9999
});
@@ -116,10 +116,10 @@ function handleToggleFtpAccountsCheckbox() {
116116

117117
toggleFtpAccountsCheckbox.addEventListener('change', (evt) => {
118118
const isChecked = evt.target.checked;
119-
const addNewFtpUserButton = document.querySelector('.js-add-new-ftp-user-button');
119+
const addFtpAccountButton = document.querySelector('.js-add-ftp-account');
120120
const ftpAccounts = document.querySelectorAll('.js-ftp-account-nrm');
121121

122-
addNewFtpUserButton.style.display = isChecked ? 'block' : 'none';
122+
addFtpAccountButton.style.display = isChecked ? 'block' : 'none';
123123

124124
ftpAccounts.forEach((ftpAccount) => {
125125
const usernameInput = ftpAccount.querySelector('.js-ftp-user');

‎web/js/src/nameServerInput.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Attaches listeners to nameserver add and remove links to clone or remove the input
22
export default function handleNameServerInput() {
33
// Add new name server input
4-
const addNsElement = document.querySelector('.js-add-ns');
5-
if (addNsElement) {
6-
addNsElement.addEventListener('click', () => addNsInput(addNsElement));
4+
const addNsButton = document.querySelector('.js-add-ns');
5+
if (addNsButton) {
6+
addNsButton.addEventListener('click', () => addNsInput(addNsButton));
77
}
88

99
// Remove name server input
@@ -12,7 +12,7 @@ export default function handleNameServerInput() {
1212
});
1313
}
1414

15-
function addNsInput(addNsElement) {
15+
function addNsInput(addNsButton) {
1616
const currentNsInputs = document.querySelectorAll('input[name^=v_ns]');
1717
const inputCount = currentNsInputs.length;
1818

@@ -22,11 +22,11 @@ function addNsInput(addNsElement) {
2222

2323
templateNsInput.removeAttribute('value');
2424
templateNsInput.name = `v_ns${inputCount + 1}`;
25-
addNsElement.before(template);
25+
addNsButton.before(template);
2626
}
2727

2828
if (inputCount === 7) {
29-
addNsElement.classList.add('u-hidden');
29+
addNsButton.classList.add('u-hidden');
3030
}
3131
}
3232

‎web/templates/pages/add_db.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</div>
3939
<?php } ?>
4040
<?php if ($user_plain == "admin" && empty($accept)) { ?>
41-
<div class="u-side-by-side u-pt18">
41+
<div class="u-side-by-side u-mt20">
4242
<a href="/add/user/" class="button u-width-full u-mr10"><?= _("Add User") ?></a>
4343
<a href="/add/db/?accept=true" class="button button-danger u-width-full u-ml10"><?= _("Continue") ?></a>
4444
</div>

‎web/templates/pages/add_dns.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</div>
3939
<?php } ?>
4040
<?php if ($user_plain == "admin" && empty($accept)) { ?>
41-
<div class="u-side-by-side u-pt18">
41+
<div class="u-side-by-side u-mt20">
4242
<a href="/add/user/" class="button u-width-full u-mr10"><?= _("Add User") ?></a>
4343
<a href="/add/dns/?accept=true" class="button button-danger u-width-full u-ml10"><?= _("Continue") ?></a>
4444
</div>
@@ -151,9 +151,9 @@
151151
</div>';
152152
}
153153
?>
154-
<div class="u-pt18 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
155-
<span class="form-link"><?= _("Add Name Server") ?></span>
156-
</div>
154+
<button type="button" class="form-link u-mt20 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
155+
<?= _("Add Name Server") ?>
156+
</button>
157157
</div>
158158
<?php } ?>
159159
</div>

‎web/templates/pages/add_mail.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</div>
3939
<?php } ?>
4040
<?php if ($user_plain == "admin" && empty($accept)) { ?>
41-
<div class="u-side-by-side u-pt18">
41+
<div class="u-side-by-side u-mt20">
4242
<a href="/add/user/" class="button u-width-full u-mr10"><?= _("Add User") ?></a>
4343
<a href="/add/mail/?accept=true" class="button button-danger u-width-full u-ml10"><?= _("Continue") ?></a>
4444
</div>

‎web/templates/pages/add_mail_acc.php‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,14 @@
5757
</div>
5858
</div>
5959
<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>
60-
<ul class="u-list-bulleted">
60+
<ul class="u-list-bulleted u-mb20">
6161
<li><?= _("8 characters long") ?></li>
6262
<li><?= _("1 uppercase & 1 lowercase character") ?></li>
6363
<li><?= _("1 number") ?></li>
6464
</ul>
65-
<div class="u-pt18 u-mb20">
66-
<button x-on:click="showAdvanced = !showAdvanced" type="button" class="button button-secondary">
67-
<?= _("Advanced Options") ?>
68-
</button>
69-
</div>
65+
<button x-on:click="showAdvanced = !showAdvanced" type="button" class="button button-secondary u-mb20">
66+
<?= _("Advanced Options") ?>
67+
</button>
7068
<div x-cloak x-show="showAdvanced" id="advtable">
7169
<div class="u-mb10">
7270
<label for="v_quota" class="form-label">

‎web/templates/pages/add_package.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,9 +237,9 @@ class="fas icon-dim icon-maroon js-section-toggle-icon"
237237
</div>';
238238
}
239239
?>
240-
<div class="u-pt18 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
241-
<span class="form-link"><?= _("Add Name Server") ?></span>
242-
</div>
240+
<button type="button" class="form-link u-mt20 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
241+
<?= _("Add Name Server") ?>
242+
</button>
243243
<?php } ?>
244244
</div>
245245
<h2 x-on:click="showMailOptions = !showMailOptions" class="section-title">

0 commit comments

Comments
 (0)