Uppdaterade index.html, Uppdaterade main.css, Uppdaterade data.py för att...

Uppdaterade index.html, Uppdaterade main.css, Uppdaterade data.py för att ackommodera myFlaskProject.py, Uppdaterade myFlaskProject.py, Lade till ytterligare fejk projekt i data.json.

MyPortfolio/data.json

@@ -61,7 +61,7 @@
   },
   {
     "start_date": "2009-09-06",
-    "short_description": "no",
+    "short_description": "no1",
     "course_name": "HOHO",
     "long_description": "no no no",
     "group_size": 8,
@@ -77,5 +77,43 @@
     "end_date": "2009-09-07",
     "project_id": 4,
     "big_image": "XXX"
+  },
+  {
+    "start_date": "2009-09-06",
+    "short_description": "no2",
+    "course_name": "HOHO",
+    "long_description": "no no no",
+    "group_size": 8,
+    "academic_credits": "WUT?",
+    "lulz_had": "over 9000",
+    "external_link": "YY",
+    "small_image": "X",
+    "techniques_used": [
+
+    ],
+    "project_name": ",",
+    "course_id": " \"",
+    "end_date": "2009-09-07",
+    "project_id": 5,
+    "big_image": "XXX"
+  },
+  {
+    "start_date": "2009-09-06",
+    "short_description": "no3",
+    "course_name": "HOHO",
+    "long_description": "no no no",
+    "group_size": 8,
+    "academic_credits": "WUT?",
+    "lulz_had": "over 9000",
+    "external_link": "YY",
+    "small_image": "X",
+    "techniques_used": [
+
+    ],
+    "project_name": ",",
+    "course_id": " \"",
+    "end_date": "2009-09-07",
+    "project_id": 6,
+    "big_image": "XXX"
   }
 ]

MyPortfolio/data.py

@@ -326,7 +326,7 @@ def menu(data):
 def main():
 
     data = load('MyPortfolio/data.json')
-    #menu(data)
+
 
 
 if __name__ == "__main__":

MyPortfolio/myFlaskProject.py

 from flask import Flask, render_template
+from data import *
 
 app = Flask(__name__,template_folder='./templates')
 
+data = load('data.json')
+
 @app.route("/")
 def index():
-    return render_template('index.html')
\ No newline at end of file
+    return render_template('index.html')
+
+@app.route("/list.html")
+def list():
+    return render_template('list.html',
+                            projects = data)
\ No newline at end of file

MyPortfolio/static/style/main.css

@@ -6,13 +6,16 @@ html, body {
     color: whitesmoke;
     font-family: "Afacad Flux", sans-serif;
     font-optical-sizing: auto;
+
     overflow-x: hidden;
-    overflow-y: hidden;
+    overflow-y: scroll;
     /* SIZING */
     margin:0;
     padding:0;
     height:100%;
     max-width: 100%;
+
+    position: relative;
 }
 
 
@@ -30,6 +33,8 @@ header {
     height: 80px;
     width: 100%;
 
+    position: relative;
+
     display: flex;
     justify-content: center;
 
@@ -64,17 +69,76 @@ header a {
 
 
 
+
+
+
 .content-container {
 
+    position: relative;
+    overflow: auto;
+
     /* STYLING */
     background:rgba(15,15,15,0.9);
 
     /* SIZING */
-    min-height: 60%;
-    padding-bottom: 110px;
+    min-height: 75%;
+    width: 100%;
+}
+
+/* LIST.HTML */
+
+.project-table {
+
+    background:rgba(10,10,10,0.9);
+
+    height: 100vh;
+    width: 120vh;
+
+    margin-left: auto;
+    margin-right: auto;
+
+    display: flex;
+
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: space-evenly;
+    align-content: flex-start;
+
+
+    padding: 10px;
+
+}
+
+.project {
+
+    flex-shrink: 1;
+
+    background:rgba(25,25,25,.1);
+
+    height: 175px;
+    width: 300px;
+
+    margin-top: 50px;
+}
+
+.project-img {
+    height: 50%;
     width: 100%;
 }
 
+.project-title {
+    padding: 0;
+    font-size: large;
+    margin-left: 10px;
+}
+
+.project-desc {
+    font-size: small;
+    margin-left: 10px;
+}
+
+/* INDEX.HTML */
+
 .info-container {
 
     height: 60vh;
@@ -123,6 +187,7 @@ header a {
     resize: none;
 }
 
+/* INDEX.HTML */
 
 
 footer {
@@ -132,15 +197,13 @@ footer {
     /* DEBUG */
 
     /* SIZING */
-    position: relative;
-    right: 0;
+    position: relative; 
+    bottom: 0; 
+    left: 0; 
+    z-index: 10;
 
-    bottom:0;
     width:100%;
-    height:200px;
-
-    margin-right: auto;
-    margin-left: auto;
+    height:16.73%;
 
     display: flex;
     justify-content: space-evenly;

MyPortfolio/templates/index.html

@@ -9,7 +9,7 @@
 <body>
     <header>
         <ul>
-            <li><a href="index.html">Home</a></li>
+            <li><a href="/">Home</a></li>
             <li><a href="techniques.html">Techniques</a></li>
             <li><pre class="logo">
 ██████╗ ██╗ ██████╗
@@ -55,7 +55,7 @@
             <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
         </p>
         <p>Links:<br>
-            <a href="index.html">Home</a><br>
+            <a href="/">Home</a><br>
             <a href="techniques.html">Techniques</a><br>
             <a href="list.html">Projects</a><br>
             <a href="https://github.com/olma957">GitHub</a>

MyPortfolio/templates/list.html

+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="../static/style/main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="techniques.html">Techniques</a></li>
+            <li><pre class="logo">
+██████╗ ██╗ ██████╗
+██╔══██╗██║██╔═══██╗
+██████╔╝██║██║   ██║
+██╔═══╝ ██║██║   ██║
+██║██╗  ██║╚██████╔╝
+╚═╝╚═╝  ╚═╝ ╚═════╝</pre></li>
+            <li><a href="list.html">Projects</a></li>
+            <li><a href="https://github.com/olma957">GitHub</a></li>
+        </ul> 
+    </header>
+
+    <div class="content-container">
+        <div class="project-table">
+
+            {% for p in projects %}
+
+            <div class="project">
+
+
+
+                <img class="project-img" src={{ p['small_image'] }}>
+
+                <p class="project-title"> >{{ p['project_name'] }} </p>
+
+                <p class="project-desc"> {{ p['short_description'] }}</p>
+
+            </div>
+
+            {% endfor %}
+
+        </div>
+    </div>
+
+    <footer>
+        <p>Authors:<br>
+            <a href="mailto:olima957@student.liu.se">Oliwer Mattsson: olima957@student.liu.se</a><br>
+            <a href="mailto:taiku983@student.liu.se">Taif Kurji: taiku983@student.liu.se</a>
+        </p>
+        <p>License:<br>
+            <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
+        </p>
+        <p>Links:<br>
+            <a href="/">Home</a><br>
+            <a href="techniques.html">Techniques</a><br>
+            <a href="list.html">Projects</a><br>
+            <a href="https://github.com/olma957">GitHub</a>
+        </p>
+    </footer>
+</body>
+</html> 
\ No newline at end of file