Skip to content

Commit e405599

Browse files
author
webdev778
authored
Merge pull request #106 from interscript/fix-style-layout
Fix layout and style on the new updated version
2 parents 41e5c0d + 60c750b commit e405599

File tree

5 files changed

+87
-67
lines changed

5 files changed

+87
-67
lines changed

‎src/App.tsx‎

Lines changed: 21 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { useScrollPosition } from "@n8tb1t/use-scroll-position";
66
import styled, { createGlobalStyle } from "styled-components";
77
import logo from "assets/symbol.svg";
88
import { MainNav } from "components/MainNav";
9-
import { SectionNavAnchorItem } from "components/SectionNavItem";
10-
import { SectionNav } from "components/SectionNav";
9+
import EasyAccess from "components/EasyAccess";
1110

1211
export const primaryColor = "008075";
1312

@@ -46,15 +45,17 @@ function App() {
4645
</Helmet>
4746

4847
<LogoHeader>
49-
<LogoSection>
50-
<LogoWrapper>
51-
<LogoSymbol src={logo} alt="is" />
52-
</LogoWrapper>
53-
<HeaderTitle />
54-
</LogoSection>
55-
<EasyAccessSection>
56-
<EasyAccess />
57-
</EasyAccessSection>
48+
<HeaderCenter>
49+
<LogoSection>
50+
<LogoWrapper>
51+
<LogoSymbol src={logo} alt="is" />
52+
</LogoWrapper>
53+
<HeaderTitle />
54+
</LogoSection>
55+
<EasyAccessSection>
56+
<EasyAccess />
57+
</EasyAccessSection>
58+
</HeaderCenter>
5859
</LogoHeader>
5960

6061
<MainNavSection>
@@ -95,6 +96,7 @@ const HeaderTitle: React.FC<{}> = function () {
9596

9697
{showCompact ? (
9798
<ProjectTitleSmallWithLogo role="presentation">
99+
<EasyAccess />
98100
<h1 className="title">
99101
<b>Inter</b>script
100102
</h1>
@@ -104,47 +106,27 @@ const HeaderTitle: React.FC<{}> = function () {
104106
<br />
105107
script&nbsp;conversion&nbsp;systems
106108
</p>
107-
<EasyAccess />
108109
</ProjectTitleSmallWithLogo>
109110
) : null}
110111
</>
111112
);
112113
};
113114

114-
const EasyAccess: React.FC<{}> = function () {
115-
return (
116-
<>
117-
<EasyAccessWrapper>
118-
<EasyAccessNav>
119-
<span>
120-
<strong>Try it in a Browser</strong>!&nbsp;&nbsp;&nbsp;&nbsp;
121-
</span>
122-
<EasyAccessNavItem key="convert" href="/demo#convert">
123-
Convert
124-
</EasyAccessNavItem>
125-
<EasyAccessNavItem key="detect-script" href="/demo#detect-script">
126-
Detect Systems
127-
</EasyAccessNavItem>
128-
<EasyAccessNavItem key="rababa" href="/demo#rababa">
129-
Diacritize scripts
130-
</EasyAccessNavItem>
131-
</EasyAccessNav>
132-
</EasyAccessWrapper>
133-
</>
134-
);
135-
};
136-
137115
const LogoHeader = styled.header`
138116
display: flex;
139117
align-items: center;
140-
flex-flow: row nowrap;
118+
flex-flow: column nowrap;
141119
z-index: 2;
142120
`;
143121

122+
const HeaderCenter = styled.div`
123+
display: flex;
124+
flex-flow: row;
125+
`;
126+
144127
const LogoSection = styled.div`
145128
display: flex;
146129
flex-flow: column nowrap;
147-
flex: 50%;
148130
`;
149131

150132
const LogoWrapper = styled.div`
@@ -154,30 +136,8 @@ const LogoWrapper = styled.div`
154136

155137
const EasyAccessSection = styled.div`
156138
display: flex;
157-
flex: 50%;
158-
`;
159-
160-
const EasyAccessWrapper = styled.div`
161-
display: flex;
162-
border: 3px dashed;
163-
margin-left: 6.25rem;
164-
`;
165-
const EasyAccessNav = styled(SectionNav)`
166-
a:first-of-type {
167-
&::before {
168-
content: none;
169-
}
170-
}
171-
`;
172-
173-
const EasyAccessNavItem = styled(SectionNavAnchorItem)`
174-
@media screen and (min-width: 900px) {
175-
&::before {
176-
content: "|";
177-
display: inline;
178-
margin: 0 1em 0 0;
179-
}
180-
}
139+
flex-flow: row;
140+
align-items: center;
181141
`;
182142

183143
const LogoSymbol = styled.img`

‎src/components/EasyAccess.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { SectionNav } from "components/SectionNav";
4+
import { SectionNavAnchorItem } from "components/SectionNavItem";
5+
6+
export default () => {
7+
return (
8+
<>
9+
<EasyAccessWrapper>
10+
<EasyAccessNav>
11+
<span>
12+
<strong>Try it in a Browser</strong>!&nbsp;&nbsp;&nbsp;&nbsp;
13+
</span>
14+
<EasyAccessNavItem key="convert" href="/demo#convert">
15+
Convert
16+
</EasyAccessNavItem>
17+
<EasyAccessNavItem key="detect-script" href="/demo#detect-script">
18+
Detect Systems
19+
</EasyAccessNavItem>
20+
<EasyAccessNavItem key="rababa" href="/demo#rababa">
21+
Diacritize scripts
22+
</EasyAccessNavItem>
23+
</EasyAccessNav>
24+
</EasyAccessWrapper>
25+
</>
26+
);
27+
};
28+
29+
const EasyAccessWrapper = styled.div`
30+
display: flex;
31+
border: 3px solid #3e7e75;
32+
margin-left: 6.25rem;
33+
min-width: 550px;
34+
`;
35+
36+
const EasyAccessNav = styled(SectionNav)`
37+
text-align: justify;
38+
margin-top: 1rem;
39+
a:first-of-type {
40+
&::before {
41+
content: "";
42+
display: inline;
43+
margin: 0 1em 0 0;
44+
}
45+
}
46+
`;
47+
48+
const EasyAccessNavItem = styled(SectionNavAnchorItem)`
49+
@media screen and (min-width: 900px) {
50+
&::before {
51+
content: "|";
52+
display: inline;
53+
margin: 0 1em 0 0;
54+
}
55+
}
56+
`;

‎src/components/MainNav.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,9 @@ export const MainNavAnchorItem = styled(SectionNavAnchorItem)`
6262
export const MainNavWrapper = styled(SectionNav)`
6363
> span:first-child {
6464
&::before {
65-
content: none;
65+
content: "";
66+
display: inline;
67+
margin: 0 1em 0 0;
6668
}
6769
}
6870
`;

‎src/components/Usage.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ export default () => {
2121
/>
2222
<SectionGrid>
2323
<p>
24-
Interscript supports Ruby, Javascript, Python, and Web API which allows you to integrate with any
25-
language. <br />
26-
Please choose your programming language &nbsp;
24+
Interscript supports a number of programming languages. From the dropdown box select the one you are
25+
interested in.
26+
</p>
27+
<p>
28+
<label>Programming Language:</label>&nbsp;
2729
<select
2830
onChange={(evt: ChangeEvent<HTMLSelectElement>) => {
2931
setSelected(evt.target.value);

‎src/containers/convertor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ export const Convertor: React.FC<{
1717
<>
1818
<h2>Try it live - {`interscript in ${CONVERTOR_TYPE_IN_BROWSER[demoTypeIndex].label}`}</h2>
1919
<p>
20-
We have 2 demos for converting, which one is using Web API and the other one is Javascript.
20+
Interscript demo can be ran remotely via API, or locally in your browser (JavaScript).
2121
<br />
22-
You can choose one &nbsp;
22+
Select the interface you want to use: &nbsp;
2323
<select
2424
onChange={(evt: ChangeEvent<HTMLSelectElement>) => {
2525
setDemoTypeIndex(evt.target.selectedIndex);

0 commit comments

Comments
 (0)