Skip to content

Commit bb20ec7

Browse files
authored
fix carousel styles (#8022)
## 📝 Summary <!-- Provide a concise summary of what this pull request is addressing. If this PR closes any issues, list them here by number (e.g., Closes #123). --> Closes #8018 . These styles were not being applied to carousel plugins. This applies a fix so now `.mo-slide-content` styles properly apply. A notable change is content now is centered in a slide and the left and right buttons are hidden unless hovered. <img width="744" height="386" alt="image" src="https://github.com/user-attachments/assets/f9ba97fc-eea3-4d53-b701-1df0a1ef2015" /> ## 🔍 Description of Changes <!-- Detail the specific changes made in this pull request. Explain the problem addressed and how it was resolved. If applicable, provide before and after comparisons, screenshots, or any relevant details to help reviewers understand the changes easily. --> ## 📋 Checklist - [x] I have read the [contributor guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md). - [ ] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on [Discord](https://marimo.io/discord?ref=pr), or the community [discussions](https://github.com/marimo-team/marimo/discussions) (Please provide a link if applicable). - [ ] Tests have been added for the changes made. - [ ] Documentation has been updated where applicable, including docstrings for API changes. - [x] Pull request title is a good summary of the changes - it will be used in the [release notes](https://github.com/marimo-team/marimo/releases).
1 parent 05b0021 commit bb20ec7

File tree

2 files changed

+49
-53
lines changed

2 files changed

+49
-53
lines changed

examples/layouts/slides.py

Lines changed: 47 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
import marimo
1212

13-
__generated_with = "0.17.4"
13+
__generated_with = "0.19.6"
1414
app = marimo.App(width="medium", layout_file="layouts/slides.slides.json")
1515

1616

@@ -99,29 +99,27 @@ def _(mo):
9999

100100
@app.cell
101101
def _(mo, print_and_run):
102-
mo.md(
103-
f"""
104-
When printing a floating-point number to the output, the fractional parts can be difficult to read and compare. For example, the following query returns three numbers between 1 and 8 but their printed widths are very different due to their fractional parts.
102+
mo.md(f"""
103+
When printing a floating-point number to the output, the fractional parts can be difficult to read and compare. For example, the following query returns three numbers between 1 and 8 but their printed widths are very different due to their fractional parts.
105104
106-
{print_and_run("SELECT x FROM 'example.csv';")}
105+
{print_and_run("SELECT x FROM 'example.csv';")}
107106
108-
By casting a column to a DECIMAL with a fixed number of digits after the decimal point, we can pretty-print it as follows:
107+
By casting a column to a DECIMAL with a fixed number of digits after the decimal point, we can pretty-print it as follows:
109108
110-
{print_and_run('''
111-
SELECT x::DECIMAL(15, 3) AS x
112-
FROM 'example.csv';
113-
''')}
109+
{print_and_run('''
110+
SELECT x::DECIMAL(15, 3) AS x
111+
FROM 'example.csv';
112+
''')}
114113
115-
A typical alternative solution is to use the printf or format functions, e.g.:
114+
A typical alternative solution is to use the printf or format functions, e.g.:
116115
117-
{print_and_run('''
118-
SELECT printf('%.3f', x)
119-
FROM 'example.csv';
120-
''')}
116+
{print_and_run('''
117+
SELECT printf('%.3f', x)
118+
FROM 'example.csv';
119+
''')}
121120
122-
However, these approaches require us to specify a formatting string that's easy to forget. What's worse, the statement above returns string values, which makes subsequent operations (e.g., sorting) more difficult. Therefore, unless keeping the full precision of the floating-point numbers is a concern, casting to DECIMAL values should be the preferred solution for most use cases.
123-
"""
124-
)
121+
However, these approaches require us to specify a formatting string that's easy to forget. What's worse, the statement above returns string values, which makes subsequent operations (e.g., sorting) more difficult. Therefore, unless keeping the full precision of the floating-point numbers is a concern, casting to DECIMAL values should be the preferred solution for most use cases.
122+
""")
125123
return
126124

127125

@@ -135,31 +133,29 @@ def _(mo):
135133

136134
@app.cell
137135
def _(mo, print_and_run):
138-
mo.md(
139-
f"""
140-
To copy the schema from a table without copying its data, we can use LIMIT 0.
136+
mo.md(f"""
137+
To copy the schema from a table without copying its data, we can use LIMIT 0.
141138
142-
{print_and_run('''
143-
CREATE OR REPLACE TABLE example AS
144-
FROM 'example.csv';
145-
CREATE OR REPLACE TABLE tbl AS
146-
FROM example
147-
LIMIT 0;
148-
''')}
139+
{print_and_run('''
140+
CREATE OR REPLACE TABLE example AS
141+
FROM 'example.csv';
142+
CREATE OR REPLACE TABLE tbl AS
143+
FROM example
144+
LIMIT 0;
145+
''')}
149146
150-
This will result in an empty table with the same schema as the source table:
147+
This will result in an empty table with the same schema as the source table:
151148
152-
{print_and_run('DESCRIBE tbl;')}
149+
{print_and_run('DESCRIBE tbl;')}
153150
154-
This will return the schema of the table.
151+
This will return the schema of the table.
155152
156-
```sql
157-
CREATE TABLE example(s VARCHAR, x DOUBLE);
158-
```
153+
```sql
154+
CREATE TABLE example(s VARCHAR, x DOUBLE);
155+
```
159156
160-
After editing the table’s name (e.g., example to tbl), this query can be used to create a new table with the same schema.
161-
"""
162-
)
157+
After editing the table’s name (e.g., example to tbl), this query can be used to create a new table with the same schema.
158+
""")
163159
return
164160

165161

@@ -179,28 +175,26 @@ def _(mo):
179175

180176
@app.cell
181177
def _(mo, print_and_run, rerun):
182-
mo.md(
183-
f"""
184-
Sometimes, we need to introduce some entropy into the ordering of the data by shuffling it. To shuffle non-deterministically, we can simply sort on a random value provided the random() function:
178+
mo.md(f"""
179+
Sometimes, we need to introduce some entropy into the ordering of the data by shuffling it. To shuffle non-deterministically, we can simply sort on a random value provided the random() function:
185180
186-
{rerun}
181+
{rerun}
187182
188-
{print_and_run('''
189-
FROM 'example.csv' ORDER BY random();
190-
''')}
183+
{print_and_run('''
184+
FROM 'example.csv' ORDER BY random();
185+
''')}
191186
192-
Shuffling deterministically is a bit more tricky. To achieve this, we can order on the hash, of the rowid pseudocolumn. Note that this column is only available in physical tables, so we first have to load the CSV in a table, then perform the shuffle operation as follows:
187+
Shuffling deterministically is a bit more tricky. To achieve this, we can order on the hash, of the rowid pseudocolumn. Note that this column is only available in physical tables, so we first have to load the CSV in a table, then perform the shuffle operation as follows:
193188
194-
{rerun}
189+
{rerun}
195190
196-
{print_and_run('''
197-
CREATE OR REPLACE TABLE example AS FROM 'example.csv';
198-
FROM example ORDER BY hash(rowid + 42);
199-
''')}
191+
{print_and_run('''
192+
CREATE OR REPLACE TABLE example AS FROM 'example.csv';
193+
FROM example ORDER BY hash(rowid + 42);
194+
''')}
200195
201-
Note that the + 42 is only necessary to nudge the first row from its position – as hash(0) returns 0, the smallest possible value, using it for ordering leaves the first row in its place.
202-
"""
203-
)
196+
Note that the + 42 is only necessary to nudge the first row from its position – as hash(0) returns 0, the smallest possible value, using it for ordering leaves the first row in its place.
197+
""")
204198
return
205199

206200

frontend/src/plugins/layout/carousel/CarouselPlugin.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import swiperCssScrollbar from "swiper/css/scrollbar?inline";
77
import swiperCssVirtual from "swiper/css/virtual?inline";
88
import swiperCss from "swiper/css?inline";
99
import { z } from "zod";
10+
import slidesCss from "@/components/slides/slides.css?inline";
1011
import type {
1112
IStatelessPlugin,
1213
IStatelessPluginProps,
@@ -32,6 +33,7 @@ export class CarouselPlugin implements IStatelessPlugin<Data> {
3233
swiperCssNavigation,
3334
swiperCssPagination,
3435
swiperCssScrollbar,
36+
slidesCss,
3537
];
3638

3739
render(props: IStatelessPluginProps<Data>): JSX.Element {

0 commit comments

Comments
 (0)