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

Jump to bottom

Gallery #1134

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Gallery #1134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da941c8
Improve border and clipping
cwickham Jun 5, 2024
463dca3
Improve border and clipping
cwickham Jun 5, 2024
e92af8b
Merge branch 'main' into gallery
cwickham Jun 6, 2024
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 _freeze/docs/gallery/index/execute-results/html.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"hash": "34c1f593516a7a13e88fe325ea820ae9",
"result": {
"engine": "knitr",
"markdown": "---\npagetitle: \"Gallery\"\nformat:\n html:\n toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n echo: false\nlisting:\n - id: gallery\n template: gallery.ejs\n contents: gallery.yml\ndescription: |\n A gallery of example documents, websites, books, and presentations created with Quarto.\n---\n\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n- [Articles & Reports](#articles-reports)\n- [Presentations](#presentations)\n- [Interactive Docs](#interactive-docs)\n- [Websites](#websites)\n- [Books](#books)\n:::\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n\n```{=html}\n<style>\n\n#hero-banner {\n padding-top: 35px;\n background-color: rgb(237,243,249);\n}\n\n#quarto-content main { \n margin-top: 0;\n padding-top: 0;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.headline {\n font-size: 1.25em;\n font-weight: 300;\n padding-bottom: 1em;\n}\n\n.headline p {\n margin: 0;\n padding-bottom: 0.2rem;\n}\n\n.headline a {\n text-decoration: none;\n}\n\n.headline ul li {\n margin-bottom: 0.3em;\n}\n\n.carousel.card {\n padding-top: 2em;\n}\n\n.carousel img {\n width: 70%;\n margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n margin-bottom: 110px;\n}\n\n.carousel-caption {\n padding-top: 1em;\n}\n\n.touch {\n \n}\n</style>\n```\n",
"markdown": "---\npagetitle: \"Gallery\"\nformat:\n html:\n toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n echo: false\nlisting:\n - id: gallery\n template: gallery.ejs\n contents: gallery.yml\ndescription: |\n A gallery of example documents, websites, books, and presentations created with Quarto.\n---\n\n\n\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n- [Articles & Reports](#articles-reports)\n- [Presentations](#presentations)\n- [Interactive Docs](#interactive-docs)\n- [Websites](#websites)\n- [Books](#books)\n:::\n\n\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n\n\n\n```{=html}\n<style>\n\n#hero-banner {\n padding-top: 35px;\n background-color: rgb(237,243,249);\n}\n\n#quarto-content main { \n margin-top: 0;\n padding-top: 0;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.headline {\n font-size: 1.25em;\n font-weight: 300;\n padding-bottom: 1em;\n}\n\n.headline p {\n margin: 0;\n padding-bottom: 0.2rem;\n}\n\n.headline a {\n text-decoration: none;\n}\n\n.headline ul li {\n margin-bottom: 0.3em;\n}\n\n.carousel.card {\n padding-top: 2em;\n}\n\n.carousel img {\n width: 70%;\n margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n margin-bottom: 110px;\n}\n\n.carousel-caption {\n padding-top: 1em;\n}\n\n.touch {\n \n}\n</style>\n```\n",
"supporting": [],
"filters": [
"rmarkdown/pagebreak.lua"
Expand Down
4 changes: 2 additions & 2 deletions docs/gallery/gallery.ejs
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following your question slack, what I tried was

  • Setting overflow-hidden on the div.card
  • Not setting rounded bottom on the img.

I believe this could remove the white gap. I did not push to the PR to update the preview, but in browser developer mode this works.

Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<% for (const tile of item.tiles) { %>
<div class="card border-2 rounded-3 g-col-12 g-col-sm-6 g-col-md-4 mb-2" <%= metadataAttrs(tile) %>>
<div class="card-header py-1 px-2 border-bottom border-1 bg-light">
<div class="card-body rounded-top-3 py-1 px-2 border-bottom border-1 bg-light">
<small class="card-text inline-block">
<a href="<%- tile.href %>" class="listing-title"><%= tile.title %></a>
<% if (tile.code) { %>
Expand All @@ -24,7 +24,7 @@
</small>
</div>
<a href="<%- tile.href %>">
<img src="<%- tile.thumbnail %>" alt="<%- tile.description %>" class="card-img-top"/>
<img src="<%- tile.thumbnail %>" alt="<%- tile.description %>" class="card-img-bottom rounded-bottom-3"/>
</a>

<% if (tile.publicationdate) { %>
Expand Down