mirror of
https://github.com/unraid/webgui.git
synced 2026-02-24 19:35:32 -06:00
Merge pull request #2117 from unraid/fix/css-refactor-issues
fix: 7.1.0 css refactor tweaks for testing feedback
This commit is contained in:
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@@ -81,6 +81,7 @@
|
||||
"libvirt-php"
|
||||
],
|
||||
"search.exclude": {
|
||||
"emhttp/webGui/**/*": true,
|
||||
}
|
||||
"emhttp/webGui/**/*": true
|
||||
},
|
||||
"php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar"
|
||||
}
|
||||
|
||||
@@ -66,12 +66,7 @@ div#configLocation dt {
|
||||
--add-container-file-tree-background: var(--gray-100);
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
/* .fileTree {
|
||||
width: 240px;
|
||||
max-height: 200px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: var(--add-container-file-tree-background);
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -75,16 +75,10 @@ span.nonexist {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
background: var(--docker-settings-file-tree-background);
|
||||
/* .fileTree {
|
||||
width: 300px;
|
||||
max-height: 150px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
span.disabled {
|
||||
color: var(--docker-settings-span-disabled-color);
|
||||
}
|
||||
|
||||
@@ -66,12 +66,7 @@ div#configLocation dt {
|
||||
margin-top: -0.18rem !important;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
/* .fileTree {
|
||||
width: 240px;
|
||||
max-height: 200px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: var(--update-container-file-tree-background);
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -16,6 +16,14 @@ Markdown="false"
|
||||
* all copies or substantial portions of the Software.
|
||||
*/
|
||||
?>
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
|
||||
|
||||
<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
|
||||
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>
|
||||
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
|
||||
<script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>
|
||||
<?
|
||||
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
|
||||
require_once "$docroot/plugins/dynamix.vm.manager/include/libvirt_helpers.php";
|
||||
@@ -37,16 +45,6 @@ Markdown="false"
|
||||
}
|
||||
if (strpos($strName,"User-") === false) $user = ""; else $user = ' class="user"';
|
||||
?>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
|
||||
|
||||
<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
|
||||
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>
|
||||
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
|
||||
<script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>
|
||||
|
||||
<div class="vmtemplate">
|
||||
<a href="/VMs/AddVM?template=<?=htmlspecialchars(urlencode($strName))?>">
|
||||
<span name="<?=htmlspecialchars($strName)?>" <?=$user?>><img src="/plugins/dynamix.vm.manager/templates/images/<?=htmlspecialchars($arrTemplate['icon'])?>" title="<?=htmlspecialchars($strName)?>"></span>
|
||||
|
||||
@@ -100,9 +100,10 @@ if (strpos($strSelectedTemplate,"User-") !== false) {
|
||||
$usertemplate = 1;
|
||||
}
|
||||
?>
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.filetree.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/edit.css')?>">
|
||||
|
||||
<span class="status advancedview_panel" style="margin-top:<?=$top?>px;"><input type="checkbox" class="inlineview"><input type="checkbox" class="advancedview"></span>
|
||||
<div class="domain">
|
||||
|
||||
@@ -1,296 +0,0 @@
|
||||
:root {
|
||||
--add-vm-background: var(--black);
|
||||
}
|
||||
|
||||
.Theme--azure:root,
|
||||
.Theme--white:root {
|
||||
--add-vm-background: var(--gray-100);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#vmform table {
|
||||
margin-top: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
#vmform div.title + table {
|
||||
margin-top: 0;
|
||||
}
|
||||
#vmform table tr {
|
||||
vertical-align: top;
|
||||
line-height: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
#vmform table tr td:nth-child(1) {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#vmform table tr td:nth-child(2) {
|
||||
width: 800px;
|
||||
}
|
||||
@media (max-width: 1280px) {
|
||||
#vmform table tr td:first-child {
|
||||
width: 35%;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1281px) {
|
||||
#vmform table tr td:first-child {
|
||||
width: 30%;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1921px) {
|
||||
#vmform table tr td:first-child {
|
||||
width: 25%;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
#vmform table tr td:last-child {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#vmform textarea{
|
||||
max-width:500px;
|
||||
scrollbar-width:4px;
|
||||
}
|
||||
|
||||
#vmform textarea::-webkit-scrollbar{
|
||||
height:4px;
|
||||
width:4px;
|
||||
}
|
||||
|
||||
#vmform .multiple {
|
||||
position: relative;
|
||||
}
|
||||
#vmform .sectionbutton {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
font-size: 1.4rem;
|
||||
line-height: 17px;
|
||||
z-index: 10;
|
||||
transition-property: opacity, left;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
#vmform .sectionbutton.remove {
|
||||
top: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
#vmform .sectionbutton.add {
|
||||
bottom: 0;
|
||||
}
|
||||
#vmform .sectionbutton:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#vmform .sectiontab {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--gray-200); /* Condensed from: #dddddd */
|
||||
transition-property: background, width;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
#vmform .multiple:hover .sectionbutton {
|
||||
opacity: 0.7;
|
||||
left: 4px;
|
||||
}
|
||||
#vmform .multiple:hover .sectionbutton.remove {
|
||||
opacity: 0.6;
|
||||
}
|
||||
#vmform .multiple:hover .sectiontab {
|
||||
background-color: var(--gray-300);
|
||||
width: 8px;
|
||||
}
|
||||
#vmform table.multiple:hover {
|
||||
background-position: 0 0;
|
||||
}
|
||||
#vmform table.multiple td {
|
||||
padding: 5px 0;
|
||||
}
|
||||
span.advancedview_panel {
|
||||
display: none;
|
||||
line-height: 16px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.basic {
|
||||
display: none;
|
||||
}
|
||||
.advanced {
|
||||
/*Empty placeholder*/
|
||||
}
|
||||
.switch-button-label.off {
|
||||
color: inherit;
|
||||
}
|
||||
#template_img {
|
||||
cursor: pointer;
|
||||
}
|
||||
#template_img:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#template_img:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
.template_img_chooser_inner {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.template_img_chooser_inner img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.template_img_chooser_inner p {
|
||||
text-align: center;
|
||||
line-height: 8px;
|
||||
}
|
||||
#template_img_chooser {
|
||||
width: 560px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
display:grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
#template_img_chooser div:hover {
|
||||
background-color: var(--gray-150); /* Condensed from: #eee */
|
||||
cursor: pointer;
|
||||
}
|
||||
#form_content {
|
||||
display: none;
|
||||
}
|
||||
#vmform .four {
|
||||
overflow: hidden;
|
||||
}
|
||||
#vmform .four label {
|
||||
float: left;
|
||||
display: table-cell;
|
||||
width: 15%;
|
||||
}
|
||||
#vmform .four label:nth-child(4n + 4) {
|
||||
}
|
||||
#vmform .four label.cpu1 {
|
||||
width: 28%;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
#vmform .four label.cpu2 {
|
||||
width: 3%;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
#vmform .mac_generate {
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
color: var(--blue-700); /* Condensed from: #08c */
|
||||
font-size: 1.3rem;
|
||||
transform: translate(0px, 2px);
|
||||
}
|
||||
#vmform .disk {
|
||||
display: none;
|
||||
}
|
||||
#vmform .disk_preview {
|
||||
display: inline-block;
|
||||
color: var(--gray-300); /* Condensed from: #bbb */
|
||||
transform: translate(0px, 1px);
|
||||
}
|
||||
i.fa-plus-circle,
|
||||
i.fa-minus-circle {
|
||||
margin-left: 8px;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span.width {
|
||||
display: inline-block;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
span.column1 {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
span.column2 {
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
input#btnvCPUSelect,
|
||||
input.wlan0_info {
|
||||
font-size: 1rem;
|
||||
padding: 5px 10px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
span.space {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
span.label {
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span.ipvtap {
|
||||
margin-left: 25px;
|
||||
font-family: bitstream;
|
||||
}
|
||||
|
||||
select.narrow {
|
||||
min-width: 90px !important;
|
||||
}
|
||||
|
||||
select.second {
|
||||
margin-left: 12px;
|
||||
max-width: 90px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
div.wlan0 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input.trim {
|
||||
width: 98px;
|
||||
min-width: 98px;
|
||||
}
|
||||
|
||||
input.second {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.autostart ~ .switch-button-background {
|
||||
margin-top: 8px !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: 1px solid var(--gray-150);
|
||||
cursor: text;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror pre.CodeMirror-placeholder {
|
||||
color: var(--gray-400);
|
||||
}
|
||||
@@ -128,13 +128,7 @@ span.vmgraphics {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
background: var(--vm-machines-file-tree-background);
|
||||
/* .fileTree {
|
||||
width: 500px;
|
||||
max-height: 320px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -57,13 +57,7 @@ body {
|
||||
font-family: clear-sans;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
background: var(--vm-machines-file-tree-background);
|
||||
/* .fileTree {
|
||||
width: 300px;
|
||||
max-height: 150px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -33,7 +33,6 @@
|
||||
.vmtemplate p {
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
div.template,
|
||||
@@ -42,13 +41,7 @@ input#upload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
background: var(--filetree-background);
|
||||
/* .fileTree {
|
||||
width: 300px;
|
||||
max-height: 150px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
:root {
|
||||
--add-vm-background: var(--black);
|
||||
--add-vm-border: var(--gray-150);
|
||||
}
|
||||
|
||||
.Theme--azure:root,
|
||||
@@ -52,14 +53,14 @@ body {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#vmform textarea{
|
||||
max-width:500px;
|
||||
scrollbar-width:4px;
|
||||
#vmform textarea {
|
||||
max-width: 500px;
|
||||
scrollbar-width: 4px;
|
||||
}
|
||||
|
||||
#vmform textarea::-webkit-scrollbar{
|
||||
height:4px;
|
||||
width:4px;
|
||||
#vmform textarea::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#vmform .multiple {
|
||||
@@ -142,29 +143,39 @@ span.advancedview_panel {
|
||||
.template_img_chooser_inner {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.template_img_chooser_inner:hover {
|
||||
color: var(--orange-400);
|
||||
cursor: pointer;
|
||||
}
|
||||
.template_img_chooser_inner img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
.template_img_chooser_inner p {
|
||||
text-align: center;
|
||||
line-height: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
.template_img_parent {
|
||||
position: relative;
|
||||
}
|
||||
#template_img_chooser_outer {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--add-vm-border);
|
||||
background: var(--add-vm-background);
|
||||
z-index: 10;
|
||||
}
|
||||
#template_img_chooser {
|
||||
width: 560px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
display:grid;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
#template_img_chooser div:hover {
|
||||
background-color: var(--gray-150); /* Condensed from: #eee */
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
}
|
||||
#form_content {
|
||||
display: none;
|
||||
@@ -294,3 +305,7 @@ input.second {
|
||||
.CodeMirror pre.CodeMirror-placeholder {
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
.fileTree {
|
||||
position: relative;
|
||||
}
|
||||
@@ -558,7 +558,7 @@ function networkInfo(port, vlan) {
|
||||
</script>
|
||||
|
||||
<div class="title nocontrol shift"> </div>
|
||||
<div class="shade-<?=$display['theme']?> uplift">
|
||||
<div class="shade uplift">
|
||||
<form name="dns_settings" onchange="signalRun(this,1)">
|
||||
<div markdown="1" id="dns4" class="hide">
|
||||
_(IPv4 DNS server assignment)_:
|
||||
@@ -787,7 +787,7 @@ _(Enable VLANs)_:
|
||||
<div id="index-eth0-0"></div>
|
||||
<div id="vlan-list-eth0" class="hide">
|
||||
<?foreach ($vlan_eth0 as $i):?>
|
||||
<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade-<?=$display['theme']?> hide">
|
||||
<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade hide">
|
||||
_(Interface description)_:
|
||||
: <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($eth0,"DESCRIPTION:$i"))?>">
|
||||
<input type="button" class="form" value="_(Info)_" onclick="networkInfo('eth0',<?=_var($eth0,"VLANID:$i")?>)">
|
||||
@@ -889,7 +889,7 @@ _(IPv6 privacy extensions)_:
|
||||
</form>
|
||||
|
||||
<script markdown="1" type="text/html" id="network-template-eth0">
|
||||
<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade">
|
||||
_(Interface description)_:
|
||||
: <input type="text" name="DESCRIPTION:INDEX" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($eth0,"DESCRIPTION:INDEX"))?>">
|
||||
|
||||
|
||||
@@ -249,7 +249,7 @@ _(Enable VLANs)_:
|
||||
<div id='index-ethX-0'></div>
|
||||
<div id="vlan-list-ethX" class="hide">
|
||||
<?foreach ($vlan_ethX as $i):?>
|
||||
<div markdown="1" id="index-ethX-<?=$i?>" class="access-ethX shade-<?=$display['theme']?> hide">
|
||||
<div markdown="1" id="index-ethX-<?=$i?>" class="access-ethX shade hide">
|
||||
_(Interface description)_:
|
||||
: <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($ethX,"DESCRIPTION:$i"))?>">
|
||||
<input type="button" class="form" value="_(Info)_" onclick="networkInfo('eth0',<?=_var($ethX,"VLANID:$i")?>)">
|
||||
@@ -350,7 +350,7 @@ _(IPv6 privacy extensions)_:
|
||||
</form>
|
||||
|
||||
<script markdown="1" type="text/html" id="network-template-ethX">
|
||||
<div markdown="1" id="index-ethX-INDEX" class="access-ethX shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="index-ethX-INDEX" class="access-ethX shade">
|
||||
_(Interface description)_:
|
||||
: <input type="text" name="DESCRIPTION:INDEX" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($ethX,"DESCRIPTION:INDEX"))?>">
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ $(function(){
|
||||
<tbody id="route_list"></tbody>
|
||||
</table>
|
||||
|
||||
<div class="shade-<?=$display['theme']?>" style="margin-top:12px;padding:12px 4px;">
|
||||
<div class="shade" style="margin-top:12px;padding:12px 4px;">
|
||||
<form markdown="1" name="add_routes" method="POST" action="/webGui/include/RoutingTable.php" target="progressFrame" onsubmit="setTimeout(resetTable,500)">
|
||||
_(Enter route + gateway + metric)_:
|
||||
: <input type="text" name="route" maxlength="39" value="" class="fixed" placeholder="_(IPv4/nn or IPv6/nn route)_" required>
|
||||
|
||||
@@ -366,7 +366,7 @@ foreach ($rows as $row) echo $row;
|
||||
<input type="hidden" name="shareInclude" value="">
|
||||
<input type="hidden" name="shareExclude" value="">
|
||||
|
||||
<div markdown="1" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" class="shade">
|
||||
_(Share name)_:
|
||||
: <input type="text" id="shareName" name="shareName" maxlength="40" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars($name)?>" oninput="checkName(this.value)" title="_(Hidden share names are not allowed)_" pattern="^[^\.].*"><span id="zfs-name" class="orange-text"><i class="fa fa-warning"></i> _(Share name contains invalid characters for ZFS use)_</span>
|
||||
|
||||
@@ -417,7 +417,7 @@ _(Exclusive access)_:
|
||||
<?endif;?>
|
||||
</div>
|
||||
|
||||
<div markdown="1" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" class="shade">
|
||||
_(Primary storage (for new files and folders))_:
|
||||
: <select id="primary" name="shareCachePool" onchange="form.shareFloor.value='';updateScreen(z(4),'slow')">
|
||||
<?=mk_option(primary(), '', _('Array'), $poolsOnly ? 'disabled' : '')?>
|
||||
@@ -486,7 +486,7 @@ _(Excluded disk(s))_:
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div markdown="1" id="secondaryStorage" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="secondaryStorage" class="shade">
|
||||
_(Secondary storage)_:
|
||||
: <select id="secondary" onchange="updateScreen(z(4),'slow')">
|
||||
<?=mk_option(secondary(),'0',_('None'))?>
|
||||
@@ -545,7 +545,7 @@ _(Excluded disk(s))_:
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div markdown="1" id="moverAction" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="moverAction" class="shade">
|
||||
<div markdown="1" id="moverDirection1">
|
||||
_(Mover action)_:
|
||||
: <span class="input"><select id="direction" onchange="updateScreen(z(3),'slow')">
|
||||
|
||||
@@ -1385,7 +1385,7 @@ _(DNS servers)_:
|
||||
|
||||
<div id="peers-list-wg0" style="display:none"></div>
|
||||
<?foreach ($peer_wg0 as $i):?>
|
||||
<div markdown="1" id="index-wg0-<?=$i?>" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="index-wg0-<?=$i?>" class="shade">
|
||||
_(Peer name)_:
|
||||
: <span class="input"><input type="text" name="Name:<?=$i?>" class="wide" maxlength="99" value="<?=_var($wg0,"Name:$i")?>" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
|
||||
<input type="button" class="form" value="_(Delete Peer)_" onclick="delPeer($(document.wg0),'#index-wg0-<?=$i?>')">
|
||||
@@ -1482,7 +1482,7 @@ _(Persistent keepalive)_:
|
||||
<small style="position:absolute;left:10px;top:30px">"WireGuard" and the "WireGuard" logo are registered trademarks of Jason A. Donenfeld</small>
|
||||
|
||||
<script markdown="1" type="text/html" id="peer-template-wg0">
|
||||
<div markdown="1" id="index-wg0-INDEX" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="index-wg0-INDEX" class="shade">
|
||||
_(Peer name)_:
|
||||
: <span class="input"><input type="text" name="Name:INDEX" class="wide" maxlength="99" value="" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
|
||||
<span class="pin"><i class="fa fa-fw fa-eye eyeINDEX key-off" title="_(Show Peer Config)_"></i>
|
||||
|
||||
@@ -283,7 +283,7 @@ _(DNS servers)_:
|
||||
|
||||
<div id="peers-list-wgX" style="display:none"></div>
|
||||
<?foreach ($peer_wgX as $i):?>
|
||||
<div markdown="1" id="index-wgX-<?=$i?>" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="index-wgX-<?=$i?>" class="shade">
|
||||
_(Peer name)_:
|
||||
: <span class="input"><input type="text" name="Name:<?=$i?>" class="wide" maxlength="99" value="<?=_var($wgX,"Name:$i")?>" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
|
||||
<input type="button" class="form" value="_(Delete Peer)_" onclick="delPeer($(document.wgX),'#index-wgX-<?=$i?>')">
|
||||
@@ -378,7 +378,7 @@ _(Persistent keepalive)_:
|
||||
</form>
|
||||
|
||||
<script markdown="1" type="text/html" id="peer-template-wgX">
|
||||
<div markdown="1" id="index-wgX-INDEX" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="index-wgX-INDEX" class="shade">
|
||||
_(Peer name)_:
|
||||
: <span class="input"><input type="text" name="Name:INDEX" class="wide" maxlength="99" value="" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
|
||||
<span class="pin"><i class="fa fa-fw fa-eye eyeINDEX key-off" title="_(Show Peer Config)_"></i>
|
||||
|
||||
@@ -49,23 +49,23 @@ _(Regulatory region)_:
|
||||
</form>
|
||||
|
||||
<div id="wifi" class="hide">
|
||||
<div markdown="1" id="connected" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="connected" class="shade">
|
||||
_(Connected)_:
|
||||
: <i class="fa fa-spin fa-circle-o-notch"></i>
|
||||
|
||||
</div>
|
||||
<div markdown="1" id="my_networks" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="my_networks" class="shade">
|
||||
_(My networks)_:
|
||||
: <i class="fa fa-spin fa-circle-o-notch"></i>
|
||||
|
||||
</div>
|
||||
<div markdown="1" id="other_networks" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" id="other_networks" class="shade">
|
||||
_(Other networks)_:
|
||||
: <i class="fa fa-spin fa-circle-o-notch"></i>
|
||||
|
||||
</div>
|
||||
|
||||
<div markdown="1" class="shade-<?=$display['theme']?>">
|
||||
<div markdown="1" class="shade">
|
||||
_(Add network)_:
|
||||
: <span class="wifi"><input name="CUSTOM" type="text" class="narrow" maxlength="32" autocomplete="off" spellcheck="false" value=""></span><i class="fa fa-wifi hand grey-text" onclick="manage_wifi(encodeURIComponent($('input[name=CUSTOM]').val()),3)" title="<?=$title?>"></i>
|
||||
|
||||
|
||||
@@ -20,9 +20,20 @@ $_SERVER['REQUEST_URI'] = '';
|
||||
require_once "$docroot/webGui/include/Translations.php";
|
||||
|
||||
$var = parse_ini_file("/var/local/emhttp/var.ini");
|
||||
|
||||
/**
|
||||
* Just like DefaultPageLayout.php
|
||||
*/
|
||||
$theme = strtok($display['theme'],'-');
|
||||
$themes1 = in_array($theme,['black','white']);
|
||||
$themes2 = in_array($theme,['gray','azure']);
|
||||
$themeHtmlClass = "Theme--$theme";
|
||||
if ($themes2) {
|
||||
$themeHtmlClass .= " Theme--sidebar";
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
|
||||
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>" class="<?= $themeHtmlClass ?>">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@@ -35,11 +46,22 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-{$display['theme']}.css")?>">
|
||||
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
|
||||
|
||||
<style>
|
||||
.notice{background-image:none;color:#e68a00;font-size:6rem;text-transform:uppercase;text-align:center;padding:4rem 0}
|
||||
.sub1,.sub2{margin:6rem 0;text-align:center;font-size:3rem}
|
||||
.boot-title {
|
||||
background-image: none;
|
||||
color: var(--orange-300);
|
||||
font-size: 6rem;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
.boot-subtext {
|
||||
margin: 6rem 0;
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="<?autov('/webGui/javascript/dynamix.js')?>"></script>
|
||||
@@ -65,7 +87,7 @@ boot.on('message', function(msg) {
|
||||
default : var status = "<span class='orange'>"+_('Array '+ini['fsState'])+"</span>";
|
||||
}
|
||||
status += ini['fsProgress'] ? "<br><span class='blue'>"+_(ini['fsProgress'])+"</span>" : "<br> ";
|
||||
$('.sub1').html(status);
|
||||
$('.js-arrayStatus').html(status);
|
||||
});
|
||||
|
||||
function parseINI(msg) {
|
||||
@@ -102,19 +124,19 @@ function timer() {
|
||||
return Math.round((now.getTime()-start.getTime())/1000);
|
||||
}
|
||||
function reboot_now() {
|
||||
$('.notice').html("<?=_('Reboot')?> - <?=gethostname()?>");
|
||||
$('.js-bootTitle').html("<?=_('Reboot')?> - <?=gethostname()?>");
|
||||
boot.start();
|
||||
reboot_online();
|
||||
}
|
||||
function shutdown_now() {
|
||||
$('.notice').html("<?=_('Shutdown')?> - <?=gethostname()?>");
|
||||
$('.js-bootTitle').html("<?=_('Shutdown')?> - <?=gethostname()?>");
|
||||
boot.start();
|
||||
shutdown_online();
|
||||
}
|
||||
function reboot_online() {
|
||||
$.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
|
||||
.done(function(){
|
||||
$('.sub2').html("<?=_('System is going down')?>... "+timer());
|
||||
$('.js-powerStatus').html("<?=_('System is going down')?>... "+timer());
|
||||
setTimeout(reboot_online,500);
|
||||
})
|
||||
.fail(function(){start=new Date(); setTimeout(reboot_offline,500);});
|
||||
@@ -123,14 +145,14 @@ function reboot_offline() {
|
||||
$.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
|
||||
.done(function(){location = '/Main';})
|
||||
.fail(function(){
|
||||
$('.sub2').html("<?=_('System is rebooting')?>... "+timer());
|
||||
$('.js-powerStatus').html("<?=_('System is rebooting')?>... "+timer());
|
||||
setTimeout(reboot_offline,500);
|
||||
});
|
||||
}
|
||||
function shutdown_online() {
|
||||
$.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
|
||||
.done(function(){
|
||||
$('.sub2').html("<?=_('System is going down')?>... "+timer());
|
||||
$('.js-powerStatus').html("<?=_('System is going down')?>... "+timer());
|
||||
setTimeout(shutdown_online,500);
|
||||
})
|
||||
.fail(function(){start=new Date(); setTimeout(shutdown_offline,500);});
|
||||
@@ -138,10 +160,10 @@ function shutdown_online() {
|
||||
function shutdown_offline() {
|
||||
var time = timer();
|
||||
if (time < 30) {
|
||||
$('.sub2').html("<?=_('System is offline')?>... "+time);
|
||||
$('.js-powerStatus').html("<?=_('System is offline')?>... "+time);
|
||||
setTimeout(shutdown_offline,500);
|
||||
} else {
|
||||
$('.sub2').html("<?=_('System is powered off')?>...");
|
||||
$('.js-powerStatus').html("<?=_('System is powered off')?>...");
|
||||
setTimeout(power_on,500);
|
||||
}
|
||||
}
|
||||
@@ -177,8 +199,8 @@ case 'shutdown':
|
||||
exec('/sbin/poweroff -n');
|
||||
break;
|
||||
}
|
||||
echo '<div class="notice"></div>';
|
||||
echo '<div class="sub1">';
|
||||
echo '<div class="js-bootTitle boot-title"></div>';
|
||||
echo '<div class="js-arrayStatus boot-subtext">';
|
||||
switch (_var($var,'fsState')) {
|
||||
case 'Stopped':
|
||||
echo "<span class='red'>",_('Array Stopped'),"</span>$progress"; break;
|
||||
@@ -190,7 +212,7 @@ default:
|
||||
echo "<span class='green'>",_('Array Started'),"</span>$progress"; break;
|
||||
}
|
||||
echo '</div>';
|
||||
echo '<div class="sub2"></div>';
|
||||
echo '<div class="js-powerStatus boot-subtext"></div>';
|
||||
echo '</body>';
|
||||
}else{
|
||||
?>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#!/usr/bin/php -q
|
||||
<?PHP
|
||||
<?php
|
||||
/* Copyright 2005-2024, Lime Technology
|
||||
* Copyright 2012-2024, Bergware International.
|
||||
*
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
|
||||
require_once "$docroot/webGui/include/Helpers.php";
|
||||
extract(parse_plugin_cfg('dynamix',true));
|
||||
extract(parse_plugin_cfg('dynamix', true));
|
||||
|
||||
// add translations
|
||||
$_SERVER['REQUEST_URI'] = '';
|
||||
@@ -22,8 +22,7 @@ require_once "$docroot/webGui/include/Translations.php";
|
||||
|
||||
$var = parse_ini_file('state/var.ini');
|
||||
$unraid = parse_ini_file('/etc/unraid-version');
|
||||
$keyfile = !empty(_var($var,'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
|
||||
$width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
|
||||
$keyfile = !empty(_var($var, 'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
|
||||
$feedback = '/webGui/images/feedback_';
|
||||
|
||||
$diagn = _('Unable to generate system diagnostics');
|
||||
@@ -31,61 +30,132 @@ $sorry = _('Sorry, an error occurred');
|
||||
$again = _('Please try again later');
|
||||
?>
|
||||
<style>
|
||||
div.spinner.fixed{z-index:100000}
|
||||
div#control_panel{position:absolute;left:0;right:0;top:0;padding-top:8px;line-height:24px;white-space:nowrap}
|
||||
div.divide{text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
|
||||
div.divide label{margin-right:30px}
|
||||
div.allpanels{display:none;position:absolute;left:0;right:0;top:40px;bottom:0;overflow:auto}
|
||||
div#footer_panel{position:absolute;left:0;right:0;bottom:0;text-align:right}
|
||||
textarea.feedback{width:<?=$width?>;height:530px;margin:0;resize:none}
|
||||
@media(max-width:960px){textarea.feedback{height:330px}}
|
||||
@media(max-height:768px){textarea.feedback{height:330px}}
|
||||
input#email{float:left;padding-left:4px}
|
||||
p.note,label.note{font-size:1.1rem!important}
|
||||
span.spacer{margin:0 4px}
|
||||
img{display:inline-block;margin-bottom:30px}
|
||||
.center{text-align:center!important}
|
||||
.green-text{color:#4f8a10!important}
|
||||
.red-text{color:#f0000c!important}
|
||||
div.spinner.fixed {
|
||||
z-index: 100000;
|
||||
}
|
||||
.feedback-control-panel {
|
||||
padding-top: 8px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
||||
label {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.feedback-panel {
|
||||
display: none;
|
||||
}
|
||||
.feedback-panel-textarea {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.feedback-panel-textarea {
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 768px) {
|
||||
.feedback-panel-textarea {
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
.feedback-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.feedback-footer-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.feedback-email-input {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.note {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
.feedback-submission-img {
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.green-text {
|
||||
color: var(--green-800) !important;
|
||||
}
|
||||
.red-text {
|
||||
color: var(--red-600) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div id="control_panel" class="divide">
|
||||
<label for="opt_featurerequest"><input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked"><?=_('Product Suggestion')?></label>
|
||||
<label for="opt_bugreport"><input type="radio" name="mode" id="opt_bugreport" value="bugreport"><?=_('Bug Report')?></label>
|
||||
<label for="opt_troubleshoot"><input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot"><?=_('Troubleshoot')?></label>
|
||||
<label for="opt_comment"><input type="radio" name="mode" id="opt_comment" value="comment"><?=_('Other Comment')?></label>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="feedback-control-panel">
|
||||
<label for="opt_featurerequest">
|
||||
<input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked">
|
||||
<?=_('Product Suggestion')?>
|
||||
</label>
|
||||
<label for="opt_bugreport">
|
||||
<input type="radio" name="mode" id="opt_bugreport" value="bugreport">
|
||||
<?=_('Bug Report')?>
|
||||
</label>
|
||||
<label for="opt_troubleshoot">
|
||||
<input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot">
|
||||
<?=_('Troubleshoot')?>
|
||||
</label>
|
||||
<label for="opt_comment">
|
||||
<input type="radio" name="mode" id="opt_comment" value="comment">
|
||||
<?=_('Other Comment')?>
|
||||
</label>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="result_panel" class="allpanels"></div>
|
||||
<div id="result_panel" class="feedback-panel"></div>
|
||||
|
||||
<div id="featurerequest_panel" class="allpanels">
|
||||
<textarea id="featurerequest" class="feedback"></textarea>
|
||||
</div>
|
||||
<div id="featurerequest_panel" class="feedback-panel">
|
||||
<textarea id="featurerequest" class="feedback-panel-textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="bugreport_panel" class="allpanels">
|
||||
<textarea id="bugreport" class="feedback"></textarea>
|
||||
<label class="note" for="anonymize_bugreport"><input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1"> <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
|
||||
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
|
||||
</div>
|
||||
<div id="bugreport_panel" class="feedback-panel">
|
||||
<textarea id="bugreport" class="feedback-panel-textarea"></textarea>
|
||||
<label class="note" for="anonymize_bugreport">
|
||||
<input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1">
|
||||
<?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
|
||||
</label>
|
||||
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
|
||||
</div>
|
||||
|
||||
<div id="troubleshoot_panel" class="allpanels">
|
||||
<textarea id="troubleshoot" class="feedback"></textarea>
|
||||
<label class="note" for="anonymize_troubleshoot"><input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1"><?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
|
||||
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
|
||||
</div>
|
||||
<div id="troubleshoot_panel" class="feedback-panel">
|
||||
<textarea id="troubleshoot" class="feedback-panel-textarea"></textarea>
|
||||
<label class="note" for="anonymize_troubleshoot">
|
||||
<input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1">
|
||||
<?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
|
||||
</label>
|
||||
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
|
||||
</div>
|
||||
|
||||
<div id="comment_panel" class="allpanels">
|
||||
<textarea id="comment" class="feedback"></textarea>
|
||||
</div>
|
||||
<div id="comment_panel" class="feedback-panel">
|
||||
<textarea id="comment" class="feedback-panel-textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="footer_panel">
|
||||
<input type="email" id="email" autocomplete="off" spellcheck="false">
|
||||
<a href="https://unraid.net" target="_blank"><?=_('Website')?></a><span class="spacer blue-text">|</span>
|
||||
<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a><span class="spacer blue-text">|</span>
|
||||
<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
|
||||
</div>
|
||||
<div class="feedback-footer">
|
||||
<input class="feedback-email-input" type="email" autocomplete="off" spellcheck="false">
|
||||
<nav class="feedback-footer-nav">
|
||||
<a href="https://unraid.net" target="_blank"><?=_('Website')?></a>
|
||||
<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a>
|
||||
<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -136,7 +206,7 @@ String.prototype.md5 = function(){
|
||||
|
||||
function validInput(input) {
|
||||
var validRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
var email = $('input#email');
|
||||
var email = $('.feedback-email-input');
|
||||
return input.val().md5() == md5[input.prop('id')] || !(email.prop('required')===false || email.val().match(validRegex));
|
||||
}
|
||||
|
||||
@@ -167,13 +237,13 @@ function form_submit(url, params, tab, diagnostics) {
|
||||
}).fail(function(){
|
||||
$('div.spinner.fixed').hide();
|
||||
panel.fadeOut('fast').find('textarea').prop('disabled',false);
|
||||
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$diagn. $again"?>.</p>";
|
||||
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$diagn. $again"?>.</p>";
|
||||
$('#result_panel').html(reply).fadeIn('fast');
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.description = $(tab).val();
|
||||
params.email = $('input#email').val();
|
||||
params.email = $('.feedback-email-input').val();
|
||||
params.timestamp = "<?=time()?>";
|
||||
params.osversion = "<?=$unraid['version']?>";
|
||||
params.keyfile = "<?=$keyfile?>";
|
||||
@@ -181,18 +251,18 @@ function form_submit(url, params, tab, diagnostics) {
|
||||
$.post(url, params, function(data){
|
||||
$('div.spinner.fixed').hide();
|
||||
if (data.error) {
|
||||
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
|
||||
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
|
||||
$('#result_panel').html(reply).fadeIn('fast');
|
||||
} else {
|
||||
var name = tab.substr(1).toLowerCase();
|
||||
var reply = "<h2 class='center green-text'><?=_('Thank You')?></h2><p class='center'><img src='<?=$feedback?>"+name+".png'><br>"+(data.message||'')+"</p>";
|
||||
var reply = "<h2 class='center green-text'><?=_('Thank You')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>"+name+".png'><br>"+(data.message||'')+"</p>";
|
||||
$('#result_panel').html(reply).fadeIn('fast');
|
||||
}
|
||||
}).fail(function(jqXHR, textStatus, errorThrown){
|
||||
if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
|
||||
errorThrown = jqXHR.responseJSON.error;
|
||||
}
|
||||
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
|
||||
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
|
||||
$('#result_panel').html(reply).fadeIn('fast');
|
||||
}).always(function(){
|
||||
$('#spinner_image').fadeOut('fast');
|
||||
@@ -209,9 +279,9 @@ $(function(){
|
||||
var panel = tab+'_panel';
|
||||
var enter = ['#troubleshoot'].includes(tab);
|
||||
var email = "<?=_('Contact Email Address')?> ("+"<?=_('required')?>"+")";
|
||||
$('input#email').prop('placeholder',email).prop('required','true');
|
||||
$('.feedback-email-input').prop('placeholder',email).prop('required','true');
|
||||
$('#submit_button').prop('disabled',validInput($(tab)));
|
||||
$('.allpanels').not(panel).fadeOut('fast');
|
||||
$('.feedback-panel').not(panel).fadeOut('fast');
|
||||
$(panel).fadeIn('fast');
|
||||
});
|
||||
|
||||
@@ -219,7 +289,7 @@ $(function(){
|
||||
$('#submit_button').prop('disabled',validInput($(this)));
|
||||
});
|
||||
|
||||
$('input#email').on('input change',function(){
|
||||
$('.feedback-email-input').on('input change',function(){
|
||||
var tab = '#'+$('input[name=mode]:checked').val();
|
||||
$('#submit_button').prop('disabled',validInput($(tab)));
|
||||
});
|
||||
|
||||
@@ -200,16 +200,10 @@ input#dfm_target {
|
||||
color: var(--input-dfm-target-text-color);
|
||||
width: 500px;
|
||||
}
|
||||
input#dfm_target + .fileTree {
|
||||
background: var(--input-dfm-target-filetree-bg-color);
|
||||
/* .fileTree {
|
||||
width: 500px;
|
||||
max-height: 320px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
i.dfm_filter {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,4 @@
|
||||
:root {
|
||||
/* Theme-specific shades */
|
||||
--eth0-shade-azure: var(--theme-azure--gray-150);
|
||||
--eth0-shade-gray: var(--theme-gray--black-alt);
|
||||
--eth0-shade-white: var(--gray-150);
|
||||
--eth0-shade-black: var(--gray-800);
|
||||
|
||||
/* Input styles - default values (for azure/gray themes) */
|
||||
--eth0-narrow-input-width: 188px;
|
||||
--eth0-narrow-input-padding: 5px 6px;
|
||||
@@ -47,25 +41,6 @@ input.form {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Theme-specific background shades - consolidated margin/padding */
|
||||
div[class^="shade-"] {
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
|
||||
div.shade-white {
|
||||
background-color: var(--eth0-shade-white);
|
||||
}
|
||||
div.shade-black {
|
||||
background-color: var(--eth0-shade-black);
|
||||
}
|
||||
div.shade-azure {
|
||||
background-color: var(--eth0-shade-azure);
|
||||
}
|
||||
div.shade-gray {
|
||||
background-color: var(--eth0-shade-gray);
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
select.slim {
|
||||
min-width: 47px;
|
||||
|
||||
@@ -1,30 +1,3 @@
|
||||
:root {
|
||||
--share-edit-shade-azure: #edeaef;
|
||||
--share-edit-shade-gray: #121510;
|
||||
--share-edit-shade-white: var(--gray-150);
|
||||
--share-edit-shade-black: var(--gray-800);
|
||||
}
|
||||
|
||||
div.shade-white {
|
||||
background-color: var(--share-edit-shade-white); /* Condensed from: #ededed */
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.shade-black {
|
||||
background-color: var(--share-edit-shade-black);
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.shade-azure {
|
||||
background-color: var(--share-edit-shade-azure);
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.shade-gray {
|
||||
background-color: var(--share-edit-shade-gray);
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
#s1,
|
||||
#s2,
|
||||
#s3,
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
:root {
|
||||
--wg0-span-hshift-margin-right: -7px;
|
||||
--wg0-span-label-margin-left: -12px;
|
||||
|
||||
--wg0-shade-azure: #edeaef;
|
||||
--wg0-shade-gray: #121510;
|
||||
--wg0-shade-white: var(--gray-150);
|
||||
--wg0-shade-black: var(--gray-800);
|
||||
}
|
||||
|
||||
.Theme--sidebar:root {
|
||||
@@ -67,27 +62,6 @@ span.label {
|
||||
letter-spacing: 1px;
|
||||
margin-left: var(--wg0-span-label-margin-left);
|
||||
}
|
||||
|
||||
div.shade-white {
|
||||
background-color: var(--wg0-shade-white); /* Condensed from: #ededed */
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.shade-black {
|
||||
background-color: var(--wg0-shade-black);
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.shade-azure {
|
||||
background-color: var(--wg0-shade-azure);
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.shade-gray {
|
||||
background-color: var(--wg0-shade-gray);
|
||||
margin-top: 10px;
|
||||
padding: 8px 0 3px 0;
|
||||
}
|
||||
div.title {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
@@ -1260,9 +1260,6 @@ div .unraid_mark_8 {
|
||||
div.spinner .unraid_mark_7 {
|
||||
animation: mark_7 1.5s ease infinite;
|
||||
}
|
||||
div.domain {
|
||||
margin-top: -20px;
|
||||
}
|
||||
@keyframes mark_2 {
|
||||
50% {
|
||||
transform: translateY(-40px);
|
||||
@@ -1510,6 +1507,12 @@ span#wlan0 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shade {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem 0;
|
||||
background-color: var(--shade-bg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Using CSS Nesting, to narrow down the scope of the styles to the .Theme--sidebar class.
|
||||
* This allows us to have default-azure & default-gray set css variables
|
||||
@@ -2160,14 +2163,14 @@ span#wlan0 {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
div.vmtemplate:hover {
|
||||
background-color: var(--opac-background-color);
|
||||
}
|
||||
div.vmtemplate {
|
||||
height: 12rem;
|
||||
width: 12rem;
|
||||
border: 1px solid var(--table-alt-border-color);
|
||||
}
|
||||
div.vmtemplate:hover {
|
||||
background-color: var(--opac-background-color);
|
||||
}
|
||||
div.vmtemplate img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
/*
|
||||
* Naming convention inspired by Tailwind CSS
|
||||
* @see https://tailwindcss.com/docs/customizing-colors
|
||||
*/
|
||||
:root {
|
||||
--font-sans: clear-sans, sans-serif;
|
||||
--font-bitstream: bitstream;
|
||||
@@ -36,8 +40,8 @@
|
||||
--orange-200: #ff9900;
|
||||
--orange-300: #e68a00;
|
||||
--orange-400: #ce7c10;
|
||||
--orange-500: #ff8c2f;
|
||||
--orange-800: #f15a2c;
|
||||
--orange-500: #ff8c2f; /* Unraid Brand Orange */
|
||||
--orange-800: #f15a2c; /* Unraid Brand Orange Dark */
|
||||
--orange-900: #d63301;
|
||||
|
||||
--red-100: #ffddd1;
|
||||
@@ -45,7 +49,7 @@
|
||||
--red-500: #ff3300;
|
||||
--red-600: #f0000c; /* Condensed from: #ff0000 red */
|
||||
--red-700: #de1100;
|
||||
--red-800: #e22828; /* Condensed from: #e80000 #ef3d47 */
|
||||
--red-800: #e22828; /* Unraid Brand Red, Condensed from: #e80000 #ef3d47 */
|
||||
--red-900: #941c00;
|
||||
|
||||
--green-100: #dff2bf;
|
||||
|
||||
@@ -119,26 +119,6 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.jGrowl-notification.alert {
|
||||
color: var(--dynamix-jgrowl-alert-text-color);
|
||||
background-color: var(--dynamix-jgrowl-alert-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-alert-border-color);
|
||||
}
|
||||
.jGrowl-notification.warning {
|
||||
color: var(--dynamix-jgrowl-warning-text-color);
|
||||
background-color: var(--dynamix-jgrowl-warning-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-warning-border-color);
|
||||
}
|
||||
.jGrowl-notification.normal {
|
||||
color: var(--dynamix-jgrowl-normal-text-color);
|
||||
background-color: var(--dynamix-jgrowl-normal-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-normal-border-color);
|
||||
}
|
||||
.jGrowl-notification.default {
|
||||
color: var(--dynamix-jgrowl-text-color);
|
||||
background-color: var(--dynamix-jgrowl-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-border-color);
|
||||
}
|
||||
.jGrowl-notification {
|
||||
opacity: 0.96;
|
||||
min-height: 1.2rem;
|
||||
@@ -147,7 +127,34 @@
|
||||
margin: 5px 0;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
|
||||
|
||||
&.alert {
|
||||
color: var(--dynamix-jgrowl-alert-text-color);
|
||||
background-color: var(--dynamix-jgrowl-alert-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-alert-border-color);
|
||||
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--dynamix-jgrowl-warning-text-color);
|
||||
background-color: var(--dynamix-jgrowl-warning-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-warning-border-color);
|
||||
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
|
||||
}
|
||||
|
||||
&.normal {
|
||||
color: var(--dynamix-jgrowl-normal-text-color);
|
||||
background-color: var(--dynamix-jgrowl-normal-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-normal-border-color);
|
||||
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
|
||||
}
|
||||
|
||||
&.default {
|
||||
color: var(--dynamix-jgrowl-text-color);
|
||||
background-color: var(--dynamix-jgrowl-bg-color);
|
||||
border: 1px solid var(--dynamix-jgrowl-border-color);
|
||||
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
|
||||
}
|
||||
}
|
||||
.jGrowl-notification .jGrowl-header {
|
||||
font-weight: bold;
|
||||
@@ -1450,6 +1457,13 @@ div.icon-zip {
|
||||
border-left: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
|
||||
}
|
||||
.fileTree {
|
||||
display: none;
|
||||
width: 300px;
|
||||
max-height: 300px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--dynamix-filetree-bg-color);
|
||||
}
|
||||
#guiSearchBox:placeholder-shown {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
--background-color: var(--gray-150); /* Originally #e4e2e4 */
|
||||
--alt-background-color: var(--gray-700); /* Originally #383a34 */
|
||||
--opac-background-color: var(--gray-895);
|
||||
--opac-background-color: var(--white-opacity-80);
|
||||
--mild-background-color: var(--theme-azure--gray-150);
|
||||
--usage-bar-background-color: var(--theme-azure--cyan-400);
|
||||
--usage-disk-background-color: var(--theme-azure--gray-150);
|
||||
@@ -85,6 +85,8 @@
|
||||
|
||||
--input-bg-color: var(--mild-background-color);
|
||||
--focus-input-bg-color: var(--theme-azure--gray-150);
|
||||
|
||||
--shade-bg-color: var(--theme-azure--gray-150);
|
||||
/* /End vars used in default-base */
|
||||
|
||||
/* Set vars for default-dynamix */
|
||||
|
||||
@@ -70,7 +70,10 @@
|
||||
|
||||
--input-bg-color: transparent;
|
||||
--focus-input-bg-color: var(--mild-background-color);
|
||||
|
||||
--shade-bg-color: var(--gray-800);
|
||||
/* /End vars used in default-base */
|
||||
|
||||
/* dynamix CSS var values set in base-dynamix.css */
|
||||
/* dynamix CSS var values set in default-dynamix.css */
|
||||
--dynamix-filetree-bg-color: var(--gray-900);
|
||||
}
|
||||
|
||||
@@ -81,9 +81,13 @@
|
||||
--input-bg-color: var(--theme-gray--black-alt);
|
||||
--focus-input-border-color: var(--blue-700);
|
||||
--focus-input-background-color: var(--mild-background-color);
|
||||
|
||||
--shade-bg-color: var(--theme-gray--black-alt);
|
||||
/* /End vars used in default-base */
|
||||
|
||||
/* Set vars for default-dynamix */
|
||||
--dynamix-filetree-bg-color: var(--gray-900);
|
||||
|
||||
--dynamix-ui-dropdownchecklist-color: var(--theme-gray--cyan-300);
|
||||
--dynamix-ui-dropdownchecklist-color-alt1: var(--gray-900);
|
||||
--dynamix-ui-dropdownchecklist-dropcontainer-border-color: var(--blue-700);
|
||||
|
||||
@@ -71,6 +71,8 @@
|
||||
|
||||
--input-bg-color: transparent;
|
||||
--focus-input-bg-color: var(--gray-150);
|
||||
|
||||
--shade-bg-color: var(--gray-150);
|
||||
/* /End vars used in default-base */
|
||||
|
||||
/* Set vars for default-dynamix */
|
||||
|
||||
Reference in New Issue
Block a user