From ff20cc9f23f36e93e641e7f18a8db32d26bf8e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felipe=20Marti=CC=81n?= <fmartingr@gmail.com>
Date: Thu, 19 Mar 2015 23:12:08 +0100
Subject: [PATCH] Added projects theme pages

---
 bower.json                                    |  4 +-
 .../themes/v1/static/sass/_layout.sass        |  6 ++
 .../themes/v1/static/sass/_oocss.sass         |  3 +
 .../themes/v1/static/sass/_projects.sass      | 56 +++++++++++++++++++
 .../themes/v1/static/sass/_variables.sass     |  8 +--
 fmartingrcom/themes/v1/static/sass/style.sass |  1 +
 .../themes/v1/templates/_layout.jinja         | 10 +---
 .../themes/v1/templates/projects/layout.jinja |  3 +
 .../themes/v1/templates/projects/list.jinja   | 56 +++++++++++++++++++
 fmartingrcom/urls.py                          |  5 +-
 10 files changed, 138 insertions(+), 14 deletions(-)
 create mode 100644 fmartingrcom/themes/v1/static/sass/_projects.sass
 create mode 100644 fmartingrcom/themes/v1/templates/projects/layout.jinja
 create mode 100644 fmartingrcom/themes/v1/templates/projects/list.jinja

diff --git a/bower.json b/bower.json
index c103d57..a87a2e8 100644
--- a/bower.json
+++ b/bower.json
@@ -15,6 +15,8 @@
   ],
   "dependencies": {
     "font-awesome": "~4.2.0",
-    "google-code-prettify": "~1.0.3"
+    "google-code-prettify": "~1.0.3",
+    "jquery": "~2.1.3",
+    "lightbox2": "~2.7.1"
   }
 }
diff --git a/fmartingrcom/themes/v1/static/sass/_layout.sass b/fmartingrcom/themes/v1/static/sass/_layout.sass
index 4cae654..4fa2626 100644
--- a/fmartingrcom/themes/v1/static/sass/_layout.sass
+++ b/fmartingrcom/themes/v1/static/sass/_layout.sass
@@ -135,10 +135,16 @@ hr
             margin-top: 5px
             padding: 8px 0 8px 0
             font-weight: bold
+            text-shadow: 0 0 1px #000
             width: 90%
+            text-align: left
 
             transition: 0.3s all
 
+            i.fa
+                margin: 0 8px 0 10px
+                width: 20px
+
             &.half
                 width: 38%
 
diff --git a/fmartingrcom/themes/v1/static/sass/_oocss.sass b/fmartingrcom/themes/v1/static/sass/_oocss.sass
index 43a55d1..3b0d2e5 100644
--- a/fmartingrcom/themes/v1/static/sass/_oocss.sass
+++ b/fmartingrcom/themes/v1/static/sass/_oocss.sass
@@ -79,6 +79,9 @@
         width: $size/3
         height: $size/3
 
