niklas/csgo-retakes-editor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css improvments

Browse Source
This commit is contained in:
Djeeberjr 2021-11-15 01:22:46 +01:00
parent e8bf2a7947
commit a18ac47c72
7 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -10,7 +10,7 @@
/>
<title>CS:GO Retakes card editor</title>
</head>
<body>
<body class="bg-black">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>

3
src/components/AddItem.tsx
View File

@ -14,6 +14,7 @@ const AddItem: React.FC<Props> = ({side,onChange}) => {
return (
<div>
<select
className="bg-gray-600 border-2 border-gray-700"
onChange={(e)=>setSelected(Item[e.target.value as keyof typeof Item])}
>
{
@ -22,7 +23,7 @@ const AddItem: React.FC<Props> = ({side,onChange}) => {
</select>
<span
onClick={()=>onChange?.(selected)}
className="cursor-pointer"
className="cursor-pointer float-right"
>
Add
</span>

2
src/components/App.tsx
View File

@ -18,7 +18,7 @@ function App() {
))
return (
<div>
<div className="text-white">
<DeckComp title="CT Normal" side={Side.CT} deck={CTDeck} onChange={(newDeck)=> setCTDeck(newDeck)} />
</div>
);

12
src/components/Card.tsx
View File

@ -15,17 +15,21 @@ interface Props {
const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
return (
<div className="bg-blue-500 m-1 p-1">
<div className="bg-gray-600 m-1 p-1 w-72 min-h-12">
<span className="float-right cursor-pointer" onClick={()=>{onRemove?.()}}>X</span>
<span className="font-bold"><TextEdit
text={card.title}
onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))}
/></span>
<div>
Helmet: <SwitchButton active={card.helmet} onChange={(to)=>onChange?.(new Card(card.title,card.armor,to,...card.items))} />
Armor: <SwitchButton active={card.armor} onChange={(to)=>onChange?.(new Card(card.title,to,card.helmet,...card.items))} />
<span>
Helmet: <SwitchButton active={card.helmet} onChange={(to)=>onChange?.(new Card(card.title,card.armor,to,...card.items))} />
</span>
<span className="float-right">
Armor: <SwitchButton active={card.armor} onChange={(to)=>onChange?.(new Card(card.title,to,card.helmet,...card.items))} />
</span>
</div>
<div className="border border-red-500">
<div className="border-2 border-gray-700 p-0.5">
{card.items.map((item,i)=>
<div
key={item + i} // FIXME: this is just a "temporary" solution. Implement propper key

4
src/components/CardGroup.tsx
View File

@ -14,7 +14,7 @@ interface Props {
const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
return (
<div className="bg-red-500 m-1 p-1">
<div className="bg-gray-700 m-1 p-1">
<span className="float-right cursor-pointer" onClick={()=>onRemove?.()} >X</span>
Num: <NumEdit value={cardGroup.numInDeck}
onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))}
@ -38,7 +38,7 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
/>
)}
<div
className="bg-blue-500 m-1 p-1 cursor-pointer"
className="bg-gray-600 m-1 p-1 cursor-pointer my-auto"
onClick={()=>onChange?.(
new CardGroup(
cardGroup.numInDeck,

4
src/components/Deck.tsx
View File

@ -15,7 +15,7 @@ interface Props {
const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
return (
<div className="bg-green-400 m-1 p-1">
<div className="bg-gray-800 m-1 p-1">
<span className="font-bold">{title}</span>
{ side === Side.CT && <span>
D: <NumEdit
@ -42,7 +42,7 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
}}
/>
)}
<div className="bg-red-500 m-1 p-1 cursor-pointer"
<div className="bg-gray-700 m-1 p-1 cursor-pointer my-auto"
onClick={()=>onChange?.(
new Deck(
deck.numDefusers,

6
src/index.css
View File

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
.min-h-12 {
min-height: 12rem;
}