mirror of
https://github.com/mashirozx/sakura.git
synced 2024-11-13 10:28:13 +08:00
Add flex box gap polyfill
This commit is contained in:
parent
1d97b87a69
commit
eba002c503
@ -1,5 +1,8 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
module.exports = ({ env, options }) => ({
|
||||
...options,
|
||||
plugins: [
|
||||
require('autoprefixer')({}),
|
||||
// require('flex-gap-polyfill')() // bugly with vite
|
||||
// require('stylelint')({}), //
|
||||
],
|
||||
})
|
||||
|
||||
1
.stylelintignore
Normal file
1
.stylelintignore
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
10
.stylelintrc.json
Normal file
10
.stylelintrc.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"plugins": [
|
||||
"stylelint-scss"
|
||||
],
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"rule-empty-line-before": "never",
|
||||
"indentation": 2
|
||||
}
|
||||
}
|
||||
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -1,4 +1,5 @@
|
||||
{
|
||||
"stylelint.enable": false,
|
||||
"php-docblocker.returnGap": true,
|
||||
"php-docblocker.qualifyClassNames": true,
|
||||
"php-docblocker.author": {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
define('SAKURA_VERSION', wp_get_theme()->get('Version'));
|
||||
define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));
|
||||
|
||||
define('SAKURA_DEVEPLOMENT', false);
|
||||
define('SAKURA_DEVEPLOMENT', true);
|
||||
define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');
|
||||
|
||||
// PHP loaders
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
"vue-router": "^4.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@amatlash/vite-plugin-stylelint": "^1.1.1",
|
||||
"@formatjs/cli": "^4.2.27",
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
"@types/crypto-js": "^4.0.1",
|
||||
@ -92,11 +93,15 @@
|
||||
"eslint-plugin-formatjs": "^2.17.1",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.13.0",
|
||||
"flex-gap-polyfill": "^4.0.6",
|
||||
"jest": "^27.0.6",
|
||||
"nodemon": "^2.0.12",
|
||||
"postcss-import": "^14.0.2",
|
||||
"prettier": "^2.3.2",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-scss": "^3.20.1",
|
||||
"svgo": "^2.3.1",
|
||||
"ts-jest": "^27.0.3",
|
||||
"type-fest": "^1.2.2",
|
||||
@ -109,7 +114,7 @@
|
||||
},
|
||||
"engines": {
|
||||
"npm": "please-use-yarn",
|
||||
"yarn": ">= 1.22.10",
|
||||
"node": ">= 14.17.1"
|
||||
"yarn": ">= 1.22.0",
|
||||
"node": ">= 14.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,6 +147,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
|
||||
::v-deep() {
|
||||
@import 'swiper/swiper';
|
||||
}
|
||||
@ -211,9 +213,9 @@ export default defineComponent({
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
width: calc(100% - 24px);
|
||||
@include polyfills.flex-gap(12px, 'row wrap');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,27 @@
|
||||
<template>
|
||||
<div class="picker__container">
|
||||
<div class="row__wrapper--input">
|
||||
<div class="input__wrapper">
|
||||
<OutlinedInput v-model:content="userInput" label="Input remote URL here"></OutlinedInput>
|
||||
</div>
|
||||
<div class="button__wrapper" @click="add">
|
||||
<NormalButton icon="fas fas fa-link" context="Add" :contained="true"></NormalButton>
|
||||
</div>
|
||||
<div class="button__wrapper" @click="open">
|
||||
<NormalButton icon="fas fa-box-open" context="Pick" :contained="true"></NormalButton>
|
||||
<div class="flex-box">
|
||||
<div class="row__wrapper--input">
|
||||
<div class="input__wrapper">
|
||||
<OutlinedInput v-model:content="userInput" label="Input remote URL here"></OutlinedInput>
|
||||
</div>
|
||||
<div class="button__wrapper" @click="add">
|
||||
<NormalButton icon="fas fas fa-link" context="Add" :contained="true"></NormalButton>
|
||||
</div>
|
||||
<div class="button__wrapper" @click="open">
|
||||
<NormalButton icon="fas fa-box-open" context="Pick" :contained="true"></NormalButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__wrapper--preview">
|
||||
<div class="image__box" v-for="(item, index) in selection" :key="index">
|
||||
<div class="image__wrapper">
|
||||
<Image :src="item.url" :avatar="false" :draggable="false"></Image>
|
||||
</div>
|
||||
<div class="delete__button" @click="del(index)">
|
||||
<span><i class="fas fa-trash-alt"></i></span>
|
||||
<div class="flex-box">
|
||||
<div class="row__wrapper--preview">
|
||||
<div class="image__box" v-for="(item, index) in selection" :key="index">
|
||||
<div class="image__wrapper">
|
||||
<Image :src="item.url" :avatar="false" :draggable="false"></Image>
|
||||
</div>
|
||||
<div class="delete__button" @click="del(index)">
|
||||
<span><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,23 +154,24 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../variables';
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.picker__container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'column nowrap');
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
> .row__wrapper {
|
||||
> .flex-box > .row__wrapper {
|
||||
&--input {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'row nowrap');
|
||||
> .input__wrapper {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
@ -177,6 +182,7 @@ export default defineComponent({
|
||||
@media screen and (max-width: variables.$small-mobile-max-width) {
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
@include polyfills.flex-gap(12px, 'row wrap');
|
||||
> .input__wrapper {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@ -187,7 +193,7 @@ export default defineComponent({
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'row wrap');
|
||||
> .image__box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@ -5,32 +5,32 @@
|
||||
<div class="thumbnail__wrapper" @click="handleViewPostDetailEvent">
|
||||
<Image
|
||||
class="image"
|
||||
:src="data.featureImage.thumbnail"
|
||||
:alt="data.title"
|
||||
:src="$props.data.featureImage.thumbnail"
|
||||
:alt="$props.data.title"
|
||||
placeholder="https://via.placeholder.com/1024x768"
|
||||
:draggable="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="details__wrapper">
|
||||
<div class="row__wrapper--date">
|
||||
<span><i class="far fa-clock"></i> {{ data.publistTime }}</span>
|
||||
<span><i class="far fa-clock"></i> {{ $props.data.publistTime }}</span>
|
||||
</div>
|
||||
<div class="row__wrapper--title" @click="handleViewPostDetailEvent">
|
||||
<span>{{ data.title }}</span>
|
||||
<span>{{ $props.data.title }}</span>
|
||||
</div>
|
||||
<div class="row__wrapper--info">
|
||||
<div class="column__wrapper--read_count">
|
||||
<span><i class="fab fa-hotjar"></i> {{ data.readCount }}</span>
|
||||
<span><i class="fab fa-hotjar"></i> {{ $props.data.readCount }}</span>
|
||||
</div>
|
||||
<div class="column__wrapper--comment_count">
|
||||
<span> <i class="far fa-comment-dots"></i> {{ data.commentCount }}</span>
|
||||
<span> <i class="far fa-comment-dots"></i> {{ $props.data.commentCount }}</span>
|
||||
</div>
|
||||
<div class="column__wrapper--word_count">
|
||||
<span><i class="fas fa-pen-nib"></i> {{ data.wordCount }}</span>
|
||||
<span><i class="fas fa-pen-nib"></i> {{ $props.data.wordCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__wrapper--abstruct">
|
||||
<span>{{ data.excerpt }} </span>
|
||||
<span>{{ $props.data.excerpt }} </span>
|
||||
</div>
|
||||
<!-- <div class="row__wrapper--tags">
|
||||
<div class="tags__container">
|
||||
@ -76,16 +76,11 @@ export default defineComponent({
|
||||
defaultMessage: 'Read More',
|
||||
})
|
||||
|
||||
const data = props.data
|
||||
|
||||
const handleViewPostDetailEvent = () => {
|
||||
if (data) {
|
||||
linkHandler.handleClickLink({ url: data.value?.link ?? '', router, target: '_blank' })
|
||||
}
|
||||
linkHandler.handleClickLink({ url: props.data?.link ?? '', router, target: '_blank' })
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
buttonContext,
|
||||
handleViewPostDetailEvent,
|
||||
setContentRef,
|
||||
@ -98,6 +93,7 @@ export default defineComponent({
|
||||
@use '@/styles/mixins/text';
|
||||
@use '@/styles/mixins/tags';
|
||||
// @use '@/styles/mixins/skeleton';
|
||||
@use '@/styles/mixins/polyfills';
|
||||
|
||||
.card__container {
|
||||
// TODO: sizing in parent
|
||||
@ -189,25 +185,25 @@ export default defineComponent({
|
||||
@include text.line-number-limit(3);
|
||||
}
|
||||
}
|
||||
// &--tags {
|
||||
// max-height: 16px;
|
||||
// overflow: hidden;
|
||||
// align-items: flex-start;
|
||||
// .tags__container {
|
||||
// display: flex;
|
||||
// flex-flow: row wrap;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// gap: 12px;
|
||||
// .tag__wrapper {
|
||||
// display: flex;
|
||||
// flex-flow: row nowrap;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// @include tags.tag-style;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
&--tags {
|
||||
max-height: 16px;
|
||||
overflow: hidden;
|
||||
align-items: flex-start;
|
||||
.tags__container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@include polyfills.flex-gap(12px, 'row wrap');
|
||||
.tag__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@include tags.tag-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--button {
|
||||
justify-content: flex-end;
|
||||
.button__wrapper {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<PostThumbCardMobile v-if="isMobile" :data="data" :type="$props.type"></PostThumbCardMobile>
|
||||
<PostThumbCardClassic v-else :data="data"></PostThumbCardClassic>
|
||||
<PostThumbCardClassic v-else :data="data" :type="$props.type"></PostThumbCardClassic>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="card__container">
|
||||
<div class="row__wrapper--thumbnail">
|
||||
<div class="row__wrapper--thumbnail" @click="handleViewPostDetailEvent">
|
||||
<Image
|
||||
class="image"
|
||||
:src="data.featureImage.thumbnail"
|
||||
:alt="data.title"
|
||||
:src="$props.data.featureImage.thumbnail"
|
||||
:alt="$props.data.title"
|
||||
placeholder="https://via.placeholder.com/1024x768"
|
||||
:draggable="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="row__wrapper--title">
|
||||
<span>{{ data.title }}</span>
|
||||
<div class="row__wrapper--title" @click="handleViewPostDetailEvent">
|
||||
<span>{{ $props.data.title }}</span>
|
||||
</div>
|
||||
<div class="row__wrapper--statistics">
|
||||
<div class="column__wrapper--read_count">
|
||||
<span><i class="fab fa-hotjar"></i> {{ data.readCount }}</span>
|
||||
<span><i class="fab fa-hotjar"></i> {{ $props.data.readCount }}</span>
|
||||
</div>
|
||||
<div class="column__wrapper--comment_count">
|
||||
<span> <i class="far fa-comment-dots"></i> {{ data.commentCount }}</span>
|
||||
<span> <i class="far fa-comment-dots"></i> {{ $props.data.commentCount }}</span>
|
||||
</div>
|
||||
<div class="column__wrapper--word_count">
|
||||
<span><i class="fas fa-pen-nib"></i> {{ data.wordCount }}</span>
|
||||
<span><i class="fas fa-pen-nib"></i> {{ $props.data.wordCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__wrapper--abstract">
|
||||
<span>{{ data.excerpt }} </span>
|
||||
<span>{{ $props.data.excerpt }} </span>
|
||||
</div>
|
||||
<div class="row__wrapper--tags">
|
||||
<div class="tags__container">
|
||||
@ -63,16 +63,11 @@ export default defineComponent({
|
||||
defaultMessage: 'Read More',
|
||||
})
|
||||
|
||||
const data = props.data
|
||||
|
||||
const handleViewPostDetailEvent = () => {
|
||||
if (data) {
|
||||
linkHandler.handleClickLink({ url: data.value?.link ?? '', router, target: '_blank' })
|
||||
}
|
||||
linkHandler.handleClickLink({ url: props.data?.link ?? '', router, target: '_blank' })
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
buttonContext,
|
||||
handleViewPostDetailEvent,
|
||||
}
|
||||
@ -83,6 +78,7 @@ export default defineComponent({
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/text';
|
||||
@use '@/styles/mixins/tags';
|
||||
@use '@/styles/mixins/polyfills';
|
||||
|
||||
.card__container {
|
||||
width: 100%;
|
||||
@ -90,7 +86,7 @@ export default defineComponent({
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'column nowrap');
|
||||
> * {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
@ -107,7 +103,7 @@ export default defineComponent({
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'row wrap');
|
||||
.tag__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
@ -13,24 +13,36 @@
|
||||
<span>{{ $props.data.title }}</span>
|
||||
</div>
|
||||
<div class="row__wrapper--info">
|
||||
<div class="column__wrapper--avatar">
|
||||
<Image
|
||||
:src="$props.data.author.avatar['96']"
|
||||
:avatar="true"
|
||||
:alt="$props.data.author.nickname"
|
||||
></Image>
|
||||
<div class="flex-box">
|
||||
<div class="column__wrapper--avatar">
|
||||
<div class="image__wrapper">
|
||||
<Image
|
||||
:src="$props.data.author.avatar['96']"
|
||||
:avatar="true"
|
||||
:alt="$props.data.author.nickname"
|
||||
></Image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column__wrapper--author">
|
||||
<span>{{ $props.data.author.nickname }}</span>
|
||||
<div class="flex-box">
|
||||
<div class="column__wrapper--author">
|
||||
<span>{{ $props.data.author.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column__wrapper--publish">
|
||||
<span>{{ $props.data.publistTime }}</span>
|
||||
<div class="flex-box">
|
||||
<div class="column__wrapper--publish">
|
||||
<span>{{ $props.data.publistTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column__wrapper--words">
|
||||
<span>{{ $props.data.wordCount }}</span>
|
||||
<div class="flex-box">
|
||||
<div class="column__wrapper--words">
|
||||
<span>{{ $props.data.wordCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column__wrapper--reads">
|
||||
<span>{{ $props.data.readCount }}</span>
|
||||
<div class="flex-box">
|
||||
<div class="column__wrapper--reads">
|
||||
<span>{{ $props.data.readCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,6 +74,7 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/text';
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.feature-image__container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
@ -103,8 +116,8 @@ export default defineComponent({
|
||||
line-height: 48px;
|
||||
font-size: xx-large;
|
||||
color: #ffffff;
|
||||
@include text.line-number-limit(1);
|
||||
@include text.text-shadow-offset;
|
||||
// @include text.line-number-limit(1);
|
||||
// @include text.text-shadow-offset;
|
||||
}
|
||||
}
|
||||
&--info {
|
||||
@ -113,50 +126,52 @@ export default defineComponent({
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
gap: 6px;
|
||||
> * {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
&:not(:first-child):not(:last-child) {
|
||||
&::after {
|
||||
content: '·';
|
||||
@include polyfills.flex-gap(6px, 'row nowrap');
|
||||
> .flex-box {
|
||||
> * {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include polyfills.flex-gap(6px, 'row nowrap');
|
||||
span {
|
||||
line-height: 20px;
|
||||
font-size: medium;
|
||||
color: #ffffff;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
span {
|
||||
line-height: 20px;
|
||||
font-size: medium;
|
||||
color: #ffffff;
|
||||
text-transform: lowercase;
|
||||
&:not(:first-child):not(:last-child) {
|
||||
> * {
|
||||
&::after {
|
||||
content: '·';
|
||||
line-height: 20px;
|
||||
font-size: medium;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.column__wrapper {
|
||||
&--avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 6px;
|
||||
// .avatar {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// }
|
||||
}
|
||||
&--author {
|
||||
}
|
||||
&--publish {
|
||||
}
|
||||
&--words {
|
||||
}
|
||||
&--reads {
|
||||
.column__wrapper {
|
||||
&--avatar {
|
||||
flex: 0 0 auto;
|
||||
> .image__wrapper {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
&--author {
|
||||
}
|
||||
&--publish {
|
||||
}
|
||||
&--words {
|
||||
}
|
||||
&--reads {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,6 +51,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
@use '@/styles/markdown/github';
|
||||
.item__container {
|
||||
width: 100%;
|
||||
@ -105,7 +106,7 @@ export default defineComponent({
|
||||
font-size: small;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'row wrap');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,6 +138,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.composer__container {
|
||||
--mdc-theme-primary: orange;
|
||||
width: 100%;
|
||||
@ -167,7 +168,7 @@ export default defineComponent({
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'row nowrap');
|
||||
.column__wrapper {
|
||||
&--avatar {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@ -27,15 +27,16 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.loader__container {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'column nowrap');
|
||||
.text {
|
||||
text-align: center;
|
||||
color: #6c7486;
|
||||
|
||||
@ -1,34 +1,36 @@
|
||||
<template>
|
||||
<div class="item__container mdc-card mdc-card--outlined">
|
||||
<div class="item__container mdc-card mdc-card--outlined" :type="$props.message.type">
|
||||
<div class="item__content">
|
||||
<div class="column__wrapper--icon">
|
||||
<span><i class="fas fa-info-circle"></i></span>
|
||||
</div>
|
||||
<div class="column__wrapper--content">
|
||||
<div class="row__wrapper--title">
|
||||
<div class="title__content--message">
|
||||
<div class="title">
|
||||
<span>{{ $props.message.title }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="detailed"
|
||||
:style="{ height: shouldShowDetail ? `${expandContentHeight}px` : '0px' }"
|
||||
>
|
||||
<div :class="['content', { show: shouldShowDetail }]" :ref="setExpandContentRef">
|
||||
<span>{{ $props.message.detail }}</span>
|
||||
<div class="flex-box">
|
||||
<div class="column__wrapper--icon">
|
||||
<span><i :class="icon"></i></span>
|
||||
</div>
|
||||
<div class="column__wrapper--content">
|
||||
<div class="row__wrapper--title">
|
||||
<div class="title__content--message">
|
||||
<div class="title">
|
||||
<span>{{ $props.message.title }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="detailed"
|
||||
:style="{ height: shouldShowDetail ? `${expandContentHeight}px` : '0px' }"
|
||||
>
|
||||
<div :class="['content', { show: shouldShowDetail }]" :ref="setExpandContentRef">
|
||||
<span>{{ $props.message.detail }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="$props.message.detail"
|
||||
:class="['title__content--collapse', { reverse: shouldShowDetail }]"
|
||||
:title="msg.showDetails"
|
||||
@click="handleShowDetailClick"
|
||||
>
|
||||
<i class="fas fa-angle-double-down"></i>
|
||||
</div>
|
||||
<div class="title__content--close" :title="msg.close" @click="handleCloseMessageEvent">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
<div
|
||||
v-if="$props.message.detail"
|
||||
:class="['title__content--collapse', { reverse: shouldShowDetail }]"
|
||||
:title="msg.showDetails"
|
||||
@click="handleShowDetailClick"
|
||||
>
|
||||
<i class="fas fa-angle-double-down"></i>
|
||||
</div>
|
||||
<div class="title__content--close" :title="msg.close" @click="handleCloseMessageEvent">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,6 +64,21 @@ export default defineComponent({
|
||||
}),
|
||||
}
|
||||
|
||||
const icon = computed(() => {
|
||||
switch (props.message?.type) {
|
||||
case 'success':
|
||||
return 'fas fa-check-circle'
|
||||
case 'warning':
|
||||
return 'fas fa-exclamation-circle'
|
||||
case 'info':
|
||||
return 'fas fa-info-circle'
|
||||
case 'error':
|
||||
return 'fas fa-exclamation-triangle'
|
||||
default:
|
||||
return 'fas fa-info-circle'
|
||||
}
|
||||
})
|
||||
|
||||
const { messageList, removeMessage } = useInjector(messages)
|
||||
|
||||
const handleCloseMessageEvent = () => {
|
||||
@ -83,6 +100,7 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
msg,
|
||||
icon,
|
||||
handleCloseMessageEvent,
|
||||
shouldShowDetail,
|
||||
handleShowDetailClick,
|
||||
@ -95,87 +113,105 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "sass:color";
|
||||
@use '@/styles/mixins/polyfills';
|
||||
|
||||
.item__container {
|
||||
--text-color: #3c434a;
|
||||
--text-color-lighter-30: color.adjust(#3c434a, $lightness: 30%);
|
||||
--background-color: #ffffff;
|
||||
&[type='success'] {
|
||||
--highlight-color: #00b74a;
|
||||
}
|
||||
&[type='warning'] {
|
||||
--highlight-color: #ffa900;
|
||||
}
|
||||
&[type='info'] {
|
||||
--highlight-color: #39c0ed;
|
||||
}
|
||||
&[type='error'] {
|
||||
--highlight-color: #f93154; // danger
|
||||
}
|
||||
width: var(--width);
|
||||
background: #ffffff;
|
||||
border-left: 3px solid #34d058;
|
||||
background: var(--background-color);
|
||||
border-left: 3px solid var(--highlight-color, #757575);
|
||||
> .item__content {
|
||||
width: calc(100% - 24px);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
> .column__wrapper {
|
||||
&--icon {
|
||||
flex: 0 0 auto;
|
||||
span {
|
||||
color: #34d058;
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
&--content {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
> .row__wrapper {
|
||||
&--title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
> * span {
|
||||
line-height: 16px;
|
||||
}
|
||||
> .title__content {
|
||||
&--message {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
> .title {
|
||||
span {
|
||||
color: #3c434a;
|
||||
}
|
||||
}
|
||||
> .detailed {
|
||||
transition: height 0.5s cubic-bezier(0, 0, 0.3, 1);
|
||||
overflow: hidden;
|
||||
> .content {
|
||||
padding-top: 6px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
|
||||
&.show {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
span {
|
||||
color: color.adjust(#3c434a, $lightness: 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--collapse {
|
||||
flex: 0 0 auto;
|
||||
transform: scaleY(1);
|
||||
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
|
||||
&.reverse {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
&--close {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
> .flex-box {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: space-between;
|
||||
align-items: flex-start;
|
||||
@include polyfills.flex-gap(12px, 'row nowrap');
|
||||
> .column__wrapper {
|
||||
&--icon {
|
||||
flex: 0 0 auto;
|
||||
span {
|
||||
color: var(--highlight-color, #757575);
|
||||
font-size: medium;
|
||||
}
|
||||
&--buttons {
|
||||
align-self: flex-end;
|
||||
}
|
||||
&--content {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
> .row__wrapper {
|
||||
&--title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
@include polyfills.flex-gap(12px, 'row nowrap');
|
||||
> * span {
|
||||
line-height: 16px;
|
||||
}
|
||||
> .title__content {
|
||||
&--message {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
> .title {
|
||||
span {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
> .detailed {
|
||||
transition: height 0.5s cubic-bezier(0, 0, 0.3, 1);
|
||||
overflow: hidden;
|
||||
> .content {
|
||||
padding-top: 6px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
|
||||
&.show {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
span {
|
||||
color: var(--text-color-lighter-30);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--collapse {
|
||||
flex: 0 0 auto;
|
||||
transform: scaleY(1);
|
||||
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
|
||||
&.reverse {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
&--close {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--buttons {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,13 +104,14 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.pagination__container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@include polyfills.flex-gap(6px, 'row wrap');
|
||||
.items__wrapper {
|
||||
.item__wrapper {
|
||||
--mdc-typography-button-font-size: 13px;
|
||||
|
||||
@ -33,12 +33,14 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="social-media__wrapper">
|
||||
<div
|
||||
class="social-media-item__wrapper"
|
||||
v-for="(item, index) in socialMedia"
|
||||
:key="index"
|
||||
>
|
||||
<UiIcon :name="`social.${item.name}`"></UiIcon>
|
||||
<div class="social-media__content">
|
||||
<div
|
||||
class="social-media-item__wrapper"
|
||||
v-for="(item, index) in socialMedia"
|
||||
:key="index"
|
||||
>
|
||||
<UiIcon :name="`social.${item.name}`"></UiIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -154,6 +156,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
$mobile-view-max-width: 800px;
|
||||
.cover__container {
|
||||
width: 100%;
|
||||
@ -268,17 +271,20 @@ $mobile-view-max-width: 800px;
|
||||
.social-media__wrapper {
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
.social-media-item__wrapper {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.social-media__content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include polyfills.flex-gap(20px, 'row wrap');
|
||||
.social-media-item__wrapper {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<div class="footer__container">
|
||||
<div class="row__wrapper">
|
||||
<div class="sakura-icon__wrapper fa-spin">
|
||||
<ui-icon name="ic.sakura"></ui-icon>
|
||||
<div class="footer__content">
|
||||
<div class="row__wrapper">
|
||||
<div class="sakura-icon__wrapper fa-spin">
|
||||
<ui-icon name="ic.sakura"></ui-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__wrapper">
|
||||
<span v-html="$props.footer1"></span>
|
||||
</div>
|
||||
<div class="row__wrapper">
|
||||
<span v-html="$props.footer2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__wrapper">
|
||||
<span v-html="$props.footer1"></span>
|
||||
</div>
|
||||
<div class="row__wrapper">
|
||||
<span v-html="$props.footer2"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -33,20 +35,24 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.footer__container {
|
||||
width: 100%;
|
||||
padding: 36px 0 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.sakura-icon__wrapper {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
> .footer__content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include polyfills.flex-gap(12px, 'column nowrap');
|
||||
.sakura-icon__wrapper {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,7 +36,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @use 'sass:math';
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.nav__container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -121,7 +121,7 @@ export default defineComponent({
|
||||
flex-flow: row-reverse nowrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include polyfills.flex-gap(12px, 'row-reverse nowrap');
|
||||
> .logo__wrapper {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
<div class="drawer__container" :ref="setScrollContainerRef">
|
||||
<div class="drawer__content">
|
||||
<div class="row__wrapper--avatar">
|
||||
<Image
|
||||
src="https://view.moezx.cc/images/2021/06/13/d6b010a378d392d4633008b915f98ab1.md.png"
|
||||
placeholder=""
|
||||
:avatar="true"
|
||||
alt=""
|
||||
:draggable="false"
|
||||
></Image>
|
||||
<div class="image__wrapper">
|
||||
<Image
|
||||
src="https://view.moezx.cc/images/2021/06/13/d6b010a378d392d4633008b915f98ab1.md.png"
|
||||
placeholder=""
|
||||
:avatar="true"
|
||||
alt=""
|
||||
:draggable="false"
|
||||
></Image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__wrapper--signature">Hello world...</div>
|
||||
<div class="row__wrapper--social"> social</div>
|
||||
@ -115,6 +117,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/mixins/polyfills';
|
||||
.drawer__container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -125,14 +128,17 @@ export default defineComponent({
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
@include polyfills.flex-gap(24px, 'column nowrap');
|
||||
> .row__wrapper {
|
||||
&--avatar {
|
||||
margin-top: 50px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
.image__wrapper {
|
||||
margin-top: 50px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&--signature {
|
||||
text-align: center;
|
||||
|
||||
@ -16,7 +16,7 @@ export interface Message {
|
||||
export interface MessageOptions extends Omit<Message, 'id'> {}
|
||||
|
||||
export default function msg(): object {
|
||||
const [messageList, setMessageList]: [Ref<Message[]>, (arg: Message[]) => void] = useState([])
|
||||
const [messageList, setMessageList] = useState([] as Message[])
|
||||
|
||||
const addMessage = (state: typeof messageList, options: MessageOptions) => {
|
||||
const id = `message_${uniqueHash()}`
|
||||
|
||||
37
src/styles/mixins/_polyfills.scss
Normal file
37
src/styles/mixins/_polyfills.scss
Normal file
@ -0,0 +1,37 @@
|
||||
@use 'sass:math';
|
||||
@mixin _flex-gap($gap, $row: true) {
|
||||
$margin: math.div($gap, 2);
|
||||
$transform: -$margin;
|
||||
@if $row {
|
||||
margin-left: $transform;
|
||||
margin-right: $transform;
|
||||
} @else {
|
||||
margin-top: $transform;
|
||||
margin-bottom: $transform;
|
||||
}
|
||||
> * {
|
||||
@if $row {
|
||||
margin-left: $margin;
|
||||
margin-right: $margin;
|
||||
} @else {
|
||||
margin-top: $margin;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
|
||||
@if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
|
||||
@include _flex-gap($gap, true);
|
||||
} @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
|
||||
@include _flex-gap($gap, false);
|
||||
} @else if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
|
||||
@include _flex-gap($gap, true);
|
||||
@include _flex-gap($gap, false);
|
||||
} @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
|
||||
@include _flex-gap($gap, true);
|
||||
@include _flex-gap($gap, false);
|
||||
} @else {
|
||||
@error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
|
||||
// import legacy from '@vitejs/plugin-legacy'
|
||||
import path from 'path'
|
||||
import svgicon from 'vite-plugin-svgicon'
|
||||
// import viteStylelint from '@amatlash/vite-plugin-stylelint'
|
||||
|
||||
const target = process.env.APP_TARGET
|
||||
|
||||
@ -23,6 +24,7 @@ export default defineConfig({
|
||||
// legacy({
|
||||
// targets: ['defaults', 'not IE 11'],
|
||||
// }),
|
||||
// viteStylelint(), // bugly
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
@ -46,6 +48,7 @@ export default defineConfig({
|
||||
sourcemap: true,
|
||||
outDir: target === 'main' ? 'app/assets/main' : 'app/assets/admin',
|
||||
chunkSizeWarningLimit: 2048,
|
||||
// minify: false, // set false if use flex-gap-polyfill
|
||||
rollupOptions: {
|
||||
// external: ['vue'],
|
||||
input: [path.resolve(__dirname, target === 'main' ? 'src/main.ts' : 'src/admin/main.ts')],
|
||||
@ -59,7 +62,14 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['gsap', 'marked', 'gsap/ScrollTrigger', 'highlight.js', '@vueuse/core'],
|
||||
include: [
|
||||
'gsap',
|
||||
'marked',
|
||||
'gsap/ScrollTrigger',
|
||||
'highlight.js',
|
||||
'@vueuse/core',
|
||||
'perfect-scrollbar',
|
||||
],
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user