Merge pull request #18 from NathanWorkman/feature/ui

Cleanup ui

package.json

@@ -8,6 +8,7 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
+    "bootstrap": "^4.0.0",
     "browser-sync": "^2.18.13",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^4.0.0",
@@ -22,6 +23,7 @@
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
     "gulp-watch": "^4.3.11",
+    "jquery": "^3.3.1",
     "node-sass": "^4.5.3"
   }
 }

seeker/gulpfile.js

@@ -40,7 +40,8 @@ gulp.task('css', function() {
 // Scripts
 gulp.task('js', function() {
   return gulp.src([
-    src + 'js/lib/**.js',
+    '../node_modules/jquery/dist/jquery.min.js',
+    '../node_modules/bootstrap/dist/js/bootstrap.bundle.js',
     src + 'js/**.js'
   ])
   .pipe($.plumber({errorHandler: errorAlert}))

seeker/job/models.py

@@ -41,7 +41,7 @@ class Job(models.Model):
 
     class Meta:
         """Order by date published."""
-        ordering = ["-scrape_date"]
+        ordering = ["scrape_date"]
 
     def __str__(self):
         """Set title."""

seeker/job/views.py

@@ -12,4 +12,10 @@ class JobDetailView(DetailView):
 class JobListView(ListView):
     """Job List View."""
     paginate_by = 10
-    queryset = Job.objects.all()
+    model = Job
+
+    def get_context_data(self, *args, **kwargs):
+        context = super(JobListView, self).get_context_data(*args, **kwargs)
+        context['jobs_list'] = Job.objects.all()
+        context['jobs_count'] = Job.objects.all().count()
+        return context

seeker/seeker/static_src/css/base/_base.scss

@@ -0,0 +1,16 @@
+body {
+  font-size: 0.9em;
+}
+
+a {
+  color: $secondary;
+
+  &:hover {
+    color: $grey;
+    text-decoration: none;
+  }
+}
+
+.page{
+  background: $grey-lighter;
+}

seeker/seeker/static_src/css/base/_config.scss

@@ -0,0 +1,17 @@
+// breakpoints
+$large: 1200px;
+$tablet: 768px;
+$mobile: 480px;
+
+// color variables
+$white: #ffffff;
+$grey: #666666;
+$grey-light: #777777;
+$grey-lighter: #ececec;
+$grey-dark: #333333;
+
+$blue: #1A2980;
+$green: #26D0CE;
+
+$primary: $blue;
+$secondary: $green;

seeker/seeker/static_src/css/components/_breadcrumbs.scss

@@ -0,0 +1,14 @@
+.title-container {
+  font-size: .9rem;
+  font-weight: 700;
+  position: relative;
+  margin: 75px 0 30px;
+  padding: 17px;
+  letter-spacing: 1px;
+  color: $white;
+  background-image: linear-gradient(-10deg, $secondary 0, $primary 100%);
+
+  p {
+    margin-bottom: 0;
+  }
+}

seeker/seeker/static_src/css/components/_header.scss

@@ -0,0 +1,136 @@
+.navbar {
+  margin-bottom: 0;
+  padding: 10px 0;
+  background: $white !important;
+  box-shadow: rgba(0, 0, 0, 0.09) 0 0 10px;
+  border: 0;
+}
+.navbar-brand {
+  font-weight: 700;
+  padding: 14px 15px 10px;
+  &:hover {
+    color: $grey-light;
+  }
+}
+.navbar {
+  .navbar-nav > {
+    li > a {
+      font-size: .9rem;
+      color: $grey;
+    }
+    .active > a {
+      color: $grey;
+      background-color: transparent;
+      &:focus, &:hover {
+        color: $grey;
+        background-color: transparent;
+      }
+    }
+    .open > a {
+      color: $grey;
+      background-color: transparent;
+      &:focus, &:hover {
+        color: $grey;
+        background-color: transparent;
+      }
+    }
+  }
+  .navbar-toggle {
+    &:focus, &:hover {
+      background: $white;
+    }
+    border-color: $white;
+  }
+}
+.navbar-nav > li > .dropdown-menu {
+  border-radius: 0;
+}
+.dropdown-menu a {
+  font-size: .9rem;
+  font-weight: 400;
+  line-height: 1.42857143;
+  display: block;
+  clear: both;
+  padding: 9px 20px;
+  white-space: nowrap;
+  color: $grey;
+}
+.navbar-content {
+  width: 320px;
+  padding: 15px 15px 0;
+  img {
+    width: 103px;
+    height: 103px;
+  }
+  a {
+    color: $grey-dark;
+  }
+}
+.navbar-nav {
+  &.mt-2 .dropdown-menu {
+    &:after, &:before {
+      position: absolute;
+      content: '';
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+    }
+  }
+  &.my-2 .dropdown-menu {
+    &:after, &:before {
+      position: absolute;
+      content: '';
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+    }
+  }
+}
+.navbar-content {
+  &:after, &:before {
+    line-height: 0;
+    display: table;
+    content: "";
+  }
+}
+
+.dropdown-menu, .navbar-nav.my-2 .dropdown-menu a {
+  padding: 0;
+}
+.dropdown-item {
+  &.active, &:active {
+    background-color: #eee;
+  }
+}
+.navbar-nav {
+  &.mt-2 .dropdown-menu {
+    &:before {
+      top: -6px;
+      left: 21px;
+      display: inline-block;
+      border-bottom: 7px solid #ccc;
+      border-bottom-color: rgba(0, 0, 0, 0.2);
+    }
+    &:after {
+      top: -5px;
+      left: 21px;
+      display: inline-block;
+      border-bottom: 7px solid $white;
+    }
+  }
+  &.my-2 .dropdown-menu {
+    right: 0;
+    // left: unset;
+    &:before {
+      top: -6px;
+      right: 21px;
+      display: inline-block;
+      border-bottom: 7px solid #ccc;
+      border-bottom-color: rgba(0, 0, 0, 0.2);
+    }
+    &:after {
+      top: -5px;
+      right: 21px !important;
+      display: inline-block;
+      border-bottom: 7px solid $white;
+    }
+  }
+}

seeker/seeker/static_src/css/components/_lists.scss

@@ -0,0 +1,43 @@
+.media-item-total {
+  background: $white;
+  padding: 15px;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.media-item {
+  background: $white;
+  padding: 25px;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+
+  img {
+    width: 60px;
+    height: 60px;
+  }
+
+  h2 {
+    font-size: 1rem;
+    margin-top: 0;
+    margin-bottom: 5px;
+  }
+
+  a {
+    color: $grey-dark;
+  }
+
+  p {
+    font-size: .9rem;
+    a {
+      margin-right: 10px;
+      color: #4bb9e5;
+    }
+    span {
+      color: $grey;
+    }
+  }
+}

seeker/seeker/static_src/css/components/_pagination.scss

@@ -0,0 +1,14 @@
+.pagination {
+  font-size: .9rem;
+	li a {
+    font-weight: 700;
+    color: $secondary;
+    &:hover {
+      color: $grey;
+    }
+  }	
+  .page-item.active .page-link {
+    background-color: $secondary;
+    border-color: $secondary;
+  }
+}

seeker/seeker/static_src/css/style.scss

@@ -1,11 +1,14 @@
-@import 'bootstrap.min';
+// Libs
+@import '../node_modules/bootstrap/dist/css/bootstrap.min';
 
-body {
-    padding-top: 5rem;
-}
+// Config
+@import 'base/config';
 
+// Base Styles
+@import 'base/base';
 
-div {
-	padding: 4px;
-	margin: 10px;
-}
+// Components
+@import 'components/header';
+@import 'components/lists';
+@import 'components/breadcrumbs';
+@import 'components/pagination';