Calendar button (#274)

* Remove DateArrow * add calendar popup * super little style tweaks * Bump @types/react from 16.9.49 to 17.0.0 in /frontend (#291) * Bump typescript from 4.0.3 to 4.1.2 in /frontend (#290) * Bump eslint-plugin-react from 7.21.3 to 7.21.5 in /frontend (#289) * deprecate set-env (#292) * Bump eslint-plugin-jsx-a11y from 6.4.0 to 6.4.1 in /frontend (#295) * Bump @popperjs/core from 2.5.3 to 2.5.4 in /frontend (#294) * Bump @testing-library/jest-dom from 5.11.4 to 5.11.6 in /frontend (#293) * Bump @testing-library/react from 11.0.4 to 11.2.2 in /frontend (#296) * Bump @testing-library/user-event from 12.2.2 to 12.5.0 in /frontend (#298) * Bump @types/jest from 26.0.15 to 26.0.16 in /frontend (#297) * Bump @types/node from 14.14.6 to 14.14.13 in /frontend (#302) * Bump actions/setup-node from v2.1.2 to v2.1.3 (#299) * Bump @types/react-dom from 16.9.8 to 17.0.0 in /frontend (#301) * Bump actions/setup-node from v2.1.3 to v2.1.4 (#305) Bumps [actions/setup-node](https://github.com/actions/setup-node) from v2.1.3 to v2.1.4. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](actions/setup-node@v2.1.3...c46424e) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix react-router scrolling bug (#306) * fix react-router scrolling bug * fixed styling * fixed styling * Rewrite backend with Django (#268) * Rewrite backend with Django * Black-ify Django backend * Fix missing backend dependency * Remove trailing slahes from backend * Add date, location, and organizer filters to events API * Update backend README * Black-ify all the things, again... * Add Django admin for events * Update backend flake8 config for new Django setup * Fix help text for formatted_description field * Update frontend API client * Fix backend Docker container binding * Use black to make files less readable * Preserve event edits across crawls * add neccessary env stuff for django to infrastructure * prepare backend for deployment & add nginx static container * try fix ci * maybe - instead of _ * try out build-push-action@v2 for local caching * use dest instead of src for cache-to * try to address container source tag with digest * try out local registry * initialize buildx with network=host * fix the yaml * use correct build-arg * Mark all readOnly properties as required in OpenAPI Spec * Add hardcoded 400 and 404 response schemas to OpenAPI spec * add updated generated-client * change useGetEvents hook to accomodate changed backend * attempt to fix client check in ci * debug client check in ci * disable client check for now * add ssh-key gerald * shave a step from backend dockerfile * change migration command & rename static service in deployment compose file * add some deployment docs * change staging commands to use django * add ansible.cfg Co-authored-by: Gerald Pape <[email protected]> Co-authored-by: ubergesundheit <[email protected]> Co-authored-by: Gerald Pape <[email protected]> * Django staging fixes (#312) * fix env for api container * enable cors for django * try reenabling api client validation * Django staging fixes 2 (#313) * rename traefik router of api-static * document admin user creation * Django staging fixes 3 (#314) * fix DJANG_DEBUG env default * change production deployment command in ci * set SESSION_COOKIE_SECURE and CSRF_COOKIE_SECURE to True * Upgrade deps (2020-12-31) (#315) * upgrade deps * revert dev stuff * changes how date paths are generated (#311) * changes how date paths are generated * fixes import statement Co-authored-by: Gerald Pape <[email protected]> * scrapy raises exception on error status code (#308) * scrapy now raises an exception when the request returns an error status code * fixes performance issue * fixed styling * refactor * fixes performance issue * frontend deps upgrade 2020-01-04 (#322) * Bump ky from 0.24.0 to 0.25.1 in /frontend (#317) Bumps [ky](https://github.com/sindresorhus/ky) from 0.24.0 to 0.25.1. - [Release notes](https://github.com/sindresorhus/ky/releases) - [Commits](sindresorhus/ky@v0.24.0...v0.25.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump csp-html-webpack-plugin from 4.0.0 to 5.0.1 in /frontend (#319) Bumps [csp-html-webpack-plugin](https://github.com/slackhq/csp-html-webpack-plugin) from 4.0.0 to 5.0.1. - [Release notes](https://github.com/slackhq/csp-html-webpack-plugin/releases) - [Commits](slackhq/csp-html-webpack-plugin@v4.0.0...5.0.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * remove staticmethod (#323) * Bump lxml from 4.5.2 to 4.6.2 in /backend (#324) Bumps [lxml](https://github.com/lxml/lxml) from 4.5.2 to 4.6.2. - [Release notes](https://github.com/lxml/lxml/releases) - [Changelog](https://github.com/lxml/lxml/blob/master/CHANGES.txt) - [Commits](lxml/lxml@lxml-4.5.2...lxml-4.6.2) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @types/jest from 26.0.19 to 26.0.20 in /frontend (#328) * Bump eslint-plugin-prettier from 3.3.0 to 3.3.1 in /frontend (#327) * Bump ky from 0.25.1 to 0.26.0 in /frontend (#325) * Bump @types/node from 14.14.19 to 14.14.20 in /frontend (#326) * Bump @testing-library/react from 11.2.2 to 11.2.3 in /frontend (#329) * make calendar only full width for xs screens * add close button to calendar * align calendarbutton * fiddle with spacings a little * change size of date button in calendar again to keep it circular Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Benedikt Eble <[email protected]> Co-authored-by: Jakob de Maeyer <[email protected]>
codeformuenster · Jan 19, 2021 · 1269841 · 1269841
1 parent faf3680
commit 1269841
Show file tree

Hide file tree

Showing 7 changed files with 344 additions and 75 deletions.
diff --git a/frontend/src/App/Calendar/Calendar.module.scss b/frontend/src/App/Calendar/Calendar.module.scss
@@ -0,0 +1,140 @@
+@import "../../styles/base.scss";
+@import "../DateSelector/DateButton.module.scss";
+
+.calendarButton {
+  @extend .dateButton;
+  margin-top: 10px;
+}
+
+.calendarPopup {
+  @include box-shadow($box-shadow-sm);
+  @include border-radius();
+  border: $border-width solid $border-color;
+  background-color: $white;
+  z-index: 1;
+  padding: 0 $spacer;
+  max-width: 400px;
+  @include media-breakpoint-down(xs) {
+    width: 100%;
+  }
+}
+
+.calendar {
+  @include media-breakpoint-up(sm) {
+    margin: $spacer * 0.5;
+    padding: $spacer * 0.5;
+  }
+}
+
+.monthRow {
+  display: flex;
+  margin-top: $spacer;
+  @include media-breakpoint-down(sm) {
+    margin-bottom: $spacer;
+  }
+}
+
+.monthIndicator {
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: $spacer;
+  flex: 1;
+}
+
+.nextMonth {
+  margin-right: $spacer * 3;
+  @include media-breakpoint-up(sm) {
+    margin-right: $spacer * 2;
+  }
+}
+
+.prevMonth {
+  margin-left: $spacer * 3;
+  @include media-breakpoint-up(sm) {
+    margin-left: $spacer * 2;
+  }
+}
+
+.close {
+  @extend .btn;
+  position: absolute;
+  right: 0;
+  padding-top: 0;
+  font-size: 25px;
+  top: 0;
+  padding-bottom: 0;
+}
+
+/* CSS grid used for the dates */
+.dayOfWeek,
+.dateGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.dayOfWeek > * {
+  font-size: 0.7em;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  font-variant: small-caps;
+  text-align: center;
+}
+
+/* Dates */
+.dateGrid {
+  margin-top: $spacer * 0.5;
+}
+
+.date[data-dow='Mo'] {
+  grid-column: 1;
+}
+
+.date[data-dow='Di'] {
+  grid-column: 2;
+}
+
+.date[data-dow='Mi'] {
+  grid-column: 3;
+}
+
+.date[data-dow='Do'] {
+  grid-column: 4;
+}
+
+.date[data-dow='Fr'] {
+  grid-column: 5;
+}
+
+.date[data-dow='Sa'] {
+  @extend .isWeekend;
+  grid-column: 6;
+}
+
+.date[data-dow='So'] {
+  @extend .isWeekend;
+  grid-column: 7;
+}
+
+/* Style for each day */
+.date {
+  height: 4ch;
+  width: 4ch;
+  line-height: 3.75ch;
+  text-align: center;
+  background-color: transparent;
+  border-radius: 50%;
+  color: $gray-900;
+}
+
+.date:hover,
+.date:focus {
+  outline: none;
+}
+
+.isToday {
+  border: 2px solid $app-datebutton-today-color;
+}
+
+.isActive {
+  background-color: $app-datebutton-active-color;
+}
diff --git a/frontend/src/App/Calendar/Calendar.tsx b/frontend/src/App/Calendar/Calendar.tsx
@@ -0,0 +1,58 @@
+import React, { FC, useState } from "react";
+import { usePopper } from "react-popper";
+import styles from "./Calendar.module.scss";
+import CalendarBody from "./CalendarBody";
+
+const Calendar: FC = () => {
+  const [
+    referenceElement,
+    setReferenceElement,
+  ] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+  const { styles: popperStyles, attributes } = usePopper(
+    referenceElement,
+    popperElement,
+    {
+      placement: "bottom-end",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 10],
+          },
+        },
+      ],
+    }
+  );
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
+      <button
+        type="button"
+        aria-label="Kalender öffnen"
+        ref={setReferenceElement}
+        onClick={() => setIsOpen(!isOpen)}
+        className={styles.calendarButton}
+      >
+        &#128197;
+      </button>
+
+      {isOpen && (
+        <div
+          ref={setPopperElement}
+          style={popperStyles.popper}
+          {...attributes.popper}
+          className={styles.calendarPopup}
+        >
+          <CalendarBody close={() => setIsOpen(false)} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Calendar;
diff --git a/frontend/src/App/Calendar/CalendarBody.tsx b/frontend/src/App/Calendar/CalendarBody.tsx
@@ -0,0 +1,143 @@
+import React, { FC, useMemo, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import clsx from "clsx";
+import styles from "./Calendar.module.scss";
+import { isoFormat } from "../../utils/eventTime";
+import { makeAppRouteLink } from "../../utils/routes";
+
+interface ICalendarBody {
+  close: () => void;
+}
+
+interface IDate {
+  label: string;
+  to: string;
+  isToday: boolean;
+  isSelected: boolean;
+  isoDate: string;
+}
+
+const weekdayShortFormat = new Intl.DateTimeFormat("de-DE", {
+  weekday: "short",
+});
+
+const monthDateFormat = new Intl.DateTimeFormat("de-DE", {
+  month: "long",
+  year: "numeric",
+}).format;
+
+const CalendarBody: FC<ICalendarBody> = ({ close }) => {
+  const { date: selectedDateFromParams } = useParams<IAppRouterParams>();
+
+  const [baseDate, setBaseDate] = useState<Date>(
+    // initialize baseDate as a Date with all fields reset
+    // except year and month
+    (() => {
+      const now = new Date();
+      now.setHours(0, 0, 0, 0);
+      now.setDate(1);
+
+      return now;
+    })()
+  );
+
+  const setBaseDateMonth: (month: number) => void = (month) => {
+    const newBaseDate = new Date(baseDate.getTime());
+    newBaseDate.setMonth(newBaseDate.getMonth() + month);
+
+    setBaseDate(newBaseDate);
+  };
+
+  const dates = useMemo<IDate[]>(() => {
+    // take the current baseDate as starting point
+    const firstOfMonth = new Date(baseDate.getTime());
+    const today = isoFormat(new Date());
+
+    // determine number of days in month
+    // stolen from date-fns getDaysInMonths
+    const year = firstOfMonth.getFullYear();
+    const monthIndex = firstOfMonth.getMonth();
+    const lastDayOfMonth = new Date(0);
+    lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
+    lastDayOfMonth.setHours(0, 0, 0, 0);
+    const numDaysInMonth = lastDayOfMonth.getDate();
+
+    return Array.from({ length: numDaysInMonth }, (_, i) => {
+      // mutate the date. otherwise we'll get problems in month
+      // where summer/winter time is switched
+      firstOfMonth.setDate(i + 1);
+      const isoDate = isoFormat(firstOfMonth);
+
+      return {
+        label: weekdayShortFormat.format(firstOfMonth),
+        to: makeAppRouteLink(isoDate),
+        isToday: today === isoDate,
+        isSelected: selectedDateFromParams === isoDate,
+        isoDate,
+      };
+    });
+  }, [baseDate, selectedDateFromParams]);
+
+  return (
+    <div className={styles.calendar}>
+      <span
+        aria-hidden
+        role="button"
+        onClick={() => close()}
+        className={styles.close}
+      >
+        &times;
+      </span>
+      <div className={styles.monthRow}>
+        <span
+          aria-hidden
+          role="button"
+          onClick={() => setBaseDateMonth(-1)}
+          className={styles.prevMonth}
+        >
+          &lt;
+        </span>
+        <div className={styles.monthIndicator}>
+          <time dateTime={isoFormat(baseDate)}>
+            {monthDateFormat(baseDate)}
+          </time>
+        </div>
+        <span
+          aria-hidden
+          role="button"
+          onClick={() => setBaseDateMonth(1)}
+          className={styles.nextMonth}
+        >
+          &gt;
+        </span>
+      </div>
+      <div className={styles.dayOfWeek}>
+        <div>Mo</div>
+        <div>Di</div>
+        <div>Mi</div>
+        <div>Do</div>
+        <div>Fr</div>
+        <div>Sa</div>
+        <div>So</div>
+      </div>
+      <div className={styles.dateGrid}>
+        {dates.map((date, i) => (
+          <Link
+            key={date.isoDate}
+            to={date.to}
+            data-dow={date.label}
+            onClick={() => close()}
+            className={clsx(styles.date, {
+              [styles.isToday]: date.isToday,
+              [styles.isActive]: date.isSelected,
+            })}
+          >
+            <time dateTime={date.isoDate}>{i + 1}</time>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CalendarBody;
diff --git a/frontend/src/App/DateSelector/DateArrow.module.scss b/frontend/src/App/DateSelector/DateArrow.module.scss
diff --git a/frontend/src/App/DateSelector/DateArrow.tsx b/frontend/src/App/DateSelector/DateArrow.tsx