Skip to content

Commit 41d5b3c

Browse files
medyomedyo
authored
Merge pull request #171 from victor-duarte/fix/tab-navigation
Enables tab navigation
2 parents 02b505d + e11e12a commit 41d5b3c

File tree

20 files changed

+237
-225
lines changed

20 files changed

+237
-225
lines changed

‎src/assets/App.css‎

Lines changed: 105 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,6 @@ a {
122122
align-content: center;
123123
order: 2;
124124
}
125-
.darkModeBtn {
126-
background-color: var(--dark-mode-background-color) !important;
127-
color: var(--dark-mode-text-color) !important;
128-
}
129125
.extraBtn {
130126
background-color: var(--button-background-color);
131127
color: var(--button-text-color);
@@ -137,7 +133,6 @@ a {
137133
text-align: center;
138134
border: 0;
139135
border-radius: 20px;
140-
outline: none;
141136
cursor: pointer;
142137
position: relative;
143138
display: inline-flex;
@@ -154,6 +149,11 @@ a {
154149
font-weight: bold;
155150
}
156151

152+
.darkModeBtn {
153+
background-color: var(--dark-mode-background-color);
154+
color: var(--dark-mode-text-color);
155+
}
156+
157157
.badgeCount {
158158
width: 20px;
159159
height: 20px;
@@ -199,6 +199,7 @@ a {
199199
flex-direction: column;
200200
flex: 0 0 auto;
201201
height: calc(100% - 54px);
202+
overflow: hidden;
202203
padding-bottom: 56px;
203204
scroll-snap-align: start;
204205
width: 100vw;
@@ -242,17 +243,23 @@ a {
242243
}
243244

244245
.blockHeader {
245-
text-align: center;
246-
vertical-align: baseline;
246+
align-items: center;
247247
color: var(--card-header-text-color);
248+
display: flex;
249+
font-size: 16px;
248250
font-weight: 400;
251+
gap: 6px;
249252
height: 30px;
250-
font-size: 16px;
251-
padding-top: 16px;
252-
padding-bottom: 8px;
253+
justify-content: center;
254+
padding-bottom: 12px;
255+
padding-top: 12px;
253256
position: relative;
254257
}
255258

259+
.blockHeader:hover {
260+
background: linear-gradient(90deg, var(--card-actions-background-shadow) 0%, transparent 34%);
261+
}
262+
256263
.blockHeader .maxTitle {
257264
margin: 0;
258265
padding: 0;
@@ -266,29 +273,31 @@ a {
266273
opacity: 1;
267274
}
268275
.blockHeaderLink {
269-
display: inline-block;
270-
margin-left: 8px;
276+
align-items: center;
271277
color: #96a2ae;
272-
vertical-align: middle;
278+
display: flex;
279+
justify-content: center;
273280
opacity: 0;
274281
transition: opacity 0.2s linear;
275282
}
283+
.blockHeaderLink:focus {
284+
opacity: 1;
285+
}
276286
.blockHeaderDragButton {
277-
position: absolute;
278-
top: 0;
279-
left: 0;
280-
background: linear-gradient(to left, transparent, var(--card-actions-background-shadow));
281-
border: none;
282-
height: 100%;
283-
padding: 0 12px;
284-
width: 32%;
285287
align-items: center;
286-
justify-content: start;
287-
z-index: 1;
288+
background: transparent;
289+
border: none;
290+
color: #96a2ae;
288291
cursor: grab;
289292
display: none;
290-
color: #96a2ae;
291293
font-size: 24px;
294+
height: 100%;
295+
justify-content: center;
296+
left: 0;
297+
padding: 0;
298+
position: absolute;
299+
top: 0;
300+
width: 50px;
292301
}
293302

294303
.blockHeader:hover .blockHeaderDragButton {
@@ -300,84 +309,84 @@ a {
300309
}
301310

302311
.blockHeaderIcon {
303-
position: relative;
304-
top: 4px;
305-
margin-right: 6px;
312+
display: flex;
313+
height: 16px;
314+
width: 16px;
306315
}
307316
.blockHeaderIcon img {
308-
width: 18px;
309-
height: 18px;
317+
display: block;
310318
}
311319
.blockHeaderIcon .rss {
312320
color: #ee802f;
313321
}
314-
.blockRow {
315-
scroll-snap-align: start;
316-
padding: 8px 16px;
317-
position: relative;
318-
}
319322

320323
/* Actions */
321324
.blockActions {
325+
align-items: flex-end;
326+
display: flex;
327+
height: 100%;
328+
justify-content: flex-end;
329+
pointer-events: none;
322330
position: absolute;
323-
transition: right 0.2s ease;
331+
right: 0;
324332
top: 0;
325-
right: -100%;
326-
background: linear-gradient(to right, transparent, var(--card-actions-background-shadow));
327-
height: 100%;
328333
width: 26%;
329-
justify-content: flex-end;
330-
align-items: flex-end;
331-
display: flex;
332334
}
335+
333336
.blockActions.active {
334-
right: 0;
337+
background: linear-gradient(to right, transparent, var(--card-actions-background-shadow));
335338
}
336339

337-
.blockRow:hover .blockActions {
338-
right: 0;
339-
}
340-
.blockActionButton.active {
341-
background-color: var(--card-active-action-button-background);
342-
color: var(--card-active-action-button-color);
343-
}
344340
.blockActionButton {
345-
margin: 16px;
346-
width: 28px;
347-
height: 28px;
348-
border: none;
349-
border-radius: 40px;
350-
display: block;
351-
text-align: center;
352341
background-color: var(--card-action-button-background);
342+
border-radius: 40px;
343+
border: none;
344+
bottom: 8px;
345+
box-shadow: 0 0 15px 2px var(--card-actions-background-shadow);
353346
color: var(--card-action-button-color);
354-
line-height: 12px;
355347
cursor: pointer;
348+
display: block;
349+
font-size: 18px;
350+
height: 28px;
351+
line-height: 12px;
352+
opacity: 1;
356353
padding: 0;
354+
pointer-events: all;
355+
position: absolute;
356+
right: 8px;
357+
text-align: center;
358+
transition: opacity 0.3s ease, right 0.3s ease;
359+
width: 28px;
357360
}
358361

359-
.blockRow:hover {
360-
background-color: var(--card-background-focus-color);
362+
.blockActionButton.active {
363+
background-color: var(--card-active-action-button-background);
364+
color: var(--card-active-action-button-color);
361365
}
362366

363-
.bookmarkBtnWrapper {
364-
display: flex;
365-
align-items: center;
366-
padding-left: 4;
367-
padding-right: 4;
368-
}
367+
@media (hover: hover) {
368+
.blockActionButton {
369+
opacity: 0;
370+
right: -16px;
371+
}
369372

370-
.bookmarkBtn {
371-
/* visibility: hidden; */
372-
cursor: pointer;
373+
.blockRow:hover .blockActionButton,
374+
.blockActionButton:focus-visible,
375+
.blockActionButton.active {
376+
opacity: 1;
377+
right: 8px;
378+
}
373379
}
374380

375-
.bookmarkBtn.active {
376-
color: #3572a5;
381+
/* Card (element) */
382+
.blockRow {
383+
padding: 8px 16px;
384+
position: relative;
385+
scroll-snap-align: start;
377386
}
378387

379-
.blockRow:hover .bookmarkBtn {
380-
visibility: visible;
388+
.blockRow:hover {
389+
background-color: var(--card-background-focus-color);
381390
}
382391

383392
/* .blockContent > div > div > div:not(:last-child), .blockRow:not(:last-child) */
@@ -596,12 +605,13 @@ Github languages colors
596605
}
597606

598607
.headerSelect {
599-
align-self: center;
600-
text-align: center;
601-
font-weight: bold;
608+
background-color: transparent;
609+
border: 0;
602610
border-bottom: 2px solid var(--app-name-text-color);
611+
color: inherit;
603612
cursor: pointer;
604-
margin: auto 5px;
613+
font-weight: bold;
614+
padding: 0;
605615
}
606616

607617
.headerSelectIcon {
@@ -706,14 +716,15 @@ Producthunt item
706716
}
707717

708718
.navigationItem {
719+
background-color: transparent;
720+
border: none;
721+
color: var(--primary-text-color);
722+
cursor: pointer;
709723
flex-grow: 1;
724+
font-size: 24px;
710725
height: 100%;
711726
line-height: 56px;
712-
font-size: 24px;
713727
margin: 0;
714-
border: none;
715-
background: none;
716-
color: var(--primary-text-color);
717728
}
718729
.navigationItem img {
719730
width: 18px;
@@ -972,17 +983,19 @@ Producthunt item
972983
}
973984

974985
.floatingFilter {
975-
background: rgb(44, 128, 232);
986+
align-items: center;
987+
background-color: rgb(44, 128, 232);
988+
border-radius: 48px;
976989
border: transparent;
977-
width: 48px;
990+
bottom: 68px;
991+
box-shadow: 0 2px 8px var(--card-actions-background-shadow);
992+
display: flex;
978993
height: 48px;
979-
border-radius: 48px;
994+
justify-content: center;
980995
position: fixed;
981-
bottom: 78px;
996+
right: 16px;
997+
width: 48px;
982998
z-index: 2;
983-
right: 32px;
984-
display: none;
985-
box-shadow: 0 2px 8px var(--card-actions-background-shadow);
986999
}
9871000
.floatingFilterBottomSheet .title {
9881001
font-size: 22px;
@@ -993,13 +1006,13 @@ Producthunt item
9931006
color: white;
9941007
font-size: 24px;
9951008
}
996-
@media only screen and (max-width: 600px) {
997-
.floatingFilter {
998-
display: block;
999-
}
1000-
}
1009+
10011010
/* Small devices (portrait tablets and large phones, 600px and up) */
10021011
@media only screen and (min-width: 600px) {
1012+
.floatingFilter {
1013+
display: none;
1014+
}
1015+
10031016
.block {
10041017
border-radius: 10px;
10051018
height: 100%;

‎src/assets/index.css‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
@import "variables.css";
2-
3-
:focus { outline: none; }
1+
@import 'variables.css';
42

53
body {
64
margin: 0;
7-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
8-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
9-
sans-serif;
5+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
6+
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
107
-webkit-font-smoothing: antialiased;
118
-moz-osx-font-smoothing: grayscale;
12-
139
}
1410

1511
code {
16-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
17-
monospace;
12+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
1813
}

‎src/components/DropDownMenu.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { Item, Menu, animation, useContextMenu } from 'react-contexify'
12
import { RiArrowDownSFill } from 'react-icons/ri'
2-
import { Menu, Item, animation, useContextMenu } from 'react-contexify'
33

44
const DropDownMenu = ({ data, tagId, label, setSelectedDropDownItem }) => {
55
const { show: showMenu } = useContextMenu()
@@ -17,10 +17,10 @@ const DropDownMenu = ({ data, tagId, label, setSelectedDropDownItem }) => {
1717

1818
return (
1919
<>
20-
<span onClick={displayMenu} className="headerSelect" data-target-id={tagId}>
20+
<button onClick={displayMenu} className="headerSelect" data-target-id={tagId}>
2121
{label}
2222
<RiArrowDownSFill className="headerSelectIcon" />
23-
</span>
23+
</button>
2424
<Menu id={tagId} animation={animation.fade}>
2525
{data &&
2626
data.map((tag) => {

‎src/components/Elements/BottomNavigation/BottomNavigation.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const BottomNavigation = ({
3838
})}
3939
{
4040
<button
41+
aria-label="Open settings"
4142
className={'navigationItem '}
4243
onClick={() => setShowSettings((prev: boolean) => !prev)}>
4344
{<AiOutlineMenu />}

0 commit comments

Comments
 (0)