Skip to content

Commit 3747522

Browse files
author
RobJellinghaus
committed
GG Claude, reduced CSS duplication
1 parent c427273 commit 3747522

3 files changed

Lines changed: 44 additions & 36 deletions

File tree

‎frontend/src/App.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,22 @@ code {
270270
font-weight: 500;
271271
}
272272

273+
/* Full-width layout for specific pages */
274+
.App.full-width-layout {
275+
text-align: left;
276+
}
277+
278+
.App.full-width-layout > div[style*="maxWidth"] {
279+
max-width: none !important;
280+
margin: 0 !important;
281+
padding: 24px;
282+
}
283+
284+
.App.full-width-layout .Form {
285+
max-width: none;
286+
margin: 0 0 24px 0;
287+
}
288+
273289
/* Responsive improvements */
274290
@media (max-width: 768px) {
275291
.App-nav-header {

‎frontend/src/App.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ import { Todos } from './containers/Todo'
1616
import { TodoGraphQLRelay } from './containers/TodoGraphQLRelay'
1717
import { SupplierList } from './containers/SupplierList'
1818
import { Files } from './containers/Files'
19-
import { Route, useNavigate, Routes } from 'react-router-dom'
19+
import { Route, useNavigate, Routes, useLocation } from 'react-router-dom'
2020

2121
const App = () => {
2222
useAuthCheck()
2323
const auth = useAuth()
24+
const location = useLocation()
2425

2526
const navigate = useNavigate()
2627
/* CRA: app hooks */
@@ -30,7 +31,7 @@ const App = () => {
3031
return (
3132
<RelayEnvironmentProvider environment={relayEnvironment}>
3233
<RelayEnvironmentContext.Provider value={relayEnvironment}>
33-
<div className="App">
34+
<div className={`App ${location.pathname === '/suppliers' ? 'full-width-layout' : ''}`}>
3435
<div className="App-nav-header">
3536
<div style={{ display: 'flex', flex: 1 }}>
3637
<a className="NavButton" onClick={() => navigate('/')}>Home</a>
@@ -48,9 +49,10 @@ const App = () => {
4849
{ !auth.isAuthenticated && <a className="NavButton" onClick={() => navigate('/login')}>Login/Register</a> }
4950
</div>
5051
</div>
52+
<div style={{ margin: '0 auto', maxWidth: '800px' }}>
5153
<Routes>
52-
<Route path="/" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><Home /></div>} />
53-
<Route path="/todos" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><Todos /></div>} />
54+
<Route path="/" element={<Home />} />
55+
<Route path="/todos" element={<Todos />} />
5456
{/*
5557
CRITICAL: Relay components that use useLazyLoadQuery MUST be wrapped in <Suspense>
5658
@@ -67,29 +69,28 @@ const App = () => {
6769
- User sees a proper loading state followed by the actual content
6870
*/}
6971
<Route path="/todos-relay" element={
70-
<div style={{ margin: '0 auto', maxWidth: '800px' }}>
71-
<Suspense fallback={<div>Loading Relay todos...</div>}>
72-
<TodoGraphQLRelay />
73-
</Suspense>
74-
</div>
72+
<Suspense fallback={<div>Loading Relay todos...</div>}>
73+
<TodoGraphQLRelay />
74+
</Suspense>
7575
} />
7676
<Route path="/suppliers" element={
7777
<Suspense fallback={<div>Loading suppliers...</div>}>
7878
<SupplierList />
7979
</Suspense>
8080
} />
8181
{/* CRA: routes */}
82-
<Route path="/files" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><Files /></div>} />
83-
<Route path="/login" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><LoginPage /></div>} />
84-
<Route path="/oauth/success" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><OauthLoginResultPage /></div>} />
85-
<Route path="/oauth/error" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><OauthLoginResultPage /></div>} />
86-
<Route path="/recovery" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><RecoveryPage /></div>} />
87-
<Route path="/reset" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><ResetPage /></div>} />
88-
<Route path="/activate" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><ActivationPage /></div>} />
89-
<Route path="/register" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><RegistrationPage /></div>} />
90-
<Route path="/account" element={<div style={{ margin: '0 auto', maxWidth: '800px' }}><AccountPage /></div>} />
82+
<Route path="/files" element={<Files />} />
83+
<Route path="/login" element={<LoginPage />} />
84+
<Route path="/oauth/success" element={<OauthLoginResultPage />} />
85+
<Route path="/oauth/error" element={<OauthLoginResultPage />} />
86+
<Route path="/recovery" element={<RecoveryPage />} />
87+
<Route path="/reset" element={<ResetPage />} />
88+
<Route path="/activate" element={<ActivationPage />} />
89+
<Route path="/register" element={<RegistrationPage />} />
90+
<Route path="/account" element={<AccountPage />} />
9191

