.gitignore

@@ -1,6 +1,3 @@
-# Local
-.vscode
-
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

Files-API/files_api.py

@@ -1,5 +1,5 @@
 import os
-from flask import Flask, send_from_directory, jsonify, current_app
+from flask import Flask, send_from_directory, jsonify
 from flask_cors import CORS, cross_origin
 
 
@@ -20,8 +20,8 @@ def send_text_file(article):
 @cross_origin(origin="localhost", headers=["Content-Type", "Authorization"])
 def list_files():
     files = list()
-    for filename in os.listdir(os.path.join(current_app.root_path, "articles")):
-        path = os.path.join(current_app.root_path, "articles", filename)
+    for filename in os.listdir("articles"):
+        path = os.path.join("articles", filename)
         if os.path.isfile(path):
             files.append(filename)
     return jsonify(files)

app_template/www/articles.html

@@ -62,10 +62,12 @@
 						for (element of articles) {
 							axios.get(`http://localhost:5000/articles/${element}`)
 								.then(response => {
-									let articlesHeading = document.querySelector("#articles-heading");
-									let articleElm = document.createElement("pre");
-									articleElm.textContent = response.data;
-									articlesHeading.appendChild(articleElm);
+									let articlesHeading = document.querySelector("#articles-heading").parentElement;
+									let articleDiv = document.createElement("button");
+									articleDiv.textContent = response.data;
+
+									articleDiv.classList.add("m-5", "article-content");
+									articlesHeading.appendChild(articleDiv);
 								})
 								.catch(error => console.error(error));
 						}
@@ -121,7 +123,6 @@
 										<div class="core">
 											<i class="icon-columns to-animate-2"></i>
 											<div class="fh5co-post to-animate">
-												<!-- <h3 async onload="fetchArticle();">Articles</h3> -->
 												<h3 id="articles-heading">Articles</h3>
 											</div>
 										</div>

app_template/www/css/main.css

@@ -13,4 +13,30 @@ a img{
     animation-fill-mode: forwards;
     text-decoration: none;
     color: white;
-}
+}
+
+.article-content {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 5px;
+    border: 1px solid #777;
+    max-height: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    content: "";
+    position: relative;
+}
+
+button.article-content {
+    background: none;
+}
+
+.article-content:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: linear-gradient(transparent 150px, white);
+}