Skip to content

Commit d344f20

Browse files
ethansharethanshar
authored
Docs/mobie responsive (#1164)
* Change style for header and navbar * Fix docs introSection to be responsive on mobile * Add responsive mobile support to RTL&Accessibility section * Fix responsive for CodeSection * Fix Libraries Section responsivess * Fix Info section responsiveness * minor responsive fixes * more fixes
1 parent 70d9405 commit d344f20

14 files changed

+173
-69
lines changed

‎uilib-docs/src/components/header.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
padding: 0px 11%;
1212
background: $white;
1313
z-index: 100;
14-
// box-shadow: 1px 1px 5px rgba($dark10, 0.2);
14+
box-shadow: 1px 1px 5px rgba($dark10, 0.2);
1515

16-
background-color: rgba(white, .15);
17-
backdrop-filter: blur(50px);
16+
// background-color: rgba(white, .15);
17+
// backdrop-filter: blur(50px);
1818

1919
.logo {
2020
height: 40px;

‎uilib-docs/src/components/navbar/index.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,27 @@
66
height: calc(100% - #{$headerHeight});
77
overflow-y: auto;
88
overflow-x: hidden;
9-
background: $primary;
109
padding: 20px;
10+
padding-top: 0;
1111
border-radius: 2px;
12-
box-shadow: 2px 0px 20px 2px rgba($primary, 0.2);
1312
margin-top: 20px;
13+
border-right: 2px solid $dark80;
1414

1515
.search {
1616
position: sticky;
17+
background-color: $white;
18+
border-bottom: 2px solid $secondary;
1719
top: 0;
1820
left: 0;
1921
display: flex;
2022
align-items: center;
2123
padding: 10px;
22-
background-color: $secondary;
2324
box-sizing: border-box;
2425
margin-bottom: 10px;
2526
width: 100%;
26-
transition: width 0.3s;
27-
border-radius: 2px;
2827
z-index: 10;
2928
overflow: hidden;
29+
transition: width 0.3s;
3030

3131
&:focus-within {
3232
width: 100%;
@@ -41,7 +41,7 @@
4141
border: 0;
4242
padding: 5px;
4343
background: transparent;
44-
background: $dark60;
44+
background: $dark80;
4545
border-radius: 20px;
4646
display: flex;
4747
align-items: center;
@@ -100,7 +100,7 @@
100100
}
101101

102102
.entry {
103-
color: $white;
103+
color: $dark10;
104104
font-size: 0.9em;
105105
font-weight: 500;
106106
width: 100%;
@@ -114,13 +114,13 @@
114114
}
115115

116116
.nested {
117-
border-left: 1px solid $white;
117+
border-left: 1px solid $dark60;
118118
margin-top: 10px;
119119
padding-left: 10px;
120120
}
121121

122122
&.separator {
123-
border-bottom: 1px solid $white;
123+
border-bottom: 2px solid $dark80;
124124
width: 100%;
125125
margin: 8px 0;
126126
padding: 0;

‎uilib-docs/src/pages/sections/CodeSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default () => {
1919

2020
return (
2121
<div className="code-section">
22-
<h2>Effortless App Building Using Our Toolset</h2>
22+
<h2 className="headline">Effortless App Building Using Our Toolset</h2>
2323
<div className="code-example">
2424
<TabBar onChangeIndex={setSelectedTab} selectedIndex={selectedTab} />
2525
<Tab {...tabs[selectedTab]} />

‎uilib-docs/src/pages/sections/CodeSection.scss‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,19 @@
22

33
.code-section {
44
padding-bottom: 5%;
5+
6+
.headline {
7+
text-align: center;
8+
}
9+
510
.code-example {
611
display: flex;
712
flex-direction: column;
8-
width: 35vw;
13+
width: 80vw;
14+
15+
@include desktop {
16+
width: 35vw;
17+
}
918

1019
.view-docs-button {
1120
margin-top: 40px;
@@ -15,8 +24,13 @@
1524

1625
.tabs {
1726
display: flex;
18-
height: 46px;
1927
border: 1px solid;
28+
height: 32px;
29+
30+
@include desktop {
31+
height: 46px;
32+
}
33+
2034
.tab {
2135
flex: 1;
2236
display: flex;
@@ -41,7 +55,7 @@
4155
.code {
4256
background-color: $black;
4357
padding: 20px;
44-
min-width: 600px;
58+
width: 100%;
4559
}
4660
}
4761
}

‎uilib-docs/src/pages/sections/ComponentsSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default () => {
77
return (
88
<div className="components">
99
<div className="components-inner">
10-
<h2>Build Stunning Apps Using Over 60  Beautiful Components </h2>
10+
<h2 className="headline">Build Stunning Apps Using Over 60  Beautiful Components </h2>
1111
<p>
1212
Basic components like Button, Avatar and Card and more sophisticated ones like Hints, ColorPicker and Drawer.
1313
</p>

‎uilib-docs/src/pages/sections/ComponentsSection.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,23 @@
1212
display: flex;
1313
flex-direction: column;
1414
align-items: center;
15+
width: 100%;
1516

1617
p {
17-
width: 40%;
18-
min-width: 400px;
18+
@include desktop {
19+
width: 40%;
20+
min-width: 200px;
21+
}
1922
}
2023
}
2124

2225
img {
2326
width: 100vw;
2427
min-width: 400px;
28+
margin-top: 20px;
29+
30+
@include desktop {
31+
margin-top: 0;
32+
}
2533
}
2634
}

‎uilib-docs/src/pages/sections/InfoSection.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,16 @@
66
justify-content: space-between;
77
padding: 40px 0;
88

9+
& > div:first-child {
10+
flex: 1;
11+
}
12+
913
.column {
1014
margin-right: 20px;
11-
min-width: 200px;
15+
16+
@include desktop {
17+
min-width: 200px;
18+
}
1219

1320
.title {
1421
margin: 0;

‎uilib-docs/src/pages/sections/IntroSection.jsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,23 @@ export default () => {
88
return (
99
<div className="intro">
1010
<img src={introCover} className="intro-cover" />
11-
<div className="intro-inner">
12-
<div className="intro-content">
13-
<p>
14-
<span className="lib-name">RNUI</span> is a UI Toolset & Components Library for React Native
15-
</p>
16-
<div className="git-stars">
17-
<img src={goldStar} />
18-
<span className="star-count">2.7k</span>
19-
</div>
11+
<div className="intro-content">
12+
<p>
13+
<span className="lib-name">RNUI</span> is a UI Toolset & Components Library for React Native
14+
</p>
15+
<div className="git-stars">
16+
<img src={goldStar} />
17+
<span className="star-count">2.8k</span>
18+
</div>
2019

21-
<div className="buttons">
22-
<Link to="/getting-started/setup">
23-
<button className="dark">View Docs</button>
24-
</Link>
20+
<div className="buttons">
21+
<Link to="/getting-started/setup">
22+
<button className="dark">View Docs</button>
23+
</Link>
2524

26-
<a href="https://snack.expo.io/@ethanshar/rnuilib_snack" target="_blank" rel="noopener noreferrer">
27-
<button>Expo-Snack Demo</button>
28-
</a>
29-
</div>
25+
<a href="https://snack.expo.io/@ethanshar/rnuilib_snack" target="_blank" rel="noopener noreferrer">
26+
<button>Expo-Snack Demo</button>
27+
</a>
3028
</div>
3129
</div>
3230
</div>

‎uilib-docs/src/pages/sections/IntroSection.scss‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,42 @@
11
@import 'src/styles/constants';
22
.intro {
33
position: relative;
4-
height: 100vh;
4+
height: 75vh;
55
width: 100%;
66
display: flex;
77
justify-content: center;
88

9+
@include desktop {
10+
height: 100vh;
11+
}
12+
913
.intro-cover {
1014
position: absolute;
11-
width: 100vw;
12-
}
15+
width: 180vw;
16+
right: -10vw;
17+
opacity: 0.3;
1318

14-
.intro-inner {
15-
display: flex;
19+
@include desktop {
20+
width: 100vw;
21+
opacity: 1;
22+
}
1623
}
1724

1825
.intro-content {
1926
position: absolute;
20-
top: 20vw;
21-
left: 7vw;
27+
z-index: 1;
2228
display: flex;
2329
flex-direction: column;
24-
z-index: 1;
25-
width: 40%;
26-
justify-content: center;
2730
align-items: flex-start;
31+
top: 15vh;
32+
text-align: center;
33+
34+
@include desktop() {
35+
top: 15vw;
36+
left: 7vw;
37+
width: 40%;
38+
text-align: start;
39+
}
2840

2941
> p {
3042
font-size: 3em;
@@ -41,6 +53,11 @@
4153
align-items: center;
4254
border: 1px solid;
4355
border-radius: 2px;
56+
align-self: center;
57+
58+
@include desktop {
59+
align-self: flex-start;
60+
}
4461

4562
img {
4663
padding: 0 4px;
@@ -58,9 +75,22 @@
5875

5976
.buttons {
6077
margin-top: 40px;
78+
align-self: center;
79+
display: flex;
80+
flex-direction: column;
81+
82+
@include desktop() {
83+
align-self: flex-start;
84+
flex-direction: row;
85+
}
6186

6287
> :first-child {
63-
margin-right: 10px;
88+
margin-bottom: 10px;
89+
90+
@include desktop() {
91+
margin-right: 10px;
92+
margin-bottom: 0;
93+
}
6494
}
6595
}
6696
}

‎uilib-docs/src/pages/sections/LibrariesSection.scss‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,47 @@
55
padding: 0 20%;
66
height: 250px;
77
display: flex;
8-
justify-content: space-between;
9-
align-items: center;
8+
flex-direction: column;
109
background-color: $primary;
1110
color: $white;
1211

12+
@include desktop {
13+
flex-direction: row;
14+
justify-content: space-between;
15+
align-items: center;
16+
}
17+
1318
.headline {
14-
width: 20%;
15-
min-width: 400px;
16-
align-self: center;
17-
margin-right: 40px;
1819
font-weight: bold;
20+
text-align: center;
21+
margin-bottom: 40px;
22+
23+
@include desktop {
24+
text-align: start;
25+
align-self: center;
26+
width: 20%;
27+
min-width: 400px;
28+
margin-right: 40px;
29+
margin-bottom: 0;
30+
}
1931
}
2032

2133
.libraries {
2234
display: flex;
2335
justify-content: space-between;
2436
align-items: center;
25-
width: 60%;
26-
// border: 1px solid;
37+
38+
@include desktop {
39+
width: 60%;
40+
}
2741

2842
.library {
2943
text-align: center;
3044
color: $white;
31-
margin-left: 40px;
3245

3346
img {
34-
max-height: 75px;
35-
height: 4vw;
36-
min-height: 45px;
47+
max-height: 60px;
48+
height: 7vw;
3749
transition: 0.3s all;
3850
}
3951

0 commit comments

Comments
 (0)