chibicitiberiu/ytsm
1
0
Fork 0
mirror of https://github.com/chibicitiberiu/ytsm.git synced 2024-02-24 05:43:31 +00:00
Code Issues Releases Wiki Activity

added missing files + progress ring

Browse Source
This commit is contained in:
Tiberiu Chibici 2020-10-18 19:31:35 +03:00
parent 5175846310
commit 60741a2b3c
18 changed files with 503 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/YtManagerApp/static/YtManagerApp/css/lib/_hamburger.css Normal file
View File

@ -0,0 +1,45 @@
#hamburger-button {
margin-right: 0.5rem; }
#hamburger-button span {
display: block;
width: 1.75rem;
height: 0.25rem;
margin-bottom: 0.25rem;
position: relative;
background: #cdcdcd;
border-radius: 0.25rem;
z-index: 100;
transform-origin: 50% 50%;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
#hamburger-button span:nth-child(1) {
margin-top: 0.25rem; }
#hamburger-button span:nth-child(2) {
transform-origin: 20% 50%; }
#hamburger-button.hamburger-show span {
opacity: 1;
background: #232323; }
#hamburger-button.hamburger-show span:nth-child(1) {
transform: rotate(-45deg) translate(-0.1875rem, 0.0625rem) scale(0.625, 1); }
#hamburger-button.hamburger-show span:nth-child(2) {
opacity: 0;
transform: rotate(0deg) scale(0, 1); }
#hamburger-button.hamburger-show span:nth-child(3) {
transform: rotate(45deg) translate(-0.1875rem, -0.0625rem) scale(0.625, 1); }
#hamburger {
position: fixed;
background: white;
height: 100%;
width: 20rem;
z-index: 99;
top: 0;
padding-top: 5rem;
left: -100%;
transition: left 0.5s ease; }
#hamburger.hamburger-show {
left: 0; }
@media (max-width: 768px) {
#hamburger {
width: 100%; } }
/*# sourceMappingURL=_hamburger.css.map */

7
app/YtManagerApp/static/YtManagerApp/css/lib/_hamburger.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAEA,iBAAkB;EACd,YAAY,EAAE,MAAM;EAEpB,sBAAK;IACD,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,aAAa,EAAE,OAAO;IACtB,QAAQ,EAAE,QAAQ;IAElB,UAAU,EAAE,OAAO;IACnB,aAAa,EAAE,OAAO;IAEtB,OAAO,EAAE,GAAG;IAEZ,gBAAgB,EAAE,OAAO;IAEzB,UAAU,EAAE,qHAEkB;IAE9B,mCAAe;MACX,UAAU,EAAE,OAAO;IAEvB,mCAAe;MACX,gBAAgB,EAAE,OAAO;EAK7B,qCAAK;IACD,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,OAAO;IAEnB,kDAAe;MACX,SAAS,EAAE,+DAA8D;IAE7E,kDAAe;MACX,OAAO,EAAE,CAAC;MACV,SAAS,EAAE,wBAAwB;IAEvC,kDAAe;MACX,SAAS,EAAE,+DAA+D;;AAM1F,UAAW;EACP,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,EAAE;EAEX,GAAG,EAAE,CAAC;EACN,WAAW,EAAE,IAAI;EACjB,IAAI,EAAE,KAAK;EAEX,UAAU,EAAE,cAAc;EAE1B,yBAAiB;IACb,IAAI,EAAE,CAAC;EAGX,yBAAmC;IAjBvC,UAAW;MAkBH,KAAK,EAAE,IAAI",
"sources": ["_hamburger.scss"],
"names": [],
"file": "_hamburger.css"
}

88
app/YtManagerApp/static/YtManagerApp/css/lib/_hamburger.scss Normal file
View File

@ -0,0 +1,88 @@
@import "variables";
#hamburger-button {
margin-right: 0.5rem;
span {
position: relative;
width: 1.75rem;
height: 0.25rem;
margin-bottom: 0.25rem;
display: block;
background: #cdcdcd;
border-radius: 0.25rem;
transform-origin: 50% 50%;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
&:nth-child(1) {
margin-top: 0.25rem;
}
&:nth-child(2) {
transform-origin: 20% 50%;
}
}
&.hamburger-show {
span {
opacity: 1;
background: #232323;
&:nth-child(1) {
transform: rotate(-45deg) translate(-.1875rem, 0.0625rem) scale(0.625, 1);
}
&:nth-child(2) {
opacity: 0;
transform: rotate(0deg) scale(0, 1);
}
&:nth-child(3) {
transform: rotate(45deg) translate(-0.1875rem, -0.0625rem) scale(0.625, 1);
}
}
}
}
#hamburger {
position: fixed;
top: 0;
left: -100%;
z-index: 99;
padding-top: 5rem;
width: 20rem;
height: 100%;
display: flex;
background: white;
flex-direction: column;
transition: left 0.5s ease;
&.hamburger-show {
left: 0;
}
@media (max-width: $breakpoint-md) {
width: 100%;
}
}
#hamburger-footer {
width: 100%;
flex: 0;
a {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
#hamburger-content {
overflow-y: auto;
flex: 1;
}

