show footer on the bottom of the page on mobile (#1121)

Athou · Jan 18, 2024 · 0946c02 · 0946c02
1 parent a8be8f2
commit 0946c02
Show file tree

Hide file tree

Showing 38 changed files with 195 additions and 32 deletions.
diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts
@@ -93,10 +93,14 @@ export const Constants = {
             const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
             return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
         },
-        isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
+        isBottomVisible: (div: HTMLElement) => {
+            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
+            return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
+        },
     },
     dom: {
         headerId: "header",
+        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
         entryContextMenuId: (entry: Entry) => entry.id,
     },

diff --git a/commafeed-client/src/app/types.ts b/commafeed-client/src/app/types.ts
@@ -208,6 +208,7 @@ export interface Settings {
     alwaysScrollToEntry: boolean
     markAllAsReadConfirmation: boolean
     customContextMenu: boolean
+    mobileFooter: boolean
     sharingSettings: SharingSettings
 }
 

diff --git a/commafeed-client/src/app/user/slice.ts b/commafeed-client/src/app/user/slice.ts
@@ -7,6 +7,7 @@ import {
     changeCustomContextMenu,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
     changeReadingMode,
     changeReadingOrder,
     changeScrollMarks,
@@ -76,6 +77,10 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.customContextMenu = action.meta.arg
         })
+        builder.addCase(changeMobileFooter.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.mobileFooter = action.meta.arg
+        })
         builder.addCase(changeSharingSetting.pending, (state, action) => {
             if (!state.settings) return
             state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
@@ -89,6 +94,7 @@ export const userSlice = createSlice({
                 changeAlwaysScrollToEntry.fulfilled,
                 changeMarkAllAsReadConfirmation.fulfilled,
                 changeCustomContextMenu.fulfilled,
+                changeMobileFooter.fulfilled,
                 changeSharingSetting.fulfilled
             ),
             () => {

diff --git a/commafeed-client/src/app/user/thunks.ts b/commafeed-client/src/app/user/thunks.ts
@@ -56,6 +56,11 @@ export const changeCustomContextMenu = createAppAsyncThunk("settings/customConte
     if (!settings) return
     client.user.saveSettings({ ...settings, customContextMenu })
 })
+export const changeMobileFooter = createAppAsyncThunk("settings/mobileFooter", (mobileFooter: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, mobileFooter })
+})
 export const changeSharingSetting = createAppAsyncThunk(
     "settings/sharingSetting",
     (

diff --git a/commafeed-client/src/components/settings/DisplaySettings.tsx b/commafeed-client/src/components/settings/DisplaySettings.tsx
@@ -8,6 +8,7 @@ import {
     changeCustomContextMenu,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
     changeScrollMarks,
     changeScrollSpeed,
     changeSharingSetting,
@@ -23,6 +24,7 @@ export function DisplaySettings() {
     const alwaysScrollToEntry = useAppSelector(state => state.user.settings?.alwaysScrollToEntry)
     const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
     const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
+    const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const dispatch = useAppDispatch()
 
@@ -74,6 +76,12 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
+                checked={mobileFooter}
+                onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
+            />
+
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
 
             <SimpleGrid cols={2}>

diff --git a/commafeed-client/src/locales/ar/messages.po b/commafeed-client/src/locales/ar/messages.po
@@ -574,6 +574,10 @@ msgstr "لم يتم العثور على شيء"
 msgid "Oldest first"
 msgstr "الأقدم أولا"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "اوووه!"

diff --git a/commafeed-client/src/locales/ca/messages.po b/commafeed-client/src/locales/ca/messages.po
@@ -574,6 +574,10 @@ msgstr "No s'ha trobat res"
 msgid "Oldest first"
 msgstr "el més vell primer"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Vaja!"

diff --git a/commafeed-client/src/locales/cs/messages.po b/commafeed-client/src/locales/cs/messages.po
@@ -574,6 +574,10 @@ msgstr "Nic nebylo nalezeno"
 msgid "Oldest first"
 msgstr "Nejdříve nejstarší"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Jejda!"

diff --git a/commafeed-client/src/locales/cy/messages.po b/commafeed-client/src/locales/cy/messages.po
@@ -574,6 +574,10 @@ msgstr "Dim wedi'i ddarganfod"
 msgid "Oldest first"
 msgstr "Hynaf yn gyntaf"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Wps!"

diff --git a/commafeed-client/src/locales/da/messages.po b/commafeed-client/src/locales/da/messages.po
@@ -574,6 +574,10 @@ msgstr "Intet fundet"
 msgid "Oldest first"
 msgstr "Ældst først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hovsa!"

diff --git a/commafeed-client/src/locales/de/messages.po b/commafeed-client/src/locales/de/messages.po
@@ -574,6 +574,10 @@ msgstr "Nichts gefunden"
 msgid "Oldest first"
 msgstr "Älteste zuerst"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"

diff --git a/commafeed-client/src/locales/en/messages.po b/commafeed-client/src/locales/en/messages.po
@@ -574,6 +574,10 @@ msgstr "Nothing found"
 msgid "Oldest first"
 msgstr "Oldest first"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr "On mobile, show action buttons at the bottom of the screen"
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oops!"

diff --git a/commafeed-client/src/locales/es/messages.po b/commafeed-client/src/locales/es/messages.po
@@ -574,6 +574,10 @@ msgstr "Nada encontrado"
 msgid "Oldest first"
 msgstr "más antigua primero"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "¡Ups!"

diff --git a/commafeed-client/src/locales/fa/messages.po b/commafeed-client/src/locales/fa/messages.po
@@ -574,6 +574,10 @@ msgstr "چیزی پیدا نشد"
 msgid "Oldest first"
 msgstr "قدیمی ترین اول"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "اوه!"

diff --git a/commafeed-client/src/locales/fi/messages.po b/commafeed-client/src/locales/fi/messages.po
@@ -574,6 +574,10 @@ msgstr "Mitään ei löytynyt"
 msgid "Oldest first"
 msgstr "Vanhin ensin"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hups!"

diff --git a/commafeed-client/src/locales/fr/messages.po b/commafeed-client/src/locales/fr/messages.po
@@ -574,6 +574,10 @@ msgstr "Aucun résultat"
 msgid "Oldest first"
 msgstr "Du plus ancien au plus récent"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oups !"

diff --git a/commafeed-client/src/locales/gl/messages.po b/commafeed-client/src/locales/gl/messages.po
@@ -574,6 +574,10 @@ msgstr "Non se atopou nada"
 msgid "Oldest first"
 msgstr "O máis vello primeiro"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Vaia!"

diff --git a/commafeed-client/src/locales/hu/messages.po b/commafeed-client/src/locales/hu/messages.po
@@ -574,6 +574,10 @@ msgstr "Semmi sem található"
 msgid "Oldest first"
 msgstr "A legidősebb első"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hoppá!"

diff --git a/commafeed-client/src/locales/id/messages.po b/commafeed-client/src/locales/id/messages.po
@@ -574,6 +574,10 @@ msgstr "Tidak ada yang ditemukan"
 msgid "Oldest first"
 msgstr "Tertua dulu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"

diff --git a/commafeed-client/src/locales/it/messages.po b/commafeed-client/src/locales/it/messages.po
@@ -574,6 +574,10 @@ msgstr "Non è stato trovato nulla"
 msgid "Oldest first"
 msgstr "Il più vecchio prima"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ops!"

diff --git a/commafeed-client/src/locales/ja/messages.po b/commafeed-client/src/locales/ja/messages.po
@@ -574,6 +574,10 @@ msgstr "何も見つかりませんでした"
 msgid "Oldest first"
 msgstr "古い順"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "おっと！"

diff --git a/commafeed-client/src/locales/ko/messages.po b/commafeed-client/src/locales/ko/messages.po
@@ -574,6 +574,10 @@ msgstr "아무것도 찾을 수 없습니다"
 msgid "Oldest first"
 msgstr "가장 오래된 것부터"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "앗!"

diff --git a/commafeed-client/src/locales/ms/messages.po b/commafeed-client/src/locales/ms/messages.po
@@ -574,6 +574,10 @@ msgstr "Tiada apa-apa dijumpai"
 msgid "Oldest first"
 msgstr "Tertua dahulu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Aduh!"

diff --git a/commafeed-client/src/locales/nb/messages.po b/commafeed-client/src/locales/nb/messages.po
@@ -574,6 +574,10 @@ msgstr "Ingenting funnet"
 msgid "Oldest first"
 msgstr "Eldste først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Beklager!"

diff --git a/commafeed-client/src/locales/nl/messages.po b/commafeed-client/src/locales/nl/messages.po
@@ -574,6 +574,10 @@ msgstr "Niets gevonden"
 msgid "Oldest first"
 msgstr "Oudste eerst"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oeps!"

diff --git a/commafeed-client/src/locales/nn/messages.po b/commafeed-client/src/locales/nn/messages.po
@@ -574,6 +574,10 @@ msgstr "Ingenting funnet"
 msgid "Oldest first"
 msgstr "Eldste først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Beklager!"

diff --git a/commafeed-client/src/locales/pl/messages.po b/commafeed-client/src/locales/pl/messages.po
@@ -574,6 +574,10 @@ msgstr "Nic nie znaleziono"
 msgid "Oldest first"
 msgstr "Najstarsze jako pierwsze"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"

diff --git a/commafeed-client/src/locales/pt/messages.po b/commafeed-client/src/locales/pt/messages.po
@@ -574,6 +574,10 @@ msgstr "Nada encontrado"
 msgid "Oldest first"
 msgstr "Mais antigo primeiro"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Opa!"

diff --git a/commafeed-client/src/locales/ru/messages.po b/commafeed-client/src/locales/ru/messages.po
@@ -574,6 +574,10 @@ msgstr "Ничего не найдено"
 msgid "Oldest first"
 msgstr "Сначала самые старые"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ой!"

diff --git a/commafeed-client/src/locales/sk/messages.po b/commafeed-client/src/locales/sk/messages.po
@@ -574,6 +574,10 @@ msgstr "Nič sa nenašlo"
 msgid "Oldest first"
 msgstr "Najprv najstarší"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ojoj!"

diff --git a/commafeed-client/src/locales/sv/messages.po b/commafeed-client/src/locales/sv/messages.po
@@ -574,6 +574,10 @@ msgstr "Inget hittades"
 msgid "Oldest first"
 msgstr "Äldst först"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hoppsan!"

diff --git a/commafeed-client/src/locales/tr/messages.po b/commafeed-client/src/locales/tr/messages.po
@@ -574,6 +574,10 @@ msgstr "Hiçbir şey bulunamadı"
 msgid "Oldest first"
 msgstr "Önce en eski"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Hata!"

diff --git a/commafeed-client/src/locales/zh/messages.po b/commafeed-client/src/locales/zh/messages.po
@@ -574,6 +574,10 @@ msgstr "没有找到"
 msgid "Oldest first"
 msgstr "最早的优先"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "哎呀！"