Style and other minor fixes

src/components/AdminHeader/AdminHeader.scss

@@ -1,8 +1,32 @@
 @import "../../assets/scss/globals";
 
 .admin-header {
-  h1 {
-    margin-left: 2rem;
+  margin-bottom: 0.5rem;
+
+  .heading {
+    margin: 0 2rem;
     font-weight: 500;
+    font-size: 24px;
+
+    @media screen and (max-width: 600px - 1px) {
+      display: none;
+    }
+  }
+
+  a {
+    max-width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+
+    img {
+      margin: 1rem 0.5rem;
+
+      @media screen and (max-width: 600px - 1px) {
+        max-width: 300px !important;
+        width: 100%;
+        margin: 1rem auto;
+      }
+    }
   }
 }

src/components/AdminHeader/AdminHeader.tsx

@@ -12,12 +12,12 @@ class AdminHeader extends React.Component<AdminHeaderProps, AdminHeaderState> {
   render() {
     return (
       <Fragment>
-        <div className="header admin-header">
+        <header className="header admin-header">
           <Link to="/">
             <img src={TitleImage} />
           </Link>
-          <h1>Admin panel</h1>
-        </div>
+          <div className="heading">Admin panel</div>
+        </header>
       </Fragment>
     );
   }

src/components/AdminSidebar/AdminSidebar.scss

@@ -5,18 +5,9 @@
   flex-flow: column nowrap;
   align-self: stretch;
   margin-right: 1rem;
-}
 
-.admin-sidebar-item {
-  padding: 1rem;
-  background-color: $orange2;
-  border-left: 4px solid $orange2;
-
-  &:hover {
-    border-left: 4px solid $white;
-  }
-
-  &::after {
-    content: " ›";
+  @media screen and (max-width: 800px - 1px) {
+    margin-right: 0;
+    margin-bottom: 1rem;
   }
 }

src/components/AdminSidebarLink/AdminSidebarLink.scss

@@ -10,6 +10,10 @@
   border-left: 4px solid $blue;
   white-space: nowrap;
 
+  @media screen and (max-width: 800px - 1px) {
+    margin-bottom: 1px;
+  }
+
   &:hover,
   &.active {
     border-left: 4px solid $white;

src/components/Header/Header.scss

@@ -23,5 +23,6 @@
 
   img {
     max-width: 300px;
+    margin: 2rem 1rem;
   }
 }

src/components/Header/Header.tsx

@@ -72,7 +72,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
       <Fragment>
         <div className="header">
           <Link to="/">
-            <img src={TitleImage} />
+            <img className="logo" src={TitleImage} />
           </Link>
           <Navigation
             onMobileMenuOpen={this.handleMobileMenuClick}

src/index.scss

@@ -1,6 +1,8 @@
 @import "./assets/scss/normalize";
 @import "./assets/scss/globals";
 
+* { box-sizing: border-box; }
+
 html,
 body {
   font-size: 16px;

src/models/Event.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { getAuthHeader } from "../auth";
-
+import * as qs from "query-string";
 const url = `${process.env.API_URL}/events/`;
 
 export interface Event {
@@ -14,9 +14,15 @@ export interface Event {
   tag_id: number[];
 }
 
-export async function getEvents(): Promise<Event[]> {
+export async function getEvents(options: any = {}): Promise<Event[]> {
+  const { onlyNonPast, limit } = options;
   try {
-    const resp = await axios.get(url);
+    const params = {
+      since: onlyNonPast ? (new Date()).toISOString() : undefined,
+      limit,
+    };
+    const search = qs.stringify(params);
+    const resp = await axios.get(`${url}?${search}`);
     return resp.data["results"];
   } catch (err) {
     console.error(err);

src/pages/AdminCommonPage/AdminCommonPage.scss

@@ -7,8 +7,12 @@
   align-items: flex-start;
   flex: 1;
 
+  @media screen and (max-width: 800px - 1px) {
+    flex-flow: column nowrap;
+  }
+
   > div[class$='page'] {
-    margin: 0 1rem;
+    padding: 0 1rem;
     width: 100%;
   }
 

src/pages/EventCreatePage/EventCreatePage.scss

@@ -2,7 +2,6 @@
 
 .event-create-page {
   width: 100%;
-  margin: 0 1rem;
 
   fieldset {
     border: none;
@@ -17,17 +16,21 @@
 
   input[type="text"],
   textarea {
-    max-width: 20rem;
-    width: 100%;
     padding: 0.5rem 0.5rem;
     border: none;
     overflow: visible;
     box-sizing: border-box;
   }
 
-  select {
-    max-width: 20rem;
-    width: 100%;
+  input[type="text"],
+  textarea,
+  select,
+  .datetime-widget {
+    width: 20rem;
+
+    @media screen and (max-width: 800px - 1px) {
+      width: 100%;
+    }
   }
 
   legend {
@@ -57,8 +60,6 @@
   .datetime-widget {
     display: flex;
     flex-flow: row nowrap;
-    width: 100%;
-    max-width: 20rem;
     justify-content: space-between;
   }
 }

src/pages/FrontPage/FrontPage.tsx

@@ -68,7 +68,10 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
   }
 
   fetchEvents = () => {
-    const getEventsPromise = getEvents();
+    const getEventsPromise = getEvents({
+      onlyNonPast: true,
+      limit: 4,
+    });
     getEventsPromise.then(events => {
       this.setState({
         events,