Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change to new Carousel vue script (#80)

Browse Source
This commit is contained in:
Simon M 2019-10-07 01:01:34 +02:00 committed by arkon
parent ca09d4e543
commit 6906d137bd
1 changed files with 94 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/help/guides/reader.md
View File

@ -32,55 +32,47 @@ Scale type lets you choose how the page fits in your screen.
All examples are illustrations and may not reflect what actually happens. All examples are illustrations and may not reflect what actually happens.
<div class="carousel" id="scale-type-carousel"> <Carousel name="carousel-scale-type">
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Fit screen</h4> <h4>Fit screen</h4>
<p>Will fit either to width or height depending on image resolution</p> <p>Will fit either to width or height depending on image resolution</p>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/fitscreen.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/fitscreen.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Stretch</h4> <h4>Stretch</h4>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/stretch.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/stretch.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Fit width</h4> <h4>Fit width</h4>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/fitwidth.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/fitwidth.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Fit height</h4> <h4>Fit height</h4>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/fitheight.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/fitheight.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Original size</h4> <h4>Original size</h4>
<p>Will be either zoom in or out depending on image resolution</p> <p>Will be either zoom in or out depending on image resolution</p>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/originalsize.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/originalsize.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Smart fit</h4> <h4>Smart fit</h4>
<p>Fits to the longest side of the image</p> <p>Fits to the longest side of the image</p>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/smartfit.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/smartfit.png')">
</figure> </figure>
</div> </CarouselItem>
</div> </Carousel>
<script>
var config = {
adaptiveHeight: true,
wrapAround: true,
pageDots: false
};
new Flickity('#scale-type-carousel', config);
</script>
::: tip ::: tip
You can change scale type when reading a chapter. Tap the middle of the screen, press the gear icon at the top, select a different scale type under `Scale type`. This will change Scale type for all series. You can change scale type when reading a chapter. Tap the middle of the screen, press the gear icon at the top, select a different scale type under `Scale type`. This will change Scale type for all series.
@ -94,37 +86,29 @@ Tachiyomi will start on that zoomed in page.
All examples are illustrations All examples are illustrations
<div class="carousel" id="zoom-start-position-carousel"> <Carousel name="carousel-zoom-start-position">
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Left</h4> <h4>Left</h4>
<p>Will start at the left side of the page.</p> <p>Will start at the left side of the page.</p>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/zoomstartpositionleft.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/zoomstartpositionleft.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Right</h4> <h4>Right</h4>
<p>Will start at the right side of the page.</p> <p>Will start at the right side of the page.</p>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/zoomstartpositionright.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/zoomstartpositionright.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>Center</h4> <h4>Center</h4>
<p>Will start at the center of the page.</p> <p>Will start at the center of the page.</p>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/zoomstartpositioncenter.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/zoomstartpositioncenter.png')">
</figure> </figure>
</div> </CarouselItem>
</div> </Carousel>
<script>
var config = {
adaptiveHeight: true,
wrapAround: true,
pageDots: false
};
new Flickity('#zoom-start-position-carousel', config);
</script>
## Rotation <Badge text="Free" type="default-indicator" vertical="middle" /> ## Rotation <Badge text="Free" type="default-indicator" vertical="middle" />
This allows you to control how the screen is going to be oriented. `Free` lets you rotate the screen between portrait and This allows you to control how the screen is going to be oriented. `Free` lets you rotate the screen between portrait and
@ -135,30 +119,22 @@ forces the reader to be in portrait. `Force Landscape` forces the reader to be i
This allows you to control what color the background should be in reader. Background color can either be `Black` or This allows you to control what color the background should be in reader. Background color can either be `Black` or
`White`. `White`.
<div class="carousel" id="background-color-carousel"> <Carousel name="carousel-background-color">
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/backgroundcolorblack.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/backgroundcolorblack.png')">
<h4>Black</h4> <h4>Black</h4>
<p>Surrounds page with black. With an AMOLED screen you can save battery by using this.</p> <p>Surrounds page with black. With an AMOLED screen you can save battery by using this.</p>
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/backgroundcolorwhite.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/backgroundcolorwhite.png')">
<h4>White</h4> <h4>White</h4>
<p>Surrounds page with white. Makes pages seemless with the screen.</p> <p>Surrounds page with white. Makes pages seemless with the screen.</p>
</figure> </figure>
</div> </CarouselItem>
</div> </Carousel>
<script>
var config = {
adaptiveHeight: true,
wrapAround: true,
pageDots: false
};
new Flickity('#background-color-carousel', config);
</script>
## Double tap animation speed <Badge text="Normal" type="default-indicator" vertical="middle" /> ## Double tap animation speed <Badge text="Normal" type="default-indicator" vertical="middle" />
Double tap animation speed changes the speed in which the zoom happens when double tapping. Double tap animation speed changes the speed in which the zoom happens when double tapping.
@ -189,28 +165,20 @@ This setting applies a smooth transition when tapping to change page.
## Crop borders <Badge text="False" type="default-indicator" vertical="middle" /> ## Crop borders <Badge text="False" type="default-indicator" vertical="middle" />
Tries to remove excess white borders Tries to remove excess white borders
<div class="carousel" id="crop-borders-carousel"> <Carousel name="carousel-crop-borders">
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>With Crop borders on</h4> <h4>With Crop borders on</h4>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/withcropborder.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/withcropborder.png')">
</figure> </figure>
</div> </CarouselItem>
<div class="carousel-cell"> <CarouselItem>
<figure class="centered"> <figure class="centered">
<h4>With Crop borders off</h4> <h4>With Crop borders off</h4>
<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/withoutcropborder.png')"> <img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/media/withoutcropborder.png')">
</figure> </figure>
</div> </CarouselItem>
</div> </Carousel>
<script>
var config = {
adaptiveHeight: true,
wrapAround: true,
pageDots: false
};
new Flickity('#crop-borders-carousel', config);
</script>
## Tapping <Badge text="True" type="default-indicator" vertical="middle" /> ## Tapping <Badge text="True" type="default-indicator" vertical="middle" />
This setting enables switching pages by tapping the sides of the screen. This setting enables switching pages by tapping the sides of the screen.