Fix quill & feedback z-index

inc/catc.php

@@ -91,7 +91,8 @@ class CATC extends Main
 			'index',
 			array(
 				'filepath_css'		=> self::addTimestampToFilePath('style/catc.css'),
-				'filepath_js_catc'	=> self::addTimestampToFilePath('scripts/catc.js')
+				'filepath_js_catc'	=> self::addTimestampToFilePath('scripts/catc.js'),
+				'filepath_js_common'=> self::addTimestampToFilePath('scripts/common.js'),
 			)
 		);
 	}

masks/course.html

@@ -72,8 +72,10 @@ oCATC.pageInit = function(asHash, bFirstPage) {
 			},
 			done: function(e, asData) {
 				$.each(asData.result.files, function(iKey, oFile) {
-					var sMsg = ('error' in oFile)?oFile.error:(oFile.name+" uploaded successfully");
+					var bSuccess = !('error' in oFile);
-					oCATC.feedback('notice', sMsg);
+					var sType = bSuccess?'success':'error';
+					var sMsg = bSuccess?('File "'+oFile.name+'" uploaded successfully'):oFile.error;
+					oCATC.feedback(sType, sMsg);
 				});
 				$('#upload_progress').hide('fast');
 				loadDocs();
@@ -100,7 +102,7 @@ function loadDocs() {
 					Tools.ajax(
 						'delete_doc',
 						(asData) => {
-							oCATC.feedback('notice', 'File "'+asData.filename+'" deleted');
+							oCATC.feedback('success', 'File "'+asData.filename+'" deleted');
 							loadDocs();
 						},
 						{id: $(this).data('id')}

masks/index.html

@@ -8,7 +8,7 @@
 	<script type="text/javascript" src="scripts/bootstrap.bundle.min.js"></script>
 	<script type="text/javascript" src="scripts/jquery.mods.js"></script>
 	<script type="text/javascript" src="scripts/quill.min.js"></script>
-	<script type="text/javascript" src="scripts/common.js"></script>
+	<script type="text/javascript" src="[#]filepath_js_common[#]"></script>
 	<script type="text/javascript" src="[#]filepath_js_catc[#]"></script>
 	<link rel="icon" type="image/png" href="images/favicon.png">
 	<title>CATC Notes</title>

scripts/common.js

@@ -67,12 +67,23 @@ var Tools = {
 	{
 		$Box = $Box || $('#feedback');
 		sMsg = sMsg || '';
-		if(sClass=='error' && typeof sMsg == 'string' && sMsg=='') sMsg = 'Oops ! An unknown error occured';
+		
-		$('<div>', {'class':'alert shadow rounded alert-'+(sClass=='error'?'danger':sClass), role:'alert'})
+		switch(sClass) {
-			.append(sMsg)
+			case 'notice': sClass = 'primary'; break;
+			case 'error': sClass = 'danger'; break;
+		}
+		
+		if(sClass=='danger' && sMsg=='') sMsg = 'Oops ! An unknown error occured';
+		
+		$('<div>', {'class':'alert shadow alert-dismissible fade show alert-'+sClass, role:'alert'})
+			.append($('<i>', {'class':'fal fa-inline fa-'+sClass}))
+			.append(addPunctuation(sMsg))
+			.append($('<button>', {type:'button', 'class':'close', 'data-dismiss':'alert', 'aria-label':'Close'})
+				.append($('<span>', {'aria-hidden':'true'}).appendIcon('close'))
+			)
 			.appendTo($Box)
 			.slideDown('fast')
-			.delay(3000)
+			.delay(5000)
 			.slideUp('fast', function(){$(this).remove();});
 	}
 };
@@ -143,29 +154,6 @@ function getInfo(action, fOnSuccess, vars, fOnError, sType/*, bProcessIcon*/)
 		});
 }
 
-function feedback(sClass, sMsg, $Box)
-{
-	$Box = $Box || $('#feedback');
-	sMsg = sMsg || '';
-	
-	switch(sClass) {
-		case 'notice': sClass = 'primary'; break;
-		case 'error': sClass = 'danger'; break;
-	}
-	
-	if(sClass=='error' && sMsg=='') sMsg = 'Oops ! An unknown error occured';
-	$('<div>', {'class':'alert shadow alert-dismissible fade show alert-'+sClass, role:'alert'})
-		.append($('<i>', {'class':'fal fa-inline fa-'+sClass}))
-		.append(addPunctuation(sMsg))
-		.append($('<button>', {type:'button', 'class':'close', 'data-dismiss':'alert', 'aria-label':'Close'})
-			.append($('<span>', {'aria-hidden':'true'}).appendIcon('close'))
-		)
-		.appendTo($Box)
-		.slideDown('fast')
-		.delay(5000)
-		.slideUp('fast', function(){$(this).remove();});
-};
-
 function addPunctuation(sMsg)
 {
 	var asPunctuations = ['?', '!', '.', ',', ':', ';', '-', '/'];

style/_quill.scss

@@ -14,3 +14,7 @@
 	left: 1.5em;
 	color: $gray-400;
 }
+
+.ql-snow .ql-tooltip {
+	z-index: 10;
+}

style/_template.scss

@@ -89,7 +89,7 @@ a.button:active {
 	position: absolute;
 	bottom: 1em;
 	right: 1em;
-	width: 33%;
+	width: 45%;
 	z-index: 1000;
 }