Base layout

.gitignore

@@ -102,4 +102,6 @@ venv.bak/
 
 # mypy
 .mypy_cache/
+app/package-lock.json
+app/package.json
 .DS_Store

app/package.json

@@ -39,4 +39,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

app/src/App.js

@@ -10,6 +10,7 @@ import { ApolloProvider } from "react-apollo";
 import NotFound from "./views/404";
 import Home from "./views/Home";
 import SearchResults from "./views/SearchResults";
+import SchoolDetails from "./components/SchoolDetails/SchoolDetails";
 
 
 export const client = new ApolloClient({
@@ -25,6 +26,7 @@ function App() {
           <Route exact path="/" component={Home} />
           <Route exact path="/404" component={NotFound} />
           <Route exact path="/records" component={SearchResults} />
+          <Route exact path="/detail" component={SchoolDetails} />
           <Redirect to="/404" />
         </Switch>
       </Router>

app/src/components/SchoolDetails/DetailWrapper.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const DetailWrapper = ({ children }) => {
+    return (
+        <div
+            style={{
+                backgroundColor: "#505050",
+                minHeight: "87vh",
+
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default DetailWrapper;

app/src/components/SchoolDetails/SchoolCard.js

@@ -0,0 +1,78 @@
+import React, {Component} from "react";
+import { Row, Col } from 'antd';
+import { Card, Avatar } from 'antd';
+
+
+export class SchoolCard extends Component {
+
+    render() {
+
+        return (
+            <div
+                style={{
+                    margin:"3%"
+                }}
+            >
+                <Row gutter={10}>
+                    <Col xs={8} sm={8} md={9} lg={9} xl={9}>
+                        <Card
+
+                            headStyle={{
+                                backgroundColor:"#5a5a5a"
+                            }}
+                            bodyStyle={{
+                                backgroundColor:"#5a5a5a"
+                            }}
+                            cover={
+                                <img
+                                    alt="example"
+                                    src="https://i.imgur.com/z5K1cVi.jpg"
+                                />
+                            }
+                            style={{
+                                minHeight:"80vh",
+                                backgroundColor:"#5a5a5a"
+                            }}
+
+                        >
+                            <Row gutter={2} >
+                                <Col xs={6} sm={6} md={7} lg={8} xl={8}>
+                                    <Avatar shape="square" size={128} src={"https://i.imgur.com/o5vbzhA.png"} />
+                                </Col>
+                                <Col xs={10} sm={10} md={14} lg={16} xl={16}
+                                >
+                                    <h4>Szkoła im. Twojej starej</h4>
+                                    <p>Adres: Chujowa 8</p>
+                                    <p>Strona www: chujcinakurwe.pl</p>
+                                    <p>Telefon:  669987576</p>
+
+                                </Col>
+                            </Row>
+                        </Card>
+                    </Col>
+                    <Col xs={14} sm={14} md={14} lg={14} xl={14} style={{
+
+                    }}>
+                        <Card title="Informacje szczegółowe"
+                              style={{
+                                  minHeight:"80vh",
+                                  backgroundColor:"#5a5a5a"
+                              }}
+                        >
+                            <p>xDDDDDDD</p>
+                            <p>Card content</p>
+                            <p>Card content</p>
+                            <p>xD</p>
+                            <p>xD</p>
+                            <p>xD</p>
+                            <p>XD</p>
+                        </Card>
+                    </Col>
+                </Row>
+            </div>
+
+        );
+    }
+}
+
+export default SchoolCard;

app/src/components/SchoolDetails/SchoolDetails.js

@@ -0,0 +1,20 @@
+import React from "react";
+import HeaderMenu from "../HeaderMenu";
+import FooterCredits from "../FooterCredits";
+import DetailWrapper from "./DetailWrapper"
+import SchoolCard from "../SchoolDetails/SchoolCard"
+import "./SchoolDetailsLayout.css";
+
+const SchoolDetails = () => {
+    return (
+        <div className="Layout">
+            <HeaderMenu />
+            <DetailWrapper>
+                <SchoolCard/>
+            </DetailWrapper>
+            <FooterCredits />
+        </div>
+    );
+};
+
+export default SchoolDetails;

app/src/components/SchoolDetails/SchoolDetailsLayout.css

@@ -0,0 +1,6 @@
+.Layout {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    height: 100vh;
+}