diff --git a/maubot/management/frontend/src/pages/dashboard/index.js b/maubot/management/frontend/src/pages/dashboard/index.js index ed72dc7..567c443 100644 --- a/maubot/management/frontend/src/pages/dashboard/index.js +++ b/maubot/management/frontend/src/pages/dashboard/index.js @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React, { Component } from "react" -import { Route, Switch, Link } from "react-router-dom" +import { Route, Switch, Link, withRouter } from "react-router-dom" import api from "../../api" import { ReactComponent as Plus } from "../../res/plus.svg" import Instance from "./Instance" @@ -28,10 +28,17 @@ class Dashboard extends Component { instances: {}, clients: {}, plugins: {}, + sidebarOpen: false, } window.maubot = this } + componentDidUpdate(prevProps) { + if (this.props.location !== prevProps.location) { + this.setState({ sidebarOpen: false }) + } + } + async componentWillMount() { const [instanceList, clientList, pluginList] = await Promise.all([ api.getInstances(), api.getClients(), api.getPlugins()]) @@ -90,15 +97,15 @@ class Dashboard extends Component { ) render() { - return
+ return
Maubot Manager -
{localStorage.username}
+ + +
+
this.setState({ sidebarOpen: !this.state.sidebarOpen })}> + +
+
+
"Hello, World!"}/> @@ -145,4 +160,4 @@ class Dashboard extends Component { } } -export default Dashboard +export default withRouter(Dashboard) diff --git a/maubot/management/frontend/src/style/lib/preferencetable.sass b/maubot/management/frontend/src/style/lib/preferencetable.sass index 64c2124..c72dff1 100644 --- a/maubot/management/frontend/src/style/lib/preferencetable.sass +++ b/maubot/management/frontend/src/style/lib/preferencetable.sass @@ -23,6 +23,9 @@ > .entry display: block + + @media screen and (max-width: 55rem) + width: calc(100% - 1rem) width: calc(50% - 1rem) margin: .5rem diff --git a/maubot/management/frontend/src/style/pages/client/avatar.sass b/maubot/management/frontend/src/style/pages/client/avatar.sass index 062a605..25e596a 100644 --- a/maubot/management/frontend/src/style/pages/client/avatar.sass +++ b/maubot/management/frontend/src/style/pages/client/avatar.sass @@ -21,6 +21,9 @@ height: 8rem border-radius: 50% + @media screen and (max-width: 40rem) + margin: 0 auto 1rem + > img.avatar position: absolute display: block diff --git a/maubot/management/frontend/src/style/pages/client/index.sass b/maubot/management/frontend/src/style/pages/client/index.sass index 9444513..3d004db 100644 --- a/maubot/management/frontend/src/style/pages/client/index.sass +++ b/maubot/management/frontend/src/style/pages/client/index.sass @@ -16,7 +16,6 @@ > div.client display: flex - margin: 2rem 4rem > div.sidebar vertical-align: top @@ -36,3 +35,10 @@ > div.instances +instancelist + + @media screen and (max-width: 40rem) + flex-wrap: wrap + + > div.sidebar, > div.info + width: 100% + margin-right: 0 diff --git a/maubot/management/frontend/src/style/pages/dashboard-grid.css b/maubot/management/frontend/src/style/pages/dashboard-grid.css index 88010db..516c7ff 100644 --- a/maubot/management/frontend/src/style/pages/dashboard-grid.css +++ b/maubot/management/frontend/src/style/pages/dashboard-grid.css @@ -5,3 +5,22 @@ [row3-start] "sidebar main" auto [row3-end] / 15rem auto; } + + +@media screen and (max-width: 35rem) { + .dashboard { + grid-template: + [row1-start] "topbar" 3.5rem [row1-end] + [row2-start] "main" auto [row2-end] + / auto; + } + + .dashboard.sidebar-open { + grid-template: + [row1-start] "title topbar" 3.5rem [row1-end] + [row2-start] "user main" 2.5rem [row2-end] + [row3-start] "sidebar main" auto [row3-end] + / 15rem 100%; + overflow-x: hidden; + } +} diff --git a/maubot/management/frontend/src/style/pages/dashboard.sass b/maubot/management/frontend/src/style/pages/dashboard.sass index 56269f2..681728e 100644 --- a/maubot/management/frontend/src/style/pages/dashboard.sass +++ b/maubot/management/frontend/src/style/pages/dashboard.sass @@ -60,11 +60,19 @@ border-radius: .25rem @import sidebar + @import topbar + + @media screen and (max-width: 35rem) + &:not(.sidebar-open) + > nav.sidebar, > a.title, > div.user + display: none !important > main.view grid-area: main border-left: 1px solid $border-color + overflow-y: scroll + @import client/index @import instance @import plugin @@ -74,6 +82,12 @@ margin-top: 5rem font-size: 1.5rem + > div:not(.not-found) + margin: 2rem 4rem + + @media screen and (max-width: 50rem) + margin: 2rem 1rem + div.buttons +button-group display: flex diff --git a/maubot/management/frontend/src/style/pages/instance.sass b/maubot/management/frontend/src/style/pages/instance.sass index 607352c..18b63a0 100644 --- a/maubot/management/frontend/src/style/pages/instance.sass +++ b/maubot/management/frontend/src/style/pages/instance.sass @@ -15,8 +15,6 @@ // along with this program. If not, see . > div.instance - margin: 2rem 4rem - > div.preference-table .select-client display: flex diff --git a/maubot/management/frontend/src/style/pages/login.sass b/maubot/management/frontend/src/style/pages/login.sass index 6447f54..c1be6a4 100644 --- a/maubot/management/frontend/src/style/pages/login.sass +++ b/maubot/management/frontend/src/style/pages/login.sass @@ -28,6 +28,10 @@ border-radius: .25rem margin-top: 3rem + @media screen and (max-width: 27rem) + margin: 3rem 1rem 0 + width: calc(100% - 2rem) + h1 color: $primary margin: 3rem 0 @@ -35,13 +39,14 @@ input, button margin: .5rem 2.5rem height: 3rem - width: 20rem + width: calc(100% - 5rem) + box-sizing: border-box input +input button - +button($width: 20rem, $height: 3rem, $padding: 0) + +button($width: calc(100% - 5rem), $height: 3rem, $padding: 0) +main-color-button .spinner diff --git a/maubot/management/frontend/src/style/pages/plugin.sass b/maubot/management/frontend/src/style/pages/plugin.sass index b45d867..b9fed11 100644 --- a/maubot/management/frontend/src/style/pages/plugin.sass +++ b/maubot/management/frontend/src/style/pages/plugin.sass @@ -15,8 +15,6 @@ // along with this program. If not, see . > .plugin - margin: 2rem 4rem - > .upload-box +upload-box diff --git a/maubot/management/frontend/src/style/pages/sidebar.sass b/maubot/management/frontend/src/style/pages/sidebar.sass index 58078f4..497ba06 100644 --- a/maubot/management/frontend/src/style/pages/sidebar.sass +++ b/maubot/management/frontend/src/style/pages/sidebar.sass @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -> .sidebar +> nav.sidebar grid-area: sidebar background-color: white diff --git a/maubot/management/frontend/src/style/pages/topbar.sass b/maubot/management/frontend/src/style/pages/topbar.sass new file mode 100644 index 0000000..e7d8312 --- /dev/null +++ b/maubot/management/frontend/src/style/pages/topbar.sass @@ -0,0 +1,74 @@ +// maubot - A plugin-based Matrix bot system. +// Copyright (C) 2018 Tulir Asokan +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +.topbar + background-color: $primary + + display: flex + justify-items: center + align-items: center + padding: 0 .75rem + + @media screen and (min-width: calc(35rem + 1px)) + display: none + +// Hamburger menu based on "Pure CSS Hamburger fold-out menu" codepen by Erik Terwan (MIT license) +// https://codepen.io/erikterwan/pen/EVzeRP + +.hamburger + display: block + user-select: none + cursor: pointer + + > span + display: block + width: 29px + height: 4px + margin-bottom: 5px + position: relative + + background: white + border-radius: 3px + + z-index: 1 + + transform-origin: 4px 0 + + //transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease + + &:nth-of-type(1) + transform-origin: 0 0 + + &:nth-of-type(3) + transform-origin: 0 100% + + transform: translateY(2px) + + &.active + transform: translateX(1px) translateY(4px) + + &.active > span + opacity: 1 + + &:nth-of-type(1) + transform: rotate(45deg) translate(-2px, -1px) + + &:nth-of-type(2) + opacity: 0 + transform: rotate(0deg) scale(0.2, 0.2) + + &:nth-of-type(3) + transform: rotate(-45deg) translate(0, -1px)