Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-11-22 19:28:35 +01:00
Code Issues Projects Releases Wiki Activity

allow carousels

Browse source
This commit is contained in:
Ell 2023-08-12 14:28:29 +02:00
parent e04e12e662
commit d6e0b587b5
3 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/_data/community-content.json
View file

@ -8,7 +8,8 @@
"links": { "links": {
"Steam": "https://steamcommunity.com/sharedfiles/filedetails/?id=2965803577", "Steam": "https://steamcommunity.com/sharedfiles/filedetails/?id=2965803577",
"YouTube": "https://www.youtube.com/channel/UC87-8FM-U9OSUYCzIqlhztA" "YouTube": "https://www.youtube.com/channel/UC87-8FM-U9OSUYCzIqlhztA"
} },
"carousel": ["itty.png", "itty.png"]
}, },
{ {
"name": "TEMP!! Designing the Modern Home", "name": "TEMP!! Designing the Modern Home",

25
web/community.html
View file

@ -24,8 +24,33 @@ summary: A fun simulation game where you mess with people's lives
<div class="community-content-box"> <div class="community-content-box">
<a id="{{ content.slug }}"></a> <a id="{{ content.slug }}"></a>
{% if section.images %} {% if section.images %}
{% if content.carousel %}
<div id="{{ content.slug }}-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for item in content.carousel %}
<li data-target="#{{ content.slug }}-carousel" data-slide-to="{{ forloop.index0 }}" {% if forloop.first %}class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for item in content.carousel %}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<img class="d-block w-100" src="/media/community/{{ item }}" alt="A carousel slide showing off {{ content.name }}">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#{{ content.slug }}-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{{ content.slug }}-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% else %}
<img src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%"> <img src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
{% endif %} {% endif %}
{% endif %}
{% if section.embeds %} {% if section.embeds %}
<div class="video-embed"> <div class="video-embed">
<iframe src="{{ content.embed }}" title="{{ content.name }} Embed" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="{{ content.embed }}" title="{{ content.name }} Embed" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2
web/style.css
View file

@ -105,7 +105,7 @@ pre.highlight {
.community-content-box-content { .community-content-box-content {
margin: 0; margin: 0;
top: auto; top: auto;
bottom: 30px; bottom: 50px;
white-space: initial; white-space: initial;
} }