m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add rtl support

This commit is contained in:
Ashraf Monshi 2021-05-13 09:15:37 +03:00
parent 0126154e39
commit 0c13f8d358
6 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/layout/Footer.js
View File

@ -1,14 +1,19 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import styles from './Footer.module.css'; import styles from './Footer.module.css';
import useVersion from 'hooks/useVersion'; import useVersion from 'hooks/useVersion';
export default function Footer() { export default function Footer() {
const { current } = useVersion(); const { current } = useVersion();
const intl = useIntl();
return ( return (
<footer className="container"> <footer
className="container"
dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
>
<div className={classNames(styles.footer, 'row')}> <div className={classNames(styles.footer, 'row')}>
<div className="col-12 col-md-4" /> <div className="col-12 col-md-4" />
<div className="col-12 col-md-4"> <div className="col-12 col-md-4">

8
components/layout/Header.js
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
@ -14,13 +14,17 @@ import styles from './Header.module.css';
export default function Header() { export default function Header() {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const intl = useIntl();
function handleClick() { function handleClick() {
setActive(state => !state); setActive(state => !state);
} }
return ( return (
<nav className="container"> <nav
className="container"
dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
>
{user?.is_admin && <UpdateNotice />} {user?.is_admin && <UpdateNotice />}
<div className={classNames(styles.header, 'row align-items-center')}> <div className={classNames(styles.header, 'row align-items-center')}>
<div className={styles.nav}> <div className={styles.nav}>

13
components/layout/Layout.js
View File

@ -2,15 +2,24 @@ import React from 'react';
import Head from 'next/head'; import Head from 'next/head';
import Header from 'components/layout/Header'; import Header from 'components/layout/Header';
import Footer from 'components/layout/Footer'; import Footer from 'components/layout/Footer';
import { useIntl } from 'react-intl';
export default function Layout({ title, children, header = true, footer = true }) { export default function Layout({ title, children, header = true, footer = true }) {
const intl = useIntl();
return ( return (
<> <>
<Head> <Head dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}>
<title>umami{title && ` - ${title}`}</title> <title>umami{title && ` - ${title}`}</title>
</Head> </Head>
{header && <Header />} {header && <Header />}
<main className="container">{children}</main> <main
className="container"
dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
>
{children}
</main>
{footer && <Footer />} {footer && <Footer />}
<div id="__modals" /> <div id="__modals" />
</> </>

3
lang/ar-SA.json
View File

@ -96,5 +96,6 @@
"metrics.referrers": "التحويلات", "metrics.referrers": "التحويلات",
"metrics.unique-visitors": "زائرون فريدون", "metrics.unique-visitors": "زائرون فريدون",
"metrics.views": "مشاهدات", "metrics.views": "مشاهدات",
"metrics.visitors": "زوار" "metrics.visitors": "زوار",
"metrics.dir": "rtl"
} }

1
package.json
View File

@ -119,6 +119,7 @@
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^13.0.0", "postcss-import": "^13.0.0",
"postcss-preset-env": "^6.7.0", "postcss-preset-env": "^6.7.0",
"postcss-rtlcss": "^3.3.2",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"prettier-eslint": "^12.0.0", "prettier-eslint": "^12.0.0",
"prisma": "2.21.2", "prisma": "2.21.2",

1
postcss.config.js
View File

@ -1,5 +1,6 @@
module.exports = { module.exports = {
plugins: [ plugins: [
'postcss-rtlcss',
'postcss-flexbugs-fixes', 'postcss-flexbugs-fixes',
[ [
'postcss-preset-env', 'postcss-preset-env',