fergalmoran/buttcord
1
0
Fork 0
mirror of https://github.com/fergalmoran/buttcord.git synced 2025-12-22 09:27:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mar 8 2021

Browse Source
This commit is contained in:
Fergal Moran
2021-03-08 20:23:39 +00:00
parent 4c67cbb1d9
commit 607af5b4d4
3 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/style.css
View File

@@ -15,6 +15,10 @@
border-left: blueviolet;
border-left-style: groove;
}
.list-group-item.bc-active {
border-left: #d1e6a1;
border-left-style: groove;
}
#buttons-pane {
background-color: #202225;
}

4
templates/_base.html
View File

@@ -22,6 +22,10 @@
{% endblock %}
{% block scripts %}
{% endblock %}
</body>
</html>

32
templates/index.html
View File

@@ -5,16 +5,23 @@
<div id="buttons-pane"
class="col-1 pt-3">
<ul class="list-group">
<li class="list-group-item d-flex justify-content align-items-center">
<li class="list-group-item d-flex justify-content align-items-center"
onclick="selectMe(event)">
<img class="circle-icon pink-icon"
src="http://placebeard.it/64/64"
src="http://placebeard.it/64/64?beard=1"
alt="">
</li>
<li class="list-group-item d-flex justify-content align-items-center">
<i class="fas fa-baby-carriage circle-icon orange-icon"></i>
<li class="list-group-item d-flex justify-content align-items-center"
onclick="selectMe(event)">
<img class="circle-icon pink-icon"
src="http://placebeard.it/64/64?beard=2"
alt="">
</li>
<li class="list-group-item d-flex justify-content align-items-center">
<i class="fas fa-ban circle-icon blue-icon"></i>
<li class="list-group-item d-flex justify-content align-items-center"
onclick="selectMe(event)">
<img class="circle-icon pink-icon"
src="http://placebeard.it/64/64?beard=3"
alt="">
</li>
</ul>
</div>
@@ -32,4 +39,17 @@
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
function selectMe(event) {
//this is the wrong way
//later, we will figure out why!
let li = document.querySelectorAll('li');
li.forEach(l => l.classList.remove('bc-active'));
event.currentTarget.classList.toggle('bc-active');
}
</script>
{% endblock %}