Skip to content

Fixes to Pivot Fields CSS styling #21

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

Merged
merged 1 commit into from
Feb 14, 2025
Merged

Fixes to Pivot Fields CSS styling #21

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
2 changes: 1 addition & 1 deletion components/FilterDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function FilterDialog({
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [open, setOpen] = useState(false);
const [isOpen, setIsOpen] = useState(true);
const [isOpen, setIsOpen] = useState(false);
const itemsPerPage = 10;

const fetchData = async () => {
Expand Down
4 changes: 2 additions & 2 deletions components/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,8 +441,8 @@ export default function Main() {
{(files.length <= 1 || hasRelationships) && (
<>
<PivotFields />
<div className="flex flex-col justify-between gap-1">
<div className="flex flex-row gap-1">
<div className="flex flex-col gap-1">
<div className="flex flex-row items-center justify-center lg:justify-start flex-wrap gap-1">
<Button
className="flex flex-row gap-1 py-1 px-2 rounded-md w-fit"
disabled={isQueryRunning}
Expand Down
4 changes: 2 additions & 2 deletions components/PivotFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import PivotFilters from "./pivotfields/PivotFilters";

export default function PivotFields() {
return (
<div className="flex md:flex-row gap-1 w-full h-fit">
<div className="flex w-[300px] h-full">
<div className="flex flex-col lg:flex-row items-center justify-center gap-1 w-full h-fit">
<div className="flex lg:w-1/5 w-full min-w-[300px] h-full">
<Aggregation />
</div>
<div className="flex flex-col gap-1 w-full">
Expand Down
2 changes: 1 addition & 1 deletion components/pivotfields/Aggregation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function Aggregation() {
const { aggregation, clearAggregation } = usePivotStore();
const { files } = useFileStore();
return (
<div className="flex flex-col items-center gap-3 border rounded-lg px-4 py-1 h-full w-full">
<div className="flex flex-col items-center gap-3 border rounded-lg px-4 py-1 h-fit w-full">
<div className="flex flex-row items-center gap-1">
<SquareSigma size={20} />
<p>Aggregation</p>
Expand Down
6 changes: 3 additions & 3 deletions components/pivotfields/PivotColumns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ export default function PivotColumns() {
<Columns3 size={20} />
<p>Columns</p>
</div>
<div className="flex flex-row flex-wrap items-center gap-2">
<div className="flex flex-row flex-wrap items-center gap-2 justify-center">
{columns.map((column, index) => (
<div key={index} className="flex flex-col items-start gap-2">
<div key={index} className="flex flex-col items-center gap-2">
<Badge className="flex flex-row items-center gap-2">
<div className="relative">
<Database size={16} />
Expand Down Expand Up @@ -68,7 +68,7 @@ export default function PivotColumns() {
<Trash2
onClick={clearColumns}
size={24}
className="cursor-pointer hover:text-blue-500"
className="cursor-pointer hover:text-blue-500 min-w-[24px]"
/>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions components/pivotfields/PivotFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function PivotFilters() {
<Filter size={20} />
<p>Filters</p>
</div>
<div className="flex flex-row flex-wrap items-center gap-2">
<div className="flex flex-row flex-wrap items-center gap-2 justify-center">
{filters.map((filter) => (
<div
key={`${filter.table}-${filter.field}`}
Expand All @@ -42,7 +42,7 @@ export default function PivotFilters() {
<Trash2
onClick={clearFilters}
size={24}
className="cursor-pointer hover:text-blue-500"
className="cursor-pointer hover:text-blue-500 min-w-[24px]"
/>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions components/pivotfields/PivotRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function PivotRows() {
<Rows3 size={20} />
<p>Rows</p>
</div>
<div className="flex flex-row flex-wrap items-center gap-2">
<div className="flex flex-row flex-wrap items-center gap-2 justify-center">
{rows.map((row, index) => (
<div key={index} className="flex flex-col items-center gap-2">
<Badge className="flex flex-row items-center gap-2">
Expand Down Expand Up @@ -62,7 +62,7 @@ export default function PivotRows() {
<Trash2
onClick={clearRows}
size={24}
className="cursor-pointer hover:text-blue-500"
className="cursor-pointer hover:text-blue-500 min-w-[24px]"
/>
</div>
);
Expand Down