Dynamically generate project data on index
This commit is contained in:
parent
9e1764f32b
commit
a71ab7ef5d
3 changed files with 31 additions and 52 deletions
|
@ -1,4 +1,7 @@
|
||||||
from project.common.views import CustomTemplate
|
from project.common.views import CustomTemplate
|
||||||
|
from django.conf import settings
|
||||||
|
from json import load
|
||||||
|
import os.path
|
||||||
|
|
||||||
|
|
||||||
class IndexView(CustomTemplate):
|
class IndexView(CustomTemplate):
|
||||||
|
@ -6,6 +9,11 @@ class IndexView(CustomTemplate):
|
||||||
html_title = "Homepage"
|
html_title = "Homepage"
|
||||||
body_class = "index"
|
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):
|
class NoJavascriptView(CustomTemplate):
|
||||||
template_name = 'core/no-js.html'
|
template_name = 'core/no-js.html'
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
@blueprint-logo: url(http://ultimatestorytellingblueprint.com/wp-content/uploads/2014/07/Blueprint-Background1.jpg);
|
@blueprint-logo: url(http://ultimatestorytellingblueprint.com/wp-content/uploads/2014/07/Blueprint-Background1.jpg);
|
||||||
.index {
|
|
||||||
|
body.index {
|
||||||
#header {
|
#header {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: #232323;
|
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 {
|
#project-thumbnails {
|
||||||
background-image: url(https://c1.staticflickr.com/1/557/18747807580_d01e8e877a_c.jpg);
|
img {
|
||||||
}
|
max-width: 90%;
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 col-xs-12 feed">
|
<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>
|
||||||
<div class="col-sm-6 twitter-icon hidden-xs">
|
<div class="col-sm-6 twitter-icon hidden-xs">
|
||||||
<a href="https://twitter.com/RealOrangeOne" class="no-color-change">
|
<a href="https://twitter.com/RealOrangeOne" class="no-color-change">
|
||||||
|
@ -32,9 +32,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
<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 %}
|
{% endblock %}
|
||||||
|
|
Reference in a new issue