-
Notifications
You must be signed in to change notification settings - Fork 252
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve styling of demo header (#3022)
<!-- Open the PR up as a draft until you feel it is ready for a proper review. Do not make PR:s from your own `main` branch, as that makes it difficult for reviewers to add their own fixes. Add any improvements to the branch as new commits to make it easier for reviewers to follow the progress. All commits will be squashed to a single commit once the PR is merged into `main`. Make sure you mention any issues that this PR closes in the description, as well as any other related issues. To get an auto-generated PR description you can put "copilot:summary" or "copilot:walkthrough" anywhere. --> ### What Fixes #2732 Fixes #2856 Can be tested at https://demo.rerun.io/pr/3022 ### Checklist * [x] I have read and agree to [Contributor Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and the [Code of Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md) * [x] I've included a screenshot or gif (if applicable) * [x] I have tested [demo.rerun.io](https://demo.rerun.io/pr/3022) (if applicable) - [PR Build Summary](https://build.rerun.io/pr/3022) - [Docs preview](https://rerun.io/preview/pr%3Ajan%2Fdemo-header-css/docs) - [Examples preview](https://rerun.io/preview/pr%3Ajan%2Fdemo-header-css/examples) --------- Co-authored-by: Marten Bjork <marten@martenbjork.com>
- Loading branch information
1 parent
a55e884
commit 76a4444
Showing
4 changed files
with
105 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,88 @@ | ||
| <!DOCTYPE html> | ||
| <!-- The version of index.html that will be served by demo.rerun.io --> | ||
| <html> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
|
|
||
| <!-- Disable zooming: --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | ||
| <!-- Disable zooming: --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | ||
|
|
||
| <head> | ||
| <link rel="icon" href="favicon.svg" /> | ||
| <title>Rerun Viewer</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;500&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="index.css" /> | ||
| </head> | ||
| <head> | ||
| <link rel="icon" href="favicon.svg" /> | ||
| <title>Rerun Viewer</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Inter:wght@100;500&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link rel="stylesheet" href="index.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="header"> | ||
| <div class="demo_header hidden" id="header_bar"> | ||
| <div class="examples"> | ||
| <div class="dropdown" id="examples"> | ||
| <div class="dropdown-title"> | ||
| Examples | ||
| <img class="icon" src="caret-down.svg" /> | ||
| </div> | ||
| <div class="dropdown-body"> | ||
| {% for entry in examples %} | ||
| <a class="flat-link" href="../{{ entry.name }}"> | ||
| <div class="dropdown-entry" data-link="{{ entry.name }}">{{ entry.title }}</div> | ||
| </a> | ||
| {% endfor %} | ||
| <body> | ||
| <div class="header"> | ||
| <div class="demo_header hidden" id="header_bar"> | ||
| <div class="examples"> | ||
| <div class="dropdown no-select" id="examples"> | ||
| <div class="dropdown-title"> | ||
| Examples | ||
| <img class="icon" src="caret-down.svg" /> | ||
| </div> | ||
| <div class="dropdown-body"> | ||
| {% for entry in examples %} | ||
| <a class="flat-link" href="../{{ entry.name }}"> | ||
| <div class="dropdown-entry" data-link="{{ entry.name }}">{{ entry.title }}</div> | ||
| </a> | ||
| {% endfor %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="example-description"> | ||
| <div class="example-description-icon no-select">?</div> | ||
| <div class="example-description-body">{{ example.description }}</div> | ||
| </div> | ||
| <a class="icon-link no-select" href="{{ example.source_url }}" target="_blank"> | ||
| <img class="icon" src="github-mark-white.svg" /> | ||
| </a> | ||
| </div> | ||
| <div class="example-description"> | ||
| <div class="example-description-icon">?</div> | ||
| <div class="example-description-body">{{ example.description }}</div> | ||
| </div> | ||
| <a class="icon-link" href="{{ example.source_url }}" target="_blank"> | ||
| <img class="icon" src="github-mark-white.svg" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| <div class="centered hidden" id="center_text"></div> | ||
| </div> | ||
| <canvas id="the_canvas_id" class="hidden"></canvas> | ||
|
|
||
|
|
||
| <script src="https://fifteen-thirtyeight.rerun.io/script.js" data-site="QKMCQFTQ" defer></script> | ||
| <div class="container"> | ||
| <div class="centered hidden" id="center_text"></div> | ||
| </div> | ||
| <canvas id="the_canvas_id" class="hidden"></canvas> | ||
|
|
||
| <script> | ||
| // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use | ||
| // `WebAssembly.instantiateStreaming` to instantiate the wasm module, | ||
| // but this doesn't work with `file://` urls. This example is frequently | ||
| // viewed by simply opening `index.html` in a browser (with a `file://` | ||
| // url), so it would fail if we were to call this function! | ||
| // | ||
| // Work around this for now by deleting the function to ensure that the | ||
| // `no_modules.js` script doesn't have access to it. You won't need this | ||
| // hack when deploying over HTTP. | ||
| if (window.location.protocol.startsWith("file")) { | ||
| delete WebAssembly.instantiateStreaming; | ||
| } | ||
| <script | ||
| src="https://fifteen-thirtyeight.rerun.io/script.js" | ||
| data-site="QKMCQFTQ" | ||
| defer | ||
| ></script> | ||
|
|
||
| // always strip `index.html` from the url, so that relative paths in links to examples work | ||
| const index_html_pos = window.location.pathname.indexOf("index.html"); | ||
| if (index_html_pos !== -1) { | ||
| window.location.href = window.location.pathname.slice(0, index_html_pos); | ||
| } | ||
| </script> | ||
| <script> | ||
| // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use | ||
| // `WebAssembly.instantiateStreaming` to instantiate the wasm module, | ||
| // but this doesn't work with `file://` urls. This example is frequently | ||
| // viewed by simply opening `index.html` in a browser (with a `file://` | ||
| // url), so it would fail if we were to call this function! | ||
| // | ||
| // Work around this for now by deleting the function to ensure that the | ||
| // `no_modules.js` script doesn't have access to it. You won't need this | ||
| // hack when deploying over HTTP. | ||
| if (window.location.protocol.startsWith("file")) { | ||
| delete WebAssembly.instantiateStreaming; | ||
| } | ||
|
|
||
| <!-- this is the JS generated by the `wasm-bindgen` CLI tool --> | ||
| <script src="re_viewer.js"></script> | ||
| // always strip `index.html` from the url, so that relative paths in links to examples work | ||
| const index_html_pos = window.location.pathname.indexOf("index.html"); | ||
| if (index_html_pos !== -1) { | ||
| window.location.href = window.location.pathname.slice(0, index_html_pos); | ||
| } | ||
| </script> | ||
|
|
||
| <script src="index.js"></script> | ||
| </body> | ||
| <!-- this is the JS generated by the `wasm-bindgen` CLI tool --> | ||
| <script src="re_viewer.js"></script> | ||
|
|
||
| <script src="index.js"></script> | ||
| </body> | ||
| </html> | ||
|
|
||
| <!-- Powered by egui: https://github.com/emilk/egui/ --> | ||
|
|