Skip to content

Commit 0750b21

Browse files
medyomedyo
authored
Merge pull request #110 from medyo/develop
Version 1.15.2
2 parents 843010b + f8705ed commit 0750b21

22 files changed

Lines changed: 123 additions & 80 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@ jobs:
1818
command: |
1919
cd ~/hackertab.dev
2020
git pull origin master
21-
yarn install --production
21+
yarn
2222
yarn web-build

‎public/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "Hackertab.dev - developer news",
33
"description": "All developer news in one tab",
4-
"version": "1.15.1",
4+
"version": "1.15.2",
55
"manifest_version": 3,
66
"chrome_url_overrides": {
77
"newtab": "index.html"

‎public/startup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Blocking script to avoid the initial background flickering (switching from light to dark)
22
// https://stackoverflow.com/a/63033934/3495717
33
try {
4-
var theme = JSON.parse(localStorage.hackerTabPrefs).theme || 'dark'
4+
var theme = JSON.parse(localStorage.preferences_storage).theme || 'dark'
55
document.documentElement.classList.add(theme)
66
} catch (e) {
77
console.log(e)

‎src/App.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { useState, useEffect } from 'react'
1+
import { useState, useEffect } from 'react'
22
import 'src/assets/App.css'
33
import { Footer, Header } from 'src/components/Layout'
44
import { BookmarksSidebar } from 'src/features/bookmarks'
5-
import { MarketingBanner } from 'src/components/Elements'
6-
import ScrollCardsNavigator from './components/ScrollCardsNavigator'
5+
import { MarketingBanner } from 'src/features/MarketingBanner'
6+
import { ScrollCardsNavigator } from './components/Layout'
77
import { AppContentLayout } from './components/Layout'
88
import 'react-contexify/dist/ReactContexify.css'
99
import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics'
@@ -22,20 +22,22 @@ function App() {
2222
}, [])
2323

2424
return (
25-
<div className="App">
26-
<Header
27-
setShowSideBar={setShowSideBar}
28-
showSideBar={showSideBar}
29-
showSettings={showSettings}
30-
setShowSettings={setShowSettings}
31-
/>
32-
<ScrollCardsNavigator />
25+
<>
3326
<MarketingBanner {...marketingBannerConfig} />
34-
<AppContentLayout setShowSettings={setShowSettings} />
35-
<BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
27+
<div className="App">
28+
<Header
29+
setShowSideBar={setShowSideBar}
30+
showSideBar={showSideBar}
31+
showSettings={showSettings}
32+
setShowSettings={setShowSettings}
33+
/>
34+
<ScrollCardsNavigator />
35+
<AppContentLayout setShowSettings={setShowSettings} />
36+
<BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
3637

37-
<Footer />
38-
</div>
38+
<Footer />
39+
</div>
40+
</>
3941
)
4042
}
4143

‎src/assets/App.css‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
html {
44
background: var(--background-color);
5+
scroll-behavior: smooth;
56
}
67
body {
78
color: var(--primary-text-color);
@@ -94,9 +95,19 @@ a {
9495
gap: 12px;
9596
padding: 1%;
9697
position: relative;
97-
overflow:hidden;
98+
overflow-y:hidden;
9899
padding-bottom: 12px;
100+
scroll-snap-type: x mandatory;
99101
}
102+
103+
.HorizontalScroll {
104+
-ms-overflow-style: none;
105+
scrollbar-width: none;
106+
}
107+
.HorizontalScroll::-webkit-scrollbar {
108+
display: none;
109+
}
110+
100111
.extras {
101112

102113
flex-direction: row;
@@ -189,13 +200,15 @@ a {
189200
height: 78vh;
190201
width: 10vw;
191202
flex: 0 0 auto;
203+
scroll-snap-align: start;
192204
}
193205
.blockContent {
194206
flex-grow: 1;
195207
overflow-y: auto;
196208
display: flex;
197209
flex-direction: column;
198210
overflow-x: hidden;
211+
scroll-snap-type: y mandatory;
199212
height: calc(80vh - 1% - 46px);
200213
}
201214

@@ -263,6 +276,7 @@ a {
263276
}
264277

265278
.blockRow {
279+
scroll-snap-align: start;
266280
padding: 8px 16px;
267281
position: relative;
268282
}

‎src/components/Elements/MarketingBanner/MarketingBanner.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/Elements/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export * from "./ColoredLanguagesBadges"
22
export * from "./Card"
3-
export * from "./MarketingBanner"
43
export * from "./SearchBar"
54
export * from "./UserTags"
65
export * from "./BottomNavigation"

‎src/components/Layout/AppContentLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const AppContentLayout = ({
1515

1616
return (
1717
<>
18-
<main className="AppContent scrollable">
18+
<main className="AppContent HorizontalScroll">
1919
{isDesktop ? <DesktopCards cards={cards} /> : <MobileCards selectedCard={selectedCard} />}
2020
</main>
2121

src/components/ScrollCardsNavigator.js renamed to src/components/Layout/ScrollCardsNavigator.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
1-
import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
1+
import { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
22
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
33
import { maxCardsPerRow } from 'src/config'
44
import { useUserPreferences } from 'src/stores/preferences'
55
import { trackPageScroll } from 'src/lib/analytics'
66

7-
function ScrollCardsNavigator() {
7+
export const ScrollCardsNavigator = () => {
88
const { cards } = useUserPreferences()
99
const [leftButtonVisible, setLeftButtonVisible] = useState(true)
1010
const [rightButtonVisible, setRightButtonVisible] = useState(true)
11-
const scrollBarContainer = useRef(null)
11+
const scrollBarContainer = useRef<HTMLElement | null>(null)
1212

13-
const handleScroll = (e) => {
14-
const { scrollLeft, scrollWidth, offsetWidth } = e.target
15-
setLeftButtonVisible(scrollLeft > 0)
16-
const scrollRight = scrollWidth - offsetWidth - Math.abs(scrollLeft)
17-
setRightButtonVisible(scrollRight > 0)
13+
const handleScroll = (e: Event) => {
14+
if (cards.length <= maxCardsPerRow) {
15+
setLeftButtonVisible(false)
16+
setRightButtonVisible(false)
17+
} else {
18+
const { scrollLeft, scrollWidth, offsetWidth } = e.target as HTMLElement
19+
setLeftButtonVisible(scrollLeft > 100)
20+
const scrollRight = scrollWidth - offsetWidth - Math.abs(scrollLeft)
21+
setRightButtonVisible(scrollRight > 100)
22+
}
1823
}
1924

20-
const handleKeyboardKeys = useCallback((e) => {
21-
if (e.keyCode === 37) {
25+
const handleKeyboardKeys = useCallback((e: KeyboardEvent) => {
26+
if (e.key === 'ArrowLeft') {
2227
scrollTo('left')
23-
} else if (e.keyCode === 39) {
28+
} else if (e.key === 'ArrowRight') {
2429
scrollTo('right')
2530
}
2631
}, [])
@@ -30,32 +35,29 @@ function ScrollCardsNavigator() {
3035
}, [])
3136

3237
useEffect(() => {
33-
scrollBarContainer.current.addEventListener('scroll', handleScroll, true)
38+
scrollBarContainer.current?.addEventListener('scroll', handleScroll, true)
3439
window.addEventListener('keydown', handleKeyboardKeys)
3540
return () => {
3641
window.removeEventListener('keydown', handleKeyboardKeys)
37-
scrollBarContainer.current.removeEventListener('scroll', handleScroll)
42+
scrollBarContainer.current?.removeEventListener('scroll', handleScroll)
3843
}
44+
// eslint-disable-next-line react-hooks/exhaustive-deps
3945
}, [handleKeyboardKeys])
4046

4147
useEffect(() => {
4248
setLeftButtonVisible(false)
4349
setRightButtonVisible(cards.length > maxCardsPerRow)
4450
}, [cards])
4551

46-
const scrollTo = (direction) => {
52+
const scrollTo = (direction: 'left' | 'right') => {
4753
if (!scrollBarContainer.current) {
4854
return
4955
}
5056
trackPageScroll(direction)
5157
const { scrollLeft } = scrollBarContainer.current
52-
const { offsetWidth } = scrollBarContainer.current.children[0]
53-
let extraPadding = 32 // Should be calculated dynamically
58+
const { offsetWidth } = scrollBarContainer.current?.firstChild as HTMLElement
5459

55-
const position =
56-
direction === 'left'
57-
? scrollLeft - offsetWidth - extraPadding
58-
: scrollLeft + offsetWidth + extraPadding
60+
const position = direction === 'left' ? scrollLeft - offsetWidth : scrollLeft + offsetWidth
5961

6062
scrollBarContainer.current.scrollTo({
6163
left: position,
@@ -78,5 +80,3 @@ function ScrollCardsNavigator() {
7880
</>
7981
)
8082
}
81-
82-
export default ScrollCardsNavigator

‎src/components/Layout/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from "./Header"
22
export * from "./Footer"
3-
export * from "./AppContentLayout"
3+
export * from "./AppContentLayout"
4+
export * from "./ScrollCardsNavigator"

0 commit comments

Comments
 (0)