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() {
+
@@ -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)