From 00a3e4c79dc40676800cc316629c5a0c73f53387 Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Fri, 2 Jun 2023 19:24:53 +0200
Subject: [PATCH] =?UTF-8?q?Responzivn=C3=AD=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/src/App.css | 6 ------
client/src/App.tsx | 10 +++++-----
2 files changed, 5 insertions(+), 11 deletions(-)
diff --git a/client/src/App.css b/client/src/App.css
index e3b686f..e532f4a 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -47,15 +47,9 @@
}
.food-tables {
- display: flex;
- justify-content: space-evenly;
margin-bottom: 50px;
}
-.food-table {
- max-width: 500px;
-}
-
.content-wrapper {
width: 100%;
display: flex;
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 720ae0b..433e5e1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -6,7 +6,7 @@ import { useAuth } from './context/auth';
import Login from './Login';
import { Locations, ClientData } from './Types';
import './App.css';
-import { Alert, Form, Table } from 'react-bootstrap';
+import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
const EVENT_CONNECT = "connect"
@@ -62,7 +62,7 @@ function App() {
}
const renderFoodTable = (name, food) => {
- return <div className='food-table'>
+ return <Col md={12} lg={4}>
<h3>{name}</h3>
<Table striped bordered hover>
<tbody>
@@ -75,7 +75,7 @@ function App() {
)}
</tbody>
</Table>
- </div>
+ </Col>
}
if (!auth || !auth.login) {
@@ -95,11 +95,11 @@ function App() {
<small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
</Alert>
<h1 className='title'>Dnes je {data.date}</h1>
- <div className='food-tables'>
+ <Row className='food-tables'>
{renderFoodTable('Sladovnická', food.sladovnicka)}
{renderFoodTable('U Motlíků', food["uMotliku:"])}
{renderFoodTable('TechTower', food.techTower)}
- </div>
+ </Row>
<div className='content-wrapper'>
<div className='content'>
<p>Jak to dnes vidíš s obědem?</p>