feat: set minimum window size, allow sidebar to shrink

2023-11-13 18:44:02 +01:00 · 2023-11-13 18:44:02 +01:00 · d24ab21d3d
parent afc931c6b8
commit d24ab21d3d
6 changed files with 105 additions and 23 deletions
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@ -7,7 +7,11 @@
      "monitor": "Monitor",
      "strimertul": "{{APPNAME}}",
      "twitch": "Twitch",
-      "loyalty": "Loyalty system"
+      "loyalty": "Loyalty system",
+      "monitor-short": "HOME",
+      "strimertul-short": "STUL",
+      "twitch-short": "TWCH",
+      "loyalty-short": "LOYT"
    },
    "pages": {
      "monitor": {
@ -31,7 +35,7 @@
      }
    },
    "messages": {
-      "update-available": "UPDATE AVAILABLE"
+      "update-available": "Update available"
    }
  },
  "pages": {
--- a/frontend/src/locale/it/translation.json
+++ b/frontend/src/locale/it/translation.json
@ -57,7 +57,7 @@
  },
  "menu": {
    "messages": {
-      "update-available": "AGGIORNAMENTO DISPONIBILE"
+      "update-available": "Aggiornamento disponibile"
    },
    "pages": {
      "loyalty": {
@ -84,7 +84,11 @@
      "loyalty": "Punti fedeltà",
      "monitor": "Monitor",
      "strimertul": "strimertul",
-      "twitch": "Twitch"
+      "twitch": "Twitch",
+      "monitor-short": "PANL",
+      "strimertul-short": "STUL",
+      "twitch-short": "TWCH",
+      "loyalty-short": "PNTI"
    }
  },
  "pages": {
--- a/frontend/src/ui/App.tsx
+++ b/frontend/src/ui/App.tsx
@ -52,6 +52,7 @@ import InteractiveAuthDialog from './components/InteractiveAuthDialog';
 const sections: RouteSection[] = [
  {
    title: 'menu.sections.monitor',
+    short: 'menu.sections.monitor-short',
    links: [
      {
        title: 'menu.pages.monitor.dashboard',
@ -62,6 +63,7 @@ const sections: RouteSection[] = [
  },
  {
    title: 'menu.sections.strimertul',
+    short: 'menu.sections.strimertul-short',
    links: [
      {
        title: 'menu.pages.strimertul.settings',
@ -82,6 +84,7 @@ const sections: RouteSection[] = [
  },
  {
    title: 'menu.sections.twitch',
+    short: 'menu.sections.twitch-short',
    links: [
      {
        title: 'menu.pages.twitch.configuration',
@ -107,6 +110,7 @@ const sections: RouteSection[] = [
  },
  {
    title: 'menu.sections.loyalty',
+    short: 'menu.sections.loyalty-short',
    links: [
      {
        title: 'menu.pages.loyalty.configuration',
--- a/frontend/src/ui/components/Sidebar.tsx
+++ b/frontend/src/ui/components/Sidebar.tsx
@ -1,4 +1,3 @@
-import { styled } from '@stitches/react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useMatch, useResolvedPath } from 'react-router-dom';
@ -7,12 +6,14 @@ import { Link, useMatch, useResolvedPath } from 'react-router-dom';
 import logo from '~/assets/icon-logo.svg';

 import { useAppSelector } from '~/store';
-import { APPNAME, APPREPO, lightMode } from '../theme';
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
+import { APPNAME, lightMode, styled } from '../theme';
 import BrowserLink from './BrowserLink';
 import Scrollbar from './utils/Scrollbar';

 export interface RouteSection {
  title: string;
+  short: string;
  links: Route[];
 }

@ -28,8 +29,13 @@ interface SidebarProps {

 const Container = styled('section', {
  background: '$gray2',
-  maxWidth: '220px',
  borderRight: '1px solid $gray6',
+  width: '60px',
+  transition: 'max-width 0.1s ease',
+  '@medium': {
+    width: 'auto',
+    maxWidth: '220px',
+  },

  [`.${lightMode} &`]: {
    background: '$gray2',
@ -37,8 +43,10 @@ const Container = styled('section', {
 });

 const Header = styled('div', {
-  padding: '0.8rem 1rem 1rem 0.8rem',
  textAlign: 'center',
+  '@medium': {
+    padding: '0.8rem 1rem 1rem 0.8rem',
+  },
 });

 const AppName = styled('h1', {
@ -50,7 +58,17 @@ const AppName = styled('h1', {
  fontSize: '1.4rem',
  margin: '0.5rem 0 0.5rem 0',
  fontWeight: 300,
-  paddingRight: '0.5rem',
+
+  '@medium': {
+    paddingRight: '0.5rem',
+  },
+
+  span: {
+    display: 'none',
+    '@medium': {
+      display: 'initial',
+    },
+  },
 });

 const AppLink = styled(Link, {
@ -67,7 +85,9 @@ const AppLink = styled(Link, {
    status: {
      active: {
        backgroundColor: '$teal4',
-        borderRadius: '0.5rem',
+        '@medium': {
+          borderRadius: '0.5rem',
+        },
      },
      default: {},
    },
@ -82,24 +102,40 @@ const VersionLabel = styled('div', {
  color: '$teal8',
  textAlign: 'center',
  paddingBottom: '0.4rem',
+  display: 'none',
+  '@medium': {
+    display: 'initial',
+  },
 });

 const UpdateButton = styled(BrowserLink, {
  textTransform: 'uppercase',
  fontSize: '0.75rem',
  fontWeight: 'bold',
+  display: 'flex',
+  alignItems: 'center',
  color: '$yellow12 !important',
  border: '1px solid $yellow7',
  padding: '0.2rem 0.4rem',
-  marginTop: '0.5rem',
+  margin: '0.5rem 0.5rem',
  backgroundColor: '$yellow5',
  borderRadius: '0.2rem',
-  display: 'inline-block',
  cursor: 'pointer',
  textDecoration: 'none',
+  '@medium': {
+    margin: '0.5rem 0 0 0',
+  },
  '&:hover': {
    backgroundColor: '$yellow6',
  },
+  justifyContent: 'center',
+  span: {
+    flex: 1,
+    display: 'none',
+    '@medium': {
+      display: 'initial',
+    },
+  },
 });

 const MenuSection = styled('article', {
@ -111,9 +147,26 @@ const MenuHeader = styled('header', {
  textTransform: 'uppercase',
  fontSize: '0.75rem',
  fontWeight: 'bold',
-  padding: '0.5rem 0 0.5rem 0.8rem',
+  padding: '0.5rem 0 0.5rem',
  color: '$teal9',
  userSelect: 'none',
+  textAlign: 'center',
+  '@medium': {
+    textAlign: 'left',
+    padding: '0.5rem 0 0.5rem 0.8rem',
+  },
+});
+const FullTitle = styled('span', {
+  display: 'none',
+  '@medium': {
+    display: 'initial',
+  },
+});
+const ShortTitle = styled('span', {
+  display: 'initial',
+  '@medium': {
+    display: 'none',
+  },
 });
 const MenuLink = styled(Link, {
  userSelect: 'none',
@ -122,9 +175,14 @@ const MenuLink = styled(Link, {
  alignItems: 'center',
  textDecoration: 'none',
  gap: '0.6rem',
-  padding: '0.6rem 1.6rem 0.6rem 1rem',
  fontSize: '0.9rem',
  fontWeight: '300',
+  justifyContent: 'center',
+  padding: '0.6rem',
+  '@medium': {
+    justifyContent: 'flex-start',
+    padding: '0.6rem 1.6rem 0.6rem 1rem',
+  },
  [`.${lightMode} &`]: {
    fontWeight: '400',
  },
@ -142,6 +200,12 @@ const MenuLink = styled(Link, {
      },
    },
  },
+  span: {
+    display: 'none',
+    '@medium': {
+      display: 'initial',
+    },
+  },
 });

 const AppLogo = styled('img', {
@ -161,9 +225,10 @@ function SidebarLink({ route: { title, url, icon } }: { route: Route }) {
      status={match ? 'selected' : 'clickable'}
      to={url.replace(/\/\//gi, '/')}
      key={`${title}-${url}`}
+      title={t(title)}
    >
      {icon}
-      {t(title)}
+      <span>{t(title)}</span>
    </MenuLink>
  );
 }
@ -245,7 +310,7 @@ export default function Sidebar({
          <AppLink to={'/about'} status={matchApp ? 'active' : 'default'}>
            <AppName>
              <AppLogo src={logo as string} />
-              {APPNAME}
+              <span>{APPNAME}</span>
            </AppName>
            <VersionLabel>
              {version && !dev ? version : t('debug.dev-build')}
@ -256,13 +321,17 @@ export default function Sidebar({
            lastVersion &&
            !hasLatestOrBeta(version, lastVersion.name) && (
              <UpdateButton href={lastVersion.url}>
-                {t('menu.messages.update-available')}
+                <ExternalLinkIcon />
+                <span>{t('menu.messages.update-available')}</span>
              </UpdateButton>
            )}
        </Header>
-        {sections.map(({ title: sectionTitle, links }) => (
+        {sections.map(({ title: sectionTitle, short, links }) => (
          <MenuSection key={sectionTitle}>
-            <MenuHeader>{t(sectionTitle)}</MenuHeader>
+            <MenuHeader>
+              <FullTitle>{t(sectionTitle)}</FullTitle>
+              <ShortTitle title={t(sectionTitle)}>{t(short)}</ShortTitle>
+            </MenuHeader>
            {links.map((route) => (
              <SidebarLink route={route} key={`${route.title}-${route.url}`} />
            ))}
--- a/frontend/src/ui/theme/brand.ts
+++ b/frontend/src/ui/theme/brand.ts
@ -1,4 +1,3 @@
 export const APPNAME = 'strimertül';
-export const APPREPO = 'strimertul/strimertul';

 export default { APPNAME };
--- a/main.go
+++ b/main.go
@ -127,9 +127,11 @@ func cliMain(ctx *cli.Context) error {

 	// Create application with options
 	err := wails.Run(&options.App{
-		Title:  "strimertul",
-		Width:  1024,
-		Height: 768,
+		Title:     "strimertul",
+		Width:     1024,
+		Height:    768,
+		MinWidth:  480,
+		MinHeight: 300,
 		AssetServer: &assetserver.Options{
 			Assets: frontend,
 		},