-
Notifications
You must be signed in to change notification settings - Fork 30
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.
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
Write Choice Updates #514
Write Choice Updates #514
Conversation
gabrielraeder
commented
Nov 29, 2023
- Created homepage
- Configured Sidebar structure
- added extra CSS and JS
- Added a home button on the navbar
…tutorial intro, sidebar indentation
MLCommons CLA bot: |
Hi @gabrielraeder! I've reviewed the feature for displaying images corresponding to each step in the tutorial. On my laptop, it appears as follows: Windows 11, Chrome 119.0.6045.200, 1920x1080, text size 100%, scale 100%
|
@VukW ,
|
const imageSources = [
{ header: "overview", image: 1 }, // every header has its text as element Id
{ header: "before-you-start", image: 2 },
...
imageSources.forEach(({ header, image }) => {
const headerElement = document.getElementById(header) // find header
headerTop = headerElement.getBoundingClientRect().top; // get its top border
if (headerTop < 400) { // change image whenever header crosses this invisible line on the screen
imageSrc = `https://raw.githubusercontent.com/gabrielraeder/website/main/docs/static/images/workflow/miccai-tutorial${image}.png`;
} It's still a dirty solution as it becomes broken when we change headers' text, but at least helps to keep the same behavior on the different devices
|
@VukW, similar to what you suggested, I did it based on the header content because when the id contains a number at the start, such as Other important points: Mkdocs is not responsive and ready for mobile devices, and presenting an image for such devices, we believe would not be ideal. With that in mind, we suggest showing these images flow on screens higher than 1000px, including tablets with side views, laptops, and monitors. Second, we have available space on bigger screens of 380px for the images, and we would change its size based on media queries to use the most available space for each screen size. Also, suggest making images without backgrounds, making versions of each for light and dark mode. And we would use code to define which image to present also based on the color scheme. Please share your thoughts about all this. So we can make any new changes that may be required. |
@gabrielraeder Added my fixes.
|
Medperf doc: tutorial sticky images