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' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}> <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/demo_capture.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" /> <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg> </svg>
</div> </div>

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

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

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

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

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

@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem' import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<img align="right" width="283" src={useBaseUrl("img/example.png")} /> <img width="283" src={useBaseUrl("img/example.png")} />
</div> </div>
## What are camera formats? ## 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 TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}> <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-processors.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" /> <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg> </svg>
</div> </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 TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}> <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/demo_drawing.mp4")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" /> <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg> </svg>
</div> </div>

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

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

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

@ -6,8 +6,8 @@ sidebar_label: Mocking
import useBaseUrl from '@docusaurus/useBaseUrl' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<img align="right" width="283" src={useBaseUrl("img/11_back.png")} /> <img width="283" src={useBaseUrl("img/11_back.png")} />
</div> </div>
## Mocking VisionCamera ## 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 TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<img align="right" width="283" src={useBaseUrl("img/example_intro.png")} /> <img width="283" src={useBaseUrl("img/example_intro.png")} />
</div> </div>
## Installing the library ## 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 TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl' import useBaseUrl from '@docusaurus/useBaseUrl'
<div> <div class="image-container">
<img align="right" width="283" src={useBaseUrl("img/11_back.png")} /> <img width="283" src={useBaseUrl("img/11_back.png")} />
</div> </div>
## Steps to try ## Steps to try

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

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

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

@ -19,7 +19,35 @@
.docusaurus-highlight-code-line { .docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91); background-color: rgb(72, 77, 91);
display: block; display: flex;
margin: 0 calc(-1 * var(--ifm-pre-padding)); margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 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;
}
}