oly
/
hackspace
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed Feed Styling and improved Responsive Banners

This commit is contained in:
Sam Collins 2017-02-28 23:49:56 +00:00
parent 8a6638e28d
commit 5d9096a86c
No known key found for this signature in database
GPG Key ID: 233C5943C800FE30
8 changed files with 90 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
mhackspace/base/migrations/0005_auto_20170228_2210.py Normal file
View File

@ -0,0 +1,32 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.10.5 on 2017-02-28 22:10
from __future__ import unicode_literals
from django.db import migrations
import stdimage.models
import stdimage.utils
import stdimage.validators
class Migration(migrations.Migration):
dependencies = [
('base', '0004_merge_20170226_0844'),
]
operations = [
migrations.RemoveField(
model_name='bannerimage',
name='original_image',
),
migrations.RemoveField(
model_name='bannerimage',
name='scaled_image',
),
migrations.AddField(
model_name='bannerimage',
name='image',
field=stdimage.models.StdImageField(default='', upload_to=stdimage.utils.UploadToAutoSlugClassNameDir('title'), validators=[stdimage.validators.MinSizeValidator(1200, 300)]),
preserve_default=False,
),
]

29
mhackspace/base/models.py
View File

@ -12,22 +12,35 @@ class BannerImage(models.Model):
url = models.URLField()
title = models.CharField(max_length=255)
displayed = models.BooleanField(default=True)
original_image = models.URLField(max_length=255, blank=True, null=True)
scaled_image = StdImageField(
image = StdImageField(
upload_to=UploadToAutoSlugClassNameDir(populate_from='title'),
blank=True,
null=True,
variations={
'small': {
"width": 600,
"width": 400,
"height": 300,
"crop": True},
'large': {
"width": 1024,
'small2x': {
"width": 800,
"height": 600,
"crop": True},
'medium': {
"width": 800,
"height": 300,
"crop": True},
'medium2x': {
"width": 1600,
"height": 600,
"crop": True},
'large': {
"width": 1200,
"height": 300,
"crop": True},
'large2x': {
"width": 2400,
"height": 600,
"crop": True}},
validators=[
MinSizeValidator(1200, 300)])
MinSizeValidator(2400, 600)])
caption = models.TextField()
date = models.DateTimeField(default=timezone.now)

2
mhackspace/base/templatetags/banner_images.py
View File

@ -6,5 +6,5 @@ register = template.Library()
@register.inclusion_tag('partials/banner_list.html')
def show_banner_images():
return {'bannerlist': BannerImage.objects.all(), 'test': 'abc'}
return {'bannerlist': BannerImage.objects.all()}

21
mhackspace/blog/migrations/0004_auto_20170228_2210.py Normal file
View File

@ -0,0 +1,21 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.10.5 on 2017-02-28 22:10
from __future__ import unicode_literals
from django.db import migrations
import draceditor.models
class Migration(migrations.Migration):
dependencies = [
('blog', '0003_auto_20170215_2348'),
]
operations = [
migrations.AlterField(
model_name='post',
name='description',
field=draceditor.models.DraceditorField(),
),
]

6
mhackspace/static/sass/pages/_home.scss → mhackspace/static/sass/components/_feeds.scss
View File

@ -14,10 +14,14 @@
}
}
.card-deck {
margin-bottom: 30px;
}
.card-title {
color: $body-color;
}
#feeds img {
width: 100%;
}
}

3
mhackspace/static/sass/project.scss
View File

@ -6,8 +6,7 @@
@import "components/header";
@import "components/membership";
@import "components/footer";
@import "pages/home";
@import "components/feeds";
////////////////////////////////
//Django Toolbar//

3
mhackspace/templates/feeds/list.html
View File

@ -2,8 +2,7 @@
{% get_static_prefix as STATIC_PREFIX %}
<h3 class="mb-1">See what our members have been creating below.</h3>
<br />
<div class="card-columns" id="feeds">
<div id="feeds">
<div class="card-deck">
{% for article in articles %}
<div class="card">

15
mhackspace/templates/partials/banner_list.html
View File

@ -1,20 +1,21 @@
{% load static %}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox" style="height:300px;">
{% if bannerlist %}
<div id="carouselExampleSlidesOnly" class="carousel slide mb-4" data-ride="carousel">
<div class="carousel-inner" role="listbox">
{% for banner in bannerlist %}
{% if banner.scaled_image%}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<picture>
<source class="img-fluid" srcset="{{ banner.scaled_image.url }}" media="(min-width: 600px)" />
<img class="img-fluid" src="{{ banner.scaled_image.url }}" alt="">
<source class="img-fluid" srcset="{{ banner.image.small.url }}, {{ banner.image.small2x.url }} 2x" media="(max-width: 400px)" />
<source class="img-fluid" srcset="{{ banner.image.medium.url }}, {{ banner.image.medium2x.url }} 2x" media="(max-width: 768px)" />
<source class="img-fluid" srcset="{{ banner.image.large.url }}, {{ banner.image.large2x.url }} 2x" />
<img class="img-fluid" src="{{ banner.image.large.url }}" alt="{{ banner.title }}">
</picture>
<div class="carousel-caption d-none d-md-block">
<h3>{{ banner.title }}</h3>
<p>{{ banner.description |truncatewords:30}}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}