Skip to content

Commit a9acd8c

Browse files
gasscgassc
committed
move to component-scoped styles
1 parent eefcd71 commit a9acd8c

18 files changed

Lines changed: 232 additions & 208 deletions

‎src/App.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.app-container {
2+
margin-top: 10px;
3+
padding-bottom: 10px;
4+
}
5+
6+
.fishfry-error {
7+
position: fixed;
8+
bottom: 12px;
9+
right: 12px;
10+
z-index: 20010;
11+
}
12+
13+
.fishfry-error--offset-64 {
14+
bottom: 64px;
15+
}
16+
17+
.fishfry-error--offset-116 {
18+
bottom: 116px;
19+
}

‎src/App.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from "react";
22
import moment from "moment";
33
import { useDispatch, useSelector } from "react-redux";
44
import { Alert } from "react-bootstrap";
5+
import "./App.css";
56

67
import TopNav from "@/features/layout/TopNav";
78
import Sidebar from "@/features/layout/Sidebar";
@@ -178,6 +179,7 @@ const App = () => {
178179
dispatch(searchActions.setSuggestionsOpen(false));
179180
dispatch(uiActions.setNavbarExpanded(false));
180181
};
182+
const mapboxAlertOffsetClass = dataSource === "fallback" ? "fishfry-error--offset-116" : "fishfry-error--offset-64";
181183

182184
return (
183185
<>
@@ -210,7 +212,7 @@ const App = () => {
210212
}}
211213
/>
212214

213-
<div id="container" style={{ marginTop: "10px", paddingBottom: "10px" }}>
215+
<div id="container" className="app-container">
214216
<Sidebar
215217
visible={ui.sidebarVisible}
216218
features={visibleFeatures}
@@ -299,13 +301,13 @@ const App = () => {
299301
) : null}
300302

301303
{!error && dataSource === "fallback" ? (
302-
<Alert className="fishfry-error" variant="info" style={{ bottom: "64px" }}>
304+
<Alert className="fishfry-error fishfry-error--offset-64" variant="info">
303305
Primary API is unreachable; showing fallback data.
304306
</Alert>
305307
) : null}
306308

307309
{!hasMapboxToken && searchQuery.trim().length >= 3 ? (
308-
<Alert className="fishfry-error" variant="info" style={{ bottom: dataSource === "fallback" ? "116px" : "64px" }}>
310+
<Alert className={`fishfry-error ${mapboxAlertOffsetClass}`} variant="info">
309311
Mapbox geocoding is disabled because <code>VITE_MAPBOX_TOKEN</code> is not set.
310312
</Alert>
311313
) : null}

‎src/features/layout/LoadingOverlay.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#loading {
2+
position: absolute;
3+
width: 220px;
4+
height: 19px;
5+
top: 50%;
6+
left: 50%;
7+
margin: -10px 0 0 -110px;
8+
z-index: 20001;
9+
}
10+
11+
.progress-bar-full {
12+
width: 100%;
13+
}

‎src/features/layout/LoadingOverlay.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { ProgressBar } from "react-bootstrap";
3+
import "./LoadingOverlay.css";
34

45
const LoadingOverlay = ({ show }) => {
56
if (!show) {

‎src/features/layout/Sidebar.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
#sidebar {
2+
display: block;
3+
width: 85%;
4+
height: 100%;
5+
max-width: 100%;
6+
float: left;
7+
}
8+
9+
#sidebar.sidebar-hidden {
10+
display: none;
11+
}
12+
13+
#sidebar.sidebar-visible {
14+
display: block;
15+
}
16+
17+
@media (min-width: 768px) and (max-width: 991px) {
18+
#sidebar {
19+
width: 50%;
20+
}
21+
}
22+
23+
@media (min-width: 992px) {
24+
#sidebar {
25+
width: 30%;
26+
}
27+
}
28+
29+
@media (max-width: 767px) {
30+
#sidebar {
31+
display: none;
32+
}
33+
34+
#sidebar.sidebar-visible {
35+
display: block;
36+
}
37+
}
38+
39+
#features {
40+
margin: 0;
41+
border: none;
42+
border-radius: 0;
43+
box-shadow: none;
44+
}
45+
46+
.sidebar-wrapper {
47+
width: 100%;
48+
height: 100%;
49+
}
50+
51+
.sidebar-wrapper #features {
52+
display: flex;
53+
flex-direction: column;
54+
}
55+
56+
.sidebar-table {
57+
flex: 1 1 auto;
58+
width: 100%;
59+
overflow: auto;
60+
}
61+
62+
.feature-row {
63+
cursor: pointer;
64+
width: 250px;
65+
}
66+
67+
.sidebar-cell-align {
68+
vertical-align: middle;
69+
}