9292
</Routes>
93+
</div>
9394
</div>
9495
</RelayEnvironmentContext.Provider>
9596
</RelayEnvironmentProvider>

‎frontend/src/containers/SupplierList.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -356,19 +356,10 @@ const SupplierListContent = ({
356356
};
357357

358358
return (
359-
<div style={{
360-
display: 'flex',
361-
flexFlow: 'column',
362-
textAlign: 'left',
363-
maxWidth: 'none',
364-
margin: '0',
365-
padding: '24px',
366-
width: '100%',
367-
boxSizing: 'border-box'
368-
}}>
369-
<h1 style={{ textAlign: 'left', margin: '0 0 24px 0' }}>Suppliers</h1>
359+
<div style={{ display: 'flex', flexFlow: 'column' }}>
360+
<h1>Suppliers</h1>
370361

371-
<div className="Form" style={{ maxWidth: 'none', margin: '0 0 24px 0', textAlign: 'left' }}>
362+
<div className="Form">
372363
<button
373364
onClick={() => setShowCreateForm(true)}
374365
disabled={showCreateForm}
@@ -393,7 +384,7 @@ const SupplierListContent = ({
393384
</div>
394385

395386
{showCreateForm && (
396-
<div className="Form" style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ccc', maxWidth: 'none', margin: '0 0 20px 0', textAlign: 'left' }}>
387+
<div className="Form" style={{ marginBottom: '20px', padding: '20px', border: '1px solid #ccc' }}>
397388
<h3>Create New Supplier</h3>
398389
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
399390
<div>
@@ -509,13 +500,13 @@ const SupplierListContent = ({
509500
{totalItems === 0 && !showCreateForm && "No suppliers found. Create one to get started!"}
510501

511502
{suppliers.map((supplier: Supplier) => (
512-
<div key={supplier.id} className="Form" style={{ marginBottom: '10px', maxWidth: 'none', margin: '0 0 10px 0', textAlign: 'left' }}>
503+
<div key={supplier.id} className="Form" style={{ marginBottom: '10px' }}>
513504
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
514-
<div style={{ flex: 1, textAlign: 'left' }}>
515-
<h4 style={{ margin: '0 0 5px 0', textAlign: 'left' }}>
505+
<div style={{ flex: 1 }}>
506+
<h4 style={{ margin: '0 0 5px 0' }}>
516507
#{supplier.id} {supplier.name}
517508
</h4>
518-
<div style={{ fontSize: '0.9em', color: '#666', textAlign: 'left' }}>
509+
<div style={{ fontSize: '0.9em', color: '#666' }}>
519510
<div><strong>Contact:</strong> {supplier.contactName} ({supplier.contactEmail})</div>
520511
<div><strong>Address:</strong> {supplier.address}, {supplier.city}, {supplier.state} {supplier.zipCode}, {supplier.country}</div>
521512
<div><strong>Phone:</strong> {supplier.contactPhone}</div>
@@ -553,7 +544,7 @@ const SupplierListContent = ({
553544
</div>
554545
))}
555546

556-
<div className="Form" style={{ maxWidth: 'none', margin: '0', textAlign: 'left' }}>
547+
<div className="Form">
557548
<div style={{ display: 'flex' }}>
558549
<button disabled={true}>{`<< (Coming Soon)`}</button>
559550
<span style={{ flex: 1, textAlign: 'center' }}>

0 commit comments

Comments
 (0)