format bar float fix, added upload progess bar

This commit is contained in:
Ro 2022-01-30 13:13:38 -08:00
commit 2d5de69f1c
9 changed files with 47 additions and 8375 deletions

4
.gitignore vendored
View file

@ -44,5 +44,5 @@ config/tags.json
config.codekit3
/config/backups
src/com
src/styles
src/com/
src/styles/

View file

@ -19,9 +19,14 @@
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg>
</div>
<div id="notify-working" class="notify-icon">
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
<svg id="notify-working-icon" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
</div>
<p id="message-text"></p>
<div id="notify-text">
<div id="notify-progress"></div>
<p id="message-text">MESSAGE TEXT</p>
</div>
</div>
</div>
<div id="main-content" class="main-container">

View file

@ -1,7 +1,7 @@
<div id="dash-login">
<div id="dash-form" class="dash-form">
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
<form id="login" class='login' name="login" action="/@/dashboard/login" method="POST">
<form id="login" class='login' name="login" action="/dashboard/login" method="POST">
<input type="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required">
<button id="login-btn" class='login-btn' type='submit'>

View file

@ -32,7 +32,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=cvbupoyn">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=qwert">
{% endblock %}
{% block mainContent %}

View file

@ -14,7 +14,7 @@
<div id="dash-login">
<div id="dash-reset" class="dash-reset">
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
<form id="reset" class='login' name="reset" action="/@/dashboard/login" method="POST">
<form id="reset" class='login' name="reset" action="/dashboard/login" method="POST">
<input type="password" id="new_password"name="new_password" class="form-control" placeholder="New Password" required">
<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">

View file

@ -5,7 +5,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adsfdfdf">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfd">
{% endblock %}
{% block mainContent %}

View file

@ -1941,13 +1941,14 @@ svg.icons {
justify-content: center;
opacity: 1;
transform-style: preserve-3d;
transform: rotateX(-120deg);
transform: rotateX(120deg);
transform-origin: 50% 0;
overflow: hidden;
}
#notifications #notifyMessage #notify-good, #notifications #notifyMessage #notify-lame, #notifications #notifyMessage #notify-working {
display: block;
}
#notifications #notifyMessage #notify-working-box {
#notifications #notifyMessage #notify-working-icon {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
@ -1977,15 +1978,29 @@ svg.icons {
text-align: center;
border: 2px solid #EFEBE3;
}
#notifications #notifyMessage p {
#notifications #notifyMessage #notify-text {
color: #EFEBE3;
background: black;
background: #32302f;
width: 400px;
height: 28px;
padding: 15px 0 0 5px;
padding: 15px 0 0 0;
border-radius: 0 5px 5px 0;
border: 2px solid #EFEBE3;
text-align: center;
overflow: hidden;
position: relative;
}
#notifications #notifyMessage #notify-text #notify-progress {
width: 0;
background: #fc6399;
height: 43px;
position: absolute;
top: 0px;
}
#notifications #notifyMessage #notify-text p {
top: -15px;
display: block;
position: relative;
}
#notifications #notifyMessage .icons {
fill: #EFEBE3;

File diff suppressed because one or more lines are too long

View file

@ -44,10 +44,12 @@ class FipamoAdminAPI {
/**
* @constructor
* @param {string} baseURL - url of site; uses local when empty
* @param {object} progressBar - element to be used to display upload progress
*/
constructor(baseURL = null) {
constructor(baseURL = null, progressBar = null) {
this.percentComplete = 0; //for later
this.baseURL = null;
this.progressBar = progressBar;
this.status = false;
if (baseURL) this.baseURL = baseURL;
//asks server if a session is active
@ -367,7 +369,9 @@ class FipamoAdminAPI {
var self = this;
return new Promise(function (resolve, reject) {
var request = new XMLHttpRequest();
request.upload.onprogress = self.handleLoadProgress;
request.upload.addEventListener("progress", (e) =>
self.handleLoadProgress(e, self.progressBar)
);
request.open(requestType, requestURL, true);
request.onload = () => {
if (request.status == 200) {
@ -416,9 +420,12 @@ class FipamoAdminAPI {
//--------------------------
// event handlers
//--------------------------
handleLoadProgress(e) {
this.percentComplete = Math.ceil((e.loaded / e.total) * 100);
//pass element to display request progress
handleLoadProgress(e, progressBar) {
let percent = Math.ceil((e.loaded / e.total) * 100);
//if a progress bar element is present, talk to it
if (progressBar != null) {
progressBar.style.width = percent + "%";
}
}
}