‎src/features/layout/Sidebar.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import { faChevronLeft, faChevronRight, faFilter } from "@/icons/fontAwesome";
44
import { Button, Card, Table } from "react-bootstrap";
5+
import "./Sidebar.css";
56

67
const Sidebar = ({
78
visible,
@@ -14,7 +15,7 @@ const Sidebar = ({
1415
onRowMouseOut
1516
}) => {
1617
return (
17-
<div id="sidebar" style={{ display: visible ? "block" : "none" }}>
18+
<div id="sidebar" className={visible ? "sidebar-visible" : "sidebar-hidden"}>
1819
<div className="sidebar-wrapper">
1920
<Card id="features" className="h-100 border-0 rounded-0">
2021
<Card.Header>
@@ -63,11 +64,11 @@ const Sidebar = ({
6364
onMouseOver={() => onRowMouseOver(feature.id)}
6465
onMouseOut={onRowMouseOut}
6566
>
66-
<td style={{ verticalAlign: "middle" }}>
67+
<td className="sidebar-cell-align">
6768
<img width="20" src={feature.properties.icon} alt="marker" />
6869
</td>
6970
<td className="feature-name">{feature.properties.venue_name}</td>
70-
<td style={{ verticalAlign: "middle" }}>
71+
<td className="sidebar-cell-align">
7172
<FontAwesomeIcon icon={faChevronRight} className="float-end" />
7273
</td>
7374
</tr>

‎src/features/layout/TopNav.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.fishfry-navbar {
2+
background-color: #303030 !important;
3+
}
4+
5+
.fishfry-navbar .navbar-brand {
6+
color: #ffffff;
7+
}
8+
9+
.fishfry-navbar .nav-link {
10+
color: #ffffff;
11+
}
12+
13+
.fishfry-navbar .nav-link:hover,
14+
.fishfry-navbar .nav-link:focus {
15+
color: #f8f9fa;
16+
}
17+
18+
.fishfry-navbar-icon {
19+
color: #ffffff;
20+
text-decoration: none;
21+
padding: 0;
22+
}
23+
24+
.fishfry-search-form {
25+
width: min(460px, 100%);
26+
}
27+
28+
.white {
29+
color: #ffffff;
30+
}

‎src/features/layout/TopNav.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
4+
import "./TopNav.css";
45

56
import SearchBox from "@/features/search/SearchBox";
67
import { faBars, faCircleQuestion, faDatabase, faFilter } from "@/icons/fontAwesome";

‎src/features/modals/AboutModal.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.about-tabs-content {
2+
padding-top: 10px;
3+
}

‎src/features/modals/AboutModal.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import { Button, Card, Col, Modal, Nav, Row, Tab } from "react-bootstrap";
44
import { faCircleExclamation, faCircleQuestion, faCode, faEnvelope } from "@/icons/fontAwesome";
5+
import "./AboutModal.css";
56

67
const AboutModal = ({ show, onHide }) => {
78
return (
@@ -34,7 +35,7 @@ const AboutModal = ({ show, onHide }) => {
3435
</Nav.Item>
3536
</Nav>
3637

37-
<Tab.Content id="aboutTabsContent" style={{ paddingTop: "10px" }}>
38+
<Tab.Content id="aboutTabsContent" className="about-tabs-content">
3839
<Tab.Pane eventKey="about">
3940
<h3>Fish Fry Map</h3>
4041
<p>

0 commit comments

Comments
 (0)