{format(date, "MMMM d, yyyy")}
; + + return{user.username}
+ toggleDropdown("Notification")}
- >
-
-
-
- Notifications
-
+ toggleDropdown("Menu")}
+ >
+ toggleDropdown("Menu")}
- >
-
-
-
+
+
+
+
+
)}
);
diff --git a/components/Icon.js b/components/Icon.js
index 9b5597c..17f29d7 100644
--- a/components/Icon.js
+++ b/components/Icon.js
@@ -14,12 +14,8 @@ const Content = styled.div`
cursor: pointer;
`;
-export default function Icon(props) {
- return (
-
- {props.children}
-
- );
+export default function Icon({ children, ...props }) {
+ return {children} ;
}
Icon.propTypes = {
diff --git a/components/LivePeripheral.js b/components/LivePeripheral.js
index 83c1463..d39986b 100644
--- a/components/LivePeripheral.js
+++ b/components/LivePeripheral.js
@@ -31,7 +31,6 @@ const QuantityMeasured = styled.b`
`;
export default function LivePeripheral(props) {
- console.log(props.peripheral);
const quantityTypes = props.peripheral.details.quantityTypes;
return (
diff --git a/components/MapBuilder.js b/components/MapBuilder.js
index 35db9d5..7e6f365 100644
--- a/components/MapBuilder.js
+++ b/components/MapBuilder.js
@@ -3,8 +3,18 @@ import PropTypes from "prop-types";
import React from "react";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import styled from "styled-components";
+import Breaks from "../utils/breakpoints";
import Logo from "./Logo";
+const MapHolder = styled.div`
+ /* 16rem being the approximate size of the content above */
+ height: calc(100vh - 16rem - ${(props) => props.theme.headerHeight});
+
+ @media screen and (max-width: ${Breaks.large}) {
+ height: calc(100vh - ${(props) => props.theme.headerHeight});
+ }
+`;
+
const MarginLogo = styled(Logo)`
margin-right: 1rem;
`;
@@ -30,11 +40,11 @@ export default function MapBuilder(props) {
});
return (
- <>
+
-
+
);
}
diff --git a/components/Path.js b/components/Path.js
index 6c9767d..0a599b3 100644
--- a/components/Path.js
+++ b/components/Path.js
@@ -17,7 +17,12 @@ const LinkContainer = styled.div`
font-weight: 550;
letter-spacing: 0.02em;
+ text-transform: capitalize;
+
color: ${(props) => (props.active ? props.theme.light : props.theme.grey)};
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
`;
const Separator = styled(Icon)`
@@ -27,8 +32,9 @@ const Separator = styled(Icon)`
/***
* Returns the word formated to Titlecase
*/
-function toTitleCase(word) {
- return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
+function cleanPath(word) {
+ return word.replace("-", " ");
+ //return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
}
/***
@@ -48,7 +54,7 @@ function getSteps(path) {
// creating link of type /step1/step2
let step = splitPath[i];
link += "/" + step;
- let label = toTitleCase(step);
+ let label = cleanPath(step);
let isActive = i === splitPath.length - 1;
steps.push({ id: i, active: isActive, link: link, label: label });
}
diff --git a/components/cards/ArticleCard.js b/components/cards/ArticleCard.js
index 2fbe70f..958c36c 100644
--- a/components/cards/ArticleCard.js
+++ b/components/cards/ArticleCard.js
@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";
import { API_URL } from "../../services/community";
+import Breaks from "../../utils/breakpoints";
import Date from "../Date";
import WrapInLink from "../WrapInLink";
import Card from "./Card";
@@ -16,8 +17,19 @@ const Container = styled(Card)`
background-size: cover;
display: flex;
- align-items: flex-end;
- justify-content: center;
+ flex-direction: column;
+`;
+
+const Cover = styled.img`
+ height: 256px;
+
+ @media screen and (max-width: ${Breaks.large}) {
+ max-height: 180px;
+ }
+
+ @media screen and (max-width: ${Breaks.medium}) {
+ display: none;
+ }
`;
const Content = styled.div`
@@ -36,25 +48,26 @@ const Title = styled.b`
margin-bottom: 0.5rem;
- color: ${(props) => props.theme.primary};
+ font-size: 18px;
line-height: 1.5em;
text-overflow: ellipsis;
+ color: ${(props) => props.theme.primary};
overflow: hidden;
`;
const Preview = styled.p`
+ max-height: 3em;
+
margin-bottom: 0.5rem;
line-height: 1.5em;
- max-height: 3em;
overflow: hidden;
text-overflow: ellipsis;
`;
const ArticleDate = styled(Date)`
align-self: flex-end;
- color: ${(props) => props.theme.grey};
`;
export default function ArticleCard(props) {
@@ -64,11 +77,16 @@ export default function ArticleCard(props) {
href={"/news/[slug]"}
as={`/news/${props.article.slug}`}
>
-
+
+
{props.article.title}
{props.article.preview}
diff --git a/components/cards/LibraryMediaCard.js b/components/cards/LibraryMediaCard.js
index 21bb55a..35db857 100644
--- a/components/cards/LibraryMediaCard.js
+++ b/components/cards/LibraryMediaCard.js
@@ -5,6 +5,7 @@ import ArticleIcon from "../../public/icons/article.svg";
import LinkIcon from "../../public/icons/external-link.svg";
import FileIcon from "../../public/icons/file.svg";
import { API_URL } from "../../services/community";
+import Breaks from "../../utils/breakpoints";
import Date from "../Date";
import Icon from "../Icon";
import WrapInLink from "../WrapInLink";
@@ -17,6 +18,13 @@ const Container = styled(Card)`
display: flex;
flex-direction: column;
+
+ @media screen and (max-width: ${Breaks.medium}) {
+ flex-direction: unset;
+ align-items: center;
+
+ max-height: 96px;
+ }
`;
const CoverHolder = styled.div`
@@ -25,10 +33,14 @@ const CoverHolder = styled.div`
align-items: center;
justify-content: center;
text-align: center;
-`;
-const Cover = styled.img`
+ overflow: hidden;
max-height: 160px;
+
+ @media screen and (max-width: ${Breaks.medium}) {
+ max-height: 96px;
+ max-width: 160px;
+ }
`;
const PaddedIcon = styled(Icon)`
@@ -42,10 +54,23 @@ const InfoHolder = styled.div`
border-top: 1px solid ${(props) => props.theme.primary};
padding: 1rem;
+
+ @media screen and (max-width: ${Breaks.large}) {
+ border-top: 0;
+ }
`;
const MediaTitle = styled.b`
+ max-height: 20px;
+
margin-bottom: 0.5rem;
+
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ font-size: 18px;
+ line-height: 20px;
+ white-space: nowrap;
`;
function PureMediaCard(props) {
@@ -53,7 +78,7 @@ function PureMediaCard(props) {
{props.media.media[0].cover != undefined ? (
-
);
diff --git a/components/forms/AccountForm.js b/components/forms/AccountForm.js
index b5e9825..c435040 100644
--- a/components/forms/AccountForm.js
+++ b/components/forms/AccountForm.js
@@ -5,18 +5,21 @@ import styled from "styled-components";
import * as Yup from "yup";
import { updateLoggedUser } from "../../providers/Auth";
import { updateUserInfo } from "../../services/community";
+import Breaks from "../../utils/breakpoints";
import Button from "../Button";
import LongTextInput from "../inputs/LongTextInput";
import TextInput from "../inputs/TextInput";
import LoadingAnimation from "../LoadingAnimation";
-const InputWithMargin = styled(TextInput)`
- margin-right: 1.5rem;
-`;
-
const Row = styled.div`
- display: flex;
- align-items: flex-start;
+ display: grid;
+ grid-gap: 1.5rem;
+ grid-template-columns: 1fr 1fr;
+
+ @media screen and (max-width: ${Breaks.large}) {
+ grid-template-columns: unset;
+ grid-gap: 0;
+ }
`;
const SubmitButton = styled(Button)`
@@ -79,7 +82,7 @@ export default function AccountForm(props) {
<>
toggleDropdown("Notification")}
+ >
+
+
+
+
+ Notifications
+
+
- No notifications yet
+No notifications yet
+
+
+
- + Signed in as {user.username} +
+ + My profile + + + Settings + +
-
-
-
-
- - Signed in as {user.username} -
- - My profile - - - Settings - -