Skip to content

Commit

Permalink
html button tag for showmore/less
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmos
bmos committed Mar 17, 2024
1 parent 5ff993f commit deea7d2
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 107 deletions.
12 changes: 6 additions & 6 deletions _includes/avatar.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<img height="{{include.height}}"
width="{{include.width}}"
class="{{include.class}}"
{% if post.author and post.avatar %}
alt="{{locale.alt_text_prefix}} {{post.author}}"
{% endif %}
src="{% if post.avatar contains '://' %}{% elsif post.avatar %}{{ site.baseurl }}/hackergotchi/{% else %}{{ site.baseurl }}/hackergotchi/default.png{% endif %}{{ post.avatar }}"/>
width="{{include.width}}"
class="{{include.class}}"
{% if post.author and post.avatar %}
alt="{{locale.alt_text_prefix}} {{post.author}}"
{% endif %}
src="{% if post.avatar contains '://' %}{% elsif post.avatar %}{{ site.baseurl }}/hackergotchi/{% else %}{{ site.baseurl }}/hackergotchi/default.png{% endif %}{{ post.avatar }}"/>
4 changes: 2 additions & 2 deletions _includes/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<h3 class="text-center font-weight-bold">
{% include icons/calendar.svg %}
{% if page.locale.id == 'en' %}
{{ post.created_at | date: '%a' }}, {{ post.created_at | date_to_string: "ordinal", "US" }}
{{ post.created_at | date: '%a' }}, {{ post.created_at | date_to_string: "ordinal", "US" }}
{% else %}
{{ post.created_at | localize_date }}
{{ post.created_at | localize_date }}
{% endif %}
</h3>
{% endif %}
68 changes: 34 additions & 34 deletions _includes/main-info.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
<div class="py-3 mb-3 border-bottom bg-light map-container">
<div class="map">
{% include map.svg %}
</div>
<div class="container">
<div class="row col-md-10 mx-auto">
<div class="col-md-auto d-flex">
<img class="mx-auto"
{% if locale.logo_alt_text %}
alt="{{locale.logo_alt_text}}"
{% endif %}
src="{{ site.baseurl }}/assets/images/logo.svg"/>
</div>
<div class="col-md my-auto">
<h2>{% if page.locale.name == 'Global' %}{{ locale.welcome }}{% else %}{{ locale.welcome_lang }}{% endif %}</h2>
{% capture project %}
<a href="https://opensuse.org">{{ locale.subtitle_project }}</a>
{% endcapture %}
<h5>{{ locale.subtitle | replace: '$project', project }}</h5>
</div>
<div class="col-12 text-center">
{% assign sorted = site.tags | sort %}
{% for tag in sorted %}
{% assign lang = site.localization.locales_set[tag.first] %}
<a class="mx-2" href="{{ site.baseurl }}/{{ tag.first }}/">{{ lang.name }}</a>
{% endfor %}
</div>
</div>
</div>
<div class="map">
{% include map.svg %}
</div>
<div class="container">
<div class="row col-md-10 mx-auto">
<div class="col-md-auto d-flex">
<img class="mx-auto"
{% if locale.logo_alt_text %}
alt="{{locale.logo_alt_text}}"
{% endif %}
src="{{ site.baseurl }}/assets/images/logo.svg"/>
</div>
<div class="col-md my-auto">
<h2>{% if page.locale.name == 'Global' %}{{ locale.welcome }}{% else %}{{ locale.welcome_lang }}{% endif %}</h2>
{% capture project %}
<a href="https://opensuse.org">{{ locale.subtitle_project }}</a>
{% endcapture %}
<h5>{{ locale.subtitle | replace: '$project', project }}</h5>
</div>
<div class="col-12 text-center">
{% assign sorted = site.tags | sort %}
{% for tag in sorted %}
{% assign lang = site.localization.locales_set[tag.first] %}
<a class="mx-2" href="{{ site.baseurl }}/{{ tag.first }}/">{{ lang.name }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="container">
<div class="row col-md-10 mx-auto">
{% capture instructions %}
<a href="https://en.opensuse.org/openSUSE:Planet">{{ locale.addnotice_instructions }}</a>
{% endcapture %}
<div class="alert alert-info w-100">{{ locale.addnotice | replace: '$instructions', instructions }}</div>
</div>
<div class="row col-md-10 mx-auto">
{% capture instructions %}
<a href="https://en.opensuse.org/openSUSE:Planet">{{ locale.addnotice_instructions }}</a>
{% endcapture %}
<div class="alert alert-info w-100">{{ locale.addnotice | replace: '$instructions', instructions }}</div>
</div>
</div>
111 changes: 68 additions & 43 deletions _includes/single-post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,58 +5,83 @@
<div class="col-12 col-md-8 p-0">
<div class="card mb-3 card-sm-border-0">
<div class="row m-0 border-bottom">
<div class="col-auto d-md-none d-flex p-0">
{% include avatar.html width="48px" class="my-auto mr-2" %}
</div>
<div class="col card-header d-flex justify-content-between pl-1 pl-md-3 border-0">
<div>
{% capture post_author %}
<a href="{{ post.link }}">{{ post.author }}</a>
<a href="{{ post.rss }}">{% include icons/feed.svg %}</a>
{% endcapture %}
{% capture post_language %}
{% assign lang = site.localization.locales_set[post.tags.first] %}
<a class="text-muted" href="{{ site.baseurl }}/{{ post.tags.first }}/">{{ lang.name }}</a>
{% endcapture %}
{% capture post_time %}
<a class="text-muted" href="{{ post.original_link }}">{{ post.created_at | date: "%H:%M" }}</a>
{% endcapture %}
<span class="text-muted">
{% if include.language %}
{{ locale.postedinat | replace: '$author', post_author | replace: '$language', post_language | replace: '$time', post_time }}
{% else %}
{{ locale.postedat | replace: '$author', post_author | replace: '$time', post_time }}
{% endif %}
</span>
<div class="col-auto d-md-none d-flex p-0">
{% include avatar.html width="48px" class="my-auto mr-2" %}
</div>
<div>
{% if post.member %}
<a title="openSUSE Member" href="{% if post.connect %}https://connect.opensuse.org/pg/profile/{{ post.connect }}{% else %}https://en.opensuse.org/openSUSE:Members{% endif %}" class="badge badge-success"><img src="{{ site.baseurl }}/assets/images/profile/member.svg"/> Member</a>
{% elsif post.connect %}
<a href="https://connect.opensuse.org/pg/profile/{{ post.connect }}"><img title="Profile on Connect" src="{{ site.baseurl }}/assets/images/profile/connect.svg"/></a>
{% endif %}
{% if post.irc %}
<a title="{{ post.irc }} on Libera" href="irc://irc.libera.chat/{{ post.irc }},isnick" class="badge badge-dark"><img src="{{ site.baseurl }}/assets/images/profile/irc.svg"/> {{ post.irc }}</a>
{% endif %}
{% if post.gsoc %}
<a href="https://summerofcode.withgoogle.com/"><img title="Google Summer of Code" src="{{ site.baseurl }}/assets/images/profile/gsoc.svg"/></a>
{% endif %}
<div class="col card-header d-flex justify-content-between pl-1 pl-md-3 border-0">
<div>
{% capture post_author %}
<a href="{{ post.link }}">{{ post.author }}</a>
<a href="{{ post.rss }}">{% include icons/feed.svg %}</a>
{% endcapture %}
{% capture post_language %}
{% assign lang = site.localization.locales_set[post.tags.first] %}
<a class="text-muted" href="{{ site.baseurl }}/{{ post.tags.first }}/">{{ lang.name }}</a>
{% endcapture %}
{% capture post_time %}
<a class="text-muted" href="{{ post.original_link }}">{{ post.created_at | date: "%H:%M" }}</a>
{% endcapture %}
<span class="text-muted">
{% if include.language %}
{{ locale.postedinat | replace: '$author', post_author | replace: '$language', post_language | replace: '$time', post_time }}
{% else %}
{{ locale.postedat | replace: '$author', post_author | replace: '$time', post_time }}
{% endif %}
</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<a href="{{ post.original_link }}">
<h2>{{ post.title }}</h2>
</a>
<div class="roller">
<input class="roller-input" id="{{ post.guid | slugify }}" type="checkbox">
<label class="roller-label btn btn-primary mt-3" for="{{ post.guid | slugify }}" role="button">
<span class="show-more">{{ locale.showmore }}</span>
<span class="show-less">{{ locale.showless }}</span>
</label>
<div class="roller-item">{{ post.content }}</div>
<script type="text/javascript">
function toggleButton(id) {
function expand(e) {
const elementToChange = document.getElementById(`content_${id}`);
if (e.target.getAttribute('aria-expanded') === 'true') {
elementToChange.style.maxHeight = "50vh";
setTimeout(function () {
e.target.scrollIntoView({behavior: "smooth", block: "start"});
}, 250);
return
}
elementToChange.style.maxHeight = "100%";
return
}

function buttonStyle(e) {
if (e.target.getAttribute('aria-expanded') === 'true') {
e.target.setAttribute('aria-expanded', 'false');
e.target.innerHTML = "{{ locale.showmore }}";
return
}
e.target.setAttribute('aria-expanded', 'true');
e.target.innerHTML = "{{ locale.showless }}";
return
}

const button = document.getElementById(`button_${id}`)
button.addEventListener('click', expand);
button.addEventListener('click', buttonStyle);
}

document.addEventListener("DOMContentLoaded", function () {
toggleButton('{{ post.guid | slugify }}')
});
</script>
<div class="roller-item"
id="content_{{ post.guid | slugify }}">
{{ post.content }}
</div>
<button class="roller-button btn btn-primary mt-3"
id="button_{{ post.guid | slugify }}"
aria-expanded="false">
{{ locale.showmore }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
26 changes: 4 additions & 22 deletions assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,34 +58,16 @@
transition: all .15s ease;
overflow: hidden;
}

.roller {
position: relative;
margin-bottom: 3rem!important;
margin-bottom: 3rem !important;
}
.roller-label {

.roller-button {
position: absolute;
top: 100%;
}
.roller-input {
display: none;
}
.roller-label .show-less {
display: none;
}
.roller-label .show-more {
display: block;
}
.roller-input:checked + .roller-label .show-less {
display: block;
}
.roller-input:checked + .roller-label .show-more {
display: none;
}
.roller-input:checked ~ .roller-item {
max-height: 100%;
transition: all .15s ease;
overflow: hidden;
}

.avatar {
width: calc(100% - 1rem);
Expand Down

0 comments on commit deea7d2

Please sign in to comment.