Update docs
This commit is contained in:
Vadim
@@ -28,7 +28,7 @@
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
export let initialPageIndex = 1
|
||||
export let initialPageIndex = 0
|
||||
|
||||
/**
|
||||
* Transition speed (ms)
|
||||
@@ -197,7 +197,10 @@
|
||||
"
|
||||
bind:this={pagesElement}
|
||||
>
|
||||
<slot></slot>
|
||||
<slot
|
||||
currentPageIndex={originalCurrentPageIndex}
|
||||
>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
{#if arrows}
|
||||
@@ -236,6 +239,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
146
src/docs/AlbumsPreview/AlbumsPreview.svelte
Normal file
146
src/docs/AlbumsPreview/AlbumsPreview.svelte
Normal file
@@ -0,0 +1,146 @@
|
||||
<script>
|
||||
import Carousel from '../../components/Carousel/Carousel.svelte'
|
||||
import Image from './Image.svelte'
|
||||
|
||||
const albums = {
|
||||
forest: {
|
||||
title: 'Forest',
|
||||
tags: ['forest', 'trees'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg'
|
||||
]
|
||||
},
|
||||
birds: {
|
||||
title: 'Birds',
|
||||
tags: ['birds', 'owl', 'parrot'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2016/11/18/12/14/owl-1834152_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/05/26/04/19/macaw-1416388_1280.jpg'
|
||||
]
|
||||
},
|
||||
flowers: {
|
||||
title: 'Flowers',
|
||||
tags: ['flowers', 'blossom', 'beauty'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2018/09/06/23/37/hydrangea-3659614_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/04/12/18/19/carnation-1325012_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2017/06/06/19/18/rose-2378156_1280.jpg'
|
||||
]
|
||||
},
|
||||
coffee: {
|
||||
title: 'Coffee',
|
||||
tags: ['coffee', 'cup'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/03/30/21/59/coffee-beans-1291656_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2018/01/31/09/57/coffee-3120750_1280.jpg',
|
||||
]
|
||||
}
|
||||
}
|
||||
function imagesLength(length) {
|
||||
return `${length} image${length > 1 ? 's' : ''}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="albums-container">
|
||||
{#each Object.entries(albums) as [albumKey, album] (albumKey)}
|
||||
<div class="album-container">
|
||||
<Carousel
|
||||
let:showPrevPage
|
||||
let:showNextPage
|
||||
>
|
||||
<div slot="prev" class="album-arrow album-arrow-prev" on:click={showPrevPage}>
|
||||
<i />
|
||||
</div>
|
||||
{#each album.images as imageSrc, imageIndex (imageSrc)}
|
||||
<Image src={imageSrc} alt={album.title} />
|
||||
{/each}
|
||||
<div slot="next" class="album-arrow album-arrow-next" on:click={showNextPage}>
|
||||
<i />
|
||||
</div>
|
||||
</Carousel>
|
||||
<div class="">
|
||||
<span class="album-title">{album.title}</span>
|
||||
<span class="album-size">{imagesLength(album.images.length)}</span>
|
||||
<div class="album-tags-container">
|
||||
{#each album.tags as tag (tag)}
|
||||
<span class="album-tag">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.albums-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.album-container {
|
||||
width: 250px;
|
||||
padding: 10px;
|
||||
background-color: #c6c6c6;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.album-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.album-size {
|
||||
font-size: 10px;
|
||||
color: #585858;
|
||||
}
|
||||
.album-tag {
|
||||
background-color: #8f8f8f;
|
||||
border-radius: 5px;
|
||||
padding: 1px 5px;
|
||||
color: #ffffff;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
}
|
||||
.album-tag:not(:last-child) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.album-arrow {
|
||||
width: 20px;
|
||||
background-color: #000000;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
transition: opacity 150ms ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.album-arrow > i{
|
||||
border: solid #1e1e1e;
|
||||
border-width: 0 5px 5px 0;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.album-container:hover .album-arrow {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.album-arrow-prev {
|
||||
left: 0;
|
||||
}
|
||||
.album-arrow-prev > i {
|
||||
transform: rotate(135deg);
|
||||
right: -4px;
|
||||
}
|
||||
.album-arrow-next {
|
||||
right: 0;
|
||||
}
|
||||
.album-arrow-next > i {
|
||||
transform: rotate(-45deg);
|
||||
left: -4px;
|
||||
}
|
||||
</style>
|
||||
22
src/docs/AlbumsPreview/Image.svelte
Normal file
22
src/docs/AlbumsPreview/Image.svelte
Normal file
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
export let src
|
||||
export let alt
|
||||
</script>
|
||||
|
||||
<div class="image-container">
|
||||
<img {src} {alt} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Carousel from './Carousel.svx'
|
||||
import '../../node_modules/prismjs/themes/prism.css'
|
||||
import '../../node_modules/prismjs/themes/prism-tomorrow.css'
|
||||
import './global.css'
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,17 +2,18 @@
|
||||
import _ from 'lodash'
|
||||
import Carousel from '../components/Carousel/Carousel.svelte'
|
||||
import Color from './Color.svelte'
|
||||
import AlbumsPreview from './AlbumsPreview/AlbumsPreview.svelte'
|
||||
|
||||
const colors = [
|
||||
{ color: '#e5f9f0', text: '#e5f9f0' },
|
||||
{ color: '#ccf3e2', text: '#ccf3e2' },
|
||||
{ color: '#b2edd3', text: '#b2edd3' },
|
||||
{ color: '#99e7c5', text: '#99e7c5' },
|
||||
{ color: '#7fe1b7', text: '#7fe1b7' },
|
||||
{ color: '#66dba8', text: '#66dba8' },
|
||||
{ color: '#4cd59a', text: '#4cd59a' },
|
||||
{ color: '#32cf8b', text: '#32cf8b' },
|
||||
{ color: '#19c97d', text: '#19c97d' },
|
||||
{ color: '#85d78b', text: '#85d78b' },
|
||||
{ color: '#71d077', text: '#71d077' },
|
||||
{ color: '#5dca64', text: '#5dca64' },
|
||||
{ color: '#49c351', text: '#49c351' },
|
||||
{ color: '#35bd3e', text: '#35bd3e' },
|
||||
{ color: '#2faa37', text: '#2faa37' },
|
||||
{ color: '#2a9731', text: '#2a9731' },
|
||||
{ color: '#25842b', text: '#25842b' },
|
||||
{ color: '#1f7125', text: '#1f7125' },
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -54,4 +55,6 @@
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
## Albums preview or Marketplace item pictures
|
||||
|
||||
<AlbumsPreview />
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
<div class="docs__main-layout__content-container">
|
||||
<div class="docs__main-layout__content-inner-container">
|
||||
<slot></slot>
|
||||
<div class="docs__main-layout__main-container">
|
||||
<div class="docs__main-layout__content-container">
|
||||
<div class="docs__main-layout__content-inner-container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.docs__main-layout__main-container {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.docs__main-layout__content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -3,7 +3,7 @@ html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
Reference in New Issue
Block a user