diff --git a/.gitignore b/.gitignore index f324aff8..331324f6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store node_modules yarn-error.log +*.swp diff --git a/app/css/custom.css b/app/css/custom.css index c4833d93..c20ebfa0 100644 --- a/app/css/custom.css +++ b/app/css/custom.css @@ -1,3 +1,7 @@ +body { + color: #212529; +} + .page-header { margin: 20px 0 20px; } @@ -6,22 +10,76 @@ margin-right: 5px; } -.panel-primary { - border-color: #c61931; +/* Small devices (portrait phones, up to 576px) */ +@media (max-width: 576px) { + .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } + .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } + .row { margin-left: 0rem; margin-right: 0rem; } + .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } + .form-group.col-md-6 { margin-left: -0.5rem; } + .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; } + h4.mt-3 { margin-left: 0.5rem; } } -.panel-primary>.panel-heading { +.sidebar { + background-color: #f8f9fc; +} + +.sidebar-brand-text { + text-transform: none; + color: #212529; + font-size: 2.0rem; + font-weight: 500; + font-family: Helvetica, Arial, sans-serif; +} + +.sidebar .nav-item.active .nav-link { + font-weight: 500; +} + +.card .card-header { border-color: #d8224c; background-color: #d8224c; + color: #fff; } -.panel-footer { +.card-footer { background-color: #f2f1f0; } -.btn-primary.btn-outline { - color: #c61931; - border-color: #c61931; +.nav-item { + font-size: 0.85rem; +} + +.nav-tabs .nav-link.active, +.nav-tabs .nav-link { + font-size: 1.0rem; +} + +.nav-tabs a.nav-link { + color: #6e707e; +} + +a.nav-link.active { + font-weight: bolder; +} + +.sidebar .nav-item .nav-link { + padding: 0.6rem; +} + +.alert-success { + background-color: #d4edda; +} + +.btn-primary { + color: #d8224c; + background-color: #fff; + border-color: #d8224c; +} + +.btn-warning { + color: #333; } .btn-primary:hover { @@ -29,8 +87,21 @@ border-color: #c61931; } +i.fa.fa-bars { + color: #d1d3e2; +} + +i.fa.fa-bars:hover{ + color: #6e707e; +} + .info-item { - width: 140px; + width: 10rem; + float: left; +} + +.info-item-wifi { + width: 6rem; float: left; } @@ -49,26 +120,15 @@ min-height:500px; } -.service-status-running, -.service-status-stopped { - background-color: #fff; - color: #333; - text-transform: uppercase; - line-height: inherit; +.service-status { + border-width: 0; } -.service-status-running:before, -.service-status-stopped:before { - display: inline-block; - height: 16px; - width: 16px; - content: "\2022"; - font-size: 3.5em; + +.service-status-up { color: green; - line-height: 16px; - vertical-align: bottom; - margin-right: 2px; } -.service-status-stopped:before { + +.service-status-down { color: red; animation: flash 1s linear infinite; } @@ -77,10 +137,12 @@ opacity: 0; } } - + .logoutput { width:100%; - height:300px; + height: 20rem; + border: 1px solid #d1d3e2; + border-radius: .35rem; } pre.unstyled { @@ -105,6 +167,27 @@ pre.unstyled { width: 100%; } -.js-wifi-stations .panel-body { - min-height: 256px; +.js-reload-wifi-stations { + min-width: 10rem; } + +.sidebar.toggled .nav-item .nav-link span { + display: none; +} .sidebar .nav-item .nav-link i, +.sidebar .nav-item .nav-link span { + font-size: 1.0rem; +} + +.btn-warning:hover { + color: #000; +} + +.toggle-off.btn { + padding-left: 1.2rem; + font-size: 0.9rem!important; +} + +.toggle-on.btn { + font-size: 0.9rem!important; +} + diff --git a/app/css/hackernews.css b/app/css/hackernews.css index 840658c8..1b81b19d 100644 --- a/app/css/hackernews.css +++ b/app/css/hackernews.css @@ -1,44 +1,71 @@ html * { font-family: Verdana, Geneva, sans-serif; - font-size: 10pt; + font-size: 0.9rem; color: #828282; } -.nav>li>a { - font-size: 12pt; +body { + color: #212529; } a:focus, a:hover { color: #666; } -h4 { - font-size: 18px; +h4 { + font-size: 1.3rem; + color: #212529; } -.panel { +h5.card-title { + font-size: 1.2rem; + color: #212529; +} + +.card { border-radius: 1px; -} - -.panel-primary { border-color: #ff6600; } -.panel-primary>.panel-heading { +.card>.card-header { border-color: #ff6600; background-color: #ff6600; color: #000; - font-size: 14pt; + font-size: 1.0rem; font-weight: bold; + border-radius: unset; } -.panel-heading { - border-top-left-radius: 1px; - border-top-right-radius: 1px; +.card-header .col { + color: #212529; + font-size: 1.0rem; } -.panel-primary>.panel-heading .fa { +.card-header [class^="fa"] { color: #fff; + font-size: 1.0rem; +} + +.sidebar-brand-text { + text-transform: none; + color: #212529; + font-size: 2.0rem; + font-weight: 500; + font-family: Verdana, Geneva, sans-serif; +} + + +ul.nav-tabs, .nav-tabs .nav-link { + background-color: #f6f6ef; + border-bottom: 1px solid #dddfeb; +} + +.sidebar .nav-item .nav-link { + padding: 0.6rem; +} + +.sidebar-light .nav-item.active .nav-link { + font-weight: 300; } .page-header { @@ -46,22 +73,43 @@ h4 { margin: 10px 0 20px; } -#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default { +#wrapper,#page-wrapper, +#wrapper #content-wrapper, +.nav>li>a,.nav { + background-color: #fff; +} + +/* Small devices (portrait phones, up to 576px) */ +@media (max-width: 576px) { + .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } + .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } + .row { margin-left: 0rem; margin-right: 0rem; } + .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } + .form-group.col-md-6 { margin-left: -0.5rem; } + .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; } + h4.mt-3 { margin-left: 0.5rem; } +} + +.card-body { background-color: #f6f6ef; } -.panel-footer { +.card-footer { background-color: #eee; } -.btn-primary.btn-outline { - color: #c61931; - border-color: #c61931; +.alert-success { + background-color: #d4edda; } -.btn-primary:hover { - background-color: #c61931; - border-color: #c61931; +.btn-primary, .btn-primary:hover { + color: #828282; + background-color: #fff; + border-color: #828282; +} + +.btn-warning { + color: #333; } .progress { @@ -77,32 +125,31 @@ h4 { float: left; } -.logoutput { - width: 100%; - height: 300px; +.info-item-wifi { + width: 6rem; + float: left; } -.service-status-running, -.service-status-stopped { - background-color: #fff; - color: #333; - text-transform: uppercase; - line-height: inherit; +.logoutput { + width: 100%; + height: 20rem; + border: 1px solid #d1d3e2; + border-radius: .35rem; } -.service-status-running:before, -.service-status-stopped:before { - display: inline-block; - height: 18px; - width: 16px; - content: "\2022"; - font-size: 1.5em; + +.service-status { + border-width: 0; +} + +i.fas.fa-circle.service-status-up { color: green; - line-height: 16px; - vertical-align: bottom; - margin-right: 2px; } -.service-status-stopped:before { - color: red; + +i.fas.fa-circle.service-status-down { + color: red; +} + +.service-status-down { animation: flash 1s linear infinite; } @keyframes flash { @@ -110,3 +157,61 @@ h4 { opacity: 0; } } + +.logoutput { + width:100%; + height:300px; +} + +pre.unstyled { + border-width: 0; + background-color: transparent; + padding: 0; +} + +.dhcp-static-leases { + margin-top: 1em; + margin-bottom: 1em; +} + +.dhcp-static-lease-row { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.loading-spinner { + background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent; + min-height: 150px; + width: 100%; +} + +.js-reload-wifi-stations { + min-width: 10rem; +} + +.sidebar.toggled .nav-item .nav-link { + text-align: center; + padding: .6rem 1rem; + width: 6.5rem; +} + +.sidebar.toggled .nav-item .nav-link span { + display: none; +} .sidebar .nav-item .nav-link i, +.sidebar .nav-item .nav-link span { + font-size: 0.9rem; +} + +.btn-warning:hover { + color: #000; +} + +.toggle-off.btn { + padding-left: 0.9rem; + font-size: 0.9rem!important; +} + +.toggle-on.btn { + font-size: 0.9rem!important; +} + diff --git a/app/css/terminal.css b/app/css/terminal.css index 5eabd096..11e8cf89 100644 --- a/app/css/terminal.css +++ b/app/css/terminal.css @@ -1,109 +1,188 @@ html * { font-family: Courier New, Andale Mono, monospace; - font-size: 10pt; - color: #33ff00; + font-size: 1.0rem; + color: #2ee600; } -#page-wrapper { +h4 { + font-size: 1.3rem; +} + +h5.card-title { + font-size: 1.2rem; +} + +.page-header { padding: 0 20px; - border-left: 1px solid #33ff00; + border-left: 1px solid #2ee600; } -.nav>li>a { - font-size: 10pt; +.sidebar-light .nav-item.active .nav-link i { + color: #2ee600; } -.nav>li>a:focus, .nav>li>a:hover { +.sidebar .nav-item.active .nav-link { + font-weight: 700; +} + +#wrapper #content-wrapper #content { background-color: #000; } -.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .input-group-addon { - color: #33ff00; +/* Small devices (portait phones, up to 576px) */ +@media (max-width: 576px) { + .container-fluid, .card-body, .col-md-6 { padding-left: 0.5rem; padding-right: 0.5rem; } + .card .card-header { padding: .75rem .5rem; font-size: 1.0rem; } + .row { margin-left: 0rem; margin-right: 0rem; } + .col-lg-12 { padding-right: 0.25rem; padding-left: 0.25rem; } + .form-group.col-md-6 { margin-left: -0.5rem; } + .js-wifi-stations { margin-left: -0.5rem; margin-right: -0.5rem; } + h4.mt-3 { margin-left: 0.5rem; } +} + +.topbar { + background-color: #000; +} + +.nav-tabs .nav-link.active, +.nav-tabs .nav-link { + font-size: 1.0rem; +} + +.nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover, +.nav-tabs .nav-link:hover, +.input-group-addon { + color: #2ee600; cursor: default; background-color: #000; - border: 1px solid #33ff00; - border-bottom-color: #33ff00; + border: 1px solid #2ee600; + border-bottom-color: #2ee600; + border-radius: inherit; } .nav-tabs>li>a,.nav-tabs>li>a:hover { - border: 1px solid #33ff00; + border: 1px solid #2ee600; } .nav-tabs { - border-bottom: 1px solid #33ff00; + border-bottom: 1px solid #2ee600; } -.navbar-default { - border-color: #33ff00; -} - -.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover { - color: #33ff00; +.navbar-default .navbar-brand, +.navbar-default .navbar-brand:hover { + color: #2ee600; } .navbar-default .navbar-toggle { - border-color: #33ff00; + border-color: #2ee600; } .navbar-default .navbar-toggle .icon-bar { - background-color: #33ff00; + background-color: #2ee600; } -.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { +.navbar-default .navbar-toggle:focus, +.navbar-default .navbar-toggle:hover { background-color: #000; } -.logo { - visibility: collapse; - width: 0px; +.nav-tabs .nav-link.active { + color: #000; + background-color: #2ee600; + border-color: #2ee600; + border-radius: inherit; +} + +.sidebar-brand-icon { + filter: invert(65%) sepia(900%) saturate(536%) hue-rotate(68deg) brightness(100%) contrast(120%); + width: 30px; } a:focus, a:hover { - color: #33ff00; + color: #2ee600; } -.panel-primary { - border-color: #33ff00; -} - -.panel-primary>.panel-heading, .panel-default>.panel-heading { - border-color: #33ff00; - background-color: #33ff00; +.card>.card-header { + border-color: #2ee600; + background-color: #2ee600; color: #000; - font-size: 12pt; + border-radius: unset; + font-size: 1.1rem; + font-weight: bold; } -.panel-primary>.panel-heading .fa { +.card>.card-header .fa { color: #000; } -.panel { +.card-header [class^="fa"] { + color: #000; + font-size: 1.0rem; +} + +.col { + color: #000; +} + +.card, .card-body { margin-bottom: 20px; - border: 1px solid #33ff00; + border: 1px solid #2ee600; border-radius: 0px; background-color: #000; } hr { - border-top: 1px solid #33ff00; + border-top: 1px solid #2ee600; } .page-header { font-size: 24pt; margin: 10px 0 20px; - border-bottom: 1px solid #33ff00; + border-bottom: 1px solid #2ee600; } -#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default { +.sidebar-brand-text { + text-transform: none; + color: #2ee600; + font-size: 2.0rem; + font-weight: 500; + font-family: inherit; +} + +.sidebar-light #sidebarToggle { + background-color: #2ee600; +} + +.sidebar-light #sidebarToggle::after { + color: #000; +} + +.sidebar-light .nav-item .nav-link:hover i { + color: #81ff61; +} + +.sidebar-light #sidebarToggle:hover { + background-color: #81ff61; +} + +.sidebar.toggled .nav-item .nav-link span { + display: none; +} + +.sidebar.toggled .nav-item .nav-link { + text-align: center; + padding: .6rem 1rem; + width: 6.5rem; +} + +.card-footer { background-color: #000; + border-top: 1px solid #2ee600; } -.panel-footer { - background-color: #000; - border-top: 1px solid #33ff00; -} - -.panel-primary>.panel-heading::before, .navbar-default::before { +.card>.card-header::before, .navbar-default::before { content: " "; display: block; position: absolute; @@ -117,86 +196,79 @@ hr { pointer-events: none; } -.sidebar ul li a.active,.sidebar ul li a.hover { +.sidebar-light, .sticky-footer { background-color: #000; } -.sidebar ul li { - border-bottom: 1px solid #33ff00; +.sidebar-light .nav-item .nav-link i { + color: #2ee600; } -.btn-default.active, .btn-default.active:focus, .btn-default.active:hover { - color: #33ff00; - background-color: #000; +.sidebar .nav-item .nav-link { + padding: 0.6rem; } - -.btn-primary.btn-outline,.btn-warning,.btn-default,.btn-danger { - color: #33ff00; - border-color: #33ff00; +.sidebar-light hr.sidebar-divider { + border-top: 1px solid #2ee600; } -.btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus,.btn-primary:active,.btn-default:hover,.btn-danger:hover,.btn-default:active,.btn-default:focus { - color: #33ff00; - background-color: #000; - border-color: #33ff00; +.topbar .topbar-divider { + border-right: 1px solid #2ee600; } -.btn-primary.btn-outline:hover,.btn-success, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { - color: #33ff00; -} - -label.btn.btn-primary { - color: #33ff00; -} - -label.btn.btn-primary.active, label.btn.btn-warning.active { - background-color: #33ff00; - border-color: #33ff00; - color: #000; +.info-item-wifi { + width: 6rem; + float: left; } .label-warning { - background-color: #33ff00; + background-color: #2ee600; } span.label.label-warning { color: #000; } -.btn.btn-primary { - border-color: #33ff00; -} - -.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { +.table>tbody>tr>td, +.table>tbody>tr>th, +.table>tfoot>tr>td, +.table>tfoot>tr>th, +.table>thead>tr>td, +.table>thead>tr>th { background-color: #000; border-top: 1px solid #000; } .table>thead>tr>th { vertical-align: bottom; - border-bottom: 1px solid #33ff00; + border-bottom: 1px solid #2ee600; } -.btn-info, .btn-info:hover, .btn-info[disabled], .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger.active, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover, .btn-info:hover { - background-color: #000; - border-color: #33ff00; - color: #33ff00; -} - -.btn { +[class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled { background-color: #000; + border-color: #2ee600; + border-color: #2ee600; border-radius: 0px; + color: #2ee600; } -.alert { +[class*="btn"]:hover { + background-color: #81ff61; + border-color: #81ff61; + border-color: #81ff61; border-radius: 0px; + color: #000; } -.alert-success,.alert-warning,.alert-info,.alert-dismissable,.alert-danger { - color: #33ff00; +[class*="btn"]:hover .disabled { + background-color:red; +} + +[class*="alert"] { + border-radius: 0px; + color: #2ee600; background-color: #000; - border-color: #33ff00; + border-color: #2ee600; border: 1px dashed; } @@ -207,23 +279,30 @@ span.label.label-warning { opacity: 1; } -.form-control, .form-control:focus { - color: #33ff00; +.form-control, +.form-control:focus { + color: #2ee600; background-color: #000; - border: 1px solid #33ff00; + border: 1px solid #2ee600; border-radius: 0px; transition: unset; } -input[type="text"]{ - color: #33ff00 !important +.form-control:disabled, +.form-control[readonly] { + background-color: #000; + opacity: 0.5; } -.form-control::-webkit-input-placeholder { color: #33ff00; } -.form-control:-moz-placeholder { color: #33ff00; } -.form-control::-moz-placeholder { color: #33ff00; } -.form-control:-ms-input-placeholder { color: #33ff00; } -.form-control::-ms-input-placeholder { color: #33ff00; } +.form-control::-webkit-input-placeholder { color: #2ee600; } +.form-control:-moz-placeholder { color: #2ee600; } +.form-control::-moz-placeholder { color: #2ee600; } +.form-control:-ms-input-placeholder { color: #2ee600; } +.form-control::-ms-input-placeholder { color: #2ee600; } + +input[type="text"]{ +color: #2ee600 !important +} .progress { background-color: #000; @@ -235,7 +314,7 @@ input[type="text"]{ } .progress-bar.progress-bar-info.progress-bar-striped.active { - background-color: #33ff00; + background-color: #2ee600; } .info-item { @@ -247,13 +326,13 @@ input[type="text"]{ width: 100%; height: 300px; background-color: #000; - border-color: #33ff00; + border-color: #2ee600; } .webconsole { width: 100%; height: 100%; - border-color: #33ff00; + border-color: #2ee600; border-bottom: 1px solid; border-left: 1px solid; border-top: 0px; @@ -264,38 +343,54 @@ input[type="text"]{ height: 500px; } -.systemtabcontent { - height: 100%; - min-height: 500px; -} - tspan, rect { - fill: #33ff00; + fill: #2ee600; } -.morris-hover.morris-default-style { - background: none; - border-radius: 0px; - border-color: #33ff00; - border: dashed 1px #33ff00; +.service-status { + border-width: 0; } -.morris-hover-point { - color: #33ff00 !important; +span.text.service-status { + font-size: 0.75rem; + margin-top: 0.2rem; } -path { - stroke: #33ff00; +i.fas.fa-circle.service-status-up { + color: #2ee600; } -span.service-status-running { - color: #000; - font-size: 10pt; - text-transform: uppercase; - line-height: inherit; +i.fas.fa-circle.service-status-down { + color: #2ee600; + animation: flash 1s linear infinite; +} +@keyframes flash { + 50% { + opacity: 0; + } } pre { background-color: #000; border: #000; } + +.dhcp-static-leases { + margin-top: 1em; + margin-bottom: 1em; +} + +.dhcp-static-lease-row { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.toggle-off.btn { + padding-left: 1.2rem; + font-size: 0.9rem!important; +} + +.toggle-on.btn { + font-size: 0.9rem!important; +} + diff --git a/app/css/timeline.css b/app/css/timeline.css deleted file mode 100755 index 92161ebe..00000000 --- a/app/css/timeline.css +++ /dev/null @@ -1,180 +0,0 @@ -.timeline { - position: relative; - padding: 20px 0 20px; - list-style: none; -} - -.timeline:before { - content: " "; - position: absolute; - top: 0; - bottom: 0; - left: 50%; - width: 3px; - margin-left: -1.5px; - background-color: #eeeeee; -} - -.timeline > li { - position: relative; - margin-bottom: 20px; -} - -.timeline > li:before, -.timeline > li:after { - content: " "; - display: table; -} - -.timeline > li:after { - clear: both; -} - -.timeline > li:before, -.timeline > li:after { - content: " "; - display: table; -} - -.timeline > li:after { - clear: both; -} - -.timeline > li > .timeline-panel { - float: left; - position: relative; - width: 46%; - padding: 20px; - border: 1px solid #d4d4d4; - border-radius: 2px; - -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); - box-shadow: 0 1px 6px rgba(0,0,0,0.175); -} - -.timeline > li > .timeline-panel:before { - content: " "; - display: inline-block; - position: absolute; - top: 26px; - right: -15px; - border-top: 15px solid transparent; - border-right: 0 solid #ccc; - border-bottom: 15px solid transparent; - border-left: 15px solid #ccc; -} - -.timeline > li > .timeline-panel:after { - content: " "; - display: inline-block; - position: absolute; - top: 27px; - right: -14px; - border-top: 14px solid transparent; - border-right: 0 solid #fff; - border-bottom: 14px solid transparent; - border-left: 14px solid #fff; -} - -.timeline > li > .timeline-badge { - z-index: 100; - position: absolute; - top: 16px; - left: 50%; - width: 50px; - height: 50px; - margin-left: -25px; - border-radius: 50% 50% 50% 50%; - text-align: center; - font-size: 1.4em; - line-height: 50px; - color: #fff; - background-color: #999999; -} - -.timeline > li.timeline-inverted > .timeline-panel { - float: right; -} - -.timeline > li.timeline-inverted > .timeline-panel:before { - right: auto; - left: -15px; - border-right-width: 15px; - border-left-width: 0; -} - -.timeline > li.timeline-inverted > .timeline-panel:after { - right: auto; - left: -14px; - border-right-width: 14px; - border-left-width: 0; -} - -.timeline-badge.primary { - background-color: #2e6da4 !important; -} - -.timeline-badge.success { - background-color: #3f903f !important; -} - -.timeline-badge.warning { - background-color: #f0ad4e !important; -} - -.timeline-badge.danger { - background-color: #d9534f !important; -} - -.timeline-badge.info { - background-color: #5bc0de !important; -} - -.timeline-title { - margin-top: 0; - color: inherit; -} - -.timeline-body > p, -.timeline-body > ul { - margin-bottom: 0; -} - -.timeline-body > p + p { - margin-top: 5px; -} - -@media(max-width:767px) { - ul.timeline:before { - left: 40px; - } - - ul.timeline > li > .timeline-panel { - width: calc(100% - 90px); - width: -moz-calc(100% - 90px); - width: -webkit-calc(100% - 90px); - } - - ul.timeline > li > .timeline-badge { - top: 16px; - left: 15px; - margin-left: 0; - } - - ul.timeline > li > .timeline-panel { - float: right; - } - - ul.timeline > li > .timeline-panel:before { - right: auto; - left: -15px; - border-right-width: 15px; - border-left-width: 0; - } - - ul.timeline > li > .timeline-panel:after { - right: auto; - left: -14px; - border-right-width: 14px; - border-left-width: 0; - } -} \ No newline at end of file diff --git a/app/js/bandwidthcharts.js b/app/js/bandwidthcharts.js index bfede760..e903c29b 100644 --- a/app/js/bandwidthcharts.js +++ b/app/js/bandwidthcharts.js @@ -1,92 +1,152 @@ (function($, _t) { - "use strict"; + "use strict"; - /** - * Create a Morris.js barchart. - */ - function CreateBarChart(placeholder, datasizeunits) { - var barchart = new Morris.Bar({ - element: placeholder, - xkey: 'date', - ykeys: ['rx', 'tx'], - labels: [_t['receive']+' '+datasizeunits.toUpperCase(), - _t['send']+' '+datasizeunits.toUpperCase()] - }); - - return barchart; - } - - /** - * Create a jquery bootstrap datatable. - */ - function CreateDataTable(placeholder, timeunits) { - $("#"+placeholder).append(''+ - '
daterxtx
'); - } - - /** - * Figure out which tab is selected and remove all existing charts and then - * construct the proper barchart. - */ - function ShowBandwidthChartHandler(e) { - // Remove all morrisjs charts - $('#divChartBandwidthhourly').empty(); - $('#divChartBandwidthdaily').empty(); - $('#divChartBandwidthmonthly').empty(); - // Remove all datatables - $('#divTableBandwidthhourly').empty(); - $('#divTableBandwidthdaily').empty(); - $('#divTableBandwidthmonthly').empty(); - // Construct ajax uri for getting the proper data. - var timeunit = $('ul#tabbarBandwidth li.active a').attr('href').substr(1); - var uri = 'ajax/bandwidth/get_bandwidth.php?'; - uri += 'inet='; - uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text()); - uri += '&tu='; - uri += encodeURIComponent(timeunit.substr(0, 1)); - var datasizeunits = 'mb'; - uri += '&dsu='+encodeURIComponent(datasizeunits); - // Init. chart - var barchart = CreateBarChart('divChartBandwidth'+timeunit, datasizeunits); - // Init. datatable html - var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit); - // Get data for chart - $.ajax({ - url: uri, - dataType: 'json', - beforeSend: function() { - $('#divLoaderBandwidth'+timeunit).removeClass('hidden'); + /** + * Create a Chart.js barchart. + */ + function CreateChart(ctx, labels) { + var barchart = new Chart(ctx,{ + type: 'line', + options: { + responsive: true, + scales: { + xAxes: [{ + scaleLabel: { + display: true, + labelString: 'date', + }, + ticks: { + maxRotation: 90, + minRotation: 80 } - }).done(function(jsondata) { - $('#divLoaderBandwidth'+timeunit).addClass('hidden'); - barchart.setData(jsondata); - $('#tableBandwidth'+timeunit).DataTable({ - 'searching': false, - 'paging': false, - 'data': jsondata, - 'order': [[ 0, 'ASC' ]], - 'columns': [ - { 'data': 'date' }, - { 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }, - { 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }] - }); - }).fail(function(xhr, textStatus) { - if (window.console) { - console.error('server error'); - } else { - alert("server error"); + }], + yAxes: [{ + id: 'y-axis-1', + type: 'linear', + display: true, + position: 'left', + //},{ + // id: 'y-axis-2', + // type: 'linear', + // display: true, + // position: 'right', + ticks: { + beginAtZero: true } - }); - } - - $(document).ready(function() { - $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); - $('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler); - $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); - $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); - ShowBandwidthChartHandler(); + }] + } + }, + data: { + labels: labels, + datasets: [] + } }); + return barchart; + } + + /** + * Create a jquery bootstrap datatable. + */ + function CreateDataTable(placeholder, timeunits) { + $("#"+placeholder).append(''+ + '
daterxtx
'); + } + + /** + * Figure out which tab is selected and remove all existing charts and then + * construct the proper barchart. + */ + function ShowBandwidthChartHandler(e) { + // Remove all chartjs charts + $('#divChartBandwidthhourly').empty(); + $('#divChartBandwidthdaily').empty(); + $('#divChartBandwidthmonthly').empty(); + // Remove all datatables + $('#divTableBandwidthhourly').empty(); + $('#divTableBandwidthdaily').empty(); + $('#divTableBandwidthmonthly').empty(); + // Construct ajax uri for getting the proper data. + var timeunit = $('ul#tabbarBandwidth li.nav-item a.nav-link.active').attr('href').substr(1); + var uri = 'ajax/bandwidth/get_bandwidth.php?'; + uri += 'inet='; + uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text()); + uri += '&tu='; + uri += encodeURIComponent(timeunit.substr(0, 1)); + var datasizeunits = 'mb'; + uri += '&dsu='+encodeURIComponent(datasizeunits); + // Init. datatable html + var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit); + // Get data for chart + $.ajax({ + url: uri, + dataType: 'json', + beforeSend: function() { + $('#divLoaderBandwidth'+timeunit).show(); + } + }).done(function(jsondata) { + $('#divLoaderBandwidth'+timeunit).hide(); + // Map json values to label array + var labels = jsondata.map(function(e) { + return e.date; + }); + // Init. chart with label series + var barchart = CreateChart('divChartBandwidth'+timeunit, labels); + var dataRx = jsondata.map(function(e) { + return e.rx; + }); + var dataTx = jsondata.map(function(e) { + return e.tx; + }); + + addData(barchart, dataRx, dataTx, datasizeunits); + $('#tableBandwidth'+timeunit).DataTable({ + 'searching': false, + 'paging': false, + 'data': jsondata, + 'order': [[ 0, 'ASC' ]], + 'columns': [ + { 'data': 'date' }, + { 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }, + { 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }] + }); + }).fail(function(xhr, textStatus) { + if (window.console) { + console.error('server error'); + } else { + alert("server error"); + } + }); + } + /** + * Add data array to datasets of current chart. + */ + function addData(chart, dataRx, dataTx, datasizeunits) { + chart.data.datasets.push({ + label: 'Receive'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'rgba(75, 192, 192, 0.2)', + data: dataRx + }); + chart.data.datasets.push({ + label: 'Send'+' '+datasizeunits.toUpperCase(), + yAxisID: 'y-axis-1', + borderColor: 'rgba(192, 192, 192, 1)', + backgroundColor: 'rgba(192, 192, 192, 0.2)', + data: dataTx + }); + chart.update(); + } + + $(document).ready(function() { + $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); + $('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler); + $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); + $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); + ShowBandwidthChartHandler(); + }); + })(jQuery, t); diff --git a/app/js/custom.js b/app/js/custom.js index d056ccdf..2025202f 100644 --- a/app/js/custom.js +++ b/app/js/custom.js @@ -170,7 +170,6 @@ function setCSRFTokenHeader(event, xhr, settings) { function contentLoaded() { pageCurrent = window.location.href.split("?")[1].split("=")[1]; pageCurrent = pageCurrent.replace("#",""); - $('#side-menu').metisMenu(); switch(pageCurrent) { case "network_conf": getAllInterfaces(); @@ -247,43 +246,55 @@ function setCookie(cname, cvalue, exdays) { document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } +function getCookie(cname) { + var regx = new RegExp(cname + "=([^;]+)"); + var value = regx.exec(document.cookie); + return (value != null) ? unescape(value[1]) : null; +} + var themes = { "default": "custom.css", "hackernews" : "hackernews.css", "terminal" : "terminal.css", } -//Loads the correct sidebar on window load, -//collapses the sidebar on window resize. -// Sets the min-height of #page-wrapper to window size +// Toggles the sidebar navigation. +// Overrides the default SB Admin 2 behavior +$("#sidebarToggleTopbar").on('click', function(e) { + $("body").toggleClass("sidebar-toggled"); + $(".sidebar").toggleClass("toggled d-none"); +}); + +// Overrides SB Admin 2 +$("#sidebarToggle, #sidebarToggleTop").on('click', function(e) { + var toggled = $(".sidebar").hasClass("toggled"); + // Persist state in cookie + setCookie('sidebarToggled',toggled, 90); +}); + $(function() { - $(window).bind("load resize", function() { - topOffset = 50; - width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width; - if (width < 768) { - $('div.navbar-collapse').addClass('collapse'); - topOffset = 100; // 2-row-menu - } else { - $('div.navbar-collapse').removeClass('collapse'); - } - - height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1; - height = height - topOffset; - if (height < 1) height = 1; - if (height > topOffset) { - $("#page-wrapper").css("min-height", (height) + "px"); - } - }); - - var url = window.location; - var element = $('ul.nav a').filter(function() { - return this.href == url || url.href.indexOf(this.href) == 0; - }).addClass('active').parent().parent().addClass('in').parent(); - if (element.is('li')) { - element.addClass('active'); + if ($(window).width() < 768) { + $('.sidebar').addClass('toggled'); + setCookie('sidebarToggled',false, 90); } }); +$(window).on("load resize",function(e) { + if ($(window).width() > 768) { + $('.sidebar').removeClass('d-none d-md-block'); + if (getCookie('sidebarToggled') == 'false') { + $('.sidebar').removeClass('toggled'); + } + } +}); + +// Adds active class to current nav-item +$(window).bind("load", function() { + var url = window.location; + $('ul.navbar-nav a').filter(function() { + return this.href == url; + }).parent().addClass('active'); +}); $(document) .ajaxSend(setCSRFTokenHeader) diff --git a/app/js/linkquality.js b/app/js/linkquality.js new file mode 100644 index 00000000..6835baa2 --- /dev/null +++ b/app/js/linkquality.js @@ -0,0 +1,86 @@ +// Link quality gauge for ChartJS +// console.log(linkQ); + +// Support for dark terminal theme +theme = getCookie('theme'); +if (theme == 'terminal.css') { + var bgColor1 = '#000'; + var bgColor2 = '#000'; + var borderColor = 'rgba(46, 230, 0, 1)'; + var labelColor = 'rgba(46, 230, 0, 1)'; +} else { + var bgColor1 = '#d4edda'; + var bgColor2 = '#eaecf4'; + var borderColor = 'rgba(147, 210, 162, 1)'; + var labelColor = 'rgba(130, 130, 130, 1)'; +} + +let data1 = { + datasets: [{ + data: [linkQ, 100-linkQ], + backgroundColor: [bgColor1, bgColor2], + borderColor: borderColor, + }], +}; + +let config = { + type: 'doughnut', + data: data1, + options: { + responsive: true, + tooltips: {enabled: false}, + hover: {mode: null}, + legend: { + display: false, + }, + rotation: (2/3)*Math.PI,//2+(1/3), + circumference: (1+(2/3)) * Math.PI, // * Math.PI, + cutoutPercentage: 80, + animation: { + animateScale: false, + animateRotate: true + }, + tooltips: { + enabled: false + } + }, + centerText: { + display: true, + text: linkQ + "%" + } +}; + +Chart.Chart.pluginService.register({ + beforeDraw: function(chart) { + if (chart.config.centerText.display !== null && + typeof chart.config.centerText.display !== 'undefined' && + chart.config.centerText.display) { + drawLinkQ(chart); + } + } +}); + +function drawLinkQ(chart) { + + let width = chart.chart.width; + let height = chart.chart.height; + let ctx = chart.chart.ctx; + + ctx.restore(); + let fontSize = (height / 100).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.fillStyle = labelColor; + ctx.textBaseline = "middle"; + + let text = chart.config.centerText.text; + let textX = Math.round((width - ctx.measureText(text).width) * 0.5); + let textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); +} + +window.onload = function() { + let ctx = document.getElementById("canvas").getContext("2d"); + window.myDoughnut = new Chart(ctx, config); +}; + diff --git a/app/lib/system.php b/app/lib/system.php index 5e6399ac..e7007d0a 100644 --- a/app/lib/system.php +++ b/app/lib/system.php @@ -43,6 +43,7 @@ class System { } public function systemLoadPercentage() { - return floor(($this->loadAvg1Min() * 100) / $this->processorCount()); + return intval(($this->loadAvg1Min() * 100) / $this->processorCount()); } -} \ No newline at end of file +} + diff --git a/dist/bootstrap-toggle/Gruntfile.js b/dist/bootstrap-toggle/Gruntfile.js deleted file mode 100644 index 9ac6fc52..00000000 --- a/dist/bootstrap-toggle/Gruntfile.js +++ /dev/null @@ -1,37 +0,0 @@ -module.exports = function(grunt) { - 'use strict'; - - grunt.initConfig({ - clean: ['dist'], - uglify: { - options: { - preserveComments: 'some', - sourceMap: true - }, - build: { - expand: true, - cwd: 'js', - src: ['**/*.js', ['!**/*.min.js']], - dest: 'js', - ext: '.min.js', - } - }, - cssmin: { - options: { - keepBreaks: true - }, - build: { - expand: true, - cwd: 'css', - src: ['**/*.css', ['!**/*.min.css']], - dest: 'css', - ext: '.min.css', - } - } - }); - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.registerTask('default', ['clean', 'uglify', 'cssmin']); - -}; \ No newline at end of file diff --git a/dist/bootstrap-toggle/README.md b/dist/bootstrap-toggle/README.md deleted file mode 100644 index f9c0dcd4..00000000 --- a/dist/bootstrap-toggle/README.md +++ /dev/null @@ -1,175 +0,0 @@ -# Bootstrap Toggle -Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles. - -Visit http://www.bootstraptoggle.com for demos. - -## Getting Started - -### Installation -You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library. - -`Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead. - -```html - - -``` - -### Bower Install -```bash -bower install bootstrap-toggle -``` - -## Usage - -### Basic example -Simply add `data-toggle="toggle"` to convert checkboxes into toggles. - -```html - -``` - -### Stacked checkboxes -Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles. - -```html -
- -
-
- -
-``` - -### Inline Checkboxes -Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles. - -```html - - - -``` - -## API - -### Initialize by JavaScript -Initialize toggles with id `toggle-one` with a single line of JavaScript. - -```html - - -``` - -### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`. - -```html - - - -``` - -Name|Type|Default|Description| ----|---|---|--- -on|string/html|"On"|Text of the on toggle -off|string/html|"Off"|Text of the off toggle -size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`. -onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger` -offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger` -style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. -width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated. -height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated. - -### Methods -Methods can be used to control toggles directly. - -```html - -``` - -Method|Example|Description ----|---|--- -initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options -destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle -on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state -off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state -toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle -enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle -disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle - -## Events - -### Event Propagation -Note All events are propagated to and from input element to the toggle. - -You should listen to events from the `` directly rather than look for custom events. - -```html - -
- -``` - -### API vs Input -This also means that using the API or Input to trigger events will work both ways. - -```html - - - - - - -``` - -### Integration - -#### [KnockoutJS](http://knockoutjs.com) - -A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle) - -## Demos - -Visit http://www.bootstraptoggle.com for demos. diff --git a/dist/bootstrap-toggle/bower.json b/dist/bootstrap-toggle/bower.json deleted file mode 100644 index 9d941dff..00000000 --- a/dist/bootstrap-toggle/bower.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "bootstrap-toggle", - "description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles", - "version": "2.2.1", - "keywords": [ - "bootstrap", - "toggle", - "bootstrap-toggle", - "switch", - "bootstrap-switch" - ], - "homepage": "http://www.bootstraptoggle.com", - "repository": { - "type": "git", - "url": "https://github.com/minhur/bootstrap-toggle.git" - }, - "license": "MIT", - "authors": [ - "Min Hur " - ], - "main": [ - "./js/bootstrap-toggle.min.js", - "./css/bootstrap-toggle.min.css" - ], - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/dist/bootstrap-toggle/css/bootstrap-toggle.css b/dist/bootstrap-toggle/css/bootstrap-toggle.css deleted file mode 100644 index 057d08b3..00000000 --- a/dist/bootstrap-toggle/css/bootstrap-toggle.css +++ /dev/null @@ -1,83 +0,0 @@ -/*! ======================================================================== - * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 - * http://www.bootstraptoggle.com - * ======================================================================== - * Copyright 2014 Min Hur, The New York Times Company - * Licensed under MIT - * ======================================================================== */ - - -.checkbox label .toggle, -.checkbox-inline .toggle { - margin-left: -20px; - margin-right: 5px; -} - -.toggle { - position: relative; - overflow: hidden; -} -.toggle input[type="checkbox"] { - display: none; -} -.toggle-group { - position: absolute; - width: 200%; - top: 0; - bottom: 0; - left: 0; - transition: left 0.35s; - -webkit-transition: left 0.35s; - -moz-user-select: none; - -webkit-user-select: none; -} -.toggle.off .toggle-group { - left: -100%; -} -.toggle-on { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 50%; - margin: 0; - border: 0; - border-radius: 0; -} -.toggle-off { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - right: 0; - margin: 0; - border: 0; - border-radius: 0; -} -.toggle-handle { - position: relative; - margin: 0 auto; - padding-top: 0px; - padding-bottom: 0px; - height: 100%; - width: 0px; - border-width: 0 1px; -} - -.toggle.btn { min-width: 59px; min-height: 34px; } -.toggle-on.btn { padding-right: 24px; } -.toggle-off.btn { padding-left: 24px; } - -.toggle.btn-lg { min-width: 79px; min-height: 45px; } -.toggle-on.btn-lg { padding-right: 31px; } -.toggle-off.btn-lg { padding-left: 31px; } -.toggle-handle.btn-lg { width: 40px; } - -.toggle.btn-sm { min-width: 50px; min-height: 30px;} -.toggle-on.btn-sm { padding-right: 20px; } -.toggle-off.btn-sm { padding-left: 20px; } - -.toggle.btn-xs { min-width: 35px; min-height: 22px;} -.toggle-on.btn-xs { padding-right: 12px; } -.toggle-off.btn-xs { padding-left: 12px; } - diff --git a/dist/bootstrap-toggle/css/bootstrap-toggle.min.css b/dist/bootstrap-toggle/css/bootstrap-toggle.min.css deleted file mode 100644 index 0d42ed09..00000000 --- a/dist/bootstrap-toggle/css/bootstrap-toggle.min.css +++ /dev/null @@ -1,28 +0,0 @@ -/*! ======================================================================== - * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 - * http://www.bootstraptoggle.com - * ======================================================================== - * Copyright 2014 Min Hur, The New York Times Company - * Licensed under MIT - * ======================================================================== */ -.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px} -.toggle{position:relative;overflow:hidden} -.toggle input[type=checkbox]{display:none} -.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} -.toggle.off .toggle-group{left:-100%} -.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} -.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} -.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} -.toggle.btn{min-width:59px;min-height:34px} -.toggle-on.btn{padding-right:24px} -.toggle-off.btn{padding-left:24px} -.toggle.btn-lg{min-width:79px;min-height:45px} -.toggle-on.btn-lg{padding-right:31px} -.toggle-off.btn-lg{padding-left:31px} -.toggle-handle.btn-lg{width:40px} -.toggle.btn-sm{min-width:50px;min-height:30px} -.toggle-on.btn-sm{padding-right:20px} -.toggle-off.btn-sm{padding-left:20px} -.toggle.btn-xs{min-width:35px;min-height:22px} -.toggle-on.btn-xs{padding-right:12px} -.toggle-off.btn-xs{padding-left:12px} \ No newline at end of file diff --git a/dist/bootstrap-toggle/css/bootstrap2-toggle.css b/dist/bootstrap-toggle/css/bootstrap2-toggle.css deleted file mode 100644 index 3f48927e..00000000 --- a/dist/bootstrap-toggle/css/bootstrap2-toggle.css +++ /dev/null @@ -1,85 +0,0 @@ -/*! ======================================================================== - * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 - * http://www.bootstraptoggle.com - * ======================================================================== - * Copyright 2014 Min Hur, The New York Times Company - * Licensed under MIT - * ======================================================================== */ - - -label.checkbox .toggle, -label.checkbox.inline .toggle { - margin-left: -20px; - margin-right: 5px; -} -.toggle { - min-width: 40px; - height: 20px; - position: relative; - overflow: hidden; -} -.toggle input[type="checkbox"] { - display: none; -} -.toggle-group { - position: absolute; - width: 200%; - top: 0; - bottom: 0; - left: 0; - transition: left 0.35s; - -webkit-transition: left 0.35s; - -moz-user-select: none; - -webkit-user-select: none; -} -.toggle.off .toggle-group { - left: -100%; -} -.toggle-on { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 50%; - margin: 0; - border: 0; - border-radius: 0; -} -.toggle-off { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - right: 0; - margin: 0; - border: 0; - border-radius: 0; -} -.toggle-handle { - position: relative; - margin: 0 auto; - padding-top: 0px; - padding-bottom: 0px; - height: 100%; - width: 0px; - border-width: 0 1px; -} -.toggle-handle.btn-mini { - top: -1px; -} -.toggle.btn { min-width: 30px; } -.toggle-on.btn { padding-right: 24px; } -.toggle-off.btn { padding-left: 24px; } - -.toggle.btn-large { min-width: 40px; } -.toggle-on.btn-large { padding-right: 35px; } -.toggle-off.btn-large { padding-left: 35px; } - -.toggle.btn-small { min-width: 25px; } -.toggle-on.btn-small { padding-right: 20px; } -.toggle-off.btn-small { padding-left: 20px; } - -.toggle.btn-mini { min-width: 20px; } -.toggle-on.btn-mini { padding-right: 12px; } -.toggle-off.btn-mini { padding-left: 12px; } - diff --git a/dist/bootstrap-toggle/css/bootstrap2-toggle.min.css b/dist/bootstrap-toggle/css/bootstrap2-toggle.min.css deleted file mode 100644 index 1509c573..00000000 --- a/dist/bootstrap-toggle/css/bootstrap2-toggle.min.css +++ /dev/null @@ -1,28 +0,0 @@ -/*! ======================================================================== - * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 - * http://www.bootstraptoggle.com - * ======================================================================== - * Copyright 2014 Min Hur, The New York Times Company - * Licensed under MIT - * ======================================================================== */ -label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px} -.toggle{min-width:40px;height:20px;position:relative;overflow:hidden} -.toggle input[type=checkbox]{display:none} -.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} -.toggle.off .toggle-group{left:-100%} -.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} -.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} -.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} -.toggle-handle.btn-mini{top:-1px} -.toggle.btn{min-width:30px} -.toggle-on.btn{padding-right:24px} -.toggle-off.btn{padding-left:24px} -.toggle.btn-large{min-width:40px} -.toggle-on.btn-large{padding-right:35px} -.toggle-off.btn-large{padding-left:35px} -.toggle.btn-small{min-width:25px} -.toggle-on.btn-small{padding-right:20px} -.toggle-off.btn-small{padding-left:20px} -.toggle.btn-mini{min-width:20px} -.toggle-on.btn-mini{padding-right:12px} -.toggle-off.btn-mini{padding-left:12px} \ No newline at end of file diff --git a/dist/bootstrap-toggle/doc/header.png b/dist/bootstrap-toggle/doc/header.png deleted file mode 100644 index eb8d58be..00000000 Binary files a/dist/bootstrap-toggle/doc/header.png and /dev/null differ diff --git a/dist/bootstrap-toggle/doc/nyt.png b/dist/bootstrap-toggle/doc/nyt.png deleted file mode 100644 index 4025f263..00000000 Binary files a/dist/bootstrap-toggle/doc/nyt.png and /dev/null differ diff --git a/dist/bootstrap-toggle/doc/nytdev.svg b/dist/bootstrap-toggle/doc/nytdev.svg deleted file mode 100644 index 39669eeb..00000000 --- a/dist/bootstrap-toggle/doc/nytdev.svg +++ /dev/null @@ -1,239 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dist/bootstrap-toggle/doc/script.js b/dist/bootstrap-toggle/doc/script.js deleted file mode 100644 index 863728ae..00000000 --- a/dist/bootstrap-toggle/doc/script.js +++ /dev/null @@ -1,49 +0,0 @@ -+function ($) { - 'use strict'; - - $('.example:not(.skip)').each(function() { - // fetch & encode html - var html = $('
').text($(this).html()).html() - // find number of space/tabs on first line (minus line break) - var count = html.match(/^(\s+)/)[0].length - 1 - // replace tabs/spaces on each lines with - var regex = new RegExp('\\n\\s{'+count+'}', 'g') - var code = html.replace(regex, '\n').replace(/\t/g, ' ').trim() - // other cleanup - code = code.replace(/=""/g,'') - // add code block to dom - $(this).after( $('').html(code) ) - }); - - $('code.highlight').each(function() { - hljs.highlightBlock(this) - }); - -}(jQuery); - -var Demo = function () {} - -Demo.prototype.init = function(selector) { - $(selector).bootstrapToggle(selector) -} -Demo.prototype.destroy = function(selector) { - $(selector).bootstrapToggle('destroy') -} -Demo.prototype.on = function(selector) { - $(selector).bootstrapToggle('on') -} -Demo.prototype.off = function(selector) { - $(selector).bootstrapToggle('off') -} -Demo.prototype.toggle = function(selector) { - $(selector).bootstrapToggle('toggle') -} -Demo.prototype.enable = function(selector) { - $(selector).bootstrapToggle('enable') -} -Demo.prototype.disable = function(selector) { - $(selector).bootstrapToggle('disable') -} - - -demo = new Demo() diff --git a/dist/bootstrap-toggle/doc/stylesheet.css b/dist/bootstrap-toggle/doc/stylesheet.css deleted file mode 100644 index fe7a444c..00000000 --- a/dist/bootstrap-toggle/doc/stylesheet.css +++ /dev/null @@ -1,112 +0,0 @@ -header, footer { - padding: 20px; - background-image: url('header.png'); - background-size: 256px 256px; -} -footer { - color: #fff; - text-align: center; -} -.nyt-logo { - max-height: 40px; - margin-top: 5px; - margin-right: 5px; -} - -nav.navbar { - margin-bottom: 10px; - background-color: #fff; - border: 0px; - border-radius: 2px; -} -#navbar { - margin: 0px; -} -#navbar .navbar-nav li iframe { - margin-top: 15px; -} -#navbar .navbar-nav li:last-child iframe { - margin-right: 15px; -} - -@media screen and (max-width: 767px) { - #navbar .navbar-nav li iframe { - display: none; - } -} - -.mast-head { - margin: 10px 0; -} -.mast-head h1 { - margin-bottom: 15px; - color: #fff; -} -.mast-head p { - color: #fff; -} - -.mast-links { - padding-top: 10px; -} - -.mast-links > * { - vertical-align: middle; - margin-bottom: 10px; -} - -.mast-links > .btn { - margin-right: 30px; -} -main { - margin: 10px 20px; -} -main .container { - margin-bottom: 40px; -} - -code.hljs { - border: 1px solid #ccc; - padding: 1em; - white-space: pre; - margin-bottom: 10px; -} - -.example { - position: relative; - border: 1px solid #ccc; - padding: 1em 1em 0.5em 1em; - border-radius: 4px 4px 0 0; -} - -.example:after { - content: "Example"; - position: absolute; - top: 0px; - right: 0px; - padding: 3px 7px; - font-size: 12px; - font-weight: bold; - background-color: #f5f5f5; - border: 1px solid #ccc; - color: #9da0a4; - border-radius: 0px 4px 0px 4px; - border-width: 0px 0px 1px 1px; -} - -.example + code.hljs { - border-top: 0; - border-radius: 0px 0px 4px 4px; -} - -.example > * { - margin-bottom: 10px; -} - -.example > div.toggle { - margin-right: 10px; -} - -.table-striped code { - background-color: inherit; -} \ No newline at end of file diff --git a/dist/bootstrap-toggle/index.html b/dist/bootstrap-toggle/index.html deleted file mode 100644 index 3874fa25..00000000 --- a/dist/bootstrap-toggle/index.html +++ /dev/null @@ -1,449 +0,0 @@ - - - - - - - - - - - - - Bootstrap Toggle - - - - - - - - - -
- -
-
-

Bootstrap Toggle

-

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles

-
- - -
-
-
-
- -
-
-

Getting Started

-
-

Installation

-

You can download the latest version of Bootstrap Toggle or use CDN to load the library.

-

Warning If you are using Bootstrap v2.3.2, use bootstrap2-toggle.min.js and bootstrap2-toggle.min.css instead.

- <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> -<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> - -

Bower Install

-

- bower install bootstrap-toggle -
-
-

Usage

-
- -

Basic example

-

Simply add data-toggle="toggle" to convert checkboxes into toggles.

-
- -
- -

Stacked checkboxes

-

Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle" to convert checkboxes into toggles.

-
-
- -
-
- -
-
- -

Inline Checkboxes

-

Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle" to a convert checkboxes into toggles.

-
- - - -
-
- -
-

API

-
- -

Initialize by JavaScript

-

Initialize toggles with id toggle-one with a single line of JavaScript.

-
- - -
- -

Options

-

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".

-
- - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
onstring | html"On"Text of the on toggle
offstring | html"Off"Text of the off toggle
sizestring"normal" - Size of the toggle. Possible values are:large,normal,small,mini
- Refer to Bootstrap Button Sizes documentation for more information. -
onstylestring"primary" - Style of the on toggle.
Possible values are:default,primary,success,info,warning,danger
- Refer to Bootstrap Button Options documentation for more information. -
offstylestring"default" - Style of the off toggle.
Possible values are:default,primary,success,info,warning,danger
- Refer to Bootstrap Button Options documentation for more information. -
stylestring - Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. -
widthintegernull - Sets the width of the toggle. if set to null, width will be calculated. -
heightintegernull - Sets the height of the toggle. if set to null, height will be calculated. -
-
- -

Methods

-

Methods can be used to control toggles directly.

-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodExampleDescriptionDemo
initialize$('#toggle-demo').bootstrapToggle()Initializes the toggle plugin with options
destroy$('#toggle-demo').bootstrapToggle('destroy')Destroys the toggle
on$('#toggle-demo').bootstrapToggle('on')Sets the toggle to 'On' state
off$('#toggle-demo').bootstrapToggle('off')Sets the toggle to 'Off' state
toggle$('#toggle-demo').bootstrapToggle('toggle')Toggles the state of the toggle
enable$('#toggle-demo').bootstrapToggle('enable')Enables the toggle
disable$('#toggle-demo').bootstrapToggle('disable')Disables the toggle
-
-
- - -
-

Events

-
- -

Event Propagation

-

Note All events are propagated to and from input element to the toggle.

-

You should listen to events from the <input type="checkbox"> directly rather than look for custom events.

-
- -
- -
- -

API vs Input

-

This also means that using the API or Input to trigger events will work both ways.

-
- - - - - - -
-
- -
-

Demos

-
- -

Sizes

-

Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.

-
- - - - -
- -

Custom Sizes

-

Bootstrap toggle can handle custom sizes by data-width and data-height options.

-
- - - -
- -

Colors

-

Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.

-
- - - - - - -
- -

Colors Mix

-

You can style on state as well as the off state.

-
- - -
- -

Custom Style

-

Customized styles can be applied as easily.

-
- - - - -
- -

Custom Text

-

The text can be changed easily with attributes or options.

-
- -
- -

Icons/Html Text

-

You can easily add icons or images since html is supported for on/off text.

-
- -
- -

Multiple Lines of Text

-

Toggles with multiple lines will adjust its heights.

-
- -
- -

Animation Speed

-

Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.

-
- - - - -
-
-
- - - - - - - - \ No newline at end of file diff --git a/dist/bootstrap-toggle/js/bootstrap-toggle.js b/dist/bootstrap-toggle/js/bootstrap-toggle.js deleted file mode 100644 index 533914ed..00000000 --- a/dist/bootstrap-toggle/js/bootstrap-toggle.js +++ /dev/null @@ -1,180 +0,0 @@ -/*! ======================================================================== - * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 - * http://www.bootstraptoggle.com - * ======================================================================== - * Copyright 2014 Min Hur, The New York Times Company - * Licensed under MIT - * ======================================================================== */ - - - +function ($) { - 'use strict'; - - // TOGGLE PUBLIC CLASS DEFINITION - // ============================== - - var Toggle = function (element, options) { - this.$element = $(element) - this.options = $.extend({}, this.defaults(), options) - this.render() - } - - Toggle.VERSION = '2.2.0' - - Toggle.DEFAULTS = { - on: 'On', - off: 'Off', - onstyle: 'primary', - offstyle: 'default', - size: 'normal', - style: '', - width: null, - height: null - } - - Toggle.prototype.defaults = function() { - return { - on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, - off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, - onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, - offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, - size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, - style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, - width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, - height: this.$element.attr('data-height') || Toggle.DEFAULTS.height - } - } - - Toggle.prototype.render = function () { - this._onstyle = 'btn-' + this.options.onstyle - this._offstyle = 'btn-' + this.options.offstyle - var size = this.options.size === 'large' ? 'btn-lg' - : this.options.size === 'small' ? 'btn-sm' - : this.options.size === 'mini' ? 'btn-xs' - : '' - var $toggleOn = $('