WIP
This commit is contained in:
Maciej Caderek
@@ -22,6 +22,46 @@ body {
|
||||
font-family: Ubuntu, sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
font-family: "Ubuntu";
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 173, 136);
|
||||
color: #0e0e13;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: rgb(0, 207, 162);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-family: "Fira Mono";
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 10px;
|
||||
background: #20242a;
|
||||
border: solid 1px #2d323a;
|
||||
color: #acbddb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgb(0, 87, 68);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #aaa;
|
||||
text-align: left;
|
||||
font-size: 1.8rem;
|
||||
margin: 30px 0 10px 0;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #191d24;
|
||||
/* background-image: url(src/ui/img/pattern.png); */
|
||||
@@ -35,12 +75,6 @@ body {
|
||||
}
|
||||
|
||||
.board {
|
||||
/* width: 600px;
|
||||
height: 600px;
|
||||
width: 800px;
|
||||
height: 800px; */
|
||||
/* width: 1024px;
|
||||
height: 1024px; */
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
max-width: 100%;
|
||||
@@ -69,6 +103,10 @@ body {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"board"
|
||||
"moves"
|
||||
"setup";
|
||||
}
|
||||
|
||||
.moves-box {
|
||||
|
||||
@@ -13,21 +13,11 @@
|
||||
|
||||
.game-tabs__btn {
|
||||
width: 48%;
|
||||
background: rgb(0, 173, 136);
|
||||
color: #0e0e13;
|
||||
padding: 10px;
|
||||
font-family: Ubuntu;
|
||||
font-size: 1.5rem;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
cursor: pointer;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.game-tabs__btn:hover {
|
||||
background: rgb(0, 207, 162);
|
||||
}
|
||||
|
||||
.game-tabs__btn--active {
|
||||
width: 50%;
|
||||
background: #0e0e13;
|
||||
|
||||
@@ -5,24 +5,6 @@
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.load__fen-input,
|
||||
.load__pgn-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-family: "Fira Mono";
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 10px;
|
||||
background: #20242a;
|
||||
border: solid 1px #2d323a;
|
||||
color: #acbddb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.load__fen-input:focus,
|
||||
.load__pgn-input:focus {
|
||||
border-color: rgb(0, 87, 68);
|
||||
}
|
||||
|
||||
.load__pgn-input {
|
||||
height: 30vh;
|
||||
margin-top: 20px;
|
||||
@@ -31,14 +13,4 @@
|
||||
.load__fen-btn,
|
||||
.load__pgn-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-family: "Ubuntu";
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 173, 136);
|
||||
}
|
||||
|
||||
.load__fen-btn:hover,
|
||||
.load__pgn-btn:hover {
|
||||
background: rgb(0, 207, 162);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -14,21 +14,11 @@
|
||||
|
||||
.setup-tabs__btn {
|
||||
width: 32%;
|
||||
background: rgb(0, 173, 136);
|
||||
color: #0e0e13;
|
||||
padding: 10px;
|
||||
font-family: Ubuntu;
|
||||
font-size: 1.5rem;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
cursor: pointer;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.setup-tabs__btn:hover {
|
||||
background: rgb(0, 207, 162);
|
||||
}
|
||||
|
||||
.setup-tabs__btn--active {
|
||||
background: #0e0e13;
|
||||
color: #aaa;
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
.share__format,
|
||||
.share__size {
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.share__format {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.share__size {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.share__format--first,
|
||||
.share__size--first {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.share__format--last,
|
||||
.share__size--last {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.share__format--active,
|
||||
.share__size--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.share__format--active:hover,
|
||||
.share__size--active:hover {
|
||||
background: rgb(0, 173, 136);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.share__btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,145 @@
|
||||
import { Component, For } from "solid-js";
|
||||
import { Component } from "solid-js";
|
||||
import { Handlers } from "../../types";
|
||||
import Scrollable from "./reusable/Scrollable";
|
||||
import { state, setState } from "../../state";
|
||||
import "./Share.css";
|
||||
|
||||
const Share: Component<{ handlers: Handlers }> = (props) => {
|
||||
return <Scrollable class="share">Share</Scrollable>;
|
||||
return (
|
||||
<Scrollable class="share">
|
||||
<div className="share__view">
|
||||
<button
|
||||
class="controls__button"
|
||||
onClick={props.handlers.flip}
|
||||
title="FLIP"
|
||||
>
|
||||
<i class="las la-sync"></i>
|
||||
</button>
|
||||
<button
|
||||
class="controls__button"
|
||||
onClick={props.handlers.toggleBorder}
|
||||
title="BORDER"
|
||||
>
|
||||
<i class="las la-expand"></i>
|
||||
</button>
|
||||
<button
|
||||
class="controls__button"
|
||||
onClick={props.handlers.toggleExtraInfo}
|
||||
title="EXTRA INFO"
|
||||
>
|
||||
<i class="las la-info"></i>
|
||||
</button>
|
||||
<button
|
||||
class="controls__button"
|
||||
onClick={props.handlers.toggleExtraInfo}
|
||||
title="INCLUDE HEADER"
|
||||
>
|
||||
<i class="las la-heading"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="share__fen">
|
||||
<h2>Current position</h2>
|
||||
<input
|
||||
type="text"
|
||||
name="current_fen"
|
||||
readOnly
|
||||
placeholder="Current FEN..."
|
||||
/>
|
||||
|
||||
<button class="share__btn">Copy FEN</button>
|
||||
<button class="share__btn">Save as image</button>
|
||||
<button class="share__btn">Copy link</button>
|
||||
</div>
|
||||
<div class="share__pgn">
|
||||
<h2>Game</h2>
|
||||
<button class="share__btn">Copy PGN</button>
|
||||
<button class="share__btn">Export PGN</button>
|
||||
<button class="share__btn">Copy link</button>
|
||||
</div>
|
||||
<div class="share__animation">
|
||||
<h2>Animation</h2>
|
||||
<button
|
||||
classList={{
|
||||
share__size: true,
|
||||
"share__size--first": true,
|
||||
"share__size--active": state.game.size === "XS",
|
||||
}}
|
||||
onClick={() => setState("game", "size", "XS")}
|
||||
>
|
||||
XS
|
||||
</button>
|
||||
<button
|
||||
classList={{
|
||||
share__size: true,
|
||||
"share__size--active": state.game.size === "S",
|
||||
}}
|
||||
onClick={() => setState("game", "size", "S")}
|
||||
>
|
||||
S
|
||||
</button>
|
||||
<button
|
||||
classList={{
|
||||
share__size: true,
|
||||
"share__size--active": state.game.size === "M",
|
||||
}}
|
||||
onClick={() => setState("game", "size", "M")}
|
||||
>
|
||||
M
|
||||
</button>
|
||||
<button
|
||||
classList={{
|
||||
share__size: true,
|
||||
"share__size--active": state.game.size === "L",
|
||||
}}
|
||||
onClick={() => setState("game", "size", "L")}
|
||||
>
|
||||
L
|
||||
</button>
|
||||
<button
|
||||
classList={{
|
||||
share__size: true,
|
||||
"share__size--last": true,
|
||||
"share__size--active": state.game.size === "XL",
|
||||
}}
|
||||
onClick={() => setState("game", "size", "XL")}
|
||||
>
|
||||
XL
|
||||
</button>
|
||||
|
||||
<button
|
||||
classList={{
|
||||
share__format: true,
|
||||
"share__format--first": true,
|
||||
"share__format--active": state.game.format === "GIF",
|
||||
}}
|
||||
onClick={() => setState("game", "format", "GIF")}
|
||||
>
|
||||
GIF
|
||||
</button>
|
||||
<button
|
||||
classList={{
|
||||
share__format: true,
|
||||
"share__format--active": state.game.format === "MP4",
|
||||
}}
|
||||
onClick={() => setState("game", "format", "MP4")}
|
||||
>
|
||||
MP4
|
||||
</button>
|
||||
<button
|
||||
classList={{
|
||||
share__format: true,
|
||||
"share__format--last": true,
|
||||
"share__format--active": state.game.format === "WebM",
|
||||
}}
|
||||
onClick={() => setState("game", "format", "WebM")}
|
||||
>
|
||||
WebM
|
||||
</button>
|
||||
|
||||
<button class="share__create-animation">GENERATE</button>
|
||||
</div>
|
||||
</Scrollable>
|
||||
);
|
||||
};
|
||||
|
||||
export default Share;
|
||||
|
||||
Reference in New Issue
Block a user