Skip to content

Commit d3c9a30

Browse files
zoltantothcomzoltantothcom
authored
Merge pull request zoltantothcom#22 from zoltantothcom/dev
Add GitHub corner instead of menu link
2 parents 1c2bb0f + aa8b32c commit d3c9a30

File tree

8 files changed

+95
-115
lines changed

8 files changed

+95
-115
lines changed

‎README.md‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ JavaScript Design Patterns - a game to get familiar with the design patterns, te
88

99
<img src="https://raw.githubusercontent.com/zoltantothcom/JavaScript-Design-Patterns/master/static/screenshot.png?sanitize=true&raw=true" alt="JavaScript Design Patterns - game results screenshot" />
1010

11+
- [About](#about)
12+
- [How To Run Locally](#how-to-run-locally)
13+
- [Running the Tests](#running-the-tests)
14+
- [ToDo](#todo)
15+
- [Credits](#credits)
16+
- [License](#license)
17+
1118
## About
1219

1320
This is a small game to get you familiar with all the 23 Gang of Four design patterns implemented in JavaScript.
@@ -44,7 +51,7 @@ This is a small game to get you familiar with all the 23 Gang of Four design pat
4451
- Template
4552
- Visitor
4653

47-
## Run it locally
54+
## How To Run Locally
4855

4956
1. Clone this repo
5057

@@ -70,9 +77,9 @@ yarn
7077
yarn start
7178
```
7279

73-
5. Voila! The project is running on `http://localhost:8080`
80+
5. Voila! The project is running on [http://localhost:8080](http://localhost:8080)
7481

75-
## Tests
82+
## Running the Tests
7683

7784
- To run the tests
7885

@@ -86,7 +93,7 @@ yarn test
8693
yarn test:coverage
8794
```
8895

89-
## TODO
96+
## ToDo
9097

9198
- Write more unit tests
9299
- Add E2E tests (Cypress)

‎__tests__/Layout.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ describe('Layout', () => {
6464
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
6565
});
6666

67-
it('renders 3 links', () => {
68-
expect(tree.find('a')).toHaveLength(3);
67+
it('renders 2 links', () => {
68+
expect(tree.find('a')).toHaveLength(2);
6969
});
7070

7171
it('renders 2 toggle buttons', () => {
@@ -102,8 +102,8 @@ describe('Layout', () => {
102102
expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
103103
});
104104

105-
it('renders 3 links', () => {
106-
expect(tree.find('a')).toHaveLength(3);
105+
it('renders 2 links', () => {
106+
expect(tree.find('a')).toHaveLength(2);
107107
});
108108

109109
it('renders 2 toggle buttons', () => {

‎__tests__/components/__snapshots__/Header.test.js.snap‎

Lines changed: 58 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<Header /> component renders with DARK theme 1`] = `
4-
.c5 {
4+
.c4 {
55
background-color: #222222;
66
border: 1px solid #484848;
77
border-radius: 50%;
@@ -13,41 +13,41 @@ exports[`<Header /> component renders with DARK theme 1`] = `
1313
width: 2.5rem;
1414
}
1515
16-
.c5:hover {
16+
.c4:hover {
1717
background-color: #484848;
1818
}
1919
20-
.c5:hover svg,
21-
.c5:hover g {
20+
.c4:hover svg,
21+
.c4:hover g {
2222
fill: #ffffff;
2323
}
2424
25-
.c5.active {
25+
.c4.active {
2626
background-color: #e22a23;
2727
border-color: #e22a23;
2828
}
2929
30-
.c5.active svg,
31-
.c5.active g {
30+
.c4.active svg,
31+
.c4.active g {
3232
fill: #ffffff;
3333
}
3434
35-
.c5.light {
35+
.c4.light {
3636
background-color: #ffffff;
3737
border-color: #c4c4c4;
3838
}
3939
40-
.c5.light svg,
41-
.c5.light g {
40+
.c4.light svg,
41+
.c4.light g {
4242
fill: #707070;
4343
}
4444
45-
.c5.light:hover svg,
46-
.c5.light:hover g {
45+
.c4.light:hover svg,
46+
.c4.light:hover g {
4747
fill: #707070;
4848
}
4949
50-
.c6 {
50+
.c5 {
5151
font-family: 'Karla',sans-serif;
5252
padding: 1.5rem;
5353
border-radius: 4px;
@@ -70,10 +70,10 @@ exports[`<Header /> component renders with DARK theme 1`] = `
7070
-webkit-flex-wrap: wrap;
7171
-ms-flex-wrap: wrap;
7272
flex-wrap: wrap;
73-
-webkit-box-pack: justify;
74-
-webkit-justify-content: space-between;
75-
-ms-flex-pack: justify;
76-
justify-content: space-between;
73+
-webkit-box-pack: start;
74+
-webkit-justify-content: start;
75+
-ms-flex-pack: start;
76+
justify-content: start;
7777
margin-top: 1rem;
7878
}
7979
@@ -84,7 +84,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
8484
display: inline-flex;
8585
}
8686
87-
.c4 {
87+
.c3 {
8888
display: -webkit-inline-box;
8989
display: -webkit-inline-flex;
9090
display: -ms-inline-flexbox;
@@ -110,23 +110,13 @@ exports[`<Header /> component renders with DARK theme 1`] = `
110110
color: #f5f5f5;
111111
}
112112
113-
.c3 {
114-
border-bottom: 1px solid transparent;
115-
color: #888888;
116-
display: -webkit-inline-box;
117-
display: -webkit-inline-flex;
118-
display: -ms-inline-flexbox;
119-
display: inline-flex;
120-
font-size: 0.875rem;
121-
margin: 0.5rem 2rem 0 0;
122-
padding-bottom: 1px;
123-
-webkit-text-decoration: none;
124-
text-decoration: none;
125-
}
126-
127-
.c3:hover {
128-
border-bottom: 1px solid #f5f5f5;
129-
color: #f5f5f5;
113+
@media (min-width:769px) {
114+
.c0 {
115+
-webkit-box-pack: justify;
116+
-webkit-justify-content: space-between;
117+
-ms-flex-pack: justify;
118+
justify-content: space-between;
119+
}
130120
}
131121
132122
<div>
@@ -150,19 +140,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
150140
>
151141
About
152142
</a>
153-
<a
154-
className="c3"
155-
href="//github.com/zoltantothcom/javascript-patterns"
156-
target="_blank"
157-
>
158-
GitHub
159-
</a>
160143
</div>
161144
<div
162-
className="c4"
145+
className="c3"
163146
>
164147
<button
165-
className="c5"
148+
className="c4"
166149
onClick={[Function]}
167150
>
168151
<svg
@@ -189,7 +172,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
189172
</svg>
190173
</button>
191174
<button
192-
className="c5"
175+
className="c4"
193176
onClick={[Function]}
194177
>
195178
<svg
@@ -211,7 +194,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
211194
</button>
212195
</div>
213196
<h1
214-
className="c6"
197+
className="c5"
215198
>
216199
JavaScript Design Patterns
217200
</h1>
@@ -220,7 +203,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
220203
`;
221204

222205
exports[`<Header /> component renders with LIGHT theme 1`] = `
223-
.c5 {
206+
.c4 {
224207
background-color: #f4f4f4;
225208
border: 1px solid #e8e8e8;
226209
border-radius: 50%;
@@ -232,41 +215,41 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
232215
width: 2.5rem;
233216
}
234217
235-
.c5:hover {
218+
.c4:hover {
236219
background-color: #e8e8e8;
237220
}
238221
239-
.c5:hover svg,
240-
.c5:hover g {
222+
.c4:hover svg,
223+
.c4:hover g {
241224
fill: #ffffff;
242225
}
243226
244-
.c5.active {
227+
.c4.active {
245228
background-color: #e22a23;
246229
border-color: #e22a23;
247230
}
248231
249-
.c5.active svg,
250-
.c5.active g {
232+
.c4.active svg,
233+
.c4.active g {
251234
fill: #ffffff;
252235
}
253236
254-
.c5.light {
237+
.c4.light {
255238
background-color: #ffffff;
256239
border-color: #aaaaaa;
257240
}
258241
259-
.c5.light svg,
260-
.c5.light g {
242+
.c4.light svg,
243+
.c4.light g {
261244
fill: #cccccc;
262245
}
263246
264-
.c5.light:hover svg,
265-
.c5.light:hover g {
247+
.c4.light:hover svg,
248+
.c4.light:hover g {
266249
fill: #cccccc;
267250
}
268251
269-
.c6 {
252+
.c5 {
270253
font-family: 'Karla',sans-serif;
271254
padding: 1.5rem;
272255
border-radius: 4px;
@@ -289,10 +272,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
289272
-webkit-flex-wrap: wrap;
290273
-ms-flex-wrap: wrap;
291274
flex-wrap: wrap;
292-
-webkit-box-pack: justify;
293-
-webkit-justify-content: space-between;
294-
-ms-flex-pack: justify;
295-
justify-content: space-between;
275+
-webkit-box-pack: start;
276+
-webkit-justify-content: start;
277+
-ms-flex-pack: start;
278+
justify-content: start;
296279
margin-top: 1rem;
297280
}
298281
@@ -303,7 +286,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
303286
display: inline-flex;
304287
}
305288
306-
.c4 {
289+
.c3 {
307290
display: -webkit-inline-box;
308291
display: -webkit-inline-flex;
309292
display: -ms-inline-flexbox;
@@ -329,23 +312,13 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
329312
color: #707070;
330313
}
331314
332-
.c3 {
333-
border-bottom: 1px solid transparent;
334-
color: #e22a23;
335-
display: -webkit-inline-box;
336-
display: -webkit-inline-flex;
337-
display: -ms-inline-flexbox;
338-
display: inline-flex;
339-
font-size: 0.875rem;
340-
margin: 0.5rem 2rem 0 0;
341-
padding-bottom: 1px;
342-
-webkit-text-decoration: none;
343-
text-decoration: none;
344-
}
345-
346-
.c3:hover {
347-
border-bottom: 1px solid #707070;
348-
color: #707070;
315+
@media (min-width:769px) {
316+
.c0 {
317+
-webkit-box-pack: justify;
318+
-webkit-justify-content: space-between;
319+
-ms-flex-pack: justify;
320+
justify-content: space-between;
321+
}
349322
}
350323
351324
<div>
@@ -369,19 +342,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
369342
>
370343
About
371344
</a>
372-
<a
373-
className="c3"
374-
href="//github.com/zoltantothcom/javascript-patterns"
375-
target="_blank"
376-
>
377-
GitHub
378-
</a>
379345
</div>
380346
<div
381-
className="c4"
347+
className="c3"
382348
>
383349
<button
384-
className="c5"
350+
className="c4"
385351
onClick={[Function]}
386352
>
387353
<svg
@@ -408,7 +374,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
408374
</svg>
409375
</button>
410376
<button
411-
className="c5"
377+
className="c4"
412378
onClick={[Function]}
413379
>
414380
<svg
@@ -430,7 +396,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
430396
</button>
431397
</div>
432398
<h1
433-
className="c6"
399+
className="c5"
434400
>
435401
JavaScript Design Patterns
436402
</h1>

0 commit comments

Comments
 (0)