diff --git a/opentech/apply/dashboard/tables.py b/opentech/apply/dashboard/tables.py
index 25c1b9f85a5cf9aba130de6e60df138c97464116..f5ddc660b0ea77843717d31046bcda79f6c010c0 100644
--- a/opentech/apply/dashboard/tables.py
+++ b/opentech/apply/dashboard/tables.py
@@ -1,3 +1,4 @@
+from django.utils.text import mark_safe
from django.contrib.auth import get_user_model
import django_filters as filters
@@ -28,6 +29,9 @@ class DashboardTable(tables.Table):
def render_user(self, value):
return value.get_full_name()
+ def render_status_name(self, value):
+ return mark_safe(f'<span>{ value }</span>')
+
def get_used_rounds(request):
return Round.objects.filter(submissions__isnull=False).distinct()
diff --git a/opentech/apply/dashboard/templates/dashboard/dashboard.html b/opentech/apply/dashboard/templates/dashboard/dashboard.html
index 405bca867dc2a02120071dcb1e3c89977b8dc62b..dcf02671f7455826f4747fb3db402123c2b6f9bb 100644
--- a/opentech/apply/dashboard/templates/dashboard/dashboard.html
+++ b/opentech/apply/dashboard/templates/dashboard/dashboard.html
@@ -1,18 +1,13 @@
{% extends "base-apply.html" %}
{% load render_table from django_tables2 %}
-
-{% block extra_css %}
- {# To remove after the demo and we have some style #}
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
-{% endblock %}
-
+{% block title %}OTF Dashboard{% endblock %}
{% block content %}
-<div class="wrapper wrapper--breakout wrapper--admin">
- <div class="wrapper wrapper--medium">
- <h3>Received Content</h3>
- <h5>Track and explore recent submissions</h5>
+ <div class="wrapper wrapper--breakout wrapper--admin">
+ <div class="wrapper wrapper--large">
+ <h3>Received submissions</h3>
+ <h5>Track and explore recent submissions</h5>
+ </div>
</div>
-</div>
<div class="wrapper wrapper--medium wrapper--top-bottom-inner-space">
{% if filter %}
@@ -23,6 +18,7 @@
{% endif %}
{% render_table table %}
</div>
+
{% endblock %}
{% block extra_js %}
diff --git a/opentech/apply/dashboard/templates/dashboard/tables/table.html b/opentech/apply/dashboard/templates/dashboard/tables/table.html
index 6ff5e60321ee8084988b7726392a5c40e4ab3dcf..49e9c41a1f8093cebb452a68e321a11eb78d72aa 100644
--- a/opentech/apply/dashboard/templates/dashboard/tables/table.html
+++ b/opentech/apply/dashboard/templates/dashboard/tables/table.html
@@ -1,5 +1,4 @@
-{% extends 'django_tables2/semantic.html' %}
-{# Change back to after demo: extends 'django_tables2/table.html' #}
+{% extends 'django_tables2/table.html' %}
{# example of how to extend the table template #}
{% block table.tbody.row %}
diff --git a/opentech/static_src/src/sass/apply/abstracts/_functions.scss b/opentech/static_src/src/sass/apply/abstracts/_functions.scss
new file mode 100644
index 0000000000000000000000000000000000000000..33cdc75e5a4e53f7930dc9595cf36d77fd83b903
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/abstracts/_functions.scss
@@ -0,0 +1,26 @@
+// Returns the opposite direction of each direction in a list
+// @param {List} $directions - List of initial directions
+// @return {List} - List of opposite directions
+@function opposite-direction($directions) {
+ $opposite-directions: ();
+ $direction-map: (
+ 'top': 'bottom',
+ 'right': 'left',
+ 'bottom': 'top',
+ 'left': 'right',
+ 'center': 'center',
+ 'ltr': 'rtl',
+ 'rtl': 'ltr'
+ );
+
+ @each $direction in $directions {
+ $direction: to-lower-case($direction);
+
+ @if map-has-key($direction-map, $direction) {
+ $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
+ } @else {
+ @warn 'No opposite direction can be found for `#{$direction}`. Direction omitted.';
+ }
+ }
+ @return $opposite-directions;
+}
diff --git a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
index 077351637d705d5ddaba5719f2080731e8b79c65..8ce5a38b932952fa732ac1bc26f2a5bde95d9c55 100755
--- a/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_mixins.scss
@@ -126,3 +126,29 @@
font-size: $responsive;
}
+
+// Triangle mixin
+// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
+// @param {Color} $color [currentcolor] - Triangle color
+// @param {Length} $size [1em] - Triangle size
+@mixin triangle($direction, $color: currentcolor, $size: 1em) {
+ @if not index(top right bottom left, $direction) {
+ @error 'Direction must be either `top`, `right`, `bottom` or `left`.';
+ }
+
+ width: 0;
+ height: 0;
+ content: '';
+ border-#{opposite-direction($direction)}: ($size * 1.5) solid $color;
+
+ $perpendicular-borders: $size solid transparent;
+
+ @if $direction == top or $direction == bottom {
+ border-right: $perpendicular-borders;
+ border-left: $perpendicular-borders;
+ } @else if $direction == right or $direction == left {
+ border-top: $perpendicular-borders;
+ border-bottom: $perpendicular-borders;
+ }
+ }
+
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 3b9e796a9e93a1627116d394a75f15b272776939..4627dffb84df838b295f8b3b9f301660025ca548 100755
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -1,9 +1,11 @@
// Default
$color--white: #fff;
$color--black: #141414;
-$color--dark-grey: #404041;
$color--light-grey: #f7f7f7;
+$color--light-mid-grey: #e8e8e8;
$color--mid-grey: #cfcfcf;
+$color--mid-dark-grey: #919191;
+$color--dark-grey: #404041;
// Brand
$color--light-blue: #43bbf1;
@@ -16,12 +18,16 @@ $color--light-pink: #ffe1df;
$color--tomato: #f05e54;
$color--mint: #40c2ad;
+$color--sky-blue: #e7f2f6;
+$color--marine: #177da8;
+
// Social
$color--twitter: #1da6f6;
$color--linkedin: #137ab8;
$color--facebook: #396ab5;
// Transparent
+$color--black-50: rgba(0, 0, 0, 0.5);
$color--black-10: rgba(0, 0, 0, 0.1);
// Assignment
@@ -62,6 +68,7 @@ $wrapper--small: 790px;
$breakpoints: (
'mob-portrait' '(min-width: 320px)',
'mob-landscape' '(min-width: 480px)',
+ 'small-tablet' '(min-width: 600px)',
'tablet-portrait' '(min-width: 768px)',
'tablet-landscape' '(min-width: 1024px)',
'desktop' '(min-width: 1280px)',
diff --git a/opentech/static_src/src/sass/apply/base/_typography.scss b/opentech/static_src/src/sass/apply/base/_typography.scss
index e0aeff91b2984e7783f06f93e317b0ff16e0f412..e897ac69d770e9430a5d14a7e8f6bb484ad0b368 100755
--- a/opentech/static_src/src/sass/apply/base/_typography.scss
+++ b/opentech/static_src/src/sass/apply/base/_typography.scss
@@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6,
html,
.body-text {
- @include responsive-font-sizes(16px, 19px);
+ font-size: 16px;
}
// Default sizes
diff --git a/opentech/static_src/src/sass/apply/components/_pagination.scss b/opentech/static_src/src/sass/apply/components/_pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..67f49b2b5d024e8ed9be3f92e2ba5bdb5af8892d
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_pagination.scss
@@ -0,0 +1,47 @@
+.pagination {
+ @extend %h6;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 30px;
+
+ .cardinality {
+ margin: 0 10px;
+ }
+
+ .previous,
+ .next {
+ a {
+ position: relative;
+ display: block;
+ width: 55px;
+ height: 55px;
+ font-size: 0;
+ color: $color--white;
+ background: $color--white;
+ border: 1px solid $color--mid-grey;
+
+ &::after {
+ position: absolute;;
+ top: 18.5px;
+ left: 22.5px;
+ }
+ }
+ }
+
+ .previous {
+ a {
+ &::after {
+ @include triangle(left, $color--primary, 7px);
+ }
+ }
+ }
+
+ .next {
+ a {
+ &::after {
+ @include triangle(right, $color--primary, 7px);
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_table.scss b/opentech/static_src/src/sass/apply/components/_table.scss
new file mode 100644
index 0000000000000000000000000000000000000000..176e03d9af96388fe2c68eb09c7020e7cad50b87
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_table.scss
@@ -0,0 +1,131 @@
+$table-breakpoint: 'small-tablet';
+
+table {
+ width: 100%;
+ background-color: $color--white;
+ border-collapse: collapse;
+ table-layout: fixed;
+
+ thead {
+ display: none;
+
+ @include media-query($table-breakpoint) {
+ display: table-header-group;
+ }
+
+ tr {
+ &:hover {
+ box-shadow: none;
+ }
+ }
+ }
+
+ tr {
+ border: 1px solid $color--light-mid-grey;
+ transition: box-shadow 0.15s ease;
+
+ @include media-query($table-breakpoint) {
+ border-top: 0;
+ border-right: 0;
+ border-bottom: 2px solid $color--light-grey;
+ border-left: 0;
+
+ &:hover {
+ box-shadow: 0 6px 35px -13px $color--black-50;
+ }
+ }
+
+ > td {
+ display: block;
+ width: 100%;
+
+
+ @include media-query($table-breakpoint) {
+ display: table-cell;
+ width: initial;
+ height: 90px;
+ }
+
+ &:first-child {
+ padding-top: 20px;
+ }
+
+ &:last-child {
+ padding-bottom: 20px;
+ }
+
+ &.title {
+ font-weight: $weight--bold;
+
+ a {
+ color: $color--primary;
+
+ @include media-query($table-breakpoint) {
+ color: $color--dark-grey;
+ }
+ }
+ }
+
+ &.status_name {
+ span {
+ display: inline-block;
+ padding: 10px;
+ font-size: 13px;
+ font-weight: $weight--bold;
+ color: $color--marine;
+ text-align: center;
+ background-color: $color--sky-blue;
+ }
+ }
+ }
+ }
+
+ td,
+ th {
+ padding: 5px 20px;
+
+ @include media-query($table-breakpoint) {
+ padding: 20px;
+ }
+ }
+
+ th {
+ padding: 20px;
+ font-size: 15px;
+ font-weight: 600;
+ text-align: left;
+
+ a {
+ color: $color--mid-dark-grey;
+ transition: color 0.25s ease-out;
+ }
+
+ &.desc,
+ &.asc {
+ position: relative;
+ color: $color--dark-grey;
+
+ &::after {
+ position: absolute;
+ top: 25px;
+ margin-left: 10px;
+ }
+
+ a {
+ color: inherit;
+ }
+ }
+
+ &.desc {
+ &::after {
+ @include triangle(top, $color--default, 5px);
+ }
+ }
+
+ &.asc {
+ &::after {
+ @include triangle(bottom, $color--default, 5px);
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 81828c292f62a2bf71255a90b84a87f462f2d932..0e5ecb06508d8335ca72d7a6d45bf9c7ab2f9517 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -2,6 +2,7 @@
@import 'vendor/normalize';
// Abstracts
+@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/variables';
@@ -12,6 +13,8 @@
// Components
@import 'components/button';
@import 'components/icon';
+@import 'components/pagination';
+@import 'components/table';
@import 'components/wrapper';
// Layout