Thursday + Takeflight changes (#31)

* Adds Facebook svg button, and adds Facebook link type to models

* CSS work from takeflight, 30 June 2016

* Adds drop-down menus for navigation

* Adds mobile menus for navigation

* Minor tweak to mobile nav headings

* Makes the logo a link back to the homepage

* Updates the footer to the current version, removing sponsor logos for the moment.
This commit is contained in:
Christopher Neugebauer 2016-06-30 17:25:50 +10:00 committed by Scott Bragg
parent 7c5ca8d399
commit 02dc082958
14 changed files with 362 additions and 121 deletions

View file

@ -0,0 +1,23 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.9.7 on 2016-06-30 01:34
from __future__ import unicode_literals
from django.db import migrations
import wagtail.wagtailcore.blocks
import wagtail.wagtailcore.fields
import wagtail.wagtailimages.blocks
class Migration(migrations.Migration):
dependencies = [
('cms_pages', '0004_auto_20160626_0110_squashed_0007_auto_20160626_0335'),
]
operations = [
migrations.AlterField(
model_name='homepage',
name='body',
field=wagtail.wagtailcore.fields.StreamField([('basic_content', wagtail.wagtailcore.blocks.StructBlock([(b'panel_type', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('blue_left', 'Left-aligned image, blue-filtered image BG'), ('white_right', 'Right-aligned image, white background')])), (b'heading', wagtail.wagtailcore.blocks.CharBlock(required=True)), (b'inset_illustration', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('antarctica.svg', 'Antarctica'), ('bridge.svg', 'Bridge'), ('casino.svg', 'Casino'), ('cradle.svg', 'Cradle Mountain'), ('devil.svg', 'Tasmanian Devil'), ('falls.svg', 'Waterfall'), ('hobart.svg', 'Hobart'), ('lavender.svg', 'Lavender'), ('tuz.svg', 'Tuz'), ('wineglass.svg', 'Wineglass')])), (b'background_image', wagtail.wagtailimages.blocks.ImageChooserBlock(help_text="This is used as the background image of a blue-left block. It's not used for white-right.", required=False)), (b'body', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), (b'link', wagtail.wagtailcore.blocks.StructBlock([('page', wagtail.wagtailcore.blocks.PageChooserBlock()), ('title', wagtail.wagtailcore.blocks.CharBlock(required=True))])), (b'external_links', wagtail.wagtailcore.blocks.ListBlock(wagtail.wagtailcore.blocks.StructBlock([('alt', wagtail.wagtailcore.blocks.CharBlock(required=True)), ('icon', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('twitter', 'Twitter'), ('facebook', 'Facebook'), ('generic', 'Generic URL')])), ('url', wagtail.wagtailcore.blocks.URLBlock(required=True))])))]))]),
),
]

View file

@ -56,10 +56,12 @@ class BasicContentBlock(blocks.StructBlock):
)
EXTERNAL_LINK_TWITTER = "twitter"
EXTERNAL_LINK_FACEBOOK = "facebook"
EXTERNAL_LINK_GENERIC = "generic"
EXTERNAL_LINK_TYPES = (
(EXTERNAL_LINK_TWITTER, "Twitter"),
(EXTERNAL_LINK_FACEBOOK, "Facebook"),
(EXTERNAL_LINK_GENERIC, "Generic URL"),
)

View file

