Skip to content

Commit e936479

Browse files
tunethewebtunetheweb
authored
Fix contributors search icon alignment on mobile (#3899)
1 parent f6bc996 commit e936479

1 file changed

Lines changed: 70 additions & 61 deletions

File tree

‎src/templates/base/contributors.html‎

Lines changed: 70 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,14 @@
131131
margin-bottom: 0.588em;
132132
}
133133

134-
.contributor-social a {
134+
.contributor-social,
135+
.contributor-search {
136+
text-align: center;
137+
margin: 0 5px;
138+
}
139+
140+
.contributor-social a,
141+
.contributor-search a {
135142
display: inline-block;
136143
margin: 0 5px;
137144
}
@@ -317,66 +324,68 @@ <h1 class="title title-lg">
317324
<img class="contributor-avatar" src="{{contributor.avatar_url}}" height="100" width="100" alt="{{ contributor.name }} avatar" loading="lazy">
318325
{% endif %}
319326

320-
<div class="contributor-name">{{ contributor.name }}</div>
321-
322-
<div class="contributor-social">
323-
{% if contributor.twitter %}
324-
<a href="https://x.com/{{ contributor.twitter }}" aria-label="{{ onTwitter(contributor.twitter) }}">
325-
<svg width="22" height="22" role="img">
326-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use>
327-
</svg>
328-
</a>
329-
{% endif %}
330-
{% if contributor.mastodon %}
331-
<a href="{{ contributor.mastodon }}" aria-label="{{ onMastodon(contributor.mastodon) }}">
332-
<svg width="22" height="22" role="img">
333-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mastodon-logo"></use>
334-
</svg>
335-
</a>
336-
{% endif %}
337-
{% if contributor.bluesky %}
338-
<a href="https://bsky.app/profile/{{ contributor.bluesky }}" aria-label="{{ onBluesky(contributor.bluesky) }}">
339-
<svg width="22" height="22" role="img">
340-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
341-
</svg>
342-
</a>
343-
{% endif %}
344-
{% if contributor.github %}
345-
<a href="https://github.com/{{ contributor.github }}" aria-label="{{ onGitHub(contributor.github) }}">
346-
<svg width="24" height="22" role="img">
347-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use>
348-
</svg>
349-
</a>
350-
{% endif %}
351-
{% if contributor.linkedin %}
352-
<a href="https://www.linkedin.com/in/{{ contributor.linkedin }}/" aria-label="{{ onLinkedIn(contributor.name) }}">
353-
<svg width="22" height="22" role="img">
354-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linkedin-logo"></use>
355-
</svg>
356-
</a>
357-
{% endif %}
358-
{% if contributor.website %}
359-
<a href="{{ contributor.website }}" aria-label="{{ website(contributor.name) }}">
360-
<svg width="22" height="22" role="img">
361-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe-logo"></use>
362-
</svg>
363-
</a>
364-
{% endif %}
365-
</div>
366-
367-
<div class="contributor-teams">
368-
{% for id in contributor.teams | sort() %}
369-
<span class="contributor-team team-{{ id }}">{{ localizedTeamRole[id] if localizedTeamRole[id]|length else team.name }}</span>{% if loop.length > 2 %}{{ self.comma() if loop.index < loop.length - 1 }}{{ self.oxford_comma() if loop.index == loop.length - 1 }}{% endif %}
370-
{% if loop.index == loop.length - 1 %}{{ self.and() }}{% endif %}
371-
{% endfor %}
372-
</div>
373-
374-
<div class="contributor-search">
375-
<a href="/{{ lang }}/search?q={{ contributor.name | urlencode }}" aria-label="{{ self.search_title() }} {{ contributor.name }}">
376-
<svg width="22" height="22" role="img">
377-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use>
378-
</svg>
379-
</a>
327+
<div class="contributor-details">
328+
<div class="contributor-name">{{ contributor.name }}</div>
329+
330+
<div class="contributor-social">
331+
{% if contributor.twitter %}
332+
<a href="https://x.com/{{ contributor.twitter }}" aria-label="{{ onTwitter(contributor.twitter) }}">
333+
<svg width="22" height="22" role="img">
334+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use>
335+
</svg>
336+
</a>
337+
{% endif %}
338+
{% if contributor.mastodon %}
339+
<a href="{{ contributor.mastodon }}" aria-label="{{ onMastodon(contributor.mastodon) }}">
340+
<svg width="22" height="22" role="img">
341+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mastodon-logo"></use>
342+
</svg>
343+
</a>
344+
{% endif %}
345+
{% if contributor.bluesky %}
346+
<a href="https://bsky.app/profile/{{ contributor.bluesky }}" aria-label="{{ onBluesky(contributor.bluesky) }}">
347+
<svg width="22" height="22" role="img">
348+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
349+
</svg>
350+
</a>
351+
{% endif %}
352+
{% if contributor.github %}
353+
<a href="https://github.com/{{ contributor.github }}" aria-label="{{ onGitHub(contributor.github) }}">
354+
<svg width="24" height="22" role="img">
355+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use>
356+
</svg>
357+
</a>
358+
{% endif %}
359+
{% if contributor.linkedin %}
360+
<a href="https://www.linkedin.com/in/{{ contributor.linkedin }}/" aria-label="{{ onLinkedIn(contributor.name) }}">
361+
<svg width="22" height="22" role="img">
362+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linkedin-logo"></use>
363+
</svg>
364+
</a>
365+
{% endif %}
366+
{% if contributor.website %}
367+
<a href="{{ contributor.website }}" aria-label="{{ website(contributor.name) }}">
368+
<svg width="22" height="22" role="img">
369+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe-logo"></use>
370+
</svg>
371+
</a>
372+
{% endif %}
373+
</div>
374+
375+
<div class="contributor-teams">
376+
{% for id in contributor.teams | sort() %}
377+
<span class="contributor-team team-{{ id }}">{{ localizedTeamRole[id] if localizedTeamRole[id]|length else team.name }}</span>{% if loop.length > 2 %}{{ self.comma() if loop.index < loop.length - 1 }}{{ self.oxford_comma() if loop.index == loop.length - 1 }}{% endif %}
378+
{% if loop.index == loop.length - 1 %}{{ self.and() }}{% endif %}
379+
{% endfor %}
380+
</div>
381+
382+
<div class="contributor-search">
383+
<a href="/{{ lang }}/search?q={{ contributor.name | urlencode }}" aria-label="{{ self.search_title() }} {{ contributor.name }}">
384+
<svg width="22" height="22" role="img">
385+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use>
386+
</svg>
387+
</a>
388+
</div>
380389
</div>
381390
</li>
382391
{% endfor %}

0 commit comments

Comments
 (0)