44
app/YtManagerApp/static/YtManagerApp/css/lib/_loading.css Normal file
View File

@ -0,0 +1,44 @@
/* Loading animation */
.loading-dual-ring {
display: inline-block;
width: 64px;
height: 64px; }
.loading-dual-ring:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid var(--primary);
border-color: var(--primary) transparent var(--primary) transparent;
animation: loading-dual-ring 1.2s linear infinite; }
.loading-dual-ring-small {
display: inline-block;
width: 32px;
height: 32px; }
.loading-dual-ring-small:after {
content: " ";
display: block;
width: 23px;
height: 23px;
margin: 1px;
border-radius: 50%;
border: 2.5px solid var(--primary);
border-color: var(--primary) transparent var(--primary) transparent;
animation: loading-dual-ring 1.2s linear infinite; }
@keyframes loading-dual-ring {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.loading-dual-ring-center-screen {
position: fixed;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px; }
/*# sourceMappingURL=_loading.css.map */

7
app/YtManagerApp/static/YtManagerApp/css/lib/_loading.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAmBA,uBAAuB;AACvB,kBAAmB;EAlBf,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAa;EACpB,MAAM,EAAE,IAAa;EAErB,wBAAQ;IACJ,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,IAAa;IACpB,MAAM,EAAE,IAAa;IACrB,MAAM,EAAE,GAAG;IACX,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,wBAAmC;IAC3C,YAAY,EAAE,qDAAqD;IACnE,SAAS,EAAE,sCAAsC;;AASzD,wBAAyB;EAtBrB,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,IAAa;EACpB,MAAM,EAAE,IAAa;EAErB,8BAAQ;IACJ,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,IAAa;IACpB,MAAM,EAAE,IAAa;IACrB,MAAM,EAAE,GAAG;IACX,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,0BAAmC;IAC3C,YAAY,EAAE,qDAAqD;IACnE,SAAS,EAAE,sCAAsC;;AAazD,4BAOC;EANG,EAAG;IACC,SAAS,EAAE,YAAY;EAE3B,IAAK;IACD,SAAS,EAAE,cAAc;AAIjC,gCAAiC;EAC7B,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,KAAK",
"sources": ["_loading.scss"],
"names": [],
"file": "_loading.css"
}

44
app/YtManagerApp/static/YtManagerApp/css/lib/_loading.scss Normal file
View File

@ -0,0 +1,44 @@
@mixin loading-dual-ring($scale : 1) {
display: inline-block;
width: $scale * 64px;
height: $scale * 64px;
&:after {
content: " ";
display: block;
width: $scale * 46px;
height: $scale * 46px;
margin: 1px;
border-radius: 50%;
border: ($scale * 5px) solid var(--primary);
border-color: var(--primary) transparent var(--primary) transparent;
animation: loading-dual-ring 1.2s linear infinite;
}
}
/* Loading animation */
.loading-dual-ring {
@include loading-dual-ring(1.0);
}
.loading-dual-ring-small {
@include loading-dual-ring(0.5);
}
@keyframes loading-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-dual-ring-center-screen {
position: fixed;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;
}

41
app/YtManagerApp/static/YtManagerApp/css/lib/_theme.css Normal file
View File

@ -0,0 +1,41 @@
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
[data-theme="dark"] {
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #343a40;
--dark: #f8f9fa; }
/*# sourceMappingURL=_theme.css.map */

7
app/YtManagerApp/static/YtManagerApp/css/lib/_theme.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAAA,KAAM;EAEF,MAAM,CAAC,QAAQ;EACf,QAAQ,CAAC,QAAQ;EACjB,QAAQ,CAAC,QAAQ;EACjB,MAAM,CAAC,QAAQ;EACf,KAAK,CAAC,QAAQ;EACd,QAAQ,CAAC,QAAQ;EACjB,QAAQ,CAAC,QAAQ;EACjB,OAAO,CAAC,QAAQ;EAChB,MAAM,CAAC,QAAQ;EACf,MAAM,CAAC,QAAQ;EACf,OAAO,CAAC,KAAK;EACb,MAAM,CAAC,QAAQ;EACf,WAAW,CAAC,QAAQ;EAGpB,SAAS,CAAC,QAAQ;EAClB,WAAW,CAAC,QAAQ;EACpB,SAAS,CAAC,QAAQ;EAClB,MAAM,CAAC,QAAQ;EACf,SAAS,CAAC,QAAQ;EAClB,QAAQ,CAAC,QAAQ;EACjB,OAAO,CAAC,QAAQ;EAChB,MAAM,CAAC,QAAQ;EAGf,eAAe,CAAC,EAAE;EAClB,eAAe,CAAC,MAAM;EACtB,eAAe,CAAC,MAAM;EACtB,eAAe,CAAC,MAAM;EACtB,eAAe,CAAC,OAAO;EACvB,wBAAwB,CAAC,sLAAsL;EAC/M,uBAAuB,CAAC,qFAAqF;;AAGjH,mBAAoB;EAChB,SAAS,CAAC,QAAQ;EAClB,WAAW,CAAC,QAAQ;EACpB,SAAS,CAAC,QAAQ;EAClB,MAAM,CAAC,QAAQ;EACf,SAAS,CAAC,QAAQ;EAClB,QAAQ,CAAC,QAAQ;EACjB,OAAO,CAAC,QAAQ;EAChB,MAAM,CAAC,QAAQ",
"sources": ["_theme.scss"],
"names": [],
"file": "_theme.css"
}

