adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-07 17:32:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Style improvements for smaller screens

Browse Source
This commit is contained in:
Elio Struyf
2021-09-03 11:36:53 +02:00
parent 4a88e471f6
commit 648ee34171
5 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pagesView/components/Header/Filter.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem
}
return (
<div className="flex items-center ml-6">
<div className="flex items-center">
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={label} title={activeItem || DEFAULT_VALUE} />
src/pagesView/components/Header/Folders.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({folders, crntFo
}
return (
<div className="flex items-center ml-6">
<div className="flex items-center">
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
src/pagesView/components/Header/Grouping.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const Grouping: React.FunctionComponent<IGroupingProps> = ({group, switch
const crntGroup = groupOptions.find(x => x.id === group);
return (
<div className="flex items-center ml-6">
<div className="flex items-center">
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={`Group by`} title={crntGroup?.name || ""} />
src/pagesView/components/Header/Header.tsx
+11 -7
View File
@@ -65,18 +65,22 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, curre
</div>
</div>
<div className="px-4 flex items-center border-b border-gray-200 dark:border-whisper-600">
<Navigation currentTab={currentTab} totalPages={totalPages} switchTab={switchTab} />
<div className="px-4 flex flex-col lg:flex-row items-center border-b border-gray-200 dark:border-whisper-600">
<div className={`w-full`}>
<Navigation currentTab={currentTab} totalPages={totalPages} switchTab={switchTab} />
</div>
<Folders crntFolder={crntFolder} folders={folders} switchFolder={switchFolder} />
<div className={`my-4 lg:my-0 w-full flex items-center justify-between order-first lg:order-last `}>
<Folders crntFolder={crntFolder} folders={folders} switchFolder={switchFolder} />
<Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={switchTag} />
<Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={switchTag} />
<Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={switchCategory} />
<Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={switchCategory} />
<Grouping group={crntGroup} switchGroup={switchGroup} />
<Grouping group={crntGroup} switchGroup={switchGroup} />
<Sorting currentSorting={currentSorting} switchSorting={switchSorting} />
<Sorting currentSorting={currentSorting} switchSorting={switchSorting} />
</div>
</div>
</div>
);
src/pagesView/components/Header/Sorting.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({currentSorting,
const crntSort = sortOptions.find(x => x.id === currentSorting);
return (
<div className="flex items-center ml-6">
<div className="flex items-center">
<Menu as="div" className="relative z-10 inline-block text-left">
<MenuButton label={`Sort by`} title={crntSort?.name || ""} />