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

Jump to bottom

Better author social media on website #1185

Merged
merged 9 commits into from
Aug 10, 2020
Merged

Better author social media on website #1185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1fc3566
Better Author Data
tunetheweb Aug 9, 2020
a30f295
Clean up
tunetheweb Aug 9, 2020
777c09e
Move icons up if space
tunetheweb Aug 9, 2020
b6c9b2d
Linting fixes
tunetheweb Aug 9, 2020
7573521
Hide social media from screen-readers
tunetheweb Aug 9, 2020
8da5ac0
Move social media to new line all the time
tunetheweb Aug 9, 2020
6ea7dfc
Revert author link change
tunetheweb Aug 9, 2020
cf542cd
Merge branch 'main' into better_author_social_media
tunetheweb Aug 9, 2020
2d27b99
Review feedback
tunetheweb Aug 9, 2020
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
19 changes: 15 additions & 4 deletions src/static/css/page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,8 +257,8 @@
.authors .name {
font-size: 24px;
font-size: 1.5rem;
margin-right: 10px;
margin-right: 0.625rem;
margin-right: 16px;
margin-right: 1rem;
margin-bottom: 10px;
margin-bottom: 0.625rem;
display: inline-block;
Expand All @@ -280,19 +280,30 @@
}

.authors .social a {
margin: 0 10px 0 0;
margin: 0 0.625rem 0 0;
margin-right: 10px;
margin-right: 0.625rem;
white-space: nowrap;
display: inline-flex;
align-items: center;
text-decoration: none;
}

.authors .social a:last-child {
margin-right: 0;
}

.authors .social a:hover,
.authors .social a:focus {
text-decoration: underline;
}

.authors .social svg {
width: 1em;
height: auto;
margin-right: 4px;
margin-right: 0.25rem;
}

#chapter-navigation {
padding: 50px 36px;
padding: 3.125rem 2.25rem;
Expand Down
21 changes: 13 additions & 8 deletions src/templates/base/2019/base_chapter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"https://almanac.httparchive.org{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}"
{% if authordata.twitter %},"https://twitter.com/{{ authordata.twitter }}"{% endif %}
{% if authordata.github %},"https://github.com/{{ authordata.github }}"{% endif %}
{% if authordata.linkedin %},"https://www.linkedin.com/in/{{ authordata.linkedin }}/"{% endif %}
],
"name": "{{ authordata.name if authordata.name else author }}"
}{% if loop.index < loop.length %},{% endif %}
Expand Down Expand Up @@ -86,7 +87,7 @@
{% macro render_byline() %}
<div class="byline">{{ self.written_by_before() }}
{% for author in metadata.get('authors') %}
<a class="author" href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{{ self.comma() if not loop.last }}
<a class="author" href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{{ self.comma() if not loop.last }}
{% if loop.index == loop.length - 1 %}{{ self.and() }}{% endif %}
{% endfor %}{{ self.written_by_after() }}
</div>
Expand Down Expand Up @@ -129,41 +130,45 @@ <h2 id="authors">
</div>
<div class="info">
<a href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}"><span class="name">{{ authordata.name if authordata.name else author }}</span></a>
{% if authordata.twitter or authordata.github %}
<span class="social">
{% if authordata.twitter or authordata.github or authordata.linkedin or authordata.website %}
<div class="social">
{% if authordata.twitter %}
<a class="twitter" href="https://twitter.com/{{ authordata.twitter }}" aria-labelledby="author-{{ author }}-twitter">
<svg width="22" height="22" role="img">
<svg width="22" height="22" role="img" aria-hidden>
<title id="author-{{ author }}-twitter">{{ onTwitter(authordata.twitter) }}</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
</svg>
@{{ authordata.twitter }}
</a>
{% endif %}
{% if authordata.github %}
<a class="github" href="https://github.com/{{ authordata.github }}" aria-labelledby="author-{{ author }}-github">
<svg width="22" height="22" role="img">
<svg width="22" height="22" aria-hidden>
<title id="author-{{ author }}-github">{{ onGitHub(authordata.github) }}</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
</svg>
{{ authordata.github }}
</a>
{% endif %}
{% if authordata.linkedin %}
<a class="linkedin" href="https://www.linkedin.com/in/{{ authordata.linkedin }}/" aria-labelledby="author-{{ author }}-linkedin">
<svg width="22" height="22" role="img">
<svg width="22" height="22" aria-hidden>
<title id="author-{{ author }}-linkedin">{{ onLinkedIn(authordata.name) }}</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linkedin"></use>
</svg>
{{ authordata.linkedin }}
</a>
{% endif %}
{% if authordata.website %}
<a class="website" href="{{ authordata.website }}" aria-labelledby="author-{{ author }}-website">
<svg width="22" height="22" role="img">
<svg width="22" height="22" aria-hidden>
<title id="author-{{ author }}-website">{{ website(authordata.name) }}</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe"></use>
</svg>
{{ authordata.website }}
</a>
{% endif %}
</span>
</div>
{% endif %}
{% if authordata.tagline %}
<div class="tagline">
Expand Down