46
app/YtManagerApp/static/YtManagerApp/css/lib/_theme.scss Normal file
View File

@ -0,0 +1,46 @@
:root {
// base colors
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
// theme colors
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
// misc
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
[data-theme="dark"] {
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #343a40;
--dark: #f8f9fa;
}

47
app/YtManagerApp/static/YtManagerApp/css/lib/_toast.scss Normal file
View File

@ -0,0 +1,47 @@
@import "variables";
#toast-wrapper {
position: fixed;
right: 2rem;
top: 2rem;
z-index: 1000;
}
.toast {
min-width: 15rem;
line-height: 1.5rem;
.typcn {
font-size: 1.5rem;
}
&.bg-success {
background-color: rgba(lighten($success-color, 30), .98) !important;
.toast-header {
background-color: rgba($success-color, .75);
color: $light-color;
> * {
color: $light-color;
}
}
}
&.bg-warning {
background-color: rgba(lighten($warning-color, 30), .98) !important;
.toast-header {
background-color: rgba(darken($warning-color, 10), .75);
color: $light-color;
> * {
color: $light-color;
}
}
}
&.bg-danger {
background-color: rgba(lighten($danger-color, 30), .98) !important;
.toast-header {
background-color: rgba($danger-color, .75);
color: $light-color;
> * {
color: $light-color;
}
}
}
}

3
app/YtManagerApp/static/YtManagerApp/css/lib/_utils.css Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=_utils.css.map */

7
app/YtManagerApp/static/YtManagerApp/css/lib/_utils.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "",
"sources": [],
"names": [],
"file": "_utils.css"
}

50
app/YtManagerApp/static/YtManagerApp/css/lib/_utils.scss Normal file
View File

@ -0,0 +1,50 @@
// cross browser keyframes
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
// cross browser animation
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
// cross browser transition
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
// cross browser opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
// cross browser transform
@mixin transform($args...) {
-ms-transform: $args;
transform: $args;
}

3
app/YtManagerApp/static/YtManagerApp/css/lib/_variables.css Normal file
View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=_variables.css.map */

7
app/YtManagerApp/static/YtManagerApp/css/lib/_variables.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "",
"sources": [],
"names": [],
"file": "_variables.css"
}

15
app/YtManagerApp/static/YtManagerApp/css/lib/_variables.scss Normal file
View File

@ -0,0 +1,15 @@
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$accent-color: #007bff;
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$info-color: #17a2b8;
$warning-color: #ffc107;
$danger-color: #dc3545;
$light-color: #f8f9fa;
$dark-color: #343a40;

33
app/YtManagerApp/static/YtManagerApp/js/components/ProgressRing.js Normal file
View File

@ -0,0 +1,33 @@
export class ProgressRing
{
wrapperElement = null;
svgElement = null;
circleElement = null;
constructor(wrapperElement) {
this.wrapperElement = wrapperElement;
this.buildDom();
}
buildDom() {
let bounds = this.wrapperElement.getBoundingClientRect();
this.svgElement = $(`<svg class="progress-ring" style="width: 100%; height: 100%;"></svg>`);
this.svgElement.appendTo(this.wrapperElement);
this.circleElement = $(`<circle fill="transparent"></circle>`);
this.circleElement.appendTo(this.svgElement);
let strokeColor = this.wrapperElement.data('stroke');
if (strokeColor === undefined) {
strokeColor = 'black';
}
this.circleElement.attr('stroke', strokeColor);
let strokeWidth = this.wrapperElement.data('stroke-width');
if (strokeWidth === undefined) {
strokeWidth = '0.2em';
}
this.circleElement.attr('stroke-width', strokeWidth);
let radius = Math.min(bounds.width, bounds.height) / 2;
}
}

4
app/YtManagerApp/templates/YtManagerApp/master_default.html
View File

@ -48,13 +48,15 @@
{# The job panel #}
<li class="nav-item">
<div class="btn-group">
<button id="btn_toggle_job_panel"
class="btn btn-sm btn-light dropdown-toggle"
title="Show/hide job details"
data-toggle="dropdown"
data-toggle="dropdown"sss
aria-haspopup="true" aria-expanded="false">
<span class="typcn typcn-th-list" aria-hidden="true"></span>
</button>
<div id="job_panel" class="dropdown-menu dropdown-menu-right dropdown-jobs" aria-labelledby="btn_toggle_job_panel">
<h6 id="job_panel_title" class="dropdown-header collapse">Running jobs</h6>