Merge pull request #20 from mogproject/dev

v0.0.4
mogproject · Dec 28, 2024 · bca17d3 · bca17d3
2 parents d210655 + 22ca1b6
commit bca17d3
Show file tree

Hide file tree

Showing 21 changed files with 266 additions and 178 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "/static/css/main.69d6860b.css",
-    "main.js": "/static/js/main.bfe727a4.js",
+    "main.css": "/static/css/main.f0ba3973.css",
+    "main.js": "/static/js/main.27b9f05c.js",
     "index.html": "/index.html",
-    "main.69d6860b.css.map": "/static/css/main.69d6860b.css.map",
-    "main.bfe727a4.js.map": "/static/js/main.bfe727a4.js.map"
+    "main.f0ba3973.css.map": "/static/css/main.f0ba3973.css.map",
+    "main.27b9f05c.js.map": "/static/js/main.27b9f05c.js.map"
   },
   "entrypoints": [
-    "static/css/main.69d6860b.css",
-    "static/js/main.bfe727a4.js"
+    "static/css/main.f0ba3973.css",
+    "static/js/main.27b9f05c.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.bfe727a4.js"></script><link href="/static/css/main.69d6860b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.27b9f05c.js"></script><link href="/static/css/main.f0ba3973.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/docs/static/css/main.69d6860b.css.map b/docs/static/css/main.69d6860b.css.map
diff --git a/docs/static/css/main.69d6860b.css → docs/static/css/main.f0ba3973.css b/docs/static/css/main.69d6860b.css → docs/static/css/main.f0ba3973.css
diff --git a/docs/static/css/main.f0ba3973.css.map b/docs/static/css/main.f0ba3973.css.map
diff --git a/docs/static/js/main.27b9f05c.js b/docs/static/js/main.27b9f05c.js
diff --git a/docs/static/js/main.bfe727a4.js.LICENSE.txt → docs/static/js/main.27b9f05c.js.LICENSE.txt b/docs/static/js/main.bfe727a4.js.LICENSE.txt → docs/static/js/main.27b9f05c.js.LICENSE.txt
diff --git a/docs/static/js/main.27b9f05c.js.map b/docs/static/js/main.27b9f05c.js.map
diff --git a/docs/static/js/main.bfe727a4.js b/docs/static/js/main.bfe727a4.js
diff --git a/docs/static/js/main.bfe727a4.js.map b/docs/static/js/main.bfe727a4.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "feign-discord",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -20,7 +20,7 @@ function Header() {
         <Container>
           <Navbar.Brand href='#'>Feign-Discord CSS Generator</Navbar.Brand>
 
-          <Nav className="me-auto">
+          <Nav className="me-auto d-none d-lg-flex">
             <Nav.Link href="#features">{t('features.features')}</Nav.Link>
             <Nav.Link href="#settings">{t('settings.settings')}</Nav.Link>
             <Nav.Link href="#preview">{t('preview.preview')}</Nav.Link>
@@ -34,15 +34,14 @@ function Header() {
                 size="sm"
                 onChange={(e) => i18n.changeLanguage(e.target.value)}
                 value={i18n.resolvedLanguage}
-                className="me-3"
               >
                 {languages.map(({ key, nativeName }) => (<option key={key} value={key}>{nativeName}</option>))}
-
               </Form.Select>
-              <a className="nav-link me-3" href="https://www.youtube.com/@mogproject" target="_blank" rel="noreferrer">
+
+              <a className="nav-link d-none d-md-block ms-3 me-3" href="https://www.youtube.com/@mogproject" target="_blank" rel="noreferrer">
                 <FontAwesomeIcon icon={faYoutube} size="2x" />
               </a>
-              <a className="nav-link" href="https://github.com/mogproject/feign-discord-css-generator/" target="_blank" rel="noreferrer">
+              <a className="nav-link d-none d-md-block" href="https://github.com/mogproject/feign-discord-css-generator/" target="_blank" rel="noreferrer">
                 <FontAwesomeIcon icon={faGithub} size="2x" />
               </a>
             </Container>

diff --git a/src/components/buttons/AnimationSettingButtonGroup.tsx b/src/components/buttons/AnimationSettingButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonGroup, Form, InputGroup } from "react-bootstrap";
+import { ButtonGroup, Col, Form, InputGroup, Row } from "react-bootstrap";
 import { AnimationSettings } from "../../models/ViewSettings";
 import { ColorPicker } from "./ColorPicker";
 import { useTranslation } from "react-i18next";
@@ -15,7 +15,7 @@ export function AnimationSettingButtonGroup(
   const tt = (k: string) => { return t(k, { keyPrefix: '' }) };
 
   const jsxJump = (
-    <ButtonGroup className="me-5">
+    <ButtonGroup>
       <Form.Control
         type="checkbox"
         id={`${prefix}-jump`}
@@ -38,16 +38,15 @@ export function AnimationSettingButtonGroup(
           id={`${prefix}-flash`}
           className="btn-check"
           autoComplete="off"
-          style={{ width: "160px" }}
           checked={setting.flash}
           onChange={() => handleChange({ ...setting, flash: !setting.flash })}
         />
-        <label className="btn btn-outline-primary" htmlFor={`${prefix}-flash`} style={{ minWidth: "96px" }}>
+        <label className="btn btn-outline-primary" htmlFor={`${prefix}-flash`} style={{ minWidth: "80px" }}>
           {t('flash')}
         </label>
       </ButtonGroup>
 
-      <InputGroup className="me-5">
+      <InputGroup>
         <InputGroup.Text>{tt('color')}</InputGroup.Text>
         {ColorPicker(t('flash_color'), setting.flashColor, (color) => handleChange({ ...setting, flashColor: color }))}
       </InputGroup>
@@ -65,7 +64,7 @@ export function AnimationSettingButtonGroup(
           checked={setting.outline}
           onChange={() => handleChange({ ...setting, outline: !setting.outline })}
         />
-        <label className="btn btn-outline-primary" htmlFor={`${prefix}-outline`} style={{ minWidth: "96px" }}>
+        <label className="btn btn-outline-primary" htmlFor={`${prefix}-outline`} style={{ minWidth: "80px" }}>
           {t('outline')}
         </label>
       </ButtonGroup>
@@ -77,10 +76,10 @@ export function AnimationSettingButtonGroup(
   );
 
   return (
-    <div className="d-flex">
-      {jsxJump}
-      {jsxFlash}
-      {showOutline ? jsxOutline : ""}
-    </div>
+    <Row>
+      <Col className="col-5 col-md-5 mb-1 col-lg-3">{jsxJump}</Col>
+      <Col className={`col-7 col-md-7 ${showOutline ? 'mb-1 ' : ''}col-lg-4 col-xl-4 px-lg-0`}>{jsxFlash}</Col>
+      <Col className="col-7 col-md-6 col-lg-4 col-lg-4 px-lg-0">{showOutline ? jsxOutline : ""}</Col>
+    </Row>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.bfe727a4.js"></script><link href="/static/css/main.69d6860b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Feign-Discord CSS Generator"/><meta name="author" content="mogproject"/><link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon"/><link rel="apple-touch-icon" sizes="57x57" href="assets/ico/apple-touch-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="assets/ico/apple-touch-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="assets/ico/apple-touch-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="assets/ico/apple-touch-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="assets/ico/apple-touch-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="assets/ico/apple-touch-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon-180x180.png"/><link rel="icon" type="image/png" href="assets/ico/favicon-16x16.png" sizes="16x16"/><link rel="icon" type="image/png" href="assets/ico/favicon-32x32.png" sizes="32x32"/><link rel="icon" type="image/png" href="assets/ico/favicon-96x96.png" sizes="96x96"/><link rel="icon" type="image/png" href="assets/ico/android-chrome-192x192.png" sizes="192x192"/><meta name="msapplication-config" content="/browserconfig.xml"/><meta property="og:site_name" content="Feign-Discord CSS Generator"/><meta property="og:title" content="Feign-Discord CSS Generator"/><meta property="og:image" content="https://feign.mogproject.com/assets/img/snapshot.png"/><meta property="og:description" content="Generate CSS for Feign + Discord Streamkit Overlay with no hassle. This website's customizability, efficient user management, and simplistic UI are must-haves for all Feign streamers."/><meta property="og:url" content="https://feign.mogproject.com"/><meta property="og:type" content="website"/><link rel="manifest" href="manifest.json"/><title>Feign-Discord CSS Generator</title><script defer="defer" src="/static/js/main.27b9f05c.js"></script><link href="/static/css/main.f0ba3973.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>