Fix doc label length

masks/course.html

@@ -1,6 +1,11 @@
 <div id="course">
 	<div id="docs">
-		<div id="upload_file"><input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple></div>
+		<div id="upload_file">
+			<div class="custom-file">
+				<input type="file" class="custom-file-input" id="fileupload" name="files[]" multiple>
+				<label class="custom-file-label" for="customFile">Choose file</label>
+			</div>
+		</div>
 		<div id="doc_list"></div>
 	</div>
 	<div id="notes_box">
@@ -9,9 +14,11 @@
 	</div>
 </div>
 <div class="template-items">
-	<div class="doc-item btn-group" role="group" aria-label="Basic example">
-		<a class="btn btn-outline-primary btn-labeled shadow-sm" href="" target="_blank"><span class="btn-label"><i class="fal file"></i></span><span class="btn-desc"></span></a>
-		<button type="button" class="delete btn btn-danger"><i class="fal fa-delete"></i></button>
+	<div class="doc-item input-group">
+		<a class="link btn btn-outline-primary btn-labeled shadow-sm form-control" href="" target="_blank"><span class="btn-label"><i class="fal file-icon fa-file-image"></i></span><span class="btn-desc">Programme Acupuncture 1A 2019-2020 CATC CH.pdf</span></a>
+		<div class="input-group-append">
+			<button type="button" class="delete btn btn-danger shadow-sm pdf"><i class="fal fa-delete"></i></button>
+		</div>
 	</div>
 </div>
 <script type="text/javascript">
@@ -75,8 +82,8 @@ function loadDocs() {
 			var $DocList = $('#doc_list').empty();
 			$.each(asData, function(iKey, asDoc){
 				var $Item = oCATC.getTemplateItem('doc-item');
-				$Item.find('.btn').addClass(asDoc.type).attr('href', asDoc.filepath);
-				$Item.find('.file').addClass('fa-file-'+asDoc.type);
+				$Item.find('.link').addClass(asDoc.type).attr('href', asDoc.filepath);
+				$Item.find('.file-icon').addClass('fa-file-'+asDoc.type);
 				$Item.find('.btn-desc').text(asDoc.filename);
 				$Item.find('.delete').data('id', asDoc.id_doc).click(function(){
 					Tools.ajax(

style/_page_course.scss

@@ -2,22 +2,27 @@
 	
 	#docs {
 		position: absolute;
-		top: 0;
+		top: 41.35px;
 		left: 0;
+		bottom: 0;
 		width: calc(30% - 1em);
-		height: 100%;
 		
 		#upload_file {
-			height: 41.35px;
+			margin-bottom: 1em;
 		}
 	
 		#doc_list {
-			height: calc(100% - 41.35px);
-			width: 100%;
 			overflow: auto;
 			
-			.btn {
+			.doc-item {
 				margin-bottom: 1em;
+				
+				.link {
+					text-align: left;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
 			}
 		}
 	}