quantum/totp
1
0
Fork 0
mirror of https://github.com/quantum5/totp.git synced 2025-04-24 13:41:58 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reduce number of codes shown on mobile

Browse source
This commit is contained in:
Quantum 2024-04-07 02:04:25 -04:00
parent 9c6cdf6ed3
commit c0c6fd2464
3 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/OTPOutput.tsx
View file

@ -17,6 +17,8 @@ function OTPCode({code, delta}: { code: string; delta: number }) {
'totp-newer': delta > 0, 'totp-newer': delta > 0,
'totp-current': delta === 0, 'totp-current': delta === 0,
'totp-far': Math.abs(delta) > 5, 'totp-far': Math.abs(delta) > 5,
'totp-near-first': delta === -5,
'totp-near-last': delta === 5,
})}> })}>
{code} {code}
</div>; </div>;

13
src/index.scss
View file

@ -83,3 +83,16 @@ nav {
font-size: 2em; font-size: 2em;
} }
} }
@include media-breakpoint-down(sm) {
.totp-code {
&.totp-far {
display: none;
}
&.totp-near-first, &.totp-near-last {
max-height: 0;
transform: scale(1, 0);
}
}
}

1
src/main.tsx
View file

@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App.tsx'; import App from './App.tsx';
import './index.scss'; import './index.scss';
import 'bootstrap/js/src/collapse.js';
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>