grail/gralias
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{ body{
background-color: #0C1616FF; background-color: #0C1616FF;
color: #8896b2; color: #8896b2;
max-width: 800px; max-width: 1000px;
min-width: 0; min-width: 0;
margin: 2em auto !important; margin: 2em auto !important;
margin-left: auto; margin-left: auto;

4
components/cardtable.html
View File

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

2
components/login.html
View File

@@ -4,7 +4,7 @@
<div> <div>
<label For="username" class="block text-sm font-medium leading-6 text-white-900">tell us your username</label> <label For="username" class="block text-sm font-medium leading-6 text-white-900">tell us your username</label>
<div class="mt-2"> <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>
<div id="login_notice">this name looks available</div> <div id="login_notice">this name looks available</div>
</div> </div>

8
components/room.html
View File

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

5
components/teampew.html
View File

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