Skip to content

Commit

Permalink
frontend: add css class to target platform
Browse files Browse the repository at this point in the history
This allows to add platform specific CSS, i.e. for scrollbars
  • Loading branch information
thisconnect committed Nov 11, 2024
1 parent 074e758 commit ce4d5ff
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 0 deletions.
2 changes: 2 additions & 0 deletions frontends/web/src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { useSync } from './hooks/api';
import { useDefault } from './hooks/default';
import { usePrevious } from './hooks/previous';
import { useIgnoreDrop } from './hooks/drop';
import { usePlatformClass } from './hooks/platform';
import { AppRouter } from './routes/router';
import { Wizard as BitBox02Wizard } from './routes/device/bitbox02/wizard';
import { getAccounts } from './api/account';
Expand All @@ -44,6 +45,7 @@ import { Providers } from './contexts/providers';
import styles from './app.module.css';

export const App = () => {
usePlatformClass();
const { t } = useTranslation();
const navigate = useNavigate();
useIgnoreDrop();
Expand Down
74 changes: 74 additions & 0 deletions frontends/web/src/hooks/platform.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/**
* Copyright 2024 Shift Crypto AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { useEffect } from 'react';

const getPlatformFromUA = (userAgent: string) => {
if (userAgent.includes('win')) {
return 'windows';
} else if (userAgent.includes('mac')) {
// IOS userAgents will include Mac
if (
userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod')
) {
return 'ios';
}
return 'macos';
} else if (userAgent.includes('linux')) {
// Android userAgent will also include Linux.
if (userAgent.includes('android')
|| userAgent.includes('samsungbrowser')
) {
return 'android';
}
return 'linux';
} else if (userAgent.includes('cros') || userAgent.includes('chromebook')) {
return 'chrome-os';
} else if (
userAgent.includes('bsd')
|| userAgent.includes('freebsd')
|| userAgent.includes('openbsd')
|| userAgent.includes('netbsd')
) {
return 'bsd';
} else {
return null;
}
};

/**
* usePlatformClass adds a CSS class to target a specific platform in CSS
* CSS class that is added is one of:
* - os-windows
* - os-macos
* - os--ios
* - os-andoird
* - os-linux
* - os-chrome-os
* - os-bsd
* - os-
*/
export const usePlatformClass = () => {
const userAgent = navigator.userAgent.toLowerCase();

useEffect(() => {
const platform = getPlatformFromUA(userAgent);
if (platform) {
document.body.classList.add(`os-${platform}`);
}
}, [userAgent]);

};

0 comments on commit ce4d5ff

Please sign in to comment.