Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Speakers new layout #251

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Speakers new layout #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a9a221
new speaker layout\
Dec 14, 2016
63868e9
update to be a bit more responsive
Jan 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 65 additions & 49 deletions _layouts/speakers-by-year.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<!-- Speakers -->

<div class="row">
<div class="col-md-offset-3 col-md-6 text-center section">
<div class="col-lg-offset-3 col-lg-6 col-md-12 text-center section">
<h1>Speakers</h1>
<p class="big">
We would like to give a huge thank you to our speakers, they're the reason
Expand All @@ -18,7 +18,7 @@ <h1>Speakers</h1>
<!-- Year Options -->

<div class="row">
<div class="col-md-offset-3 col-md-6 text-center section" style="padding-top:40px">
<div class="col-lg-offset-3 col-lg-6 col-md-12 text-center section" style="padding-top:40px">
{% for year in site.data.config.years %}
{% if year == page.year %}
<a href="/speakers/{{ year }}" style="margin: 0 10px 0 10px"><b>{{ year }}</b></a>
Expand All @@ -35,7 +35,7 @@ <h1>Speakers</h1>

{% if page_speakers.size == 0 %}
<div class="row">
<div class="col-md-offset-4 col-md-4 text-center section">
<div class="col-lg-offset-4 col-lg-4 col-md-12 text-center section">
<p class="big">
We're still selecting speakers for this year, please check back later to
see the lineup. If you would like to speak
Expand All @@ -50,61 +50,77 @@ <h1>Speakers</h1>
</div>
{% endif %}

{% for speaker in page_speakers %}

<div class="row">
<div class="col-md-offset-3 col-md-6 section">
<div class="row text-center">
<h2>{{ speaker.name }}</h2>

<div class="col-lg-offset-3 col-lg-1 col-md-3">
<div style='padding:40px 0' id="side-navigation">
{% for speaker in page_speakers %}
<a href="#{{speaker.name | slugify }}">
<div class='speaker-selector' style='display:block; padding:5px; border-bottom:dashed 1px #eee;'>
<b>{{ speaker.name }}</b><br/>
{{ speaker.company}}
</div>
</a>
{% endfor %}
</div>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="row nested-row">
<div class="col-md-4">
<img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.large.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:40px; height:80px;'/>
</div>
<div class="col-md-8">
<p>
{{ speaker.role }} <br/>
{{ speaker.company }} <br/>
{% if speaker.twitter %}
<p>
<a href="https://twitter.com/{{ speaker.twitter }}" class="twitter-follow-button" data-show-count="false">Follow @{{ speaker.twitter }}</a>
</p>
{% endif %}
{% if speaker.github %}
<!-- Place this tag where you want the button to render. -->
<p>
<a class="github-button" href="https://github.com/{{ speaker.github }}" aria-label="Follow @{{ speaker.github}} on GitHub">Follow @{{ speaker.github }}</a>
</div>

<div class="col-lg-5 col-md-9">
<!-- actual speaker info shown when speaker selected -->
{% for speaker in page_speakers %}
<div id='{{ speaker.name | slugify }}'>
<div class="row text-center">
<h2>{{ speaker.name }}</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These names are huge. Again, could we make the talk title bigger and more titley, maybe combine them with the name here?

</div>
<div class="row">
<div class="col-md-offset-1 col-md-11">
<div class="row nested-row" style="border-bottom: solid 1px #ddd; padding: 10px 0 20px 0; ">
<div class="col-md-2">
<img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.large.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:40px; height:80px;'/>
</div>
<div class="col-md-6">
<p style="padding: 0 10px">
{{ speaker.role }} <br/>
{{ speaker.company }} <br/>
</p>
{% endif %}
</p>
</div>
<div class="col-md-4">
{% if speaker.twitter %}
<p>
<a href="https://twitter.com/{{ speaker.twitter }}" class="twitter-follow-button" data-show-count="false">Follow @{{ speaker.twitter }}</a>
</p>
{% endif %}
{% if speaker.github %}
<p>
<a class="github-button" href="https://github.com/{{ speaker.github }}" aria-label="Follow @{{ speaker.github}} on GitHub">Follow @{{ speaker.github }}</a>
</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="row nested-row">
<div class="col-md-offset-2 col-md-8">
<p> {{ speaker.bio }} </p>
<div class="row nested-row">
<div class="col-md-offset-1 col-md-11">
<p> {{ speaker.bio }} </p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move the speaker bio below the abstract? The abstract is the important thing here - people are here for the talks, not to learn about the speakers lives.

</div>
</div>
</div>
<div class="row nested-row">
<div class="col-md-offset-2 col-md-8">
<p>The title of the talk is <i>"{{ speaker.title }}"</i>.</p>
<div class="row nested-row">
<div class="col-md-offset-1 col-md-11">
<p>The title of the talk is <i>"{{ speaker.title }}"</i>.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is weird. "The title of the talk is X". Can we make it look like a title, and put it with the abstract in a more prominent position? This page is basically listing the talks with their titles and abstracts, so it should look more like it.

</div>
</div>
</div>
<div class="row nested-row">
<div class="col-md-offset-2 col-md-8" style="background:#eee; padding:15px;">
<p>{{ speaker.abstract}}</p>
<div class="row nested-row">
<div class="col-md-offset-1 col-md-11" style="background:#eee; padding:15px;">
<p>{{ speaker.abstract}}</p>
</div>
</div>
</div>
{% if speaker.video %}
<div class="row nested-row">
<div class="col-md-offset-2 col-md-8">
<p>The video for this talk is <a target="_blank" href="http://youtube.com/watch?v={{speaker.video}}">available on youtube</a></p>
{% if speaker.video %}
<div class="row nested-row">
<div class="col-md-offset-1 col-md-11">
<p>The video for this talk is <a target="_blank" href="http://youtube.com/watch?v={{speaker.video}}">available on youtube</a></p>
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
18 changes: 10 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,17 @@ <h2>Previous Speakers</h2>
</div>
<div class="row" style='margin-top:20px;'>
{% for speaker in landing_page_speakers %}
<div class="col-md-4" style="height:110px; overflow-y:hidden">
<img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.small.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:25px; height:50px;'/>
<div style='display:inline-block; width:60%; padding-bottom:10px;'>
<p>
<b>{{ speaker.name }}</b><br/>
{{ speaker.company}}
</p>
<a href="/speakers/{{ speaker.year }}#{{ speaker.name | slugify }}">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

speakers on home page are now linked properly

<div class="col-md-4" style="height:110px; overflow-y:hidden">
<img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.small.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:25px; height:50px;'/>
<div style='display:inline-block; width:60%; padding-bottom:10px;'>
<p>
<b>{{ speaker.name }}</b><br/>
{{ speaker.company}}
</p>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
<div class="row text-center">
Expand Down