+.hidden
+    display: none
+
 /* Mix-ins */
 @mixin rotate($degrees)
     -webkit-transform: rotate(#{$degrees}deg)
diff --git a/fmartingrcom/themes/v1/static/sass/_projects.sass b/fmartingrcom/themes/v1/static/sass/_projects.sass
new file mode 100644
index 0000000..1c211d0
--- /dev/null
+++ b/fmartingrcom/themes/v1/static/sass/_projects.sass
@@ -0,0 +1,56 @@
+body
+    &.projects
+        background-color: #fff
+        background-image: url('/static/images/homepage/bg.png')
+        background-attachment: fixed
+
+
+.project-papers
+    background: #fff
+    box-shadow: 0 0 10px rgba(0,0,0,0.3)
+    margin: 30px 0
+    max-width: 600px
+    min-width: 200px
+    padding: 24px
+    position: relative
+    font-size: 110%
+    width: 80%
+
+.project-papers:before, .project-papers:after
+    content: ""
+    height: 98%
+    position: absolute
+    width: 100%
+    z-index: -1
+
+.project-papers:before
+    background: #fafafa
+    box-shadow: 0 0 8px rgba(0,0,0,0.2)
+    left: -5px
+    top: 4px
+    @include rotate(-2.5)
+
+.project-papers:after
+    background: #f6f6f6
+    box-shadow: 0 0 3px rgba(0,0,0,0.2)
+    right: -3px
+    top: 1px
+    @include rotate(1.4)
+
+
+.project-papers
+    &:hover
+        cursor: pointer
+    .title
+        float: left
+        margin: 0
+    .role, .stack, .company, .title, .date, .url
+        margin: 12px 0 12px 0
+    .date
+        float: right
+    .computer
+        max-width: inherit
+        .image
+            max-width: inherit
+            width: 90%
+            margin-top: 3%
diff --git a/fmartingrcom/themes/v1/static/sass/_variables.sass b/fmartingrcom/themes/v1/static/sass/_variables.sass
index 14fe70b..49eb094 100644
--- a/fmartingrcom/themes/v1/static/sass/_variables.sass
+++ b/fmartingrcom/themes/v1/static/sass/_variables.sass
@@ -38,16 +38,16 @@ $github-text-color: #000
 $linkedin-color: #0976b4
 $linkedin-text-color: #fff
 
-$rss-color: #ff7f25
+$rss-color: #ff9557
 $rss-text-color: #eee
 
-$blog-color: #ff3617
+$blog-color: desaturate(#fe160e, 50)
 $blog-text-color: #fff
 
-$homepage-color: #01b2f1
+$homepage-color: desaturate(#00cbf4, 50)
 $homepage-text-color: #efefef
 
-$projects-color: #2b82ad
+$projects-color: desaturate(#491b93, 50)
 $projects-text-color: #efefef
 
 // Colors
diff --git a/fmartingrcom/themes/v1/static/sass/style.sass b/fmartingrcom/themes/v1/static/sass/style.sass
index 3a087d2..be38660 100644
--- a/fmartingrcom/themes/v1/static/sass/style.sass
+++ b/fmartingrcom/themes/v1/static/sass/style.sass
@@ -4,6 +4,7 @@
 @import "layout"
 @import "homepage"
 @import "blog"
+@import "projects"
 @import "syntax"
 
 @import "responsive"
diff --git a/fmartingrcom/themes/v1/templates/_layout.jinja b/fmartingrcom/themes/v1/templates/_layout.jinja
index fed2a02..a2f743a 100644
--- a/fmartingrcom/themes/v1/templates/_layout.jinja
+++ b/fmartingrcom/themes/v1/templates/_layout.jinja
@@ -47,15 +47,9 @@
                 <a href="{{ url('blog:list') }}" class="button blog">
                     <i class="fa fa-comment"></i> Blog
                 </a>
-                {#
-                {% if section != 'projects' %}
-                <a href="#">
-                    <button class="projects">
-                        <i class="fa fa-folder-open"></i> Projects
-                    </button>
+                <a href="{{ url('projects:list') }}" class="button projects">
+                  <i class="fa fa-folder-open"></i> Portfolio
                 </a>
-                {% endif %}
-                #}
             {% endblock %}
         </div>
         <nav class="zone-menu buttons">
diff --git a/fmartingrcom/themes/v1/templates/projects/layout.jinja b/fmartingrcom/themes/v1/templates/projects/layout.jinja
new file mode 100644
index 0000000..46a51d5
--- /dev/null
+++ b/fmartingrcom/themes/v1/templates/projects/layout.jinja
@@ -0,0 +1,3 @@
+{% extends "_layout.jinja" %}
+
+{% block page_title %}Projects{% endblock %}
diff --git a/fmartingrcom/themes/v1/templates/projects/list.jinja b/fmartingrcom/themes/v1/templates/projects/list.jinja
new file mode 100644
index 0000000..6ce29a6
--- /dev/null
+++ b/fmartingrcom/themes/v1/templates/projects/list.jinja
@@ -0,0 +1,56 @@
+{% extends "projects/layout.jinja" %}
+
+{% block menu %}
+    {{ super() }}
+    {% for grp in groups %}
+    <a class="button" href="#{{ grp.slug }}"><i class="fa fa-arrow-right"></i> {{ grp.name }}</a><br />
+    {% endfor %}
+    <a class="button" href="#notes"><i class="fa fa-arrow-right"></i> Notes</a><br />
+{% endblock %}
+
+{% block content %}
+    {% for grp in groups %}
+      <h2 id="{{ grp.slug }}">{{ grp.name }}</h2>
+      {% for project in grp.projects.all().order_by('-date') %}
+      <div class="project-papers" data-toggle-on-click>
+        <h4 class="date"><i class="fa fa-calendar"></i> {{ project.date|date('F Y') }}</h4>
+        <h3 class="title">{{ project.title }}</h3>
+        <div class="clearfix"></div>
+        <div class="hidden" data-viewmore>
+          {% if project.company %}
+          <h5 class="company"><i class="fa fa-building-o"></i> {{ project.company }}</h5>
+          {% endif %}
+          {% if project.role %}
+          <h5 class="role"><i class="fa fa-user"></i> {{ project.role }}</h5>
+          {% endif %}
+          {% if project.stack %}
+          <h5 class="stack"><i class="fa fa-cogs"></i> {{ project.stack }}</h5>
+          {% endif %}
+          {% if project.url %}
+          <h5 class="url"><i class="fa fa-link"></i> <a href="{{ project.url }}">{{ project.url }}</a></h5>
+          {% endif %}
+          <div class="text-center computer">
+            <img class="image" src="{{ MEDIA_URL }}{{ project.image }}" />
+          </div>
+          <p class="description">{{ project.description|safe }}</p>
+        </div>
+      </div>
+      {% endfor %}
+    {% endfor %}
+    <h2 id="notes">Notes</h2>
+    <div class="papers">
+      <p>Some notes goes here. Bacom ipsum and stuff</p>
+    </div>
+{% endblock %}
+
+{% block javascript %}
+{{ super() }}
+<script type="text/javascript" src="{{ STATIC_URL }}bower/jquery/dist/jquery.js"></script>
+<script type="text/javascript">
+$(function() {
+  $('[data-toggle-on-click]').click(function(event) {
+    $(this).children('[data-viewmore]').slideToggle(300);
+  })
+})
+</script>
+{% endblock %}
diff --git a/fmartingrcom/urls.py b/fmartingrcom/urls.py
index a7056ce..a5c52e6 100644
--- a/fmartingrcom/urls.py
+++ b/fmartingrcom/urls.py
@@ -13,10 +13,13 @@ sitemaps = {
 
 admin.autodiscover()
 
-urlpatterns = patterns('',
+urlpatterns = patterns(
+    '',
     (r'^ckeditor/', include('ckeditor.urls')),
     url(r'^admin/', include(admin.site.urls)),
     url(r'^blog/', include('fmartingrcom.apps.blog.urls', namespace='blog')),
+    url(r'^projects/',
+        include('fmartingrcom.apps.projects.urls', namespace='projects')),
     url(r'^$', include('fmartingrcom.apps.homepage.urls', namespace='home')),
 )