Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-11-01 15:35:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Element UI (#323)

Browse Source
This commit is contained in:
Soitora 2020-08-23 20:02:35 +02:00 committed by GitHub
parent 964a3f8ab1
commit 69d46b0c8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 309 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
package-lock.json generated
View File

@ -3664,6 +3664,14 @@
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true
},
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"requires": {
"babel-runtime": "6.x"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -3743,6 +3751,11 @@
"babylon": "^6.18.0"
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
},
"babel-loader": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
@ -3804,7 +3817,6 @@
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
@ -3813,8 +3825,7 @@
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
"dev": true
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
@ -5131,8 +5142,7 @@
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
"dev": true
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
},
"core-js-compat": {
"version": "3.6.5",
@ -5638,8 +5648,7 @@
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
"dev": true
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
},
"default-gateway": {
"version": "4.2.0",
@ -6025,6 +6034,19 @@
"integrity": "sha512-D4/3l5DpciddD92IDRtpLearQSGzly8FwBJv+nITvLH8YJrFabpDFe4yuiOJh2MS4/EsXqyQTXyw1toeYPtshQ==",
"dev": true
},
"element-ui": {
"version": "2.13.2",
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
"integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"elliptic": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
@ -10012,6 +10034,11 @@
"sort-keys": "^2.0.0"
}
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@ -11839,6 +11866,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@ -13216,6 +13248,11 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@ -14298,6 +14335,16 @@
"markdown-it-container": "^2.0.0"
}
},
"vuepress-plugin-element-ui": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vuepress-plugin-element-ui/-/vuepress-plugin-element-ui-1.1.0.tgz",
"integrity": "sha512-HUtB9SNmXaY8vQCZWCLUZxtRkvh+Ks+mRnUqEVsM4AJEQD6yCNN3osdKoO+zfyWdpq7Sei+tDaxlM0NOHiIbRQ==",
"dev": true,
"requires": {
"element-ui": "^2.13.0",
"markdown-it-container": "^2.0.0"
}
},
"vuepress-plugin-robots": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vuepress-plugin-robots/-/vuepress-plugin-robots-1.0.1.tgz",

2
package.json
View File

@ -30,10 +30,12 @@
"vuepress": "^1.5.3",
"vuepress-plugin-clean-urls": "^1.1.1",
"vuepress-plugin-container": "^2.1.4",
"vuepress-plugin-element-ui": "^1.1.0",
"vuepress-plugin-zooming": "^1.1.7"
},
"dependencies": {
"axios": "^0.19.2",
"element-ui": "^2.13.2",
"iso-639-1": "^2.1.4",
"lodash.groupby": "^4.6.0",
"lodash.sortby": "^4.7.0",

1
src/.vuepress/config.js
View File

@ -43,6 +43,7 @@ module.exports = {
"/help/contribution": sideBarConfig.contribution,
"/extensions": sideBarConfig.extensions,
"/forks": sideBarConfig.forks,
"/sandbox": sideBarConfig.sandbox,
},
},
plugins: pluginsConfig,

1
src/.vuepress/config/plugins.js
View File

@ -1,5 +1,6 @@
module.exports = [
["@vuepress/back-to-top"],
["element-ui"],
[
"vuepress-plugin-zooming",
{

10
src/.vuepress/config/sideBar.js
View File

@ -146,4 +146,14 @@ module.exports = {
path: "/extensions/",
},
],
sandbox: [
"/",
{
title: "Sandbox",
path: "/sandbox/",
collapsable: false,
sidebarDepth: 2,
children: ["/sandbox/element-ui"],
},
],
};

2
src/.vuepress/enhanceApp.js
View File

@ -6,6 +6,7 @@ import "vue-material-design-icons/styles.css";
import { VueAgile } from "vue-agile";
import VueSweetalert2 from "vue-sweetalert2";
import VueMoment from "vue-moment";
import Element from "element-ui";
import store from "./store";
@ -19,5 +20,6 @@ export default ({
Vue.component("Agile", VueAgile);
Vue.use(VueSweetalert2);
Vue.use(VueMoment);
Vue.use(Element);
Vue.mixin({ store });
};

33
src/.vuepress/styles/index.styl
View File

@ -177,3 +177,36 @@ font-feature-settings()
// Hotfix Mobile Dropdown
.sidebar .dropdown-wrapper .dropdown-title
pointer-events auto
// Fix weird header spacing
.theme-default-content:not(.custom) >
h2,
h3
margin-bottom .2rem !important
.el-collapse,
.el-tabs,
.el-alert,
.el-button,
.el-tag
margin-top 0.8rem !important
// Fix Element-UI styling
.el-divider__text,
.el-step__icon
background-color $backgroundColor !important
.el-collapse-item__header
background-color transparent !important
border-bottom 1px solid $borderColor
padding-left 10px
&.is-active
color $elementAccentColor
&:not(.is-active):hover
color $elementAccentColor
.el-collapse-item__wrap
background-color transparent !important
.el-collapse-item__content
padding-left 10px

4
src/.vuepress/styles/palette.styl
View File

@ -2,7 +2,6 @@
$accentColor = #2E84BF
$accentColorSecondary = #476582
$textColor = #2c3e50
$textColorLight = #4E6E8E
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
@ -11,6 +10,7 @@ $badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
$badgeVersionColor = #000000
$containerBackgroundColor = #f0f4f8
$backgroundColor = #FDFDFD
// Layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
@ -36,3 +36,5 @@ $syAccentColor = #BE0F6E
$discordAccentColor = #7289DA
$redditAccentColor = #FF5700
$githubAccentColor = #333333
// Element-UI
$elementAccentColor = #409EFF

13
src/sandbox/README.md Normal file
View File

@ -0,0 +1,13 @@
---
title: Sandbox
description: Sandbox playground for demonstrating and documenting how different website functions work for easier integration by contributors.
lang: en-US
sidebar: false
sitemap:
exclude: true
---
# Sandbox
Sandbox playground for demonstrating and documenting how different website functions work for easier integration by contributors.
- [Element-UI](element-ui.md)

189
src/sandbox/element-ui.md Normal file
View File

@ -0,0 +1,189 @@
---
title: Element-UI
description: Demonstrations of different Element-UI features.
lang: en-US
sitemap:
exclude: true
---
# Element-UI
View more by pressing the headers for the specified item.
## [Button](https://element.eleme.io/#/en-US/component/button)
<el-row>
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</el-row>
```html
<el-row>
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</el-row>
```
## [Link](https://element.eleme.io/#/en-US/component/link)
<div>
<el-link href="/sandbox/" target="_blank">default</el-link>
<el-link href="/download/" type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```html
<div>
<el-link href="/sandbox/" target="_blank">default</el-link>
<el-link href="/download/" type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```
## [Tag](https://element.eleme.io/#/en-US/component/tag)
<el-tag>Neutral</el-tag>
<el-tag type="success">Success</el-tag>
<el-tag type="info">Info</el-tag>
<el-tag type="warning">Warning</el-tag>
<el-tag type="danger">Danger</el-tag>
```html
<el-tag>Neutral</el-tag>
<el-tag type="success">Success</el-tag>
<el-tag type="info">Info</el-tag>
<el-tag type="warning">Warning</el-tag>
<el-tag type="danger">Danger</el-tag>
```
## [Alert](https://element.eleme.io/#/en-US/component/alert)
<el-alert type="success" title="Success alert!" :closable="false"></el-alert>
<el-alert type="info" title="Info alert!" :closable="false"></el-alert>
<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert>
<el-alert type="error" title="Error alert!" :closable="false"></el-alert>
<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert>
<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert>
<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert>
<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert>
```html
<el-alert type="success" title="Success alert!" :closable="false"></el-alert>
<el-alert type="info" title="Info alert!" :closable="false"></el-alert>
<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert>
<el-alert type="error" title="Error alert!" :closable="false"></el-alert>
<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert>
<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert>
<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert>
<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert>
```
## [Tabs](https://element.eleme.io/#/en-US/component/tabs)
:::: el-tabs
::: el-tab-pane label="Lorem ipsum"
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
:::
::: el-tab-pane label="Pellentesque"
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
:::
::::
```
:::: el-tabs
::: el-tab-pane label="Lorem ipsum"
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
:::
::: el-tab-pane label="Pellentesque"
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
:::
::::
```
## [Collapse](https://element.eleme.io/#/en-US/component/collapse)
:::: el-collapse
::: el-collapse-item title="Lorem ipsum"
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
:::
::: el-collapse-item title="Pellentesque"
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
:::
::::
```
:::: el-collapse
::: el-collapse-item title="Lorem ipsum"
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
:::
::: el-collapse-item title="Pellentesque"
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
:::
::::
```
## [Tooltip](https://element.eleme.io/#/en-US/component/tooltip)
### Text
<el-tooltip placement="top">
<div slot="content">First line<br/>Second line</div>
<span>Try hovering me!</span>
</el-tooltip>
```html
<el-tooltip placement="top">
<div slot="content">First line<br/>Second line</div>
<span>Try hovering me!</span>
</el-tooltip>
```
### Button
<el-tooltip placement="top">
<div slot="content">First line<br/>Second line</div>
<el-button type="primary" plain>Hover me!</el-button>
</el-tooltip>
```html
<el-tooltip placement="top">
<div slot="content">First line<br/>Second line</div>
<el-button type="primary" plain>Hover me!</el-button>
</el-tooltip>
```
## [Steps](https://element.eleme.io/#/en-US/component/steps)
### Step bar with icon
<el-steps :active="1">
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
```html
<el-steps :active="1">
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
```
### Step bar with description
<el-steps :active="2" finish-status="success">
<el-step title="Step 1" description="First you do this"></el-step>
<el-step title="Step 2" description="Then you do this"></el-step>
<el-step title="Step 3" description="Then you do that"></el-step>
</el-steps>
```html
<el-steps :active="2" finish-status="success">
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
</el-steps>
```