From eec9a3eb6ea21bbc20124cea7b8001c95c24a67f Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Wed, 27 Sep 2023 12:21:34 +0200 Subject: [PATCH] docs: Make images responsive --- docs/docs/guides/DEVICES.mdx | 2 +- docs/docs/guides/HDR.mdx | 6 +++--- docs/docs/guides/STABILIZATION.mdx | 2 +- docs/docs/guides/ZOOMING.mdx | 2 +- docs/src/css/custom.css | 26 ++++++++++++++++++++++---- 5 files changed, 28 insertions(+), 10 deletions(-) diff --git a/docs/docs/guides/DEVICES.mdx b/docs/docs/guides/DEVICES.mdx index f0e1774..a7ddd95 100644 --- a/docs/docs/guides/DEVICES.mdx +++ b/docs/docs/guides/DEVICES.mdx @@ -159,7 +159,7 @@ const device = getCameraDevice(devices, 'back', { This will try to find a [`CameraDevice`](/docs/api/interfaces/CameraDevice) that consists of all three physical Camera Devices, or the next best match (e.g. "Dual-Camera", or just a single wide-angle-camera) if not found. With the "Triple-Camera", we can now zoom out to a wider field of view:
- +
If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter: diff --git a/docs/docs/guides/HDR.mdx b/docs/docs/guides/HDR.mdx index a2c0c37..2e93222 100644 --- a/docs/docs/guides/HDR.mdx +++ b/docs/docs/guides/HDR.mdx @@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl' HDR ("High Dynamic Range") is a capture mode that captures colors in a much wider range, allowing for much better details and brighter colors.
- - + +
### Photo HDR @@ -22,7 +22,7 @@ HDR ("High Dynamic Range") is a capture mode that captures colors in a much wide Photo HDR is accomplished by running three captures instead of one, an underexposed photo, a normal photo, and an overexposed photo. Then, these images are fused together to create darker darks and brighter brights.
- +
### Video HDR diff --git a/docs/docs/guides/STABILIZATION.mdx b/docs/docs/guides/STABILIZATION.mdx index 2db6b9a..812fcb5 100644 --- a/docs/docs/guides/STABILIZATION.mdx +++ b/docs/docs/guides/STABILIZATION.mdx @@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl' Video Stabilization is an algorithm that stabilizes the recorded video to smoothen any jitters, shaking, or abrupt movements from the user's camera movement.
- +
There are multiple different approaches to Video Stabilization, either software- or hardware-based. Video Stabilization always crops the image to a smaller view area so it has room to shift the image around, so expect a "zoomed-in" effect. Also, since Video Stabilization is a complex algorithm, enabling it will increase the time the Camera takes to initialize. diff --git a/docs/docs/guides/ZOOMING.mdx b/docs/docs/guides/ZOOMING.mdx index 0f0bcbc..7a376d6 100644 --- a/docs/docs/guides/ZOOMING.mdx +++ b/docs/docs/guides/ZOOMING.mdx @@ -30,7 +30,7 @@ A Camera device has different minimum, maximum and neutral zoom values. Those va * The `neutralZoom` value is often `1`, but can be larger than `1` for devices with "fish-eye" (ultra-wide-angle) cameras. In those cases, the user expects to be at whatever zoom value `neutralZoom` is (e.g. `2`) per default, and if he tries to zoom out even more, he goes to `minZoom` (`1`), which switches over to the "fish-eye" (ultra-wide-angle) camera as seen in this GIF:
- +
The Camera's `zoom` property expects values to be in the same "factor" scale as the `minZoom`, `neutralZoom` and `maxZoom` values - so if you pass `zoom={device.minZoom}` it is at the minimum available zoom, where as if you pass `zoom={device.maxZoom}` the maximum zoom value possible is zoomed in. It is recommended that you start at `device.neutralZoom` and let the user manually zoom out to the fish-eye camera on demand (if available). diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 119069b..2ea11b3 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -19,15 +19,35 @@ --docusaurus-highlighted-code-line-bg: rgb(61, 63, 67); } -img { +/* Images inside the docs that are centered/inside text */ +.doc-image { border-radius: 15px; + max-width: 55%; + max-height: 30vh; +} +@media (max-width: 600px) { + .doc-image { + max-width: 80%; + max-height: 50vh; + } +} +@media (min-width: 600px) and (max-width: 997px) { + .doc-image { + max-width: 55%; + max-height: 50vh; + } +} +@media (min-width: 997px) and (max-width: 1145px) { + .doc-image { + max-width: 80%; + max-height: 30vh; + } } /* align image to the right */ .image-container { float: right; } - /* mobile screen; align center */ @media (max-width: 600px) { .image-container { @@ -35,14 +55,12 @@ img { text-align: center; } } - /* wider screen; align right again */ @media (min-width: 600px) and (max-width: 997px) { .image-container { float: right; } } - /* even wider screen but with sidebars; align center cuz we dont have enough space for right */ @media (min-width: 997px) and (max-width: 1145px) { .image-container {