Bumped to Bootstrap 5
This commit is contained in:
parent
f61789ffb8
commit
633cb5b955
|
|
@ -1,471 +0,0 @@
|
|||
/*!
|
||||
* Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
|
||||
*
|
||||
* Copyright 2012 Stefan Petre
|
||||
* Improvements by Andrew Rowls
|
||||
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
|
||||
*/
|
||||
.datepicker {
|
||||
padding: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
direction: ltr;
|
||||
}
|
||||
.datepicker-inline {
|
||||
width: 220px;
|
||||
}
|
||||
.datepicker.datepicker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.datepicker.datepicker-rtl table tr td span {
|
||||
float: right;
|
||||
}
|
||||
.datepicker-dropdown {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.datepicker-dropdown:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #999;
|
||||
border-top: 0;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
}
|
||||
.datepicker-dropdown:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #fff;
|
||||
border-top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-left:before {
|
||||
left: 6px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-left:after {
|
||||
left: 7px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-right:before {
|
||||
right: 6px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-right:after {
|
||||
right: 7px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-bottom:before {
|
||||
top: -7px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-bottom:after {
|
||||
top: -6px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-top:before {
|
||||
bottom: -7px;
|
||||
border-bottom: 0;
|
||||
border-top: 7px solid #999;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-top:after {
|
||||
bottom: -6px;
|
||||
border-bottom: 0;
|
||||
border-top: 6px solid #fff;
|
||||
}
|
||||
.datepicker table {
|
||||
margin: 0;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.datepicker td,
|
||||
.datepicker th {
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
.table-striped .datepicker table tr td,
|
||||
.table-striped .datepicker table tr th {
|
||||
background-color: transparent;
|
||||
}
|
||||
.datepicker table tr td.day:hover,
|
||||
.datepicker table tr td.day.focused {
|
||||
background: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
.datepicker table tr td.old,
|
||||
.datepicker table tr td.new {
|
||||
color: #999;
|
||||
}
|
||||
.datepicker table tr td.disabled,
|
||||
.datepicker table tr td.disabled:hover {
|
||||
background: none;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
.datepicker table tr td.highlighted {
|
||||
background: #d9edf7;
|
||||
border-radius: 0;
|
||||
}
|
||||
.datepicker table tr td.today,
|
||||
.datepicker table tr td.today:hover,
|
||||
.datepicker table tr td.today.disabled,
|
||||
.datepicker table tr td.today.disabled:hover {
|
||||
background-color: #fde19a;
|
||||
background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
|
||||
background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
|
||||
background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
|
||||
background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
|
||||
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
|
||||
border-color: #fdf59a #fdf59a #fbed50;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
color: #000;
|
||||
}
|
||||
.datepicker table tr td.today:hover,
|
||||
.datepicker table tr td.today:hover:hover,
|
||||
.datepicker table tr td.today.disabled:hover,
|
||||
.datepicker table tr td.today.disabled:hover:hover,
|
||||
.datepicker table tr td.today:active,
|
||||
.datepicker table tr td.today:hover:active,
|
||||
.datepicker table tr td.today.disabled:active,
|
||||
.datepicker table tr td.today.disabled:hover:active,
|
||||
.datepicker table tr td.today.active,
|
||||
.datepicker table tr td.today:hover.active,
|
||||
.datepicker table tr td.today.disabled.active,
|
||||
.datepicker table tr td.today.disabled:hover.active,
|
||||
.datepicker table tr td.today.disabled,
|
||||
.datepicker table tr td.today:hover.disabled,
|
||||
.datepicker table tr td.today.disabled.disabled,
|
||||
.datepicker table tr td.today.disabled:hover.disabled,
|
||||
.datepicker table tr td.today[disabled],
|
||||
.datepicker table tr td.today:hover[disabled],
|
||||
.datepicker table tr td.today.disabled[disabled],
|
||||
.datepicker table tr td.today.disabled:hover[disabled] {
|
||||
background-color: #fdf59a;
|
||||
}
|
||||
.datepicker table tr td.today:active,
|
||||
.datepicker table tr td.today:hover:active,
|
||||
.datepicker table tr td.today.disabled:active,
|
||||
.datepicker table tr td.today.disabled:hover:active,
|
||||
.datepicker table tr td.today.active,
|
||||
.datepicker table tr td.today:hover.active,
|
||||
.datepicker table tr td.today.disabled.active,
|
||||
.datepicker table tr td.today.disabled:hover.active {
|
||||
background-color: #fbf069 \9;
|
||||
}
|
||||
.datepicker table tr td.today:hover:hover {
|
||||
color: #000;
|
||||
}
|
||||
.datepicker table tr td.today.active:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.datepicker table tr td.range,
|
||||
.datepicker table tr td.range:hover,
|
||||
.datepicker table tr td.range.disabled,
|
||||
.datepicker table tr td.range.disabled:hover {
|
||||
background: #eee;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.datepicker table tr td.range.today,
|
||||
.datepicker table tr td.range.today:hover,
|
||||
.datepicker table tr td.range.today.disabled,
|
||||
.datepicker table tr td.range.today.disabled:hover {
|
||||
background-color: #f3d17a;
|
||||
background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
|
||||
background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
|
||||
background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
|
||||
background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
|
||||
background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
|
||||
border-color: #f3e97a #f3e97a #edde34;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.datepicker table tr td.range.today:hover,
|
||||
.datepicker table tr td.range.today:hover:hover,
|
||||
.datepicker table tr td.range.today.disabled:hover,
|
||||
.datepicker table tr td.range.today.disabled:hover:hover,
|
||||
.datepicker table tr td.range.today:active,
|
||||
.datepicker table tr td.range.today:hover:active,
|
||||
.datepicker table tr td.range.today.disabled:active,
|
||||
.datepicker table tr td.range.today.disabled:hover:active,
|
||||
.datepicker table tr td.range.today.active,
|
||||
.datepicker table tr td.range.today:hover.active,
|
||||
.datepicker table tr td.range.today.disabled.active,
|
||||
.datepicker table tr td.range.today.disabled:hover.active,
|
||||
.datepicker table tr td.range.today.disabled,
|
||||
.datepicker table tr td.range.today:hover.disabled,
|
||||
.datepicker table tr td.range.today.disabled.disabled,
|
||||
.datepicker table tr td.range.today.disabled:hover.disabled,
|
||||
.datepicker table tr td.range.today[disabled],
|
||||
.datepicker table tr td.range.today:hover[disabled],
|
||||
.datepicker table tr td.range.today.disabled[disabled],
|
||||
.datepicker table tr td.range.today.disabled:hover[disabled] {
|
||||
background-color: #f3e97a;
|
||||
}
|
||||
.datepicker table tr td.range.today:active,
|
||||
.datepicker table tr td.range.today:hover:active,
|
||||
.datepicker table tr td.range.today.disabled:active,
|
||||
.datepicker table tr td.range.today.disabled:hover:active,
|
||||
.datepicker table tr td.range.today.active,
|
||||
.datepicker table tr td.range.today:hover.active,
|
||||
.datepicker table tr td.range.today.disabled.active,
|
||||
.datepicker table tr td.range.today.disabled:hover.active {
|
||||
background-color: #efe24b \9;
|
||||
}
|
||||
.datepicker table tr td.selected,
|
||||
.datepicker table tr td.selected:hover,
|
||||
.datepicker table tr td.selected.disabled,
|
||||
.datepicker table tr td.selected.disabled:hover {
|
||||
background-color: #9e9e9e;
|
||||
background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
|
||||
background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
|
||||
background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
|
||||
background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
|
||||
background-image: linear-gradient(to bottom, #b3b3b3, #808080);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
|
||||
border-color: #808080 #808080 #595959;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.datepicker table tr td.selected:hover,
|
||||
.datepicker table tr td.selected:hover:hover,
|
||||
.datepicker table tr td.selected.disabled:hover,
|
||||
.datepicker table tr td.selected.disabled:hover:hover,
|
||||
.datepicker table tr td.selected:active,
|
||||
.datepicker table tr td.selected:hover:active,
|
||||
.datepicker table tr td.selected.disabled:active,
|
||||
.datepicker table tr td.selected.disabled:hover:active,
|
||||
.datepicker table tr td.selected.active,
|
||||
.datepicker table tr td.selected:hover.active,
|
||||
.datepicker table tr td.selected.disabled.active,
|
||||
.datepicker table tr td.selected.disabled:hover.active,
|
||||
.datepicker table tr td.selected.disabled,
|
||||
.datepicker table tr td.selected:hover.disabled,
|
||||
.datepicker table tr td.selected.disabled.disabled,
|
||||
.datepicker table tr td.selected.disabled:hover.disabled,
|
||||
.datepicker table tr td.selected[disabled],
|
||||
.datepicker table tr td.selected:hover[disabled],
|
||||
.datepicker table tr td.selected.disabled[disabled],
|
||||
.datepicker table tr td.selected.disabled:hover[disabled] {
|
||||
background-color: #808080;
|
||||
}
|
||||
.datepicker table tr td.selected:active,
|
||||
.datepicker table tr td.selected:hover:active,
|
||||
.datepicker table tr td.selected.disabled:active,
|
||||
.datepicker table tr td.selected.disabled:hover:active,
|
||||
.datepicker table tr td.selected.active,
|
||||
.datepicker table tr td.selected:hover.active,
|
||||
.datepicker table tr td.selected.disabled.active,
|
||||
.datepicker table tr td.selected.disabled:hover.active {
|
||||
background-color: #666666 \9;
|
||||
}
|
||||
.datepicker table tr td.active,
|
||||
.datepicker table tr td.active:hover,
|
||||
.datepicker table tr td.active.disabled,
|
||||
.datepicker table tr td.active.disabled:hover {
|
||||
background-color: #006dcc;
|
||||
background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
|
||||
background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
|
||||
border-color: #0044cc #0044cc #002a80;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.datepicker table tr td.active:hover,
|
||||
.datepicker table tr td.active:hover:hover,
|
||||
.datepicker table tr td.active.disabled:hover,
|
||||
.datepicker table tr td.active.disabled:hover:hover,
|
||||
.datepicker table tr td.active:active,
|
||||
.datepicker table tr td.active:hover:active,
|
||||
.datepicker table tr td.active.disabled:active,
|
||||
.datepicker table tr td.active.disabled:hover:active,
|
||||
.datepicker table tr td.active.active,
|
||||
.datepicker table tr td.active:hover.active,
|
||||
.datepicker table tr td.active.disabled.active,
|
||||
.datepicker table tr td.active.disabled:hover.active,
|
||||
.datepicker table tr td.active.disabled,
|
||||
.datepicker table tr td.active:hover.disabled,
|
||||
.datepicker table tr td.active.disabled.disabled,
|
||||
.datepicker table tr td.active.disabled:hover.disabled,
|
||||
.datepicker table tr td.active[disabled],
|
||||
.datepicker table tr td.active:hover[disabled],
|
||||
.datepicker table tr td.active.disabled[disabled],
|
||||
.datepicker table tr td.active.disabled:hover[disabled] {
|
||||
background-color: #0044cc;
|
||||
}
|
||||
.datepicker table tr td.active:active,
|
||||
.datepicker table tr td.active:hover:active,
|
||||
.datepicker table tr td.active.disabled:active,
|
||||
.datepicker table tr td.active.disabled:hover:active,
|
||||
.datepicker table tr td.active.active,
|
||||
.datepicker table tr td.active:hover.active,
|
||||
.datepicker table tr td.active.disabled.active,
|
||||
.datepicker table tr td.active.disabled:hover.active {
|
||||
background-color: #003399 \9;
|
||||
}
|
||||
.datepicker table tr td span {
|
||||
display: block;
|
||||
width: 23%;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
float: left;
|
||||
margin: 1%;
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.datepicker table tr td span:hover,
|
||||
.datepicker table tr td span.focused {
|
||||
background: #eee;
|
||||
}
|
||||
.datepicker table tr td span.disabled,
|
||||
.datepicker table tr td span.disabled:hover {
|
||||
background: none;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
.datepicker table tr td span.active,
|
||||
.datepicker table tr td span.active:hover,
|
||||
.datepicker table tr td span.active.disabled,
|
||||
.datepicker table tr td span.active.disabled:hover {
|
||||
background-color: #006dcc;
|
||||
background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
|
||||
background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-image: linear-gradient(to bottom, #08c, #0044cc);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
|
||||
border-color: #0044cc #0044cc #002a80;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.datepicker table tr td span.active:hover,
|
||||
.datepicker table tr td span.active:hover:hover,
|
||||
.datepicker table tr td span.active.disabled:hover,
|
||||
.datepicker table tr td span.active.disabled:hover:hover,
|
||||
.datepicker table tr td span.active:active,
|
||||
.datepicker table tr td span.active:hover:active,
|
||||
.datepicker table tr td span.active.disabled:active,
|
||||
.datepicker table tr td span.active.disabled:hover:active,
|
||||
.datepicker table tr td span.active.active,
|
||||
.datepicker table tr td span.active:hover.active,
|
||||
.datepicker table tr td span.active.disabled.active,
|
||||
.datepicker table tr td span.active.disabled:hover.active,
|
||||
.datepicker table tr td span.active.disabled,
|
||||
.datepicker table tr td span.active:hover.disabled,
|
||||
.datepicker table tr td span.active.disabled.disabled,
|
||||
.datepicker table tr td span.active.disabled:hover.disabled,
|
||||
.datepicker table tr td span.active[disabled],
|
||||
.datepicker table tr td span.active:hover[disabled],
|
||||
.datepicker table tr td span.active.disabled[disabled],
|
||||
.datepicker table tr td span.active.disabled:hover[disabled] {
|
||||
background-color: #0044cc;
|
||||
}
|
||||
.datepicker table tr td span.active:active,
|
||||
.datepicker table tr td span.active:hover:active,
|
||||
.datepicker table tr td span.active.disabled:active,
|
||||
.datepicker table tr td span.active.disabled:hover:active,
|
||||
.datepicker table tr td span.active.active,
|
||||
.datepicker table tr td span.active:hover.active,
|
||||
.datepicker table tr td span.active.disabled.active,
|
||||
.datepicker table tr td span.active.disabled:hover.active {
|
||||
background-color: #003399 \9;
|
||||
}
|
||||
.datepicker table tr td span.old,
|
||||
.datepicker table tr td span.new {
|
||||
color: #999;
|
||||
}
|
||||
.datepicker .datepicker-switch {
|
||||
width: 145px;
|
||||
}
|
||||
.datepicker .datepicker-switch,
|
||||
.datepicker .prev,
|
||||
.datepicker .next,
|
||||
.datepicker tfoot tr th {
|
||||
cursor: pointer;
|
||||
}
|
||||
.datepicker .datepicker-switch:hover,
|
||||
.datepicker .prev:hover,
|
||||
.datepicker .next:hover,
|
||||
.datepicker tfoot tr th:hover {
|
||||
background: #eee;
|
||||
}
|
||||
.datepicker .cw {
|
||||
font-size: 10px;
|
||||
width: 12px;
|
||||
padding: 0 2px 0 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.input-append.date .add-on,
|
||||
.input-prepend.date .add-on {
|
||||
cursor: pointer;
|
||||
}
|
||||
.input-append.date .add-on i,
|
||||
.input-prepend.date .add-on i {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.input-daterange input {
|
||||
text-align: center;
|
||||
}
|
||||
.input-daterange input:first-child {
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
-moz-border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.input-daterange input:last-child {
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.input-daterange .add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 16px;
|
||||
height: 18px;
|
||||
padding: 4px 5px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
vertical-align: middle;
|
||||
background-color: #eee;
|
||||
border: 1px solid #ccc;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-datepicker.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -50,12 +50,16 @@
|
|||
|
||||
|
||||
|
||||
.card-title-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.volume-control-positioner {
|
||||
position: absolute;
|
||||
bottom: 2em;
|
||||
right: 50%;
|
||||
left: 50%;
|
||||
bottom: 3.5em;
|
||||
right: 2.5%;
|
||||
}
|
||||
|
||||
.icon-style {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ document.body.onload = (eve) => {
|
|||
setTimeout(function () {
|
||||
getFavesAjax();
|
||||
reloadDirectory();
|
||||
}, 200);
|
||||
}, 400);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -76,16 +76,16 @@ class FilesList extends React.Component {
|
|||
final.push(
|
||||
<li class="col-sm-12 col-md-6 col-lg-4" title={name}>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header card-title-text">
|
||||
{card_header}
|
||||
</div>
|
||||
<div class="card-body text-center noselect" title={name} hash={hash} ftype={filetype} onDoubleClick={this.openThis}>
|
||||
{card_body}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href={"api/file-manager-action/files/" + hash} download class="btn btn-secondary btn-sm float-left">Download</a>
|
||||
<input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-secondary btn-sm float-left" type="button" value="Open Locally"/>
|
||||
<input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/>
|
||||
<a href={"api/file-manager-action/files/" + hash} download class="btn btn-dark btn-sm float-start">Download</a>
|
||||
<input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-dark btn-sm float-start" type="button" value="Open Locally"/>
|
||||
<input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-dark btn-sm float-end" title={name} type="button" value="Open"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,253 +1,207 @@
|
|||
const ipRegexWithPort = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]\:?)$/;
|
||||
const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
const reloadDirectory = () => {
|
||||
const target = document.getElementById('refresh-btn');
|
||||
const hash = target.getAttribute("hash");
|
||||
listFilesAjax(hash);
|
||||
}
|
||||
|
||||
const goUpADirectory = () => {
|
||||
const target = document.getElementById('back-btn')
|
||||
const hash = target.getAttribute("hash");
|
||||
listFilesAjax(hash);
|
||||
}
|
||||
|
||||
const scrollFilesToTop = () => {
|
||||
const target = document.getElementById('files');
|
||||
target.scrollIntoView();
|
||||
}
|
||||
|
||||
|
||||
const closeFile = () => {
|
||||
const video = document.getElementById("video");
|
||||
let title = document.getElementById("selectedFile");
|
||||
|
||||
// Background Functions
|
||||
const getBackgrounds = async () => {
|
||||
const ulElm = document.getElementById('backgroundSelection');
|
||||
const data = await fetchData( formatURL("backgrounds") );
|
||||
document.getElementById("image-viewer").style.display = "none";
|
||||
document.getElementById("text-viewer").style.display = "none";
|
||||
document.getElementById("pdf-viewer").style.display = "none";
|
||||
document.getElementById("video-controls").style.display = "none";
|
||||
|
||||
title.innerText = "";
|
||||
video.style.display = "none";
|
||||
video.style.cursor = '';
|
||||
video.pause();
|
||||
}
|
||||
|
||||
const showFile = async (title, hash, extension, type) => {
|
||||
document.getElementById("image-viewer").style.display = "none";
|
||||
document.getElementById("text-viewer").style.display = "none";
|
||||
document.getElementById("pdf-viewer").style.display = "none";
|
||||
document.getElementById("video").style.display = "none";
|
||||
document.getElementById("video-controls").style.display = "none";
|
||||
|
||||
let titleElm = document.getElementById("selectedFile");
|
||||
titleElm.innerText = title;
|
||||
|
||||
if (type === "video") {
|
||||
setupVideo(hash, extension);
|
||||
}
|
||||
if (type === "file") {
|
||||
setupFile(hash, extension);
|
||||
}
|
||||
}
|
||||
|
||||
const setupVideo = async (hash, extension) => {
|
||||
let video = document.getElementById("video");
|
||||
let controls = document.getElementById("video-controls");
|
||||
video.poster = "static/imgs/icons/loading.gif";
|
||||
video.style.display = "";
|
||||
video.src = "#"
|
||||
video_path = "api/file-manager-action/files/" + hash;
|
||||
let modal = new bootstrap.Modal(document.getElementById('file-view-modal'), { keyboard: false });
|
||||
|
||||
|
||||
try {
|
||||
if ((/\.(avi|mkv|wmv|flv|f4v|mov|m4v|mpg|mpeg|mp4|webm|mp3|flac|ogg)$/i).test(extension)) {
|
||||
if ((/\.(avi|mkv|wmv|flv|f4v)$/i).test(extension)) {
|
||||
data = await fetchData( "api/file-manager-action/remux/" + hash );
|
||||
if ( data.hasOwnProperty('path') ) {
|
||||
video_path = data.path;
|
||||
} else {
|
||||
displayMessage(data.message.text, data.message.type, 3);
|
||||
return ;
|
||||
}
|
||||
} else if ((/\.(flv|mov|m4v|mpg|mpeg)$/i).test(extension)) {
|
||||
modal.hide();
|
||||
openWithLocalProgram(hash, extension);
|
||||
return ;
|
||||
}
|
||||
}
|
||||
|
||||
modal.show();
|
||||
controls.style.display = "none";
|
||||
video.src = video_path;
|
||||
} catch (e) {
|
||||
video.style.display = "none";
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
const setupFile = async (hash, extension) => {
|
||||
let viewer = null;
|
||||
let type = "local";
|
||||
let modal = new bootstrap.Modal(document.getElementById('file-view-modal'), { keyboard: false });
|
||||
|
||||
if ((/\.(png|jpg|jpeg|gif|ico)$/i).test(extension)) {
|
||||
type = "image";
|
||||
viewer = document.getElementById("image-viewer");
|
||||
}
|
||||
if ((/\.(txt|text|sh|cfg|conf)$/i).test(extension)) {
|
||||
type = "text";
|
||||
viewer = document.getElementById("text-viewer");
|
||||
}
|
||||
if ((/\.(mp3|ogg|flac)$/i).test(extension)) {
|
||||
type = "music";
|
||||
viewer = document.getElementById("video");
|
||||
}
|
||||
if ((/\.(pdf)$/i).test(extension)) {
|
||||
type = "pdf";
|
||||
viewer = document.getElementById("pdf-viewer");
|
||||
}
|
||||
|
||||
if (type !== "text" && type !== "local" ) {
|
||||
modal.show();
|
||||
let response = await fetch("api/file-manager-action/files/" + hash);
|
||||
let src_obj = URL.createObjectURL(await response.blob()); // IE10+
|
||||
viewer.src = src_obj;
|
||||
}
|
||||
|
||||
if (type == "text") {
|
||||
let response = await fetch("api/file-manager-action/files/" + hash);
|
||||
let textData = await response.text(); // IE10+
|
||||
viewer.innerText = textData;
|
||||
}
|
||||
|
||||
if (type !== "local") {
|
||||
viewer.style.display = "";
|
||||
modal.show();
|
||||
}
|
||||
|
||||
if (type == "local") {
|
||||
openWithLocalProgram(hash);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const openWithLocalProgram = async (hash, extension = "") => {
|
||||
const url = "api/file-manager-action/run-locally/" + hash;
|
||||
const data = await fetchData(url);
|
||||
let message = data.message;
|
||||
displayMessage(message.text, message.type, 3);
|
||||
}
|
||||
|
||||
|
||||
const searchPage = () => {
|
||||
const query = document.getElementById('search-files-field').value.toLowerCase();
|
||||
const list = document.getElementById("files").querySelectorAll("li[title]");
|
||||
const size = list.length;
|
||||
|
||||
size = data.backgrounds.length - 1;
|
||||
backgrounds = data.backgrounds;
|
||||
for (var i = 0; i < size; i++) {
|
||||
generateBgElm(ulElm, backgrounds[i]);
|
||||
if (!list[i].title.toLowerCase().includes(query)) {
|
||||
list[i].style.display = "none";
|
||||
} else {
|
||||
list[i].style.display = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateBgElm = (ulElm, background) => {
|
||||
const liElm = document.createElement("LI");
|
||||
const imgElm = document.createElement("IMG");
|
||||
const imgPath = formatURL("static/imgs/backgrounds/" + background);
|
||||
const clearSearch = () => {
|
||||
const list = document.getElementById("files").querySelectorAll("li[title]");
|
||||
const size = list.length;
|
||||
|
||||
imgElm.src = imgPath;
|
||||
imgElm.className = "bgimgs";
|
||||
|
||||
liElm.appendChild(imgElm);
|
||||
ulElm.appendChild(liElm);
|
||||
document.getElementById('search-files-field').value = "";
|
||||
for (var i = 0; i < size; i++) {
|
||||
list[i].style.display = "";
|
||||
}
|
||||
}
|
||||
|
||||
const loadBackground = () => {
|
||||
let bgElm = document.getElementById("bg");
|
||||
let val = getCookie('bgSlug');
|
||||
|
||||
if (val == "" || val == undefined) {
|
||||
let path = formatURL('static/imgs/backgrounds/background.png');
|
||||
setCookie('bgSlug', path);
|
||||
bgElm.src = path;
|
||||
const updateBackground = (srcLink, isvideo = true) => {
|
||||
try {
|
||||
let elm = document.getElementById("bg");
|
||||
if (isvideo) {
|
||||
if (elm.getAttribute('src') === "") {
|
||||
elm.src = srcLink;
|
||||
}
|
||||
} else {
|
||||
elm.src = "";
|
||||
elm.setAttribute("poster", srcLink);
|
||||
}
|
||||
} catch (e) { }
|
||||
}
|
||||
|
||||
|
||||
const manageFavorites = (elm) => {
|
||||
const classType = "btn-info";
|
||||
const hasClass = elm.classList.contains(classType);
|
||||
if (hasClass) {
|
||||
elm.classList.remove(classType);
|
||||
action = "delete";
|
||||
} else {
|
||||
bgElm.src = val;
|
||||
}
|
||||
}
|
||||
|
||||
const setBackgroundCookie = (path) => {
|
||||
document.getElementById("bg").src = path;
|
||||
setCookie('bgSlug', path);
|
||||
}
|
||||
|
||||
const clearBackgroundList = () => {
|
||||
let bgList = document.getElementById("backgroundSelection");
|
||||
clearChildNodes(bgList);
|
||||
}
|
||||
|
||||
// Fave Modal and List Functions
|
||||
|
||||
const loadFavorites = async () => {
|
||||
const isLoggedIn = document.getElementsByClassName("btn btn-success")[0].innerText.includes("Login");
|
||||
if (!isLoggedIn) {
|
||||
const data = await fetchData( formatURL("favorites") );
|
||||
const ulElm = document.getElementById('favoritesSelection');
|
||||
|
||||
size = data.faves.length;
|
||||
faves = data.faves;
|
||||
for (var i = 0; i < size; i++) {
|
||||
generateFaveLinkElm(ulElm, faves[i][0], faves[i][1], faves[i][2]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const setFaveLinkIco = (link) => {
|
||||
let iconElm = document.getElementById("faveLinkImage");
|
||||
let gIcoElm = document.getElementsByName('faveIconGoo')[0];
|
||||
let iIcoElm = document.getElementsByName('faveIconIco')[0];
|
||||
let pIcoElm = document.getElementsByName('faveIconPng')[0];
|
||||
let jIcoelm = document.getElementsByName('faveIconJpg')[0];
|
||||
let gfIcoElm = document.getElementsByName('faveIconGif')[0];
|
||||
|
||||
let gIcon = 'http://www.google.com/s2/favicons?domain=';
|
||||
let dArry = link.split('/');
|
||||
let iIcon = "";
|
||||
let pIcon = "";
|
||||
let jIcon = "";
|
||||
let gfIcon = "";
|
||||
|
||||
// Check if we can see domain...
|
||||
if (dArry.length >= 3) {
|
||||
let domain = dArry[2];
|
||||
gIcon = gIcon += domain;
|
||||
iIcon = "//" + domain + "/favicon.ico";
|
||||
pIcon = "//" + domain + "/favicon.png";
|
||||
jIcon = "//" + domain + "/favicon.jpg";
|
||||
gfIcon = "//" + domain + "/favicon.gif";
|
||||
} else {
|
||||
// Check if IP
|
||||
if ( ipRegex.test(link) || ipRegexWithPort.test(link) ) {
|
||||
iIcon = link + "/favicon.ico";
|
||||
pIcon = link + "/favicon.png";
|
||||
jIcon = link + "/favicon.jpg";
|
||||
gfIcon = link + "/favicon.gif";
|
||||
} else { // set generic fave icon.
|
||||
clearFaveIcons();
|
||||
return ;
|
||||
}
|
||||
elm.classList.add(classType);
|
||||
action = "add";
|
||||
}
|
||||
|
||||
iconElm.src = iIcon;
|
||||
gIcoElm.src = gIcon;
|
||||
iIcoElm.src = iIcon;
|
||||
pIcoElm.src = pIcon;
|
||||
jIcoelm.src = jIcon;
|
||||
gfIcoElm.src = gfIcon;
|
||||
manageFavoritesAjax(action);
|
||||
}
|
||||
|
||||
const clearFaveIcons = () => {
|
||||
const domain = "/static/imgs/icons/link-icon.png";
|
||||
document.getElementById("faveLinkImage").src = domain;
|
||||
document.getElementsByName('faveIconGoo')[0].src = domain;
|
||||
document.getElementsByName('faveIconIco')[0].src = domain;
|
||||
document.getElementsByName('faveIconPng')[0].src = domain;
|
||||
document.getElementsByName('faveIconJpg')[0].src = domain;
|
||||
document.getElementsByName('faveIconGif')[0].src = domain;
|
||||
document.getElementsByName("customFaveIconImg")[0].src = domain;
|
||||
|
||||
const loadFavorite = (id) => {
|
||||
loadFavoriteLink(id);
|
||||
document.getElementById("favorites-modal")
|
||||
.getElementsByClassName("modal-footer")[0]
|
||||
.children[0].click()
|
||||
}
|
||||
|
||||
const faveLinkFieldManager = (eve) => {
|
||||
const link = eve.target.value.trim();
|
||||
const pattern = /(https|http)/ig;
|
||||
const result = pattern.test(link);
|
||||
|
||||
if (result === true) {
|
||||
setFaveLinkIco(link);
|
||||
}
|
||||
}
|
||||
|
||||
const saveFaveLink = () => {
|
||||
const title = document.getElementById("faveTitleField").value.trim()
|
||||
const link = document.getElementById("faveLinkField").value.trim()
|
||||
const icon = document.getElementById("faveLinkImage").src;
|
||||
addFaveLinkAjax(title, icon, link);
|
||||
}
|
||||
|
||||
const generateFaveLinkElm = async (ulElm, titleTxt, pathTxt, aTxt) => {
|
||||
const liElm = document.createElement("LI");
|
||||
const aElm = document.createElement("A");
|
||||
const imgElm = document.createElement("IMG");
|
||||
const h3Elm = document.createElement("H3");
|
||||
const title = document.createTextNode(titleTxt);
|
||||
const imgPath = pathTxt;
|
||||
const aLink = aTxt;
|
||||
|
||||
aElm.href = aLink;
|
||||
imgElm.title = aLink;
|
||||
imgElm.src = imgPath;
|
||||
imgElm.className = "faveimgs";
|
||||
|
||||
h3Elm.appendChild(title)
|
||||
aElm.appendChild(imgElm);
|
||||
aElm.appendChild(h3Elm);
|
||||
liElm.appendChild(aElm);
|
||||
ulElm.appendChild(liElm);
|
||||
}
|
||||
|
||||
const manageIcoCheckBoxs = (target = null) => {
|
||||
if (target == null)
|
||||
return ;
|
||||
|
||||
let ulElm = document.getElementById('faveIcoUlList');
|
||||
let list = ulElm.getElementsByTagName("INPUT");
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
item = list[i];
|
||||
if (target.id != item.id) { // unceck all others
|
||||
item.checked = false;
|
||||
} else { // Act on target but insure one is checked at all times...
|
||||
if (!target.checked)
|
||||
target.checked = true;
|
||||
const src = target.nextElementSibling.nextElementSibling.src;
|
||||
document.getElementById("faveLinkImage").src = src;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const customIconFieldManager = (eve) => {
|
||||
let isChecked = document.getElementById('customIconChkBx').checked;
|
||||
if (isChecked) {
|
||||
let target = eve.target;
|
||||
const src = target.value.trim();
|
||||
document.getElementById("faveLinkImage").src = src;
|
||||
document.getElementsByName("customFaveIconImg")[0].src = src;
|
||||
}
|
||||
}
|
||||
|
||||
const generateBackgroundDirectoryElm = (bgDirsList, name, path) => {
|
||||
let pthTxt = document.createTextNode(name);
|
||||
let liElm = document.createElement('LI');
|
||||
let spnElm = document.createElement('SPAN');
|
||||
let spnElm2 = document.createElement('SPAN');
|
||||
|
||||
liElm.className = "list-group-item";
|
||||
liElm.setAttribute('title', path);
|
||||
liElm.setAttribute('class', "list-group-item");
|
||||
spnElm2.setAttribute('class', "badge badge-danger label-as-badge");
|
||||
spnElm2.setAttribute('value', path);
|
||||
spnElm2.addEventListener("click", eve => {
|
||||
removeBgFolder(eve.target);
|
||||
});
|
||||
|
||||
spnElm2.innerText = "X";
|
||||
spnElm.appendChild(pthTxt);
|
||||
liElm.appendChild(spnElm);
|
||||
liElm.appendChild(spnElm2);
|
||||
bgDirsList.appendChild(liElm);
|
||||
}
|
||||
|
||||
const getHackerNews = async () => {
|
||||
const response = await fetch("https://hacker-news.firebaseio.com/v0/beststories.json");
|
||||
const ids = await response.json();
|
||||
|
||||
let table = document.getElementById("hackerNewsTable");
|
||||
let arrySize = ids.length;
|
||||
let j = 1;
|
||||
|
||||
for (var i = 0; i < arrySize; i++) {
|
||||
let artJSON = "https://hacker-news.firebaseio.com/v0/item/" + ids[i] + ".json";
|
||||
generateNewsElm(table, artJSON, j);
|
||||
j++;
|
||||
}
|
||||
}
|
||||
|
||||
const generateNewsElm = async (table, artJSON, j) => {
|
||||
const response = await fetch(artJSON);
|
||||
const article = await response.json();
|
||||
|
||||
let trItem = document.createElement("TR");
|
||||
let tdItemNumber = document.createElement("TD");
|
||||
let tdItemLink = document.createElement("TD");
|
||||
let anchorItem = document.createElement("A");
|
||||
let numberText = document.createTextNode(j);
|
||||
let titleText = document.createTextNode(article["title"]);
|
||||
|
||||
anchorItem.href = article["url"];
|
||||
anchorItem.target = "_blank";
|
||||
|
||||
anchorItem.appendChild(titleText);
|
||||
tdItemNumber.appendChild(numberText);
|
||||
tdItemLink.appendChild(anchorItem);
|
||||
|
||||
trItem.setAttribute("scope", "row");
|
||||
trItem.appendChild(tdItemNumber);
|
||||
trItem.appendChild(tdItemLink);
|
||||
table.appendChild(trItem);
|
||||
}
|
||||
|
||||
// Message handler
|
||||
const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") => {
|
||||
|
|
@ -257,13 +211,13 @@ const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") =
|
|||
let spnElm = document.createElement("SPAN");
|
||||
let textElm = document.createTextNode(message);
|
||||
|
||||
divElm.setAttribute("class", "alert alert-" + type);
|
||||
divElm.setAttribute("class", "alert alert-dismissible fade show alert-" + type);
|
||||
divElm.setAttribute("role", "alert");
|
||||
divElm.appendChild(textElm);
|
||||
btnElm.type = "button";
|
||||
textElm = document.createTextNode("X");
|
||||
btnElm.setAttribute("class", "close");
|
||||
btnElm.setAttribute("data-dismiss", "alert");
|
||||
btnElm.setAttribute("class", "btn-dark btn-close");
|
||||
btnElm.setAttribute("data-bs-dismiss", "alert");
|
||||
btnElm.setAttribute("aria-label", "close");
|
||||
spnElm.setAttribute("aria-hidden", "true");
|
||||
spnElm.appendChild(textElm);
|
||||
|
|
@ -283,3 +237,35 @@ const clearChildNodes = (parent) => {
|
|||
parent.removeChild(parent.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Cache Buster
|
||||
const clearCache = () => {
|
||||
const rep = /.*\?.*/;
|
||||
let links = document.getElementsByTagName('link'),
|
||||
scripts = document.getElementsByTagName('script'),
|
||||
video = document.getElementsByTagName('video'),
|
||||
process_scripts = false;
|
||||
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
let link = links[i],
|
||||
href = link.href;
|
||||
if(rep.test(href)) {
|
||||
link.href = href + '&' + Date.now();
|
||||
} else {
|
||||
link.href = href + '?' + Date.now();
|
||||
}
|
||||
|
||||
}
|
||||
if(process_scripts) {
|
||||
for (let i = 0; i < scripts.length; i++) {
|
||||
let script = scripts[i],
|
||||
src = script.src;
|
||||
if(rep.test(src)) {
|
||||
script.src = src+'&'+Date.now();
|
||||
} else {
|
||||
script.src = src+'?'+Date.now();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,6 +195,17 @@ $( "#video" ).bind( "timeupdate", async function(eve) {
|
|||
videoDuration.innerText = getTimeFormatted(video.currentTime);
|
||||
});
|
||||
|
||||
// $( "#video" ).bind( "ended", async function(eve) {
|
||||
// alert("Hello...")
|
||||
// // let videoDuration = document.getElementById("videoCurrentTime");
|
||||
// // const video = eve.target;
|
||||
// // const seekto = document.getElementById("seek-slider");
|
||||
// // const vt = video.currentTime * (100 / video.duration);
|
||||
// //
|
||||
// // seekto.value = vt;
|
||||
// // videoDuration.innerText = getTimeFormatted(video.currentTime);
|
||||
// });
|
||||
|
||||
$( "#seek-slider" ).bind( "change", async function(eve) {
|
||||
const slider = eve.target;
|
||||
let video = document.getElementById("video");
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
{% if current_directory %}
|
||||
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center fixed-bottom">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||||
data-target="#navbarTogglerFooter" aria-controls="navbarTogglerFooter"
|
||||
aria-expanded="false" aria-label="Toggle Footer Navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<nav class="navbar navbar-dark bg-dark navbar-expand-lg justify-content-center text-center fixed-bottom">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerFooter"
|
||||
aria-controls="navbarTogglerFooter" aria-expanded="false" aria-label="Toggle Footer Navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div id="navbarTogglerFooter" class="row collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item mr-2">
|
||||
<span id="tggl-faves-btn" class="btn btn-info btn-sm" title="Add/Delete from favorites..." >☆</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span id="path">{{current_directory}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="navbarTogglerFooter" class="row collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item mr-2">
|
||||
<span id="tggl-faves-btn" class="btn btn-info btn-sm" title="Add/Delete from favorites..." >☆</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span id="path">{{current_directory}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,86 @@
|
|||
<nav class="container navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center sticky-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||||
data-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader"
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader"
|
||||
aria-expanded="false" aria-label="Toggle Header Navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div id="navbarTogglerHeader" class="row collapse navbar-collapse">
|
||||
{% if current_directory %}
|
||||
<!-- Left menues -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item" data-toggle="modal" data-target="#file-view-modal">
|
||||
<i class="nav-link" aria-hidden="true" title="File viewer..." >
|
||||
🖼
|
||||
</i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="input-group">
|
||||
<input id="search-files-field" type="text" class="form-control"
|
||||
aria-label="Search..." placeholder="Search..." style="max-width: 260px">
|
||||
<div class="input-group-prepend">
|
||||
<span id="clear-search-btn" class="input-group-text" title="Clears search...">X</span>
|
||||
<div class="col">
|
||||
<!-- Left menues -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
|
||||
<i class="nav-link" aria-hidden="true" title="File viewer..." >
|
||||
🖼
|
||||
</i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="input-group">
|
||||
<input id="search-files-field" type="text" class="form-control"
|
||||
aria-label="Search..." placeholder="Search..." style="max-width: 260px">
|
||||
<div class="input-group-prepend">
|
||||
<span id="clear-search-btn" class="input-group-text" title="Clears search...">X</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" data-toggle="modal" data-target="#favorites-modal">
|
||||
<i class="nav-link" aria-hidden="true" title="Faves list..." >
|
||||
Faves List ↕
|
||||
</i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." >
|
||||
Scroll Files To Top
|
||||
</i>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item" data-bs-toggle="modal" data-bs-target="#favorites-modal">
|
||||
<i class="nav-link" aria-hidden="true" title="Faves list..." >
|
||||
Faves List
|
||||
</i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." >
|
||||
Scroll To Top
|
||||
</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Right menues -->
|
||||
<ul class="navbar-nav ml-auto">
|
||||
{% if current_directory %}
|
||||
<li class="nav-item">
|
||||
<i id="back-btn" class="fa fa-arrow-left nav-link" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
|
||||
Back
|
||||
<div class="col col-auto">
|
||||
<!-- Right menues -->
|
||||
<ul class="navbar-nav">
|
||||
{% if current_directory %}
|
||||
<li class="nav-item">
|
||||
<i id="back-btn" class="fa fa-arrow-left nav-link" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
|
||||
Back
|
||||
</i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<i id="refresh-btn" class="fa fa-refresh nav-link" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}">
|
||||
Refresh
|
||||
</i>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="nav-item" data-bs-toggle="modal" data-bs-target="#options-modal">
|
||||
<i class="nav-link fa fa-gear" aria-hidden="true" title="Other options..." >
|
||||
Settings
|
||||
</i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<i id="refresh-btn" class="fa fa-refresh nav-link" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}">
|
||||
Refresh
|
||||
</i>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="nav-item" data-toggle="modal" data-target="#options-modal">
|
||||
<i class="nav-link fa fa-gear" aria-hidden="true" title="Other options..." >
|
||||
Settings
|
||||
</i>
|
||||
</li>
|
||||
{% if current_user.is_authenticated or oidc_loggedin() %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('logout') }}">
|
||||
<i class="fas fa-sign-out-alt"></i> Logout
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if not current_user.is_authenticated and not oidc_loggedin() %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
|
||||
Account
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="{{ url_for('login') }}">
|
||||
<i title="Login" class="fas fa-user"></i> Login
|
||||
{% if current_user.is_authenticated or oidc_loggedin() %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('logout') }}">
|
||||
<i class="fas fa-sign-out-alt"></i> Logout
|
||||
</a>
|
||||
<a class="dropdown-item" href="{{ url_for('register') }}">
|
||||
<i title="Register A User..." class="fas fa-user-plus"></i> Register
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if not current_user.is_authenticated and not oidc_loggedin() %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
|
||||
Account
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="{{ url_for('login') }}">
|
||||
<i title="Login" class="fas fa-user"></i> Login
|
||||
</a>
|
||||
<a class="dropdown-item" href="{{ url_for('register') }}">
|
||||
<i title="Register A User..." class="fas fa-user-plus"></i> Register
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<!-- Bootstrap CSS -->
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')}}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap-datepicker.css')}}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/mdb.dark.min.css')}}">
|
||||
|
||||
<!-- Font Awesome CSS Notes -->
|
||||
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> -->
|
||||
|
|
@ -99,19 +99,18 @@
|
|||
|
||||
|
||||
{% block body_scripts %}
|
||||
<!-- For internal scripts... -->
|
||||
<script src="{{ url_for('static', filename='js/libs/jquery-3.6.0.min.js')}}"></script>
|
||||
|
||||
<!-- For Bootstrap in this exact order... -->
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap/jquery-3.3.1.slim.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap/popper.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap.min.js')}}"></script>
|
||||
|
||||
<!-- For DatePicker -->
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap/moment.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap-datepicker.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/bootstrap/mdb.min.js')}}"></script>
|
||||
|
||||
<!-- For React -->
|
||||
<script src="{{ url_for('static', filename='js/libs/react/react.production.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/react/react-dom.production.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/react/babel.min.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/libs/babel.min.js')}}"></script>
|
||||
|
||||
<!-- Application Imports -->
|
||||
{% block body_scripts_additional %}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Favorites:</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
<button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>File Viewer:</h3> <span id="selectedFile"></span>
|
||||
<button onclick="closeFile()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
<button onclick="closeFile()" type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body text-center justify-content-center">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<div id="video-controls">
|
||||
<div class="row pl-5 pr-5">
|
||||
<div class="col-md-8">
|
||||
<input id="seek-slider" class="form-control-range" type="range" min="0" value="0" max="100" step="1"/>
|
||||
<input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<span id="videoCurrentTime"></span>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Settings:</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<!-- <center>
|
||||
<form>
|
||||
<input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
|
||||
<input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-bs-multiple-caption="{count} files selected" multiple />
|
||||
<input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
|
||||
<input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
|
||||
<input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
<button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue