diginaut/alfagok
1
0
Fork 0
mirror of https://github.com/aquatix/alfagok.git synced 2025-12-06 21:05:10 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use CSS to style centering the guess lists

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-22 13:05:56 +01:00
parent 20321f0bb4
commit 1ce340853f
2 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/alfagok/static/game.css
View File

@@ -37,6 +37,10 @@ a.title {
color: #CCC;; color: #CCC;;
} }
.guessesheading, .guessesbefore, .guessesafter {
text-align: center;
}
input[type="text"] { input[type="text"] {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;

66
src/alfagok/templates/index.html
View File

@@ -24,47 +24,43 @@
<p x-show="$store.alfagok.isLocalStorageAvailable"></p> <p x-show="$store.alfagok.isLocalStorageAvailable"></p>
</div> </div>
<center> <p class="guessesheading" x-cloak x-show="$store.alfagok.guessesBefore.length">Het woord van de dag komt <em>na</em>:</p>
<ul class="guessesbefore">
<template x-for="item in $store.alfagok.guessesBefore" :key="item">
<li x-text="item"></li>
</template>
</ul>
<p class="guessesheading" x-cloak x-show="$store.alfagok.guessesBefore.length">Het woord van de dag komt <em>na</em>:</p> <div x-show="!$store.alfagok.winTime">
<ul class="guessesbefore"> <input type="text" autocomplete="new-password" autocorrect="off" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess()">
<template x-for="item in $store.alfagok.guessesBefore" :key="item">
<li x-text="item"></li>
</template>
</ul>
<div x-show="!$store.alfagok.winTime">
<input type="text" autocomplete="new-password" autocorrect="off" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess()">
{# <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>#} {# <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>#}
<button @click="$store.alfagok.doGuess()">Doe een gok</button> <button @click="$store.alfagok.doGuess()">Doe een gok</button>
<p class="error" x-cloak x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p> <p class="error" x-cloak x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
</div> </div>
<div x-cloak x-show="$store.alfagok.winTime" class="win"> <div x-cloak x-show="$store.alfagok.winTime" class="win">
<h3><b>Je hebt hem! 🎉</b></h3> <h3><b>Je hebt hem! 🎉</b></h3>
<p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p> <p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
<div id="stats"> <div id="stats">
<div id="results"> <div id="results">
<p><b x-text="$store.alfagok.resultGameID"></b></p> <p><b x-text="$store.alfagok.resultGameID"></b></p>
<p x-text="$store.alfagok.resultGuesses"></p> <p x-text="$store.alfagok.resultGuesses"></p>
<p x-text="$store.alfagok.resultTimeTaken"></p> <p x-text="$store.alfagok.resultTimeTaken"></p>
<p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p> <p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>
</div>
</div> </div>
<div id="copyresults"></div>
<button class="copy" data-clipboard-target="#results">
Tik om te kopi&euml;ren en te delen ❤️
</button>
</div> </div>
<div id="copyresults"></div>
<button class="copy" data-clipboard-target="#results">
Tik om te kopi&euml;ren en te delen ❤️
</button>
</div>
<p class="guessesheading" x-cloak x-show="$store.alfagok.guessesAfter.length">Het woord van de dag komt <em>voor</em>:</p> <p class="guessesheading" x-cloak x-show="$store.alfagok.guessesAfter.length">Het woord van de dag komt <em>voor</em>:</p>
<ul class="guessesafter"> <ul class="guessesafter">
<template x-for="item in $store.alfagok.guessesAfter" :key="item"> <template x-for="item in $store.alfagok.guessesAfter" :key="item">
<li x-text="item"></li> <li x-text="item"></li>
</template> </template>
</ul> </ul>
</center>
</div> </div>