Skip to content

Commit

Permalink
Add table-center to center small tables
Browse files Browse the repository at this point in the history
  • Loading branch information
kepano committed Aug 6, 2024
1 parent 4d3c90e commit 448bd46
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 143 deletions.
11 changes: 11 additions & 0 deletions Minimal.css
Original file line number Diff line number Diff line change
Expand Up @@ -3559,6 +3559,11 @@ body.minimal-focus-mode.show-view-header .view-content {
font-variant-numeric: tabular-nums;
}

.table-center .markdown-preview-view .markdown-preview-sizer table, .table-center.markdown-preview-view .markdown-preview-sizer table,
.table-center .markdown-source-view.mod-cm6 .table-wrapper, .table-center.markdown-source-view.mod-cm6 .table-wrapper {
margin: 0 auto;
}

.table-lines {
--table-border-width: var(--border-width);
--table-header-border-width: var(--border-width);
Expand Down Expand Up @@ -9578,6 +9583,12 @@ settings:
description: Display row numbers in tables globally
type: class-toggle
default: false
-
id: table-center
title: Center small tables
description: Make small tables centered
type: class-toggle
default: false
-
id: table-nowrap
title: Disable line wrap
Expand Down
101 changes: 51 additions & 50 deletions docs/Block types/Tables.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,51 @@
---
permalink: tables
cssclasses:
- table-col-1-150
---

#blocks

Tables can be created using Markdown, or automatically generated with [[Dataview]]. Tables in Minimal follow your [[Block width]] settings.

## Dataview Settings

Use [[Minimal Theme Settings]] to define the following settings:

- **Trim Dataview columns** disables text wrapping in [[Dataview]] cells, equivalent of globally setting `table-nowrap` for Dataview only
- **Dataview maximum column width** sets the width before trimming occurs

## Hotkeys

You can use [[Hotkeys]] to adjust tables globally:

- Cycle between global table width options

## Style Settings

Use [[Style Settings]] plugin to control table styles at the global level

![](https://kep-log.s3-us-west-2.amazonaws.com/minimal-table-styles.png#interface)

## Helper classes

Use [[Helper classes]] to control table styles at the individual note level

| Class | Description |
|:--------------- |:--------------------------------------------------- |
| `table-100` | Table block fills 100% of the pane width |
| `table-max` | Table block fills the max line width |
| `table-wide` | Table block fills the wide line width |
| `table-nowrap` | Disable line wrapping in table cells |
| `table-wrap` | Force line wrapping in table cells |
| `table-numbers` | Add row numbers to tables |
| `table-tabular` | Use tabular figures in tables |
| `table-small` | Use small font size in tables |
| `table-tiny` | Use tiny font size in tables |
| `table-lines` | Add borders around all table cells |
| `row-lines` | Add borders between table rows |
| `col-lines` | Add borders between table columns |
| `row-alt` | Add striped background to alternating table rows |
| `col-alt` | Add striped background to alternating table columns |
| `row-hover` | Highlight rows on hover |
---
permalink: tables
cssclasses:
- table-col-1-150
---

#blocks

Tables can be created using Markdown, or automatically generated with [[Dataview]]. Tables in Minimal follow your [[Block width]] settings.

## Dataview Settings

Use [[Minimal Theme Settings]] to define the following settings:

- **Trim Dataview columns** disables text wrapping in [[Dataview]] cells, equivalent of globally setting `table-nowrap` for Dataview only
- **Dataview maximum column width** sets the width before trimming occurs

## Hotkeys

You can use [[Hotkeys]] to adjust tables globally:

- Cycle between global table width options

## Style Settings

Use [[Style Settings]] plugin to control table styles at the global level

![](https://kep-log.s3-us-west-2.amazonaws.com/minimal-table-styles.png#interface)

## Helper classes

Use [[Helper classes]] to control table styles at the individual note level

| Class | Description |
|:--------------- |:--------------------------------------------------- |
| `table-100` | Table block fills 100% of the pane width |
| `table-max` | Table block fills the max line width |
| `table-wide` | Table block fills the wide line width |
| `table-nowrap` | Disable line wrapping in table cells |
| `table-wrap` | Force line wrapping in table cells |
| `table-center` | Center small tables narrower than line width |
| `table-numbers` | Add row numbers to tables |
| `table-tabular` | Use tabular figures in tables |
| `table-small` | Use small font size in tables |
| `table-tiny` | Use tiny font size in tables |
| `table-lines` | Add borders around all table cells |
| `row-lines` | Add borders between table rows |
| `col-lines` | Add borders between table columns |
| `row-alt` | Add striped background to alternating table rows |
| `col-alt` | Add striped background to alternating table columns |
| `row-hover` | Highlight rows on hover |
179 changes: 90 additions & 89 deletions docs/Features/Helper classes.md
Original file line number Diff line number Diff line change
@@ -1,89 +1,90 @@
---
permalink: features/helper-classes
cssclasses:
- table-col-1-150
- table-full
---
## How to use helper classes

Helper classes are added using the special `cssclasses` [property](https://help.obsidian.md/Editing+and+formatting/Properties). In source mode it should look like this:

```
---
cssclasses:
- img-grid
---
```

To use multiple classes use the following syntax:

```
---
cssclasses:
- cards
- cards-1-1
---
```

## Image grids

Helper class for [[Image grids]] feature

| Class | Description |
| -------------- | --------------------------------------------------- |
| `img-grid` | Turns consecutive images into columns. To make a new row, add an extra line break between images. |

## Block widths

Enable [[Block width]] features on per-file basis, for [[Tables]], [[Image grids]] and [[Iframes]]

| Class | Description |
| --------------------------------------- | -------------------------------------- |
| `wide` | Entire note uses wide line width |
| `max` | Entire note uses max line width |
| `table-wide`, `img-wide`, `iframe-wide` | Block type uses wide line width |
| `table-max`, `img-max`, `iframe-max` | Block type uses max line width |
| `table-100`, `img-100`, `iframe-100` | Block type uses 100% of the pane width |

## Embeds and transclusions

Controls the styling of [[embeds]]

| Class | Description |
| -------------- | --------------------------------------------------- |
| `embed-strict` | Transclusions appear seamlessly in the flow of text |

## Tables

Controls the row and column styling of [[tables]]

| Class | Description |
| :-------------- | :-------------------------------------------------- |
| `table-nowrap` | Disable line wrapping in table cells |
| `table-wrap` | Force wrapping in table cells |
| `table-numbers` | Add row numbers to tables |
| `table-tabular` | Use tabular figures in tables |
| `table-small` | Use small font size in tables |
| `table-tiny` | Use tiny font size in tables |
| `table-lines` | Add borders around all table cells |
| `row-lines` | Add borders between table rows |
| `col-lines` | Add borders between table columns |
| `row-alt` | Add striped background to alternating table rows |
| `col-alt` | Add striped background to alternating table columns |
| `row-highlight` | Highlight rows on hover |

## Cards

Helper class for [[Cards]] feature

| Class | Description |
| :-------------------- | :----------------------------------------------- |
| `cards` (required) | Set all Dataview tables to card layout |
| `list-cards` | Set all bullet lists to card layout |
| `cards-align-bottom` | Align the last element of a card to the bottom |
| `cards-cover` | Images are resized to fill the defined space |
| `cards-16-9` | Fit images in cards to 16:9 ratio |
| `cards-1-1` | Fit images in cards to 1:1 ratio (square) |
| `cards-2-1` | Fit images in cards to 2:1 ratio |
| `cards-2-3` | Fit images in cards to 2:3 ratio |
| `cards-cols-1` to `8` | Force a specific number of columns (from 1 to 8) |
---
permalink: features/helper-classes
cssclasses:
- table-col-1-150
- table-full
---
## How to use helper classes

Helper classes are added using the special `cssclasses` [property](https://help.obsidian.md/Editing+and+formatting/Properties). In source mode it should look like this:

```
---
cssclasses:
- img-grid
---
```

To use multiple classes use the following syntax:

```
---
cssclasses:
- cards
- cards-1-1
---
```

## Image grids

Helper class for [[Image grids]] feature

| Class | Description |
| -------------- | --------------------------------------------------- |
| `img-grid` | Turns consecutive images into columns. To make a new row, add an extra line break between images. |

## Block widths

Enable [[Block width]] features on per-file basis, for [[Tables]], [[Image grids]] and [[Iframes]]

| Class | Description |
| --------------------------------------- | -------------------------------------- |
| `wide` | Entire note uses wide line width |
| `max` | Entire note uses max line width |
| `table-wide`, `img-wide`, `iframe-wide` | Block type uses wide line width |
| `table-max`, `img-max`, `iframe-max` | Block type uses max line width |
| `table-100`, `img-100`, `iframe-100` | Block type uses 100% of the pane width |

## Embeds and transclusions

Controls the styling of [[embeds]]

| Class | Description |
| -------------- | --------------------------------------------------- |
| `embed-strict` | Transclusions appear seamlessly in the flow of text |

## Tables

Controls the row and column styling of [[tables]]

| Class | Description |
| :-------------- | :-------------------------------------------------- |
| `table-nowrap` | Disable line wrapping in table cells |
| `table-wrap` | Force wrapping in table cells |
| `table-center` | Center small tables narrower than line width |
| `table-numbers` | Add row numbers to tables |
| `table-tabular` | Use tabular figures in tables |
| `table-small` | Use small font size in tables |
| `table-tiny` | Use tiny font size in tables |
| `table-lines` | Add borders around all table cells |
| `row-lines` | Add borders between table rows |
| `col-lines` | Add borders between table columns |
| `row-alt` | Add striped background to alternating table rows |
| `col-alt` | Add striped background to alternating table columns |
| `row-highlight` | Highlight rows on hover |

## Cards

Helper class for [[Cards]] feature

| Class | Description |
| :-------------------- | :----------------------------------------------- |
| `cards` (required) | Set all Dataview tables to card layout |
| `list-cards` | Set all bullet lists to card layout |
| `cards-align-bottom` | Align the last element of a card to the bottom |
| `cards-cover` | Images are resized to fill the defined space |
| `cards-16-9` | Fit images in cards to 16:9 ratio |
| `cards-1-1` | Fit images in cards to 1:1 ratio (square) |
| `cards-2-1` | Fit images in cards to 2:1 ratio |
| `cards-2-3` | Fit images in cards to 2:3 ratio |
| `cards-cols-1` to `8` | Force a specific number of columns (from 1 to 8) |
5 changes: 5 additions & 0 deletions src/css/main.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/css/main.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/css/main.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/css/main.min.css.map

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/css/style-settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -1551,6 +1551,12 @@ settings:
description: Display row numbers in tables globally
type: class-toggle
default: false
-
id: table-center
title: Center small tables
description: Make small tables centered
type: class-toggle
default: false
-
id: table-nowrap
title: Disable line wrap
Expand Down
9 changes: 9 additions & 0 deletions src/scss/features/helpers-tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@
font-variant-numeric: tabular-nums;
}

.table-center {
.markdown-preview-view .markdown-preview-sizer table,
&.markdown-preview-view .markdown-preview-sizer table,
.markdown-source-view.mod-cm6 .table-wrapper,
&.markdown-source-view.mod-cm6 .table-wrapper {
margin: 0 auto;
}
}

.table-lines {
--table-border-width: var(--border-width);
--table-header-border-width: var(--border-width);
Expand Down
8 changes: 7 additions & 1 deletion theme.css

Large diffs are not rendered by default.

0 comments on commit 448bd46

Please sign in to comment.