HTML development for the proposal overview page

wowfunding/routes.py

@@ -210,7 +210,8 @@ def proposals(status, page, cat):
         proposals = {
             'proposed': Proposal.find_by_args(status=1, limit=10),
             'funding': Proposal.find_by_args(status=2, limit=10),
-            'wip': Proposal.find_by_args(status=3, limit=5)}
+            'wip': Proposal.find_by_args(status=3, limit=10),
+            'completed': Proposal.find_by_args(status=4, limit=10)}
         return make_response(render_template('proposal/overview.html', proposals=proposals))
 
     try:

wowfunding/static/css/wow.css

@@ -136,7 +136,7 @@ body {
 
 .table th, .table td {
     border-top: 1px solid #008926;
-    padding-top: .4rem;
+    padding-top: .3rem;
 }
 
 .table-tilted{
@@ -167,6 +167,15 @@ body {
 .table thead th {
     border-bottom: 1px solid #008926 !important;
     border-top: none;
+    font-size: 14px;
+}
+
+.table tbody td.date {
+    max-width: 100px;
+}
+
+.table tbody td.user {
+    font-size: 14px;
 }
 
 .table tbody td{
@@ -321,7 +330,7 @@ nav .nav-link .active{
 }
 
 #point-wow-left{
-    float: right;
+    display: inline;
 }
 
 @media only screen and (max-width: 600px) {
@@ -551,3 +560,19 @@ ul.b {
   src: local('Roboto'), local('Roboto-Regular'), url(/static/fonts/roboto-7.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+.proposal-overview .table-proposal[data-status="4"] {
+    opacity: 0.4;
+}
+
+.proposal-overview .table-proposal[data-status="4"] thead th {
+    border-bottom: 1px solid #4b4b4b !important;
+}
+
+.proposal-overview .table-proposal[data-status="4"] td {
+    border-top: 1px solid #4b4b4b;
+}
+
+.proposal-overview .table-proposal[data-status="4"], .proposal-overview .table-proposal[data-status="4"] a {
+    color: #4b4b4b;
+}

wowfunding/templates/proposal/macros/navbar.html

@@ -1,4 +1,4 @@
-<div class="col-lg-8" style="padding-bottom: 0px;">
+<div class="col-lg-8" style="padding-bottom: 0px; display:none;">
     <div class="row">
         <div class="form-group" style="text-align: center;">
             <div>

wowfunding/templates/proposal/macros/table.html

@@ -1,8 +1,8 @@
-{% macro proposal_table(title, _proposals) %}
-    <table class="table table-proposal table-hover" style="margin-bottom:6px;">
+{% macro proposal_table(title, status, _proposals) %}
+    <table class="table table-proposal table-hover" data-status="{{ status }}" style="margin-bottom:6px;">
         <thead>
         <tr>
-            <th style="font-size: x-large;">{{title}}</th>
+            <th style="font-size: 20px;">{{title}}</th>
             <th>Username</th>
             <th id="date">Date</th>
             {% if _proposals and _proposals[0].status >= 2 %}
@@ -18,10 +18,10 @@
         <tbody>
             {% for p in _proposals %}
             <tr>
-                <td><b><a href="/proposal/{{ p.id }}">{{ p.headline }}</a></b></td>
-                <td><a href="/user/{{ p.user.username }}">{{ p.user.username }}</a></td>
-                <td id="date"><small>{{ p.date_added.strftime('%Y-%m-%d %H:%M') }}</small></td>
-                <td>
+                <td class="id"><b><a href="/proposal/{{ p.id }}">{{ p.headline }}</a></b></td>
+                <td class="user"><a href="/user/{{ p.user.username }}">{{ p.user.username }}</a></td>
+                <td class="date"><small>{{ p.date_added.strftime('%Y-%m-%d %H:%M') }}</small></td>
+                <td class="funds">
                     <span style="float:right;">
                     {% if p.funds_progress >= 0.1 and p.status >= 2 %}
                         {{p.funds_progress|int}}%

wowfunding/templates/proposal/overview.html

@@ -2,7 +2,7 @@
 {% block content %}
 {% from 'proposal/macros/table.html' import proposal_table %}
 
-<div class="container" style="margin-top:8px;">
+<div class="container proposal-overview" style="margin-top:25px;">
     {% include 'proposal/macros/navbar.html' %}
 
     <div class="row">
@@ -10,23 +10,32 @@
             <div class="row">
                 <div class="col-lg-12">
                     {% if proposals['proposed'] %}
-                        {{ proposal_table(title='Proposals', _proposals=proposals['proposed']) }}
-                        <hr>
+                        {{ proposal_table(title='Proposals', status=1, _proposals=proposals['proposed']) }}
+                        <br>
                     {% endif %}
                 </div>
             </div>
             <div class="row">
                 <div class="col-lg-12">
                     {% if proposals['funding'] %}
-                        {{ proposal_table(title='Funding required', _proposals=proposals['funding']) }}
-                        <hr>
+                        {{ proposal_table(title='Funding required', status=2, _proposals=proposals['funding']) }}
+                        <br>
                     {% endif %}
                 </div>
             </div>
             <div class="row">
                 <div class="col-lg-12">
                     {% if proposals['wip'] %}
-                        {{ proposal_table(title='WIP / Help needed', _proposals=proposals['wip']) }}
+                        {{ proposal_table(title='WIP / Help needed', status=3, _proposals=proposals['wip']) }}
+                        <br>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-12">
+                    {% if proposals['completed'] %}
+                        {{ proposal_table(title='Completed', status=4, _proposals=proposals['completed']) }}
+                        <br>
                     {% endif %}
                 </div>
             </div>

wowfunding/templates/proposal/proposal.html

@@ -9,7 +9,14 @@
         <!-- Post Content Column -->
         <div class="col-lg-12">
             <!-- Title -->
-            <h1 class="mt-4" style="margin-bottom: 0.1rem;">{{ proposal.headline }}</h1>
+            <h1 class="mt-4" style="margin-bottom: 0.1rem;">
+                {{ proposal.headline }}
+
+                <div id="point-wow-left">
+                    <img src="/static/point-left.png" style="margin-left: 10px;width: 60px;">
+                    <span style="color: #fc4dff;font-size: 16px;font-style: italic;font-weight: bold;margin-left: 6px;">wow</span>
+                </div>
+            </h1>
 
             <p>
                 <span style="color:grey;">

wowfunding/templates/proposal/proposals.html

@@ -8,7 +8,7 @@
     <div class="row">
         <div class="col-lg-8">
             {% if proposals %}
-                {{ proposal_table(title='', _proposals=proposals) }}
+                {{ proposal_table(title='', status=status, _proposals=proposals) }}
             {% else %}
                 No proposals here yet.
             {% endif %}