Merge pull request #1 from maidstone-hackspace/site-styling

Site styling improvments

.gitignore

@@ -1,3 +1,4 @@
 media/*
 .idea/
 __pycache__/
+node_modules

README.org

@@ -46,5 +46,6 @@ docker-compose -f dev.yml run django python manage.py createsuperuser
 If you want to export some data you entered into the admin area you can use =dumpdata= and =loaddata= to export and import.
 
 #+BEGIN_SRC sh
-docker-compose -fdev.yml run django python manage.py dumpdata feeds > mhackspace/feeds/fixtures/default.json
+docker-compose -fdev.yml run django python manage.py dumpdata feeds > mhackspace/feeds/fixtures/defaults.json
+docker-compose -fdev.yml run django python manage.py loaddata mhackspace/feeds/fixtures/defaults.json
 #+END_SRC

dev.yml

@@ -26,7 +26,7 @@ services:
     volumes:
       - .:/app
     ports:
-      - "8180:8000"
+      - "8000:8000"
     links:
       - postgres
       - mailhog

mhackspace/feeds/admin.py

@@ -1,12 +1,13 @@
 from django.contrib import admin
-from django.contrib.admin import AdminSite, TabularInline, ModelAdmin
+from django.contrib.admin import ModelAdmin
 from mhackspace.feeds.models import Feed
 
 
 @admin.register(Feed)
 class FeedAdmin(ModelAdmin):
     list_display = ('url', 'author', 'tags', 'enabled')
+    list_filter = ('enabled', )
 
-admin.site.site_title = 'Maidstone hackspace Admin Area'
+admin.site.site_title = 'Maidstone Hackspace Admin Area'
-admin.site.site_header = 'Maidstone hackspace Admin Area'
+admin.site.site_header = 'Maidstone Hackspace Admin Area'
 admin.site.index_title = 'Maidstone Admin Home'

mhackspace/feeds/fixtures/defaults.json

@@ -1,4 +1,68 @@
-Postgres is up - continuing...
+[
-/usr/local/lib/python3.5/site-packages/environ/environ.py:608: UserWarning: /app/config/settings/.env doesn't exist - if you're not configuring your environment separately, create one.
+  {
-  "environment separately, create one." % env_file)
+    "model": "feeds.feed",
-[{"model": "feeds.feed", "pk": 1, "fields": {"url": "http://waistcoatforensicator.blogspot.com/feeds/posts/default?alt=rss", "author": "Simon Ridley", "tags": "", "image": "", "enabled": true}}, {"model": "feeds.feed", "pk": 2, "fields": {"url": "http://www.matthewbeddow.co.uk/?feed=rss2", "author": "Mathew Beddow", "tags": "tech", "image": "", "enabled": true}}, {"model": "feeds.feed", "pk": 3, "fields": {"url": "http://blog.digitaloctave.co.uk/rss.xml", "author": "Oliver Marks", "tags": "", "image": "", "enabled": true}}, {"model": "feeds.feed", "pk": 4, "fields": {"url": "http://webboggles.com/feed/", "author": "Ilya Titov", "tags": "", "image": "", "enabled": true}}, {"model": "feeds.feed", "pk": 5, "fields": {"url": "http://thearduinoguy.org/?feed=rss2", "author": "Mike McRoberts", "tags": "", "image": "", "enabled": true}}, {"model": "feeds.feed", "pk": 6, "fields": {"url": "https://feeds.feedburner.com/projects-jl", "author": "James", "tags": "", "image": "", "enabled": false}}]
+    "pk": 1,
+    "fields": {
+      "url": "http://waistcoatforensicator.blogspot.com/feeds/posts/default?alt=rss",
+      "author": "Simon Ridley",
+      "tags": "",
+      "image": "",
+      "enabled": true
+    }
+  },
+  {
+    "model": "feeds.feed",
+    "pk": 2,
+    "fields": {
+      "url": "http://www.matthewbeddow.co.uk/?feed=rss2",
+      "author": "Mathew Beddow",
+      "tags": "tech",
+      "image": "",
+      "enabled": true
+    }
+  },
+  {
+    "model": "feeds.feed",
+    "pk": 3,
+    "fields": {
+      "url": "http://blog.digitaloctave.co.uk/rss.xml",
+      "author": "Oliver Marks",
+      "tags": "",
+      "image": "",
+      "enabled": true
+    }
+  },
+  {
+    "model": "feeds.feed",
+    "pk": 4,
+    "fields": {
+      "url": "http://webboggles.com/feed/",
+      "author": "Ilya Titov",
+      "tags": "",
+      "image": "",
+      "enabled": true
+    }
+  },
+  {
+    "model": "feeds.feed",
+    "pk": 5,
+    "fields": {
+      "url": "http://thearduinoguy.org/?feed=rss2",
+      "author": "Mike McRoberts",
+      "tags": "",
+      "image": "",
+      "enabled": true
+    }
+  },
+  {
+    "model": "feeds.feed",
+    "pk": 6,
+    "fields": {
+      "url": "https://feeds.feedburner.com/projects-jl",
+      "author": "James",
+      "tags": "",
+      "image": "",
+      "enabled": false
+    }
+  }
+]

mhackspace/feeds/templatetags/feed_views.py

@@ -17,4 +17,4 @@ def show_feeds():
         })
 
     result = feed_reader(rss_feeds)
-    return {'feeds': [item for item in result]}
+    return {'articles': [item for item in result]}

mhackspace/static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/static/images/mstile-150x150.png"/>
+      <TileColor>#00aba9</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

mhackspace/static/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="114" height="114" viewBox="0 0 114 114"><circle fill="teal" cx="57" cy="57" r="57"/><path fill="#FFF" d="M57 98.5l-13-13 2.2-2.2-15.5-15.5-2.2 2.2-13-13L35 37.5l13 13-4.2 4.2 2.7 2.7 11-11-2.7-2.7-4.1 4.1-13-13L57 15.5l13 13-2.2 2.2 15.5 15.5 2.2-2.2 13 13-19.3 19.3-13-13 4.1-4.1-2.2-2.2-11 11.1 2.2 2.2 4.2-4.2 13 13L57 98.5z"/></svg>

mhackspace/static/images/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="933.333" height="933.333" viewBox="0 0 700.000000 700.000000"><path d="M328.5.6c-20.3 2-27.6 2.8-37.5 4.5-61 10.5-119.5 37.6-166.5 77.2-9.5 8.1-31 29.4-39.4 39.2C38.3 175.7 10.9 239.1 1.8 314c-1.7 13.7-1.7 58.3 0 72 6.9 56.9 22.7 102.8 51.4 149.1 14.5 23.6 31.1 44 52.5 64.9 20.4 20 37.1 33.2 59.2 46.8 46.3 28.7 92.2 44.5 149.1 51.4 13.7 1.7 58.3 1.7 72 0 56.9-6.9 102.8-22.7 149.1-51.4 36-22.2 69.2-52.8 95.8-88.2 32.3-43 54.9-96 64-150.1 3.8-22.3 4.6-32.7 4.6-58.5 0-25.8-.8-36.2-4.6-58.5-10.5-62.7-38.2-121.6-80-170-8.4-9.8-29.9-31.1-39.4-39.2-51.8-43.7-114.8-71-184.5-79.8C379.3 1 337.4-.3 328.5.6zM390 135.5l39.5 39.5-6.3 6.3c-3.4 3.4-6.2 6.7-6.2 7.2 0 1.3 93.2 94.5 94.5 94.5.5 0 3.8-2.8 7.2-6.2l6.3-6.3 39.8 39.8 39.7 39.7-59.3 59.2-59.2 59.3-39.7-39.7-39.8-39.8 12.3-12.3c6.7-6.7 12.2-12.7 12.2-13.2 0-.6-2.8-3.9-6.3-7.3l-6.2-6.2-34 34-34 34 6.8 6.7 6.7 6.8 13-13 13-13 39.5 39.5c21.7 21.7 39.5 40 39.5 40.7 0 1.1-117.8 118.3-119 118.3-.3 0-18.3-17.8-40-39.5L270.5 525l6.3-6.3c3.4-3.4 6.2-6.7 6.2-7.2 0-1.3-93.2-94.5-94.5-94.5-.5 0-3.8 2.8-7.2 6.2l-6.3 6.3-39.8-39.8L95.5 350l59.8-59.7 59.7-59.8 39.7 39.7 39.8 39.8-12.8 12.8-12.7 12.7 8.3 8.3 8.2 8.2 33.8-33.8 33.7-33.7-7.8-7.8c-4.2-4.2-8.2-7.7-8.7-7.7s-6.5 5.5-13.2 12.2L311 293.5l-39.8-39.8-39.7-39.7 59-59c32.4-32.4 59.2-59 59.5-59 .3 0 18.3 17.8 40 39.5z"/></svg>

mhackspace/static/js/project.min.js

@@ -0,0 +1 @@
+$(".form-group").removeClass("row");

mhackspace/static/manifest.json

@@ -0,0 +1,17 @@
+{
+	"name": "Maidstone Hackspace",
+	"icons": [
+		{
+			"src": "\/static\/images\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png"
+		},
+		{
+			"src": "\/static\/images\/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image\/png"
+		}
+	],
+	"theme_color": "#008080",
+	"display": "standalone"
+}

mhackspace/static/sass/_variables.scss

@@ -0,0 +1,6 @@
+$white: #fff;
+$mint-green: #d6e9c6;
+$black: #000;
+$pink: #f2dede;
+$dark-pink: #eed3d7;
+$red: #b94a48;

mhackspace/static/sass/components/_alert.scss

@@ -0,0 +1,13 @@
+// bootstrap alert CSS, translated to the django-standard levels of
+// debug, info, success, warning, error
+.alert-debug {
+  background-color: $white;
+  border-color: $mint-green;
+  color: $black;
+}
+
+.alert-error {
+  background-color: $pink;
+  border-color: $dark-pink;
+  color: $red;
+}

mhackspace/static/sass/components/_footer.scss

@@ -0,0 +1,15 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  margin-bottom: 60px;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: #f5f5f5;
+}

mhackspace/static/sass/components/_header.scss

@@ -0,0 +1,8 @@
+#navbar-logo {
+  width: 48px;
+  height: 48px;
+  transition: transform .8s ease-in-out;
+  &:hover{
+    transform: rotate(360deg);
+  }
+}

mhackspace/static/sass/project.scss

@@ -1,63 +1,10 @@
+@import "node_modules/bootstrap/scss/bootstrap";
 
-// project specific CSS goes here
+@import "variables";
 
-////////////////////////////////
+@import "components/alert";
-		//Variables//
+@import "components/header";
-////////////////////////////////
+@import "components/footer";
-
-// Alert colors
-
-$white: #fff;
-$mint-green: #d6e9c6;
-$black: #000;
-$pink: #f2dede;
-$dark-pink: #eed3d7;
-$red: #b94a48;
-
-////////////////////////////////
-		//Alerts//
-////////////////////////////////
-
-// bootstrap alert CSS, translated to the django-standard levels of
-// debug, info, success, warning, error
-
-.alert-debug {
-  background-color: $white;
-  border-color: $mint-green;
-  color: $black;
-}
-
-.alert-error {
-  background-color: $pink;
-  border-color: $dark-pink;
-  color: $red;
-}
-
-////////////////////////////////
-		//Navbar//
-////////////////////////////////
-
-// This is a fix for the bootstrap4 alpha release
-
-.navbar {
-  border-radius: 0px;
-}
-
-@media (max-width: 47.9em) {
-  .navbar-nav .nav-item {
-    display: inline-block;
-    float: none;
-    width: 100%;
-  }
-
-  .navbar-nav .nav-item + .nav-item {
-    margin-left: 0;
-  }
-
-  .nav.navbar-nav.pull-xs-right {
-    float: none !important;
-  }
-}
 
 ////////////////////////////////
 		//Django Toolbar//

mhackspace/templates/base.html

@@ -1,6 +1,7 @@
-{% load staticfiles i18n compress%}<!DOCTYPE html>
+{% load staticfiles i18n compress %}
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <title>{% block title %}Maidstone Hackspace{% endblock title %}</title>
@@ -12,38 +13,49 @@
   <!--[if lt IE 9]>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
     <![endif]-->
-    <link rel="icon" type="image/png" href="/static/images/favicon.png">
-    {% block css %}
-    <!-- Latest compiled and minified Bootstrap 4 Alpha 4 CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
 
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/apple-touch-icon.png' %}">
+  <link rel="icon" type="image/png" href="{% static 'images/favicon-32x32.png' %}" sizes="32x32">
+  <link rel="icon" type="image/png" href="{% static 'images/favicon-16x16.png' %}" sizes="16x16">
+  <link rel="manifest" href="{% static 'manifest.json' %}">
+  <link rel="mask-icon" href="{% static 'images/safari-pinned-tab.svg' %}" color="#008080">
+  <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
+  <meta name="apple-mobile-web-app-title" content="Maidstone Hackspace">
+  <meta name="application-name" content="Maidstone Hackspace">
+  <meta name="msapplication-config" content="{% static 'browserconfig.xml' %}">
+  <meta name="theme-color" content="#008080">
+
+  {% block css %}
     <!-- Your stuff: Third-party CSS libraries go here -->
-    {% compress css %}
+    {#    { compress css }#}
     <!-- This file stores project-specific CSS -->
     <link href="{% static 'css/project.css' %}" rel="stylesheet">
-    {% endcompress %}
+    {#    { endcompress }#}
   {% endblock %}
-  </head>
+</head>
 
-  <body>
+<body>
-
+<div>
-    <div class="m-b-1">
+  <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4">
-      <a id="mini_logo" href="/login">
+    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
-        <img src="/static/images/hackspace.png" class="mini-logo">
+            data-target="#navbarMainMenu" aria-controls="navbarMainMenu" aria-expanded="false"
-      </a>
+            aria-label="Toggle navigation">
-      <nav class="navbar navbar-dark navbar-static-top bg-inverse">
+      <span class="navbar-toggler-icon"></span>
-        <div class="container">
-          <a class="navbar-brand" href="/">Maidstone Hackspace</a>
-          <button type="button" class="navbar-toggler hidden-sm-up pull-xs-right" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
-            &#9776;
     </button>
+    <a class="navbar-brand" href="/">
+      <img src="{% static 'images/logo.svg' %}" alt="Maidstone Hackspace Logo" id="navbar-logo">
+      Maidstone Hackspace
+    </a>
 
-          <!-- Collect the nav links, forms, and other content for toggling -->
+
-          <div class="collapse navbar-toggleable-xs" id="bs-navbar-collapse-1">
+    <div class="collapse navbar-collapse" id="navbarMainMenu">
-            <ul class="nav navbar-nav">
+      <ul class="navbar-nav mr-auto">
         <li class="nav-item">
           <a class="nav-link" href="{% url 'home' %}">Home</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'about' %}">About</a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" href="{% url 'chat' %}">Chat</a>
         </li>
@@ -56,12 +68,6 @@
         <li class="nav-item">
           <a class="nav-link" href="{% url 'group' %}">Mailing List</a>
         </li>
-              <li class="nav-item">
-                <a class="nav-link" href="{% url 'home' %}">Login</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="{% url 'about' %}">About</a>
-              </li>
       </ul>
 
       <ul class="nav navbar-nav pull-xs-right">
@@ -82,11 +88,10 @@
         {% endif %}
       </ul>
     </div>
-        </div>
   </nav>
-    </div>
+</div>
 
-    <div class="container">
+<div class="container">
 
   {% if messages %}
     {% for message in messages %}
@@ -98,36 +103,29 @@
     <p>Use this document as a way to quick start any new project.</p>
   {% endblock content %}
 
-    </div> <!-- /container -->
+</div>
-    <footer class="footer">
-      <div class="m-b-1 navbar-dark bg-inverse">&nbsp;</div>
-      <div class="container">
-        <div class="row">
-          <div class="col-md-6">
-            <div mailing-list-signup="" class="google-groups-signup">
-              <h3>Signup  and make yourself known</h3>
-              <form class="block" name="signup" method="get" action="https://groups.google.com/group/maidstone-hackspace/boxsubscribe">
-                <label for="groups-email">Email Address</label>
-                <input id="groups-email" name="email" class="required">
-                <button type="submit">Subscribe</button>
-                <a href="http://groups.google.com/group/maidstone-hackspace">View Group</a>
-              </form>
-            </div>
-          </div>
-          <div class="col-md-6">©2016 Maidstone Hackspace</div>
-        </div>
-      </div>
-    </footer>
-    {% block modal %}{% endblock modal %}
 
-    <!-- Le javascript
+<footer class="footer">
-    ================================================== -->
+  <div class="container">
-    <!-- Placed at the end of the document so the pages load faster -->
+    <span class="text-muted">&copy; 2016 Maidstone Hackspace</span>
-    {% block javascript %}
+  </div>
-      <!-- Required by Bootstrap v4 Alpha 4 -->
+</footer>
-      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
+
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
+{% block modal %}{% endblock modal %}
-      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
+
+<!-- Le javascript
+================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+{% block javascript %}
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
+          integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
+          crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
+          integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
+          crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
+          integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
+          crossorigin="anonymous"></script>
 
   <!-- Your stuff: Third-party javascript libraries go here -->
 
@@ -136,7 +134,7 @@
     <script src="{% static 'js/project.js' %}"></script>
   {% endcompress %}
 
-    {% endblock javascript %}
+{% endblock javascript %}
-  </body>
+</body>
 </html>
 

mhackspace/templates/feeds/list.html

@@ -1,22 +1,13 @@
-Maker feed
+<div class="card-columns" id="feeds">
-
+  {% for article in articles %}
-<div class="card-deck-wrapper">
+    <div class="card" style="width: 20rem;">
-  <div class="card-deck">
+      <img class="card-img-top img-fluid" src="{{ article.image }}" alt="{{ article.title }}">
-    {% for feed in feeds %}
-      <div class="card">
-        <img class="card-img-top img-responsive" src="{{ feed.image }}" alt="Card image cap" style="width:100%">
       <div class="card-block">
-          <h4 class="card-title">{{ feed.title }}</h4>
+        <h4 class="card-title">{{ article.title }}</h4>
-          <p class="card-text">{{ feed.author }}</p>
+        <p class="card-text">{{ article.author }}</p>
-        </div>
+        <p class="card-text">{{ article.description|striptags }}</p>
-        <div class="card-block">
+        <a href="{{ article.url }}" class="card-link">View Original</a>
-          <p class="card-text">{{ feed.description }}</p>
-        </div>
-        <div class="card-block">
-          <a href="{{ feed.url }}" class="card-link">View Original</a>
       </div>
     </div>
-      {% if forloop.counter|divisibleby:3 %}</div><div class="card-deck">{% endif %}
   {% endfor %}
-  </div>
 </div>

package.json

@@ -1,9 +1,10 @@
 {
   "name": "mhackspace",
   "version": "0.1.0",
-  "dependencies": {},
+  "dependencies": {
+    "bootstrap": "^4.0.0-alpha.6"
+  },
   "devDependencies": {
-    
     "browser-sync": "^2.14.0",
     "del": "^2.2.2",
     "gulp": "^3.9.1",
@@ -17,7 +18,6 @@
     "gulp-uglify": "^2.0.0",
     "gulp-util": "^3.0.7",
     "run-sequence": "^1.2.2"
-    
   },
   "engines": {
     "node": ">=0.8.0"