diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 449a913..93484e7 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -32,5 +32,7 @@ "showMore": "show more", "noResult": "No Result", "gettingStarted": "Getting Started", - "pressEnterToSearch": "Press Enter to search" + "pressEnterToSearch": "Press Enter to search", + "available": "Available", + "unavailable": "Unavailable" } diff --git a/web/public/locales/ja/translation.json b/web/public/locales/ja/translation.json index 51e563b..c6298da 100644 --- a/web/public/locales/ja/translation.json +++ b/web/public/locales/ja/translation.json @@ -32,5 +32,7 @@ "showMore": "もっと見る", "noResult": "該当なし", "gettingStarted": "試してみる", - "pressEnterToSearch": "エンターキーで検索" + "pressEnterToSearch": "エンターキーで検索", + "available": "取得可能", + "unavailable": "取得済み" } diff --git a/web/src/App.tsx b/web/src/App.tsx index cd99980..0180842 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -3,10 +3,18 @@ import styled, {createGlobalStyle} from 'styled-components'; import {Helmet} from 'react-helmet'; import {useTranslation} from 'react-i18next'; import {Switch, Route, useParams, Redirect} from 'react-router-dom'; +import {IoIosRocket, IoIosFlash} from 'react-icons/io'; import Welcome from './components/Welcome'; import Form from './components/Form'; import Cards from './components/cards'; +import { + ResultItem, + ResultIcon, + ResultName, + COLORS, + AvailableIcon, +} from './components/cards/core'; import Footer from './components/Footer'; import {mobile} from './util/css'; @@ -54,6 +62,7 @@ function Home() { function Search() { const {query} = useParams<{query: string}>(); const currentQuery = sanitize(query); + const {t} = useTranslation(); return ( <> @@ -63,6 +72,23 @@ function Search() {
+ + + + + + {t('available')} + + + + + + + + + {t('unavailable')} + + @@ -70,6 +96,27 @@ function Search() { ); } +const Legend = styled.div` + padding: 80px 0 30px; + display: flex; + flex-direction: row; + justify-content: center; + user-select: none; + cursor: default; + background-color: #f6f6fa; + + ${mobile} { + padding: 60px 0 20px; + align-items: center; + flex-direction: column; + background-color: none; + } + + ${ResultItem} { + margin: 0 20px 0; + } +`; + const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; @@ -89,7 +136,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #ffffff; - + ${mobile} { background: #f5f5f5; } @@ -97,10 +144,10 @@ body { `; const Content = styled.div` - padding-top: 100px; + /* padding-top: 100px; */ ${mobile} { - padding-top: 60px; + /* padding-top: 60px; */ } `; diff --git a/web/src/components/cards/core.tsx b/web/src/components/cards/core.tsx index 736f26d..915b88d 100644 --- a/web/src/components/cards/core.tsx +++ b/web/src/components/cards/core.tsx @@ -12,7 +12,7 @@ import {OutboundLink} from 'react-ga'; import {sendError, sendExpandEvent} from '../../util/analytics'; import {mobile} from '../../util/css'; -const COLORS = { +export const COLORS = { available: '#6e00ff', unavailable: 'darkgrey', error: '#ff388b', @@ -205,7 +205,8 @@ export const Result: React.FC<{ position="bottom" arrow={true} animation="shift" - duration="200"> + duration="200" + > {icon} @@ -213,7 +214,8 @@ export const Result: React.FC<{ + target="_blank" + > {content} ) : ( @@ -270,7 +272,8 @@ class ErrorBoundary extends React.Component< position="bottom" arrow={true} animation="shift" - duration="200"> + duration="200" + > @@ -292,7 +295,8 @@ const ErrorHandler: React.FC = ({children}) => ( - }> + } + > {children} @@ -351,11 +355,11 @@ const ResultContainer = styled.div` padding: 4px 0; `; -const ResultIcon = styled.div` +export const ResultIcon = styled.div` width: 1em; `; -const ResultItem = styled.div` +export const ResultItem = styled.div` display: flex; flex-direction: row; align-items: flex-start; @@ -363,7 +367,7 @@ const ResultItem = styled.div` color: ${({color}) => color}; `; -const ResultName = styled.div` +export const ResultName = styled.div` margin-left: 6px; font-family: monospace; @@ -373,7 +377,7 @@ const ResultName = styled.div` } `; -const AvailableIcon = styled.div` +export const AvailableIcon = styled.div` margin-top: 2px; margin-left: 3px; padding: 0; diff --git a/web/src/util/i18n.ts b/web/src/util/i18n.ts index f0f1db0..cf16117 100644 --- a/web/src/util/i18n.ts +++ b/web/src/util/i18n.ts @@ -5,7 +5,7 @@ import XHR from 'i18next-xhr-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; import {initReactI18next} from 'react-i18next'; -const TRANSLATION_VERSION = '1.12'; +const TRANSLATION_VERSION = '1.13'; i18n .use(Backend)