Simplify Feign players view

mogproject · Dec 28, 2024 · dc65a66 · dc65a66
1 parent 0890ac0
commit dc65a66
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 39 deletions.
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 d-none d-xl-flex">
+          <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>

diff --git a/src/components/sections/DiscordUsers.tsx b/src/components/sections/DiscordUsers.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowDown, faArrowUp, faPen, faPenToSquare, faTractor, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowUp, faPen, faPenToSquare, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { Container, Row, Col, InputGroup, Form, Button, Modal } from "react-bootstrap";
 import { DiscordUser, ConfContext } from "../../models/Context";
 import { useTranslation } from "react-i18next";

diff --git a/src/components/sections/FeignPlayers.tsx b/src/components/sections/FeignPlayers.tsx
@@ -25,7 +25,7 @@ export function FeignPlayers() {
     const { t: translate } = useTranslation('translation', { keyPrefix: 'colors' });
     const t = translate as ((s: string) => string);
     return (
-      <Col key={`player-${color}`} className="mb-3">
+      <Col key={`player-${color}`} className="mb-3 col-1-5 col-lg-1-7">
         <Row className="justify-content-center mb-2">{t(FEI_COLORS[color])}</Row>
         <Row className="justify-content-center mb-2">
           <img src={`assets/img/${FEI_COLORS[color]}-small.png`} width="80px" style={{ maxWidth: "80px" }} alt=""></img>
@@ -55,47 +55,13 @@ export function FeignPlayers() {
 
   return (
     <Container>
-      {/* large screen */}
-      <Row className="d-none d-md-flex">
-        {Array(7)
+      <Row>
+        {Array(13)
           .fill(0)
           .map((_, i: number) => {
             return FeignPlayer(i);
           })}
       </Row>
-      <Row className="d-none d-md-flex">
-        {Array(6)
-          .fill(0)
-          .map((_, i: number) => {
-            return FeignPlayer(7 + i);
-          })}
-        <Col></Col>
-      </Row>
-
-      {/* small screen */}
-      <Row className="d-md-none">
-        {Array(5)
-          .fill(0)
-          .map((_, i: number) => {
-            return FeignPlayer(i);
-          })}
-      </Row>
-      <Row className="d-md-none">
-        {Array(5)
-          .fill(0)
-          .map((_, i: number) => {
-            return FeignPlayer(4 + i);
-          })}
-      </Row>
-      <Row className="d-md-none">
-        {Array(3)
-          .fill(0)
-          .map((_, i: number) => {
-            return FeignPlayer(8 + i);
-          })}
-        <Col></Col>
-        <Col></Col>
-      </Row>
     </Container>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import "bootstrap/dist/css/bootstrap.min.css";
 import './styles/index.css';
 import './styles/discord.css';
+import './styles/columns.css';
 import "./i18n/config";
 import App from './App';
 

diff --git a/src/styles/columns.css b/src/styles/columns.css
@@ -0,0 +1,37 @@
+.col-1-5 {
+  width: 20%;
+  flex: 0 0 auto;
+}
+
+.col-1-7 {
+  width: calc(100% / 7);
+  flex: 0 0 auto;
+}
+
+@media (min-width: 576px) {
+  .col-sm-1-7 {
+    width: calc(100% / 7);
+    flex: 0 0 auto;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md-1-7 {
+    width: calc(100% / 7);
+    flex: 0 0 auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .col-lg-1-7 {
+    width: calc(100% / 7);
+    flex: 0 0 auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xl-1-7 {
+    width: calc(100% / 7);
+    flex: 0 0 auto;
+  }
+}