@ -0,0 +1,25 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 57 57">
<defs>
<style>
.fcbk-cls-1 {
fill: none;
}
.fcbk-cls-2 {
clip-path: url(#clip-path);
}
.fcbk-cls-3 {
fill: currentColor;
}
</style>
<clipPath id="clip-path" transform="translate(0 0)">
<rect class="fcbk-cls-1" width="57" height="57"></rect>
</clipPath>
</defs>
<g class="fcbk-cls-2">
<path class="fcbk-cls-3" d="M28.5,0C12.8,0,0,12.8,0,28.5C0,44.2,12.8,57,28.5,57C44.2,57,57,44.2,57,28.5C57,12.8,44.2,0,28.5,0z
M34.6,28.5h-4c0,6.4,0,14.2,0,14.2h-5.9c0,0,0-7.8,0-14.2h-2.8v-5h2.8v-3.3c0-2.3,1.1-6,6-6l4.4,0v4.9c0,0-2.7,0-3.2,0
c-0.5,0-1.3,0.3-1.3,1.4v3h4.5L34.6,28.5z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 855 B

View file

@ -1,5 +1,7 @@
{% if link.icon == "twitter" %}
{% include "cms_pages/home_page_blocks/btn_twitter.html" %}
{% elif link.icon == "facebook" %}
{% include "cms_pages/home_page_blocks/btn_facebook.html" %}
{% elif link.icon == "generic" %}
{% include "cms_pages/home_page_blocks/btn_generic_link.html" %}
{% endif %}

View file

@ -46,7 +46,11 @@
<header role="banner" class="l-header">
<div class="l-header--logo">
{% block site_brand %}
<img src="{% static 'lca2017/images/svgs/lca2017-website-logo.svg' %}" width="100%"/>
<a href="/">
<img src="{% static 'lca2017/images/svgs/lca2017-website-logo.svg' %}"
width="100%"
/>
</a>
{% endblock %}
</div>
{% block nav %}
@ -84,18 +88,21 @@
{% block footer_base %}
<!-- https://gist.github.com/geedmo/5682742-->
<footer class="l-footer">
<footer class="l-footer l-footer__alt">
{% block footer %}
<div class="l-footer--text">
<h3>Sponsors</h3>
<p class="lede">Magna morbi aliquet commodo arcu odio dui imperdiet blandit est.
</p><a href="#" class="btn">See sponsors</a>
</div>
<div class="l-footer--logos">
<img src="{% static 'lca2017/images/HPE.jpg' %}" role="presentation">
<img src="{% static 'lca2017/images/IBM.jpg' %}" role="presentation"></div>
{% comment %}
<div class="l-footer--text">
<h3>Sponsors</h3>
<p class="lede">Magna morbi aliquet commodo arcu odio dui imperdiet blandit est.
</p><a href="#" class="btn">See sponsors</a>
</div>
<div class="l-footer--logos">
<img src="{% static 'lca2017/images/HPE.jpg' %}" role="presentation">
<img src="{% static 'lca2017/images/IBM.jpg' %}" role="presentation">
</div>
{% endcomment %}
<p class="lede">© 2016 linux.conf.au 2017 and Linux Australia. Linux is a registered trademark of Linus Torvalds. Site design by <a href="http://takeflight.com.au" >Takeflight</a>. Image credits can be found on our <a href="/about/colophon">Colophon</a>.</p>
<p class="lede">©2016 Linux Australia and linux.conf.au 2017. Linux is a registered trademark of Linus Torvalds. Site design by <a href="http://takeflight.com.au" >Takeflight</a>. Image credits can be found on our <a href="/about/colophon">Colophon</a>.</p>
{% endblock %}
</footer>

View file

@ -1,10 +1,20 @@
{% load sitetree %}
<nav role="navigation" class="l-header--links">
{% for item in sitetree_items %}
<!-- FIXME: NEeds a dropdown mechanism -->
<a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown" {% else %}class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"{% endif %}>{{ item.title_resolved }}</a>
<!-- {% if item.has_children %}
{% sitetree_children of item for menu template "sitetree_header_dropdown.html" %}
{% endif %} -->
{% endfor %}
<nav role="navigation" id="LOL" class="l-header--links">
{% for item in sitetree_items %}
<li class="l-header--nav">
<a
href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}"
{% if item.has_children %}
class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown"
{% else %}
class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"
{% endif %}>
{{ item.title_resolved }}
</a>
{% if item.has_children %}
{% sitetree_children of item for menu template "sitetree_header_dropdown.html" %}
{% endif %}
</li>
{% endfor %}
</nav>

View file

@ -1,8 +1,17 @@
{% load sitetree %}
<ul class="dropdown-menu" role="menu">
{% for item in sitetree_items %}
<li role="presentation" {% if item.is_current or item.in_current_branch %}class="active"{% endif %}>
<a role="menuitem" href="{% sitetree_url for item %}" {% if item.hint %}title="{{ item.hint }}"{% endif %}>{{ item.title_resolved }}</a>
</li>
{% endfor %}
</ul>
<div class="menu-dropdown">
<ul class="link-list" role="menu">
{% for item in sitetree_items %}
<li class="link-list--item">
<a role="menuitem" href="{% sitetree_url for item %}"
class="link-list--link"
{% if item.hint %}
title="{{ item.hint }}"
{% endif %}
>
{{ item.title_resolved }}
</a>
</li>
{% endfor %}
</ul>
</div>

View file

@ -1,14 +1,22 @@
{% load sitetree %}
<div data-menu="" class="l-header--menu">
<ul class="link-list">
<div data-menu class="mobile-menu">
<ul class="mobile-menu--list">
{% for item in sitetree_items %}
<!-- FIXME: NEeds a dropdown mechanism -->
<li class="link-list--item"><a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}" data-toggle="dropdown" {% else %}class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"{% endif %}>{{ item.title_resolved }}</a></li>
<!-- {% if item.has_children %}
<li class="mobile-menu--item mobile-menu--item__primary">
<a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}"
{% if item.has_children %}
class="l-header--nav dropdown-toggle {% if item.is_current or item.in_current_branch %}active{% endif %}"
data-toggle="dropdown"
{% else %}
class="l-header--nav {% if item.is_current or item.in_current_branch %}active{% endif %}"
{% endif %}
>
{{ item.title_resolved }}
</a>
</li>
{% if item.has_children %}
{% sitetree_children of item for menu template "sitetree_opener_dropdown.html" %}
{% endif %} -->
{% endif %}
{% endfor %}
</ul>
</div>
</nav>
</ul>
</div>

View file

@ -1,8 +1,13 @@
{% load sitetree %}
<ul class="dropdown-menu" role="menu">
{% for item in sitetree_items %}
<li role="presentation" {% if item.is_current or item.in_current_branch %}class="active"{% endif %}>
<a role="menuitem" href="{% sitetree_url for item %}" {% if item.hint %}title="{{ item.hint }}"{% endif %}>{{ item.title_resolved }}</a>
</li>
{% endfor %}
</ul>
{% for item in sitetree_items %}
<li role="presentation" class="mobile-menu--item">
<a role="menuitem" href="{% sitetree_url for item %}"
{% if item.hint %}
title="{{ item.hint }}"
{% endif %}
>
{{ item.title_resolved }}
</a>
</li>
{% endfor %}

291
static/src/lca2017/css/app.css Executable file → Normal file
View file

@ -68,36 +68,36 @@
.nav {}
}
--------------------------------------------------------------------------- */
.panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
max-width: 1746px;
margin: 0 40px;
}
@media (min-width: 48em) {
.panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
margin: 0 70px;
}
}
@media (min-width: 64em) {
.panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
margin: 0 160px;
}
}
@media (min-width: 80em) {
.panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
margin: 0 200px;
}
}
@media (min-width: 1946px) {
.panel--content, .l-speaker-page, .l-footer, .l-header, .l-content-page--richtext, .l-404, .styleguide {
.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide {
margin: 0 auto;
}
}
.panel--content, .l-speaker-page, .l-footer {
.panel--content, .l-speaker-page {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
@ -109,7 +109,7 @@
}
@media (min-width: 48em) {
.panel--content, .l-speaker-page, .l-footer {
.panel--content, .l-speaker-page {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
@ -584,7 +584,7 @@ body {
font-size: 4vw;
}
@media (min-width: 400px) {
@media (min-width: 25em) {
body {
font-size: 2.2vw;
}
@ -608,7 +608,7 @@ body {
font-size: 4.2vw;
}
@media (min-width: 400px) {
@media (min-width: 25em) {
.lede {
font-size: 3vw;
}
@ -745,6 +745,7 @@ table.alt tr:not(:last-of-type) {
padding: 0.625rem 1.25rem;
border-radius: 0.625rem;
transition: all 300ms ease-in-out;
line-height: normal;
}
.btn:hover, .btn:focus, .btn:active {
@ -785,7 +786,7 @@ table.alt tr:not(:last-of-type) {
}
.btn__active {
border: solid #3ab1c9;
border: solid #3ab1c9;
}
@ -1162,6 +1163,117 @@ table.alt tr:not(:last-of-type) {
}
}
.menu-dropdown {
position: absolute;
left: 0;
padding-top: 20px;
padding-top: 1.25rem;
display: none;
z-index: 50;
}
.menu-dropdown:before {
position: absolute;
content: '';
background: linear-gradient(45deg, #89d0de 50%, transparent 50%);
width: 20px;
width: 1.25rem;
height: 20px;
height: 1.25rem;
top: 0;
left: 0;
}
.menu-dropdown__last {
right: 0;
left: auto;
}
.menu-dropdown__last:before {
background: linear-gradient(-45deg, #89d0de 50%, transparent 50%);
left: auto;
right: 0;
}
.menu-dropdown .link-list {
font-size: 0.8em;
background-color: #89d0de;
padding-top: 20px;
padding-top: 1.25rem;
}
.menu-dropdown .link-list--item {
margin: 0;
display: block;
}
.menu-dropdown .link-list--item:hover {
background-color: #0c486c;
color: white;
}
.menu-dropdown .link-list--link {
font-weight: normal;
border: 0;
padding: 6.666px 40px 6.666px 20px;
padding: 0.41667rem 2.5rem 0.41667rem 1.25rem;
width: 100%;
height: 100%;
display: block;
white-space: nowrap;
}
.menu-dropdown .link-list--link:hover {
color: white;
}
.mobile-menu {
position: absolute;
width: 100%;
height: auto;
background-color: white;
left: 0;
top: 0;
bottom: 0;
opacity: 0;
will-change: opacity;
transition: all 300ms ease-in-out;
pointer-events: none;
z-index: 100;
display: block;
margin-bottom: -150%;
}
.mobile-menu--list {
margin: auto;
text-align: center;
margin-top: 20%;
list-style: none;
}
.mobile-menu--item > a {
font-size: 2em;
border: 0;
}
.mobile-menu--item__primary > a {
font-size: 2.5em;
font-family: "Titillium Web", sans-serif;
font-weight: 900;
text-transform: uppercase;
}
.mobile-menu.is-active {
opacity: 1;
pointer-events: all;
}
@media (min-width: 48em) {
.mobile-menu {
display: none !important;
}
}
.l-header {
display: -ms-flexbox;
display: flex;
@ -1182,12 +1294,8 @@ table.alt tr:not(:last-of-type) {
height: 100%;
}
.l-header--links {
height: 100%;
-ms-flex-item-align: start;
align-self: flex-start;
display: none;
margin-left: 1em;
.l-header--logo > a {
border: 0;
}
.l-header--menu-opener {
@ -1231,48 +1339,34 @@ table.alt tr:not(:last-of-type) {
transform: translateY(-8.8px) rotate(-45deg);
}
.l-header--menu {
position: absolute;
width: 100%;
height: 300%;
background-color: white;
left: 0;
top: 0;
bottom: 0;
opacity: 0;
will-change: opacity;
transition: all 300ms ease-in-out;
pointer-events: none;
z-index: 100;
display: block;
}
.l-header--menu > .link-list {
font-size: 2em;
margin: auto;
text-align: center;
transform: translateY(50%);
}
.l-header--menu.is-active {
opacity: 1;
pointer-events: all;
.l-header--links {
height: 100%;
-ms-flex-item-align: start;
align-self: flex-start;
display: none;
list-style: none;
white-space: nowrap;
}
.l-header--nav {
border: 0;
margin-right: 20px;
margin-right: 1.25rem;
display: inline-block;
margin-right: 10px;
margin-right: 0.625rem;
vertical-align: top;
position: relative;
}
.l-header--nav:hover > .menu-dropdown {
display: block;
}
.l-header--nav > a {
vertical-align: top;
border: 0;
font-size: 0.8em;
}
.l-header--nav:hover {
color: #0c486c;
border-bottom: 3px solid #3ab1c9;
}
@media (min-width: 400px) {
@media (min-width: 25em) {
.l-header--logo {
width: 200px;
margin-right: 2.5rem;
@ -1283,7 +1377,7 @@ table.alt tr:not(:last-of-type) {
.l-header {
margin-top: 6.25rem;
}
.l-header--menu, .l-header--menu-opener {
.l-header--menu-opener {
display: none !important;
}
.l-header--links {
@ -1298,6 +1392,9 @@ table.alt tr:not(:last-of-type) {
.l-header--logo {
width: 300px;
}
.l-header--nav {
margin-right: 1.25rem;
}
}
.l-speaker-page {
@ -1324,13 +1421,19 @@ table.alt tr:not(:last-of-type) {
}
.l-footer {
margin-top: 60px;
margin-top: 3.75rem;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end;
margin-bottom: 50px;
margin-bottom: 3.125rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 100px;
margin-top: 6.25rem;
padding: 50px 40px;
padding: 3.125rem 40px;
width: 100%;
}
.l-footer--logos {
@ -1338,27 +1441,62 @@ table.alt tr:not(:last-of-type) {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-item-align: start;
align-self: flex-start;
-ms-flex-pack: distribute;
justify-content: space-around;
margin-top: 20px;
margin-top: 1.25rem;
}
.l-footer--logos > img {
.l-footer--logo {
max-width: 100%;
height: auto;
-ms-flex-preferred-size: 45%;
flex-basis: 45%;
}
@media (min-width: 64em) {
.l-footer--logos {
-ms-flex-item-align: end;
align-self: flex-end;
}
.l-footer--logo > svg {
display: block;
width: 100%;
height: 100%;
}
.l-footer__alt {
background-color: #0c486c;
color: white;
}
@media (min-width: 48em) {
.l-footer {
margin-bottom: 6.25rem;
padding: 6.25rem 70px;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
}
.l-footer--logos {
margin-top: 0;
}
}
@media (min-width: 64em) {
.l-footer {
padding: 6.25rem 160px;
}
}
@media (min-width: 80em) {
.l-footer {
padding: 6.25rem 200px;
}
.l-footer--logo {
margin-bottom: 0;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
@media (min-width: 1946px) {
.l-footer {
padding: 6.25rem auto;
}
}
@ -1368,29 +1506,28 @@ table.alt tr:not(:last-of-type) {
}
.l-content-page--image {
height: 80vh;
height: 200px;
width: 100%;
margin: 60px 0;
margin: 3.75rem 0;
margin: 7vw 0;
background-size: cover;
background-position: center;
}
@media (min-width: 48em) {
.l-content-page--image {
height: 450px;
height: 350px;
}
}
@media (min-width: 64em) {
.l-content-page--image {
height: 600px;
height: 500px;
}
}
@media (min-width: 80em) {
.l-content-page--image {
height: 80vh;
height: 600px;
}
}

2
static/src/lca2017/css/maps/app.css.map Executable file → Normal file

File diff suppressed because one or more lines are too long

0
static/src/lca2017/css/maps/print.css.map Executable file → Normal file
View file

0
static/src/lca2017/css/print.css Executable file → Normal file
View file

View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3BB0C9;}
</style>
<g>
<path class="st0" d="M28.5,0C12.8,0,0,12.8,0,28.5C0,44.2,12.8,57,28.5,57C44.2,57,57,44.2,57,28.5C57,12.8,44.2,0,28.5,0z
M34.6,28.5h-4c0,6.4,0,14.2,0,14.2h-5.9c0,0,0-7.8,0-14.2h-2.8v-5h2.8v-3.3c0-2.3,1.1-6,6-6l4.4,0v4.9c0,0-2.7,0-3.2,0
c-0.5,0-1.3,0.3-1.3,1.4v3h4.5L34.6,28.5z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 700 B