kagura/ReactLearn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix for look on mobile

Browse source
This commit is contained in:
Kagura 2024-11-21 17:59:16 +08:00
parent 55aaa859b0
commit 48d3dd3645
3 changed files with 54 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/TicTacToe.js
View file

@ -5,18 +5,19 @@ function Square({ row, column, value, clickHandler }) {
let buttonClass = ""
switch (value){
case "X":
buttonClass = "square bg-amber-200 "
buttonClass = "bg-amber-200 "
break;
case "O":
buttonClass = "square bg-violet-300"
buttonClass = "bg-violet-300"
break;
default:
buttonClass = "square bg-white"
buttonClass = "bg-white"
break;
}
return (
<button
className={buttonClass}
style={styles.square}
onClick={() => clickHandler(row, column)}
>
{value}
@ -183,18 +184,37 @@ export default function Game(){
realSize = 3
}
return(
<>
<Map mapSize={realSize}/>
<div className="rounded-xl bg-green-50 shadow-md flex space-x-2 container mx-auto">
<form >
<label className="bg-green-50">
地图大小：
<input name="mapSize" defaultValue={realSize} type="number" />
</label>
<button type="submit" className="bg-cyan-200 rounded-md text-sm">确认</button>
</form>
<div className="min-h-svh flex flex-col items-center justify-center bg-slate-50 p-2 sm:p-4">
<div className="table items-center p-10">
<Map mapSize={realSize}/>
<div className="rounded-xl bg-green-50 shadow-md flex space-x-2 container mx-auto">
<form className="flex gap-x-3" >
<label className="bg-green-50">
地图大小：
<input name="mapSize" defaultValue={realSize} type="number" />
</label>
<button type="submit" className="bg-cyan-200 rounded-md text-sm">确认</button>
</form>
</div>
</div>
</>
</div>
)
}
const styles = {
square: {
border: '1px solid #999',
float: 'left',
fontSize: '24px',
fontWeight: 'bold',
lineHeight: '34px',
height: '34px',
marginRight: '-1px',
marginTop: '-1px',
padding: '0',
textAlign: 'center',
width: '34px',
},
}

34
src/TodoList.tsx
View file

@ -30,6 +30,20 @@ function TodoItems({ items, setItems }: {
{item.name}
</span>
<div className="flex gap-4">
{ // 删除逻辑
item.isFinished ?
<button
className={'px-4 py-2 text-sm font-medium text-white rounded-md bg-slate-400 hover:bg-slate-600'}
onClick={() => {
const updatedItems = items.filter(i => i.id !== item.id);
for(let i: number = 0; i < updatedItems.length; i++){
updatedItems[i].id = i
}
setItems(updatedItems);
}}
> 删除
</button>
: <></>}
<button
className={`px-4 py-2 text-sm font-medium text-white rounded-md
${item.isFinished ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'}
@ -41,18 +55,8 @@ function TodoItems({ items, setItems }: {
setItems(updatedItems);
}}
>
{item.isFinished ? '还没做完' : '做完了'}
{item.isFinished ? '没做完' : '做完了'}
</button>
{ item.isFinished ?
<button
className={'px-4 py-2 text-sm font-medium text-white rounded-md bg-slate-400 hover:bg-slate-600'}
onClick={() => {
const updatedItems = items.filter(i => i.id !== item.id);
setItems(updatedItems);
}}
> 删除
</button>
: <></>}
</div>
</li>
@ -106,12 +110,12 @@ const TodoList = () => {
const [items, setItems] = useState(exampleTodoItems)
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 p-4">
<p className="text-4xl text-center p-20 bg-gradient-to-r from-blue-800 to-pink-800 via-green-950 inline-block text-transparent bg-clip-text">简单TODO</p>
<div className="w-full max-w-3xl p-10 bg-white rounded-lg shadow-lg">
<div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 p-2 sm:p-4">
<p className="text-2xl sm:text-4xl text-center p-5 sm:p-20 bg-gradient-to-r from-blue-800 to-pink-800 via-green-950 inline-block text-transparent bg-clip-text">简单TODO</p>
<div className="w-full sm:max-w-3xl p-5 sm:p-10 bg-white rounded-lg shadow-lg">
<TodoItems items={items} setItems={setItems} />
</div>
<div className="w-full max-w-3xl mt-6 p-10 bg-white rounded-lg shadow-lg">
<div className="w-full sm:max-w-3xl mt-6 py-5 sm:py-10 px-2 sm:px-10 bg-white rounded-lg shadow-lg">
<AddTodoItem items={items} setItems={setItems} />
</div>
</div>

96
src/styles.css
View file

@ -1,99 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 20px;
padding: 0;
}
h1 {
margin-top: 0;
font-size: 22px;
}
h2 {
margin-top: 0;
font-size: 20px;
}
h3 {
margin-top: 0;
font-size: 18px;
}
h4 {
margin-top: 0;
font-size: 16px;
}
h5 {
margin-top: 0;
font-size: 14px;
}
h6 {
margin-top: 0;
font-size: 12px;
}
code {
font-size: 1.2em;
}
ul {
padding-inline-start: 20px;
}
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 20px;
padding: 0;
}
.square {
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.board-row:after {
clear: both;
content: '';
display: table;
}
.status {
margin-bottom: 10px;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
.arrow {
font-size: '20px';
padding: '10px';
cursor: 'pointer';
}