KristyF/PartyJukebox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

slight layout update, mostly relevant for mobile

Browse source
This commit is contained in:
Kristy Fournier 2026-01-21 23:45:14 -05:00
parent 0dba7fd8cf
commit 6a04ac30f5
2 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Client/index.html
View file

@ -22,7 +22,7 @@ changes visibility with JS-->
<input type="text" autocomplete="off" placeholder="Search" id="songsearch" enterkeyhint="Search" class="searchbox"><button class="go-search" id="go-search">Go!</button> <input type="text" autocomplete="off" placeholder="Search" id="songsearch" enterkeyhint="Search" class="searchbox"><button class="go-search" id="go-search">Go!</button>
</div> </div>
<div class="songlist" id="songlist"> <div class="songlist" id="songlist">
<h1>Search to find songs!</h1> <h1 style="margin-top: 0px;">Search to find songs!</h1>
<!-- Placeholder for the song items <!-- Placeholder for the song items
These are generated using javascript for search These are generated using javascript for search
@ -112,7 +112,9 @@ changes visibility with JS-->
<img tabindex=0 class="control-button" id="skip-button" src="./images/skip.png" alt="Skip"></img> <img tabindex=0 class="control-button" id="skip-button" src="./images/skip.png" alt="Skip"></img>
<img tabindex=0 class="control-button" id="search-button" src="./images/search.png" alt="Search"></img> <img tabindex=0 class="control-button" id="search-button" src="./images/search.png" alt="Search"></img>
</div> </div>
<div class="settings-button-holder">
<img tabindex=0 class="settings-button control-button" id="settings-button" src="./images/settings.png" alt="settings"></img> <img tabindex=0 class="settings-button control-button" id="settings-button" src="./images/settings.png" alt="settings"></img>
</div>
<script src="/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="scripts.js"></script> <script src="scripts.js"></script>
</body> </body>

12
Client/styles.css
View file

@ -73,18 +73,25 @@ h4 {
background-color: color-mix(in srgb, var(--bg-main), transparent 16%); background-color: color-mix(in srgb, var(--bg-main), transparent 16%);
} }
.settings-button { .settings-button-holder {
width:15%; width:15%;
max-width: 90px; max-width: 90px;
position:fixed; position:fixed;
top:0; top:0;
right:0; right:0;
margin: 3px; margin: 3px;
background-color: var(--bg-main);
/* This is a circle background for the circle settings button /* This is a circle background for the circle settings button
So it can display over other text and such */ So it can display over other text and such */
border-radius: 50%; border-radius: 50%;
} }
.settings-button {
width: 100%;
}
.controls > .control-button{ .controls > .control-button{
width:20%; width:20%;
max-width: 110px; max-width: 110px;
@ -105,7 +112,7 @@ h4 {
/* Songlist stuff */ /* Songlist stuff */
.songlist { .songlist {
width: 80%; width: 80%;
min-width: 300px; min-width: 400px;
margin:auto auto 150px; margin:auto auto 150px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -139,6 +146,7 @@ h4 {
.searchbox { .searchbox {
width: 65%; width: 65%;
margin: 1px; margin: 1px;
margin-bottom: 16px;
} }
.go-search { .go-search {
width: 20%; width: 20%;