console: Add responsiveness

pkg/webui/console/components/total-end-devices-upseller-panel/index.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React from 'react'
+import classNames from 'classnames'
 
 import { IconBolt, IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
@@ -21,10 +22,11 @@ import Button from '@ttn-lw/components/button'
 import Message from '@ttn-lw/lib/components/message'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './total-end-devices-upseller-panel.styl'
 
-const TotalEndDevicesUpsellerPanel = () => {
+const TotalEndDevicesUpsellerPanel = ({ className }) => {
   const upgradeUrl = 'https://www.thethingsindustries.com/stack/plans/'
 
   return (
@@ -34,7 +36,7 @@ const TotalEndDevicesUpsellerPanel = () => {
       shortCutLinkButton
       shortCutLinkPath="#"
       shortCutLinkDisabled
-      className={style.panel}
+      className={classNames(className, style.panel)}
       compact
     >
       <div className={style.upseller}>
@@ -58,4 +60,12 @@ const TotalEndDevicesUpsellerPanel = () => {
   )
 }
 
+TotalEndDevicesUpsellerPanel.propTypes = {
+  className: PropTypes.string,
+}
+
+TotalEndDevicesUpsellerPanel.defaultProps = {
+  className: undefined,
+}
+
 export default TotalEndDevicesUpsellerPanel

pkg/webui/console/containers/shortcut-panel/index.js

@@ -29,30 +29,67 @@ import {
 } from '@ttn-lw/components/icon'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 import { setSearchOpen, setSearchScope } from '@console/store/actions/search'
 
 import Panel from '../../../components/panel'
 
 import ShortcutItem from './shortcut-item'
 
-import style from './shortcut-panel.styl'
-
 const m = defineMessages({
   shortcuts: 'Quick actions',
-  addPersonalApiKey: 'Add new personal API key',
+  addEndDevice: 'Add end device',
+  addPersonalApiKey: 'Add API key',
 })
 
-const ShortcutPanel = () => {
+const ShortcutPanel = ({ panelClassName, mobile }) => {
   const dispatch = useDispatch()
   const handleRegisterDeviceClick = React.useCallback(() => {
     dispatch(setSearchScope(APPLICATION))
     dispatch(setSearchOpen(true))
   }, [dispatch])
 
+  if (mobile) {
+    return (
+      <div className="d-flex gap-cs-s">
+        <ShortcutItem
+          icon={IconApplication}
+          title={sharedMessages.createApplication}
+          link="/applications/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconDevice}
+          title={m.addEndDevice}
+          action={handleRegisterDeviceClick}
+          mobile
+        />
+        <ShortcutItem
+          icon={IconUsersGroup}
+          title={sharedMessages.createOrganization}
+          link="/organizations/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconKey}
+          title={m.addPersonalApiKey}
+          link="/user-settings/api-keys/add"
+          mobile
+        />
+        <ShortcutItem
+          icon={IconGateway}
+          title={sharedMessages.registerGateway}
+          link="/gateways/add"
+          mobile
+        />
+      </div>
+    )
+  }
+
   return (
-    <Panel title={m.shortcuts} icon={IconBolt} className="h-full">
-      <div className={classNames(style.shortcutGroup, 'd-flex gap-cs-xs w-full')}>
+    <Panel title={m.shortcuts} icon={IconBolt} className={classNames(panelClassName, 'h-full')}>
+      <div className="d-flex gap-cs-xs w-full">
         <ShortcutItem
           icon={IconApplication}
           title={sharedMessages.createApplication}
@@ -83,4 +120,14 @@ const ShortcutPanel = () => {
   )
 }
 
+ShortcutPanel.propTypes = {
+  mobile: PropTypes.bool,
+  panelClassName: PropTypes.string,
+}
+
+ShortcutPanel.defaultProps = {
+  panelClassName: undefined,
+  mobile: false,
+}
+
 export default ShortcutPanel

pkg/webui/console/containers/shortcut-panel/shortcut-item/index.js

@@ -25,7 +25,7 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './shortcut-item.styl'
 
-const ShortcutItem = ({ icon, link, action, title, className }) =>
+const ShortcutItem = ({ icon, link, action, title, className, mobile }) =>
   action ? (
     <Tooltip
       content={<Message content={title} />}
@@ -34,6 +34,7 @@ const ShortcutItem = ({ icon, link, action, title, className }) =>
     >
       <button onClick={action} className={classnames(style.shortcut, className)}>
         <Icon icon={icon} className={style.icon} size={28} />
+        {mobile && <Message content={title} className="lg-xl:d-none" />}
       </button>
     </Tooltip>
   ) : (
@@ -44,6 +45,7 @@ const ShortcutItem = ({ icon, link, action, title, className }) =>
     >
       <Link to={link} className={classnames(style.shortcut, className)}>
         <Icon icon={icon} className={style.icon} size={28} />
+        {mobile && <Message content={title} className="lg-xl:d-none" />}
       </Link>
     </Tooltip>
   )
@@ -53,13 +55,15 @@ ShortcutItem.propTypes = {
   className: PropTypes.string,
   icon: PropTypes.icon.isRequired,
   link: PropTypes.string,
+  mobile: PropTypes.bool,
   title: PropTypes.message.isRequired,
 }
 
 ShortcutItem.defaultProps = {
   className: undefined,
   action: undefined,
   link: undefined,
+  mobile: false,
 }
 
 export default ShortcutItem

pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl

@@ -17,21 +17,24 @@
 
 .shortcut
   padding: $cs.s $cs.m
-  background: var(--c-bg-brand-light)
+  color: var(--c-text-brand-normal)
+  background-color: var(--c-bg-brand-light)
   border-radius: $br.l
   height: 4.5rem
   width: 100%
   display: flex
   align-items: center
   justify-content: center
+  gap: $cs.xs
+  font-weight: $fw.bold
   border: 0
 
+  +media-query(1304px)
+    padding: $cs.xxs $cs.xs
+
   .icon
     color: var(--c-icon-brand-normal)
 
   &:hover
     cursor: pointer
-
-@container panel (max-width: 320px)
-  .shortcut
-    width: 4.5rem
+    background-color: var(--c-bg-brand-semilight)

pkg/webui/console/views/overview/overview.js

@@ -35,9 +35,12 @@ const Overview = () => {
 
   return (
     <div className="container container--xl grid p-ls-s gap-ls-s md:p-cs-xs md:gap-cs-xs">
+      <div className="item-12 d-none xl:d-block md-lg:d-none">
+        <ShortcutPanel mobile />
+      </div>
       <div className="item-12 md-lg:item-4 d-flex direction-column gap-ls-s">
-        <ShortcutPanel />
-        <TotalEndDevicesUpsellerPanel />
+        <ShortcutPanel panelClassName="xl:d-none" />
+        <TotalEndDevicesUpsellerPanel className="h-full" />
       </div>
       <div className="item-12 md-lg:item-4">
         <BlurryNocMetricsPanel