mirror of
https://github.com/Melledy/Grasscutter.git
synced 2024-11-23 14:47:44 +00:00
Add more home buttons & Add content disclaimer
i added a place to add credits; will do next probs
This commit is contained in:
parent
f5a012edad
commit
b78f7f393e
@ -21,6 +21,7 @@
|
||||
"@types/react-dom": "^18.0.11",
|
||||
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-svgr": "^2.4.0",
|
||||
"vite-tsconfig-paths": "^4.0.7",
|
||||
"vite-plugin-singlefile": "^0.13.5",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
|
3
src/handbook/src/backend/icons.d.ts
vendored
Normal file
3
src/handbook/src/backend/icons.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
declare module "*.svg" {
|
||||
export const ReactComponent: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
||||
}
|
@ -4,19 +4,24 @@
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--background-color);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.Content_Top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.Content_Title {
|
||||
margin-top: 31px;
|
||||
margin-bottom: 39px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.Content_Buttons {
|
||||
@ -25,8 +30,77 @@
|
||||
|
||||
max-width: 1376px;
|
||||
max-height: 256px;
|
||||
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.Content_Bottom {
|
||||
display: flex;
|
||||
|
||||
height: 50%;
|
||||
max-height: 125px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.Content_Box {
|
||||
display: flex;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.Content_Disclaimer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: var(--secondary-color);
|
||||
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 630px;
|
||||
max-height: 93px;
|
||||
|
||||
margin: 0 24px 0 60px;
|
||||
border-radius: 10px;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 11px;
|
||||
|
||||
:nth-child(1) {
|
||||
font-size: 24px;
|
||||
max-height: 30px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
max-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.Content_Discord {
|
||||
max-height: 40px;
|
||||
max-width: 150px;
|
||||
|
||||
gap: 8px;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 44px;
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.Content_Credits {
|
||||
|
||||
}
|
||||
|
@ -12,6 +12,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.HomeButton_Icon {
|
||||
|
1
src/handbook/src/icons/discord.svg
Normal file
1
src/handbook/src/icons/discord.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
|
After Width: | Height: | Size: 985 B |
@ -1,8 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
import "@css/views/Content.scss";
|
||||
import HomeButton from "@app/ui/widgets/HomeButton";
|
||||
|
||||
import { ReactComponent as DiscordLogo } from "@icons/discord.svg";
|
||||
|
||||
import "@css/views/Content.scss";
|
||||
|
||||
class Content extends React.Component<any, any> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
@ -16,11 +19,35 @@ class Content extends React.Component<any, any> {
|
||||
|
||||
<div className={"Content_Buttons"}>
|
||||
<HomeButton name={"Commands"} anchor={"commands"} />
|
||||
<HomeButton name={"Characters"} anchor={"avatars"} />
|
||||
<HomeButton name={"Items"} anchor={"items"} />
|
||||
<HomeButton name={"Entities"} anchor={"monsters"} />
|
||||
<HomeButton name={"Scenes"} anchor={"scenes"} />
|
||||
</div>
|
||||
|
||||
<div className={"Content_Buttons"}>
|
||||
<HomeButton name={"Quests"} anchor={"quests"} />
|
||||
<HomeButton name={"Achievements"} anchor={"achievements"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"Content_Bottom"}>
|
||||
<div className={"Content_Box Content_Disclaimer"}>
|
||||
<div>
|
||||
<p>This tool is not affiliated with HoYoverse.</p>
|
||||
<p>Genshin Impact, game content and materials are</p>
|
||||
<p>trademarks and copyrights of HoYoverse.</p>
|
||||
</div>
|
||||
|
||||
<div className={"Content_Discord"}>
|
||||
<DiscordLogo />
|
||||
<p>Join the Community!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"Content_Text"}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -3,12 +3,13 @@
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
import react from "@vitejs/plugin-react-swc";
|
||||
import viteSvgr from "vite-plugin-svgr";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
import postcss from "./cfg/postcss.config.js";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [ react(), tsconfigPaths() ],
|
||||
plugins: [ react(), tsconfigPaths(), viteSvgr() ],
|
||||
css: { postcss }
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user