grail/golias
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enha: responsive styles

Browse Source
This commit is contained in:
Grail Finder
2025-05-07 11:36:13 +03:00
parent 86ef35160c
commit 3ade7310a7
5 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/base.html
View File

@ -13,7 +13,7 @@
body{
background-color: #0C1616FF;
color: #8896b2;
max-width: 800px;
max-width: 1000px;
min-width: 0;
margin: 2em auto !important;
margin-left: auto;

4
components/cardtable.html
View File

@ -1,7 +1,7 @@
{{define "cardtable"}}
<!-- Center Panel -->
<div class="w-1/2 p-4 flex justify-center">
<div class="grid grid-cols-5 gap-2">
<div class="flex justify-center">
<div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
{{range .Room.Cards}}
{{template "cardword" .}}
{{end}}

2
components/login.html
View File

@ -4,7 +4,7 @@
<div>
<label For="username" class="block text-sm font-medium leading-6 text-white-900">tell us your username</label>
<div class="mt-2">
<input id="username" name="username" hx-target="#login_notice" hx-swap="outerHTML" hx-post="/check/name" hx-trigger="input changed delay:400ms" autocomplete="username" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-center"/>
<input id="username" name="username" hx-target="#login_notice" hx-swap="outerHTML" hx-post="/check/name" hx-trigger="input changed delay:400ms" autocomplete="username" required class="block w-full rounded-md border-0 bg-white py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-center"/>
</div>
<div id="login_notice">this name looks available</div>
</div>

14
components/room.html
View File

@ -1,12 +1,16 @@
{{define "room"}}
<div class="flex h-screen">
<div id="hello-user">
<p>Hello {{.Username}}</p>
</div>
<div id="hello-user">
<p>Hello {{.Username}}</p>
</div>
<hr />
<div class="flex justify-center">
<!-- Left Panel -->
{{template "teampew" "blue"}}
{{template "cardtable" .}}
<!-- Right Panel -->
{{template "teampew" "red"}}
</div>
<hr />
<div id="cardtable">
{{template "cardtable" .}}
</div>
{{end}}

5
components/teampew.html
View File

@ -1,9 +1,10 @@
{{define "teampew"}}
<div class="w-1/4 p-4 border-r">
<!-- <div class="w-1/4 p-4 border-r"> -->
<div>
<h2 class="text-xl mb-4">Join {{.}} Team</h2>
<form hx-post="/join-team" hx-target="#room-content">
<input type="hidden" name="team" value="{{.}}">
<div class="mb-2">
<div class="mb-1">
<button type="submit" name="role" value="guesser" class="w-full bg-{{.}}-500 text-white py-2 px-4 rounded">
Join as Guesser
</button>