railbird/react-native-vision-camera
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: Align Images perfectly on mobile (#1856)

Browse Source 
* docs: Use Light codeblocks theme

* docs: Fix image align

* fix pixels

* fix: Adjust all images
This commit is contained in:
Marc Rousavy 2023-09-26 13:09:44 +02:00 committed by GitHub
parent cc88de3926
commit 688963954a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/docs/guides/CAPTURING.mdx
View File

@ -6,9 +6,9 @@ sidebar_label: Taking Photos/Recording Videos
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469" />
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
<image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
</div>

6
docs/docs/guides/DEVICES.mdx
View File

@ -8,9 +8,9 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
</div>

4
docs/docs/guides/ERRORS.mdx
View File

@ -6,8 +6,8 @@ sidebar_label: Camera Errors
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<img align="right" width="283" src={useBaseUrl("img/example_error.png")} />
<div class="image-container">
<img width="283" src={useBaseUrl("img/example_error.png")} />
</div>
## Why?

4
docs/docs/guides/FORMATS.mdx
View File

@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<img align="right" width="283" src={useBaseUrl("img/example.png")} />
<div class="image-container">
<img width="283" src={useBaseUrl("img/example.png")} />
</div>
## What are camera formats?

6
docs/docs/guides/FRAME_PROCESSORS.mdx
View File

@ -8,9 +8,9 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href={useBaseUrl("img/frame-processors.gif")} x="18" y="33" width="247" height="469" />
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
<image href={useBaseUrl("img/frame-processors.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
</div>

6
docs/docs/guides/FRAME_PROCESSORS_SKIA.mdx
View File

@ -8,9 +8,9 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href={useBaseUrl("img/demo_drawing.mp4")} x="18" y="33" width="247" height="469" />
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
<image href={useBaseUrl("img/demo_drawing.mp4")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
</div>

4
docs/docs/guides/LIFECYCLE.mdx
View File

@ -6,8 +6,8 @@ sidebar_label: Lifecycle
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<img align="right" width="283" src={useBaseUrl("img/example.png")} />
<div class="image-container">
<img width="283" src={useBaseUrl("img/example.png")} />
</div>
## The `isActive` prop

4
docs/docs/guides/MOCKING.mdx
View File

@ -6,8 +6,8 @@ sidebar_label: Mocking
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<img align="right" width="283" src={useBaseUrl("img/11_back.png")} />
<div class="image-container">
<img width="283" src={useBaseUrl("img/11_back.png")} />
</div>
## Mocking VisionCamera

4
docs/docs/guides/SETUP.mdx
View File

@ -9,8 +9,8 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<img align="right" width="283" src={useBaseUrl("img/example_intro.png")} />
<div class="image-container">
<img width="283" src={useBaseUrl("img/example_intro.png")} />
</div>
## Installing the library

4
docs/docs/guides/TROUBLESHOOTING.mdx
View File

@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<img align="right" width="283" src={useBaseUrl("img/11_back.png")} />
<div class="image-container">
<img width="283" src={useBaseUrl("img/11_back.png")} />
</div>
## Steps to try

6
docs/docs/guides/ZOOMING.mdx
View File

@ -6,9 +6,9 @@ sidebar_label: Zooming
import useBaseUrl from '@docusaurus/useBaseUrl'
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
<div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
</div>

30
docs/src/css/custom.css
View File

@ -19,7 +19,35 @@
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
display: flex;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
/* align image to the right */
.image-container {
float: right;
}
/* mobile screen; align center */
@media (max-width: 600px) {
.image-container {
float: none;
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 {
float: none;
text-align: center;
}
}