diff --git a/frontend/application/templates/_messages.html b/frontend/application/templates/_messages.html
new file mode 100644
index 0000000000000000000000000000000000000000..fd55a380f4bdf5a1e2c66af4a859cdb5adc3bbf1
--- /dev/null
+++ b/frontend/application/templates/_messages.html
@@ -0,0 +1,11 @@
+<div>
+ {% with messages = get_flashed_messages(with_categories=true) %}
+ {% if messages %}
+ <ul>
+ {% for category, message in messages %}
+ <li class="{{ category }}">{{ message }}</li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ {% endwith %}
+ </div>
\ No newline at end of file
diff --git a/frontend/application/templates/base.html b/frontend/application/templates/base.html
new file mode 100644
index 0000000000000000000000000000000000000000..7e9f5a5de33faa2572c867acf2c53336ab7789b8
--- /dev/null
+++ b/frontend/application/templates/base.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>{% block title %} {% endblock %}</title>
+
+ <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+ <link rel="stylesheet" href="../../static/index.css">
+ <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+ <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+ crossorigin="anonymous">
+
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+ crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+ crossorigin="anonymous"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
+ crossorigin="anonymous"></script>
+ </head>
+ <body>
+ {% block content %}
+ {% endblock %}
+ </body>
+</html>
diff --git a/frontend/application/templates/base_col_1.html b/frontend/application/templates/base_col_1.html
new file mode 100644
index 0000000000000000000000000000000000000000..e8950f06bef7123a0c9625fb72eda31d72e87625
--- /dev/null
+++ b/frontend/application/templates/base_col_1.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block content %}
+{% include 'navbar.html' %}
+{% include '_messages.html' %}
+<div class="container-fluid gedf-wrapper">
+ <div class="row">
+
+ {% include 'sidebar.html' %}
+ {% block pageContent %} {% endblock %}
+ </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/frontend/application/templates/forum/create_post.html b/frontend/application/templates/forum/create_post.html
index 61e419f245b36fab14f15ed82d19dfa9d50c4bdc..dfb2dc8e1d6a531c30aeadcaf1b3480aab1865fa 100644
--- a/frontend/application/templates/forum/create_post.html
+++ b/frontend/application/templates/forum/create_post.html
@@ -1,10 +1,12 @@
{# application/templates/forum/create_post.html #}
+{% extends "base_col_1.html"%}
{% from 'macros.html' import displayField %}
{% block title %}Create Post{% endblock %}
-{% block content %}
+
+{% block pageContent %}
<div>
{% with messages = get_flashed_messages(with_categories=true) %}
@@ -18,8 +20,8 @@
{% endwith %}
</div>
- <h1>{{ page_title }} Post</h1>
-
+<div class="col-md-6 gedf-main">
+ <div class="card gedf-card">
<form class="post__form" action="" method="POST">
{{ displayField(form.title, 'Enter post title') }}
@@ -36,13 +38,17 @@
</select>
{{ displayField(form.content, 'Type content here') }}
- <button class="btn btn--solid post-btn" aria-label="Create" type="submit">CREATE</button>
- <a class="btn btn--cancel" href="{{ url_for('frontend.get_posts') }}">CANCEL</a>
+ <button class="btn btn-primary" aria-label="Create" type="submit">CREATE</button>
+ <a class="btn btn-danger" href="{{ url_for('frontend.get_posts') }}">CANCEL</a>
{{ form.csrf_token }}
- </form>
+ </form>
+ </div>
+</div>
+
+
{{ ckeditor.load(pkg_type="basic") }}
{{ ckeditor.config(name='content') }}
diff --git a/frontend/application/templates/forum/index.html b/frontend/application/templates/forum/index.html
index 36a915db51bfba954a018350d2d571ef2bca5043..50ee35a99b24fd748151fafde250db3a56bf5efe 100644
--- a/frontend/application/templates/forum/index.html
+++ b/frontend/application/templates/forum/index.html
@@ -1,78 +1,96 @@
-<div>
- {% with messages = get_flashed_messages(with_categories=true) %}
- {% if messages %}
- <ul>
- {% for category, message in messages %}
- <li class="{{ category }}">{{ message }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- {% endwith %}
-</div>
-
-<div>
- <h1>
- <a class="btn btn--link" href="{{ url_for('frontend.get_posts') }}">Home</a>
+{% extends "base_col_1.html" %}
+{% block title %} Home Page {% endblock %}
- <a class="btn btn--link" href="{{ url_for('frontend.create_post') }}">New Post</a>
+{% block pageContent%}
- <a class="btn btn--link" href="{{ url_for('frontend.logout') }}">Logout</a>
+<div>
+
+
</div>
- <!-- Categories -->
-
- <section class="index-categories">
- <h1>
-
- <div class="categories">
-
- <ul class="category-menu">
-
- {% for category in categories %}
- <li class="tile__category">
- <a class="btn btn--link" href="{{ url_for('frontend.categories', category=category) }}">{{category}}</a>
- </li>
- {% endfor %}
-
- </ul>
-
- </div>
-
- </section>
-
- <!-- END -->
-
- <section>
- <h1>
- {{category}}
- </section>
- <!-- Posts -->
- <article class="index-tiles row">
- {% for post in posts %}
-
- <div class="tile tile--wide">
+ <div class="col-md-6 gedf-main">
+ <div class="card gedf-card">
+ <div class="card-header">
+ <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
+ <li class="nav-item">
+ <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Start a discussion</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="images-tab" data-toggle="tab" role="tab" aria-controls="images" aria-selected="false" href="#images">Images</a>
+ </li>
+ </ul>
+ </div>
+ <div class="card-body">
+ <div class="tab-content" id="myTabContent">
+ <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab">
+ <div class="form-group">
+ <label class="sr-only" for="message">post</label>
+ <a class="btn btn--link" href="{{ url_for('frontend.create_post') }}">New Post</a>
+ </div>
+ </div>
+ <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
+ <div class="form-group">
+ <div class="custom-file">
+ <input type="file" class="custom-file-input" id="customFile">
+ <label class="custom-file-label" for="customFile">Upload image</label>
+ </div>
+ </div>
+ <div class="py-4"></div>
+ </div>
+ </div>
- <div class="tile__content">
+ </div>
+ </div>
+ {% for post in posts %}
+ <div class="card gedf-card">
+ <div class="card-header">
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="mr-2">
+ <img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
+ </div>
+ <div class="ml-2">
+ <div class="h5 m-0">@{{ post['user_name']}}</div>
+ <div class="h7 text-muted">{{ post['user_name']}}</div>
+ </div>
+ </div>
+ <div>
+ <div class="dropdown">
+ <button class="btn btn-link dropdown-toggle" type="button" id="gedf-drop1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <i class="fa fa-ellipsis-h"></i>
+ </button>
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="gedf-drop1">
+ <div class="h6 dropdown-header">Configuration</div>
+ <a class="dropdown-item" href="#">Save</a>
+ <a class="dropdown-item" href="#">Hide</a>
+ <a class="dropdown-item" href="#">Report</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="card-body">
+ <div class="text-muted h7 mb-2"> <i class="fa fa-clock-o"></i>{{ post['date_added']}}</div>
+ <a class="card-link" href="{{ url_for('frontend.display_post', post_id=post.id) }}">
+ <h5 class="card-title">{{ post['title'] }}</h5>
+ </a>
+ <p class="card-text">{{ post.content | safe }}</p>
+ </div>
+ <div class="card-footer">
+ <a href="#" class="card-link"><i class="fa fa-comment"></i> Comment</a>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
- <header class="tile__header">
- <h2 class="tile__title"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h2>
- <span class="tile__username">{{ post['user_name']}}</span>
- <span class="tile__date">{{ post['date_added']}}</span>
- </header>
- <div class="tile__text">
- <p>{{ post.content | safe }}</p>
- </div>
+{% endblock %}
- </div>
- </div>
+
- {% endfor %}
- </article>
- <!-- END -->
\ No newline at end of file
diff --git a/frontend/application/templates/navbar.html b/frontend/application/templates/navbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..dc8f552f6c984970299ce8638577084a18140ffb
--- /dev/null
+++ b/frontend/application/templates/navbar.html
@@ -0,0 +1,10 @@
+<nav class="navbar navbar-light bg-white">
+ <div class="container-fluid">
+ <ul class="nav navbar-nav">
+ <li><a href="{{ url_for('frontend.get_posts') }}" class="navbar-brand">SurreySocial</a></li>
+ </ul>
+ <ul class="nav navbar-nav pull-right">
+ <li><a class="btn btn--link" href="{{ url_for('frontend.logout') }}">Logout</a></li>
+ </ul>
+ </div>
+</nav>
diff --git a/frontend/application/templates/sidebar.html b/frontend/application/templates/sidebar.html
new file mode 100644
index 0000000000000000000000000000000000000000..4bf76b655a7043767a5558bf9da180d11384a11f
--- /dev/null
+++ b/frontend/application/templates/sidebar.html
@@ -0,0 +1,23 @@
+<div class="col-md-3">
+ <div class="card">
+ <div class="card-body">
+ <div class="h5">{{user['result'].full_name}}</div>
+ <div class="h7 text-muted">{{user['result'].email}}</div>
+ <div class="h7">{{user['result'].user_role}} at University of Surrey
+ </div>
+ </div>
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">
+ <div class="h6 text-muted">Categories</div>
+ <ul class="category-menu">
+ <p class="title__category">{{category}}</p>
+ {% for category in categories %}
+ <li class="tile__category">
+ <a class="btn btn--link" href="{{ url_for('frontend.categories', category=category) }}">{{category}}</a>
+ </li>
+ {% endfor %}
+ </ul>
+ </li>
+ </ul>
+ </div>
+</div>
\ No newline at end of file