1
Fork 0

Dynamically generate project data on index

This commit is contained in:
Jake Howard 2016-03-16 22:40:33 +00:00
parent 9e1764f32b
commit a71ab7ef5d
3 changed files with 31 additions and 52 deletions

View file

@ -1,4 +1,7 @@
from project.common.views import CustomTemplate
from django.conf import settings
from json import load
import os.path
class IndexView(CustomTemplate):
@ -6,6 +9,11 @@ class IndexView(CustomTemplate):
html_title = "Homepage"
body_class = "index"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['projects'] = load(open(os.path.join(settings.BASE_DIR, 'data/projects.json')))
return context
class NoJavascriptView(CustomTemplate):
template_name = 'core/no-js.html'

View file

@ -1,5 +1,6 @@
@blueprint-logo: url(http://ultimatestorytellingblueprint.com/wp-content/uploads/2014/07/Blueprint-Background1.jpg);
.index {
body.index {
#header {
height: 100vh;
background: #232323;
@ -104,53 +105,10 @@
}
}
}
#project-images-main {
background: @blueprint-logo;
background-size: cover;
background-attachment: fixed;
@media screen and (max-width: @screen-xs-max) {
background-attachment: initial;
}
.container {
text-align: center;
margin-top: 25px;
margin-bottom: 15px;
h1 {
margin-top: 0;
margin-bottom: 30px;
color: white;
font-size: 40px;
}
.see-more {
color: white;
}
.row {
margin-bottom: 20px;
& > div {
background-size: cover;
background-position: center;
}
.custom-pc {
background-image: url(https://c1.staticflickr.com/1/557/18747807580_d01e8e877a_c.jpg);
}
.bsod-enabler {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/Windows_XP_BSOD.png);
}
.yoga-pal {
background-image: url(http://www.lenovo.com/images/gallery/1060x596/lenovo-laptop-convertible-yoga-2-pro-orange-front-1.jpg);
}
.attack-on-blocks {
background-image: url(https://c1.staticflickr.com/1/33/49012397_1fbe7855e3_b.jpg);
}
.dotfile-automator {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Dell_Inspiron_One_23_Touch_AIO_Desktop_PC.png);
}
}
#project-thumbnails {
img {
max-width: 90%;
}
}
}

View file

@ -22,7 +22,7 @@
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-12 feed">
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/RealOrangeOne" data-widget-id="600774030069760003">Tweets by @RealOrangeOne</a>
<h5>Twitter widget broken - repair coming soon!</h5>
</div>
<div class="col-sm-6 twitter-icon hidden-xs">
<a href="https://twitter.com/RealOrangeOne" class="no-color-change">
@ -32,9 +32,22 @@
</div>
</div>
</div>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<navbar></navbar>
<div class="container-fluid" id="project-images-main"></div>
<div class="container-fluid" id="project-thumbnails">
<div class="row">
<div class="container">
{% for key, project in projects.items %}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="{{ project.image }}" alt="{{ key }} image">
<div class="caption">
<h3>{{ project.title }}</h3>
<p>...</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}