Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attempt to provide configurable breakpoint for testing #354

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Attempt to provide configurable breakpoint for testing #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/lib/data/stores/setting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,24 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
key: 'desktop-sidebar',
defaultValue: false
});

settings.push({
type: 'list',
category: SETTINGS_CATEGORY_INTERFACE,
title: 'Action Buttons Breakpoint',
key: 'action-buttons-breakpoint',
defaultValue: 'xs',
entries: [
'3xs (325px)',
'2xs (400px)',
'xs (475px)',
'sm (640px)',
'md (768px)',
'lg (1024px)',
'xl (1280px)'
],
values: ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']
});
}
return settings;
})();
Expand Down
9 changes: 7 additions & 2 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@
proskomma: $page.data?.proskomma
};

$: extraIconsBreakpoint = $userSettings['action-buttons-breakpoint'];
$: extraIconsExist = showSearch || showCollectionNavbar; //Note: was trying document.getElementById('extraButtons').childElementCount; but that caused it to hang forever.
let showOverlowMenu = false; //Controls the visibility of the extraButtons div on mobile
function handleMenuClick(event) {
Expand Down Expand Up @@ -268,7 +269,11 @@
</button>
{/if}
</div>
<div id="extraButtons" class={showOverlowMenu ? 'flex' : 'hidden md:flex'}>
{(console.log('Breakpoint:', extraIconsBreakpoint), '')}
<div
id="extraButtons"
class={showOverlowMenu ? 'flex' : `hidden ${extraIconsBreakpoint}:flex`}
>
<!-- An overflow menu containing the other right-buttons. On mobile it expands when overflowMenuButton is clicked and collpases when handleMenuClick() is called, on larger screens these buttons are always visible. -->

<!-- Text Appearance Selector Button -->
Expand Down Expand Up @@ -299,7 +304,7 @@
{#if extraIconsExist}
<!-- overflowMenuButton (on mobile this toggles the visibility of the extraButtons div) -->
<button
class="md:hidden dy-btn dy-btn-ghost dy-btn-circle"
class={`${extraIconsBreakpoint}:hidden dy-btn dy-btn-ghost dy-btn-circle`}
on:click={() => {
showOverlowMenu = !showOverlowMenu;
event.stopPropagation();
Expand Down
11 changes: 10 additions & 1 deletion tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
screens: {
'3xs': '325px',
'2xs': '400px',
'xs': '475px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
}
},
//tailwind typography: https://daisyui.com/docs/layout-and-typography/
//daisyui: https://daisyui.com/docs/use/
Expand Down