Update to maintainer version

This commit is contained in:
Michael Reber 2022-07-03 22:27:47 +02:00
parent 5cd558eb6c
commit 13c0db3539
12 changed files with 5155 additions and 835 deletions

3
.gitignore vendored
View File

@ -1,2 +1 @@
# Ignore the dev_files directory
_NEW
._*

View File

@ -1,2 +1,7 @@
# web-learning-manager
# Netcloud Learning Manager
The Netcloud learning manager is a webtool, which was developed for all employees of the company Netcloud AG, in order to educate themselves independently and personally with licensed videos from LinkedIn Learning and the Linuxacademy.
The application can be accessed at the following URL: https://learning-manager.apps.netcloud.local/
The password is in our internal wiki.

306
assets/css/login.css Normal file
View File

@ -0,0 +1,306 @@
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
html,
body {
font-size: 50%;
}
}
svg {
display: inline-block;
width: 2rem;
height: 2rem;
overflow: visible;
}
.svg-icon {
cursor: pointer;
}
.svg-icon path {
stroke: rgba(255, 255, 255, 0.9);
fill: none;
stroke-width: 1;
}
input,
button {
outline: none;
border: none;
}
.netcloud-logo {
background-image: url("../../assets/images/Netcloud-Logo_Weiss.png");
width: 104px;
height: 60px;
background-size: contain;
margin-top: 30px;
background-repeat: no-repeat;
}
.container {
position: relative;
height: 100%;
background-image: url("../../assets/images/background.jpg");
background-size: cover;
overflow: auto;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.row {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15rem;
margin-top: -26.5rem;
width: 30rem;
height: 53rem;
overflow: hidden;
}
.login {
position: relative;
height: 100%;
background: -webkit-linear-gradient(top, rgba(113, 113, 113, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
background: linear-gradient(to bottom, rgb(96 121 148 / 80%) 0%, rgb(2 24 47 / 65%) 100%);
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
-webkit-transform: scale(1);
transform: scale(1);
}
.login.inactive {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.login__lock {
position: absolute;
/*top: 8rem;*/
left: 10rem;
width: 14rem;
height: 2.8rem;
font-size: 128px;
}
@media screen and (min-width: 769px) {
.login__lock {
font-size: 152px;
}
}
.login__check {
position: absolute;
top: 16rem;
left: 13.5rem;
width: 14rem;
height: 2.8rem;
background: #fff;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.login__check:before {
content: "";
position: absolute;
left: 0;
bottom: 100%;
width: 2.8rem;
height: 5.2rem;
background: #fff;
box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2);
}
.login__form {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
padding: 1.5rem 2.5rem;
text-align: center;
}
.login__row {
height: 5rem;
padding-top: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.login__icon {
margin-bottom: -0.4rem;
margin-right: 0.5rem;
}
.login__icon.name path {
stroke-dasharray: 73.50196075439453;
stroke-dashoffset: 73.50196075439453;
-webkit-animation: animatePath 2s 0.5s forwards;
animation: animatePath 2s 0.5s forwards;
}
.login__icon.pass path {
stroke-dasharray: 92.10662841796875;
stroke-dashoffset: 92.10662841796875;
-webkit-animation: animatePath 2s 0.5s forwards;
animation: animatePath 2s 0.5s forwards;
}
.login__input {
display: inline-block;
width: 22rem;
height: 100%;
padding-left: 1.5rem;
font-size: 1.5rem;
background: transparent;
color: #FDFCFD;
}
.login__submit {
position: relative;
width: 100%;
height: 4rem;
margin: 5rem 0 2.2rem;
color: rgba(255, 255, 255, 0.8);
background: #383838;
font-size: 1.5rem;
border-radius: 3rem;
cursor: pointer;
overflow: hidden;
-webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
}
.login__submit:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.5rem;
margin-top: -1.5rem;
width: 3rem;
height: 3rem;
border: 2px dotted #fff;
border-radius: 50%;
border-left: none;
border-bottom: none;
-webkit-transition: opacity 0.1s 0.4s;
transition: opacity 0.1s 0.4s;
opacity: 0;
}
.login__submit.processing {
width: 4rem;
font-size: 0;
}
.login__submit.processing:after {
opacity: 1;
-webkit-animation: rotate 0.5s 0.4s infinite linear;
animation: rotate 0.5s 0.4s infinite linear;
}
.login__submit.success {
-webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
-webkit-transform: scale(30);
transform: scale(30);
opacity: 0.9;
}
.login__submit.success:after {
-webkit-transition: opacity 0.1s 0s;
transition: opacity 0.1s 0s;
opacity: 0;
-webkit-animation: none;
animation: none;
}
.login__signup {
font-size: 1.2rem;
color: #ABA8AE;
}
.login__signup a {
color: #fff;
cursor: pointer;
}
.ripple {
position: absolute;
width: 15rem;
height: 15rem;
margin-left: -7.5rem;
margin-top: -7.5rem;
background: rgba(0, 0, 0, 0.4);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: animRipple 0.4s;
animation: animRipple 0.4s;
border-radius: 50%;
}
@-webkit-keyframes animRipple {
to {
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
}
@keyframes animRipple {
to {
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
}
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}
@keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}

View File

@ -1,32 +1,43 @@
@charset "utf-8";
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
* {
margin: 0;
padding: 0;
font-family: system-ui;
}
html {
/* Full height */
height: 100%;
html {
/* Full height */
height: 100%;
/* The image used */
background-image: url("../../images/background.jpg");
background-color: #373743;
/* Center and scale the image nicely */
background-position: center center;
background-size: cover;
background-image: url("../../assets/images/background.jpg");
background-color: #373743;
/* Center and scale the image nicely */
background-position: center center;
background-size: cover;
font: 14px normal Arial, Helvetica, sans-serif;
z-index: -4;
overflow-y: scroll;
/*Fix for moving page because of scrole baar*/
}
.netcloud-logo {
background-image: url("../../assets/images/michu-it_logo_weiss.png");
width: 132px;
height: 60px;
float: right;
background-size: contain;
margin-top: 46px;
background-repeat: no-repeat;
margin-right: 8px;
}
.compensate-for-scrollbar {
margin-right: inherit !important;
}
/*-------------------------
File manager
@ -34,9 +45,11 @@ html {
.filemanager {
width: 95%;
max-width:1340px;
max-width: 1340px;
min-height: 500px;
position: relative;
margin: 30px auto 50px;
background-color: rgb(0 0 0 / 40%);
}
@media all and (max-width: 965px) {
@ -49,24 +62,93 @@ html {
.filemanager .header {
font-size: large;
height: 30px;
background-color: beige;
background-color: #002751!important;
text-align: center;
padding-top: 5px;
color: white;
font-weight: 700;
}
#nowWatched {
display: none;
}
.fancybox-slide {
padding: 20px 50px !important;
padding: 20px 50px !important;
}
/*-------------------------
Page loader
-------------------------*/
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #ffffff;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
/*-------------------------
Breadcrumps
-------------------------*/
.filemanager .breadcrumbs {
color: #ffffff;
margin-left:20px;
margin-left: 20px;
font-size: 13px;
font-weight: 700;
line-height: 35px;
@ -82,13 +164,12 @@ html {
}
.filemanager .breadcrumbs .arrow {
color: #6a6a72;
color: #6a6a72;
font-size: 13px;
font-weight: 700;
line-height: 20px;
}
/*-------------------------
Search box
-------------------------*/
@ -104,12 +185,13 @@ html {
width: 40px;
height: 40px;
margin-top: 6px;
margin-right: 15px;
}
.filemanager .search:before {
content: '';
position: absolute;
margin-top:12px;
margin-top: 12px;
width: 10px;
height: 11px;
border-radius: 50%;
@ -149,21 +231,27 @@ html {
-webkit-appearance: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #4d535e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #4d535e;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #4d535e;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #4d535e;
::-webkit-input-placeholder {
/* WebKit browsers */
color: #4d535e;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #4d535e;
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #4d535e;
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #4d535e;
}
/*-------------------------
Content area
@ -175,8 +263,10 @@ html {
}
.filemanager .data.animated {
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms; /* Standard syntax */
-webkit-animation: showSlowlyElement 700ms;
/* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms;
/* Standard syntax */
}
.filemanager .data li {
@ -252,20 +342,23 @@ html {
margin: 0 auto;
display: none;
font-family: Arial;
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms; /* Standard syntax */
-webkit-animation: showSlowlyElement 700ms;
/* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms;
/* Standard syntax */
}
.filemanager .nothingfound .nofiles {
margin: 30px auto;
top: 3em;
border-radius: 50%;
position:relative;
position: relative;
background-color: #d72f6e;
width: 11em;
height: 11em;
line-height: 11.4em;
}
.filemanager .nothingfound .nofiles:after {
content: '×';
position: absolute;
@ -287,26 +380,37 @@ html {
}
@media all and (max-width:965px) {
.filemanager .data li {
width: 100%;
margin: 5px 0;
}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(1.2);
opacity: 0;
}
}
/* Standard syntax */
@keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
}
@keyframes showSlowlyElement {
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(1.2);
opacity: 0;
}
}
/*-------------------------
Icons
@ -315,42 +419,41 @@ html {
.icon {
font-size: 23px;
}
.icon.folder {
display: inline-block;
margin: 1em 0.3em 0em 1em;
background-color: transparent;
overflow: hidden;
}
.icon.folder:before {
content: '';
float: left;
background-color: #7ba1ad;
background-color: #002751!important;
width: 1.5em;
height: 0.45em;
margin-left: 0.07em;
margin-bottom: -0.07em;
border-top-left-radius: 0.1em;
border-top-right-radius: 0.1em;
box-shadow: 1.25em 0.25em 0 0em #7ba1ad;
box-shadow: 1.25em 0.25em 0 0em #002751!important;
}
.icon.folder:after {
content: '';
float: left;
clear: left;
background-color: #a0d4e4;
background-color: #01356d!important;
width: 3em;
height: 2.25em;
border-radius: 0.1em;
}
.icon.folder.full:before {
height: 0.55em;
}
.icon.folder.full:after {
height: 2.15em;
box-shadow: 0 -0.12em 0 0 #ffffff;
@ -369,10 +472,12 @@ html {
overflow: hidden;
box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset;
}
.icon.file:first-line {
font-size: 13px;
font-weight: 700;
}
.icon.file:after {
content: '';
position: absolute;
@ -384,129 +489,75 @@ html {
right: -4px;
}
.icon.file.f-avi,
.icon.file.f-flv,
.icon.file.f-mkv,
.icon.file.f-mov,
.icon.file.f-mpeg,
.icon.file.f-mpg,
.icon.file.f-mp4,
.icon.file.f-m4v,
.icon.file.f-wmv {
.icon.file.f-avi, .icon.file.f-flv, .icon.file.f-mkv, .icon.file.f-mov, .icon.file.f-mpeg, .icon.file.f-mpg, .icon.file.f-mp4, .icon.file.f-m4v, .icon.file.f-wmv {
box-shadow: 1.74em -2.1em 0 0 #7e70ee inset;
}
.icon.file.f-avi:after,
.icon.file.f-flv:after,
.icon.file.f-mkv:after,
.icon.file.f-mov:after,
.icon.file.f-mpeg:after,
.icon.file.f-mpg:after,
.icon.file.f-mp4:after,
.icon.file.f-m4v:after,
.icon.file.f-wmv:after {
.icon.file.f-avi:after, .icon.file.f-flv:after, .icon.file.f-mkv:after, .icon.file.f-mov:after, .icon.file.f-mpeg:after, .icon.file.f-mpg:after, .icon.file.f-mp4:after, .icon.file.f-m4v:after, .icon.file.f-wmv:after {
border-bottom-color: #5649c1;
}
.icon.file.f-mp2,
.icon.file.f-mp3,
.icon.file.f-m3u,
.icon.file.f-wma,
.icon.file.f-xls,
.icon.file.f-xlsx {
.icon.file.f-mp2, .icon.file.f-mp3, .icon.file.f-m3u, .icon.file.f-wma, .icon.file.f-xls, .icon.file.f-xlsx {
box-shadow: 1.74em -2.1em 0 0 #5bab6e inset;
}
.icon.file.f-mp2:after,
.icon.file.f-mp3:after,
.icon.file.f-m3u:after,
.icon.file.f-wma:after,
.icon.file.f-xls:after,
.icon.file.f-xlsx:after {
.icon.file.f-mp2:after, .icon.file.f-mp3:after, .icon.file.f-m3u:after, .icon.file.f-wma:after, .icon.file.f-xls:after, .icon.file.f-xlsx:after {
border-bottom-color: #448353;
}
.icon.file.f-doc,
.icon.file.f-docx,
.icon.file.f-psd{
.icon.file.f-doc, .icon.file.f-docx, .icon.file.f-psd {
box-shadow: 1.74em -2.1em 0 0 #03689b inset;
}
.icon.file.f-doc:after,
.icon.file.f-docx:after,
.icon.file.f-psd:after {
.icon.file.f-doc:after, .icon.file.f-docx:after, .icon.file.f-psd:after {
border-bottom-color: #2980b9;
}
.icon.file.f-gif,
.icon.file.f-jpg,
.icon.file.f-jpeg,
.icon.file.f-pdf,
.icon.file.f-png {
.icon.file.f-gif, .icon.file.f-jpg, .icon.file.f-jpeg, .icon.file.f-pdf, .icon.file.f-png {
box-shadow: 1.74em -2.1em 0 0 #e15955 inset;
}
.icon.file.f-gif:after,
.icon.file.f-jpg:after,
.icon.file.f-jpeg:after,
.icon.file.f-pdf:after,
.icon.file.f-png:after {
.icon.file.f-gif:after, .icon.file.f-jpg:after, .icon.file.f-jpeg:after, .icon.file.f-pdf:after, .icon.file.f-png:after {
border-bottom-color: #c6393f;
}
.icon.file.f-deb,
.icon.file.f-dmg,
.icon.file.f-gz,
.icon.file.f-rar,
.icon.file.f-zip,
.icon.file.f-7z {
.icon.file.f-deb, .icon.file.f-dmg, .icon.file.f-gz, .icon.file.f-rar, .icon.file.f-zip, .icon.file.f-7z {
box-shadow: 1.74em -2.1em 0 0 #867c75 inset;
}
.icon.file.f-deb:after,
.icon.file.f-dmg:after,
.icon.file.f-gz:after,
.icon.file.f-rar:after,
.icon.file.f-zip:after,
.icon.file.f-7z:after {
.icon.file.f-deb:after, .icon.file.f-dmg:after, .icon.file.f-gz:after, .icon.file.f-rar:after, .icon.file.f-zip:after, .icon.file.f-7z:after {
border-bottom-color: #685f58;
}
.icon.file.f-html,
.icon.file.f-rtf,
.icon.file.f-xml,
.icon.file.f-xhtml {
.icon.file.f-html, .icon.file.f-rtf, .icon.file.f-xml, .icon.file.f-xhtml {
box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset;
}
.icon.file.f-html:after,
.icon.file.f-rtf:after,
.icon.file.f-xml:after,
.icon.file.f-xhtml:after {
.icon.file.f-html:after, .icon.file.f-rtf:after, .icon.file.f-xml:after, .icon.file.f-xhtml:after {
border-bottom-color: #d65de8;
}
.icon.file.f-js {
box-shadow: 1.74em -2.1em 0 0 #d0c54d inset;
}
.icon.file.f-js:after {
border-bottom-color: #a69f4e;
}
.icon.file.f-css,
.icon.file.f-saas,
.icon.file.f-scss {
.icon.file.f-css, .icon.file.f-saas, .icon.file.f-scss {
box-shadow: 1.74em -2.1em 0 0 #44afa6 inset;
}
.icon.file.f-css:after,
.icon.file.f-saas:after,
.icon.file.f-scss:after {
.icon.file.f-css:after, .icon.file.f-saas:after, .icon.file.f-scss:after {
border-bottom-color: #30837c;
}
/*----------------------------
The Demo Footer
-----------------------------*/
footer {
width: 770px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
@ -514,28 +565,26 @@ footer {
bottom: 0;
left: 50%;
margin-left: -420px;
background-color:#1f1f1f;
background-image:linear-gradient(to bottom, #1f1f1f, #101010);
border-radius:2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
z-index:1;
background-color: #1f1f1f;
background-image: linear-gradient(to bottom, #1f1f1f, #101010);
border-radius: 2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
z-index: 1;
}
footer a.tz{
font-weight:normal;
font-size:16px !important;
text-decoration:none !important;
display:block;
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
color:#bfbfbf !important;
z-index:1;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before{
footer a.tz:before {
content: '';
width: 138px;
height: 20px;
@ -544,17 +593,17 @@ footer a.tz:before{
bottom: -3px;
}
footer .close{
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
top:10px;
right:10px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions{
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
@ -564,7 +613,7 @@ footer #tzine-actions{
z-index: 2;
}
footer #tzine-actions iframe{
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
@ -574,84 +623,95 @@ footer #tzine-actions iframe{
}
@media (max-width: 1024px) {
#bsaHolder, footer{ display:none;}
#bsaHolder, footer {
display: none;
}
}
/* Popup Test */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.button {
background-color: #373743;
border: none;
color: white;
padding: 15px 32px;
margin-left: 10px;
margin-top:40px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 200px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
background-color: #373743;
border: none;
color: white;
padding: 15px 32px;
margin-left: 10px;
margin-top: 40px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 200px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
cursor: pointer;
box-sizing: border-box;
transition: 0.3s background-color;
@ -665,16 +725,48 @@ footer #tzine-actions iframe{
min-height: 700px;
}
/* michu naming fixes:*/
/* naming fixes:*/
.filemanager .data li .name {
width: 194px;
top: 22px;
white-space: inherit;
margin-left: 12px;
width: 194px;
top: 22px;
white-space: inherit;
margin-left: 12px;
}
.icon.file {
margin: 0.9em 0.6em 0.8em 0.6em;
margin: 0.9em 0.6em 0.8em 0.6em;
/*margin: 5px 0px 0px -60px;*/
}
.fancybox-slide > div:nth-child(2) {
display: block !important;
}
.fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous {
display: flex !important;
}
.speedControl {
width: 2em !important;
padding: 2px !important;
border: 1px inset silver !important;
box-sizing: border-box !important;
background: black !important;
align-self: stretch !important;
margin: 0 0 0 0.5em !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.indicator {
user-select: none;
color: white;
height: 25%;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient( to left top, #002751, #b3b3b3);
font-size: 0.7em;
font-family: sans-serif;
}

View File

Before

Width:  |  Height:  |  Size: 827 KiB

After

Width:  |  Height:  |  Size: 827 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -1,11 +1,11 @@
$(function(){
$(function () {
var filemanager = $('.filemanager'),
breadcrumbs = $('.breadcrumbs'),
fileList = filemanager.find('.data');
// Start by fetching the file data from scan.php with an AJAX request
$.get('scan.php', function(data) {
$.get('scan.php', function (data) {
var response = [data],
currentPath = '',
@ -17,7 +17,7 @@ $(function(){
// This event listener monitors changes on the URL. We use it to
// capture back/forward navigation in the browser.
$(window).on('hashchange', function(){
$(window).on('hashchange', function () {
goto(window.location.hash);
@ -26,9 +26,8 @@ $(function(){
}).trigger('hashchange');
// Hiding and showing the search box
filemanager.find('.search').click(function(){
filemanager.find('.search').click(function () {
var search = $(this);
@ -36,19 +35,18 @@ $(function(){
search.find('input[type=search]').show().focus();
});
// Listening for keyboard input on the search field.
// We are using the "input" event which detects cut and paste
// in addition to keyboard input.
filemanager.find('input').on('input', function(e){
filemanager.find('input').on('input', function (e) {
folders = [];
files = [];
var value = this.value.trim();
if(value.length) {
if (value.length) {
filemanager.addClass('searching');
@ -60,21 +58,21 @@ $(function(){
window.location.hash = encodeURIComponent(currentPath);
}
}).on('keyup', function(e){
}).on('keyup', function (e) {
// Clicking 'ESC' button triggers focusout and cancels the search
var search = $(this);
if(e.keyCode == 27) {
if (e.keyCode == 27) {
search.trigger('focusout');
}
}).focusout(function(e){
}).focusout(function (e) {
// Cancel the search
var search = $(this);
if(!search.val().trim().length) {
if (!search.val().trim().length) {
window.location.hash = encodeURIComponent(currentPath);
search.hide();
@ -82,14 +80,13 @@ $(function(){
}
});
// Clicking on folders
fileList.on('click', 'li.folders', function(e){
fileList.on('click', 'li.folders', function (e) {
e.preventDefault();
var nextDir = $(this).find('a.folders').attr('href');
if(filemanager.hasClass('searching')) {
if (filemanager.hasClass('searching')) {
// Building the breadcrumbs
breadcrumbsUrls = generateBreadcrumbs(nextDir);
@ -106,9 +103,8 @@ $(function(){
currentPath = nextDir;
});
// Clicking on breadcrumbs
breadcrumbs.on('click', 'a', function(e){
breadcrumbs.on('click', 'a', function (e) {
e.preventDefault();
var index = breadcrumbs.find('a').index($(this)),
@ -121,19 +117,19 @@ $(function(){
});
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
return "";
}
// Navigates to the given hash (path)
@ -187,10 +183,10 @@ $(function(){
}
// Splits a file path and turns it into clickable breadcrumbs
function generateBreadcrumbs(nextDir){
function generateBreadcrumbs(nextDir) {
var path = nextDir.split('/').slice(0);
for(var i=1;i<path.length;i++){
path[i] = path[i-1]+ '/' +path[i];
for (var i = 1; i < path.length; i++) {
path[i] = path[i - 1] + '/' + path[i];
}
return path;
}
@ -202,9 +198,9 @@ $(function(){
demo = response,
flag = 0;
for(var i=0;i<path.length;i++){
for(var j=0;j<demo.length;j++){
if(demo[j].name === path[i]){
for (var i = 0; i < path.length; i++) {
for (var j = 0; j < demo.length; j++) {
if (demo[j].name === path[i]) {
flag = 1;
demo = demo[j].items;
break;
@ -219,22 +215,22 @@ $(function(){
// Recursively search through the file tree
function searchData(data, searchTerms) {
data.forEach(function(d){
if(d.type === 'folder') {
data.forEach(function (d) {
if (d.type === 'folder') {
searchData(d.items,searchTerms);
searchData(d.items, searchTerms);
if(d.name.toLowerCase().match(searchTerms)) {
if (d.name.toLowerCase().match(searchTerms)) {
folders.push(d);
}
}
else if(d.type === 'file') {
if(d.name.toLowerCase().match(searchTerms)) {
else if (d.type === 'file') {
if (d.name.toLowerCase().match(searchTerms)) {
files.push(d);
}
}
});
return {folders: folders, files: files};
return { folders: folders, files: files };
}
@ -244,7 +240,7 @@ $(function(){
var scannedFolders = [],
scannedFiles = [];
if(Array.isArray(data)) {
if (Array.isArray(data)) {
data.forEach(function (d) {
@ -257,7 +253,7 @@ $(function(){
});
}
else if(typeof data === 'object') {
else if (typeof data === 'object') {
scannedFolders = data.folders;
scannedFiles = data.files;
@ -267,131 +263,128 @@ $(function(){
// Empty the old result and make the new one
fileList.empty().hide();
if(!scannedFolders.length && !scannedFiles.length) {
if (!scannedFolders.length && !scannedFiles.length) {
filemanager.find('.nothingfound').show();
}
else {
filemanager.find('.nothingfound').hide();
}
if(scannedFolders.length) {
if (scannedFolders.length) {
scannedFolders.forEach(function(f) {
scannedFolders.forEach(function (f) {
var itemsLength = f.items.length,
name = escapeHTML(f.name),
icon = '<span class="icon folder"></span>';
// Function need to checked by MR! -> Otherwise delete!!!
// icon = '<span class="icon folder"></span>',
// iconpath = 'images/icons/' + f.path + '.png';
// function imageExists(image_url){
// Function need to checked by MR! -> Otherwise delete!!!
// icon = '<span class="icon folder"></span>',
// iconpath = 'images/icons/' + f.path + '.png';
// var http = new XMLHttpRequest();
// http.open('HEAD', image_url, false);
// http.send();
//
// return http.status != 404;
// }
// if (imageExists(iconpath)) {
// icon = '<div style="display:inline-block;margin:5px 5px 5px 5px;border-radius:8px;width:100px;height:100px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' +iconpath + '\');"></div>';
// } else if(itemsLength) {
// icon = '<span class="icon folder full"></span>';
// }
if(itemsLength) {
// function imageExists(image_url){
// var http = new XMLHttpRequest();
// http.open('HEAD', image_url, false);
// http.send();
//
// return http.status != 404;
// }
// if (imageExists(iconpath)) {
// icon = '<div style="display:inline-block;margin:5px 5px 5px 5px;border-radius:8px;width:100px;height:100px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' +iconpath + '\');"></div>';
// } else if(itemsLength) {
// icon = '<span class="icon folder full"></span>';
// }
if (itemsLength) {
icon = '<span class="icon folder full"></span>';
}
}
if(itemsLength == 1) {
if (itemsLength == 1) {
itemsLength += ' item';
}
else if(itemsLength > 1) {
else if (itemsLength > 1) {
itemsLength += ' items';
}
else {
itemsLength = 'Empty';
}
var folder = $('<li class="folders"><a href="'+ f.path +'" title="'+ f.path +'" class="folders">'+icon+'<span class="name">' + name + '</span> <span class="details">' + itemsLength + '</span><span class="watchStatus"></span></a></li>');
var folder = $('<li class="folders"><a href="' + f.path + '" onclick="_paq.push([\'trackEvent\', \'video-folder\', \'' + f.path + '\']);" title="' + f.path + '" class="folders">' + icon + '<span class="name">' + name + '</span> <span class="details">' + itemsLength + '</span><span class="watchStatus"></span></a></li>');
fileList.append(folder)
});
}