mirrors
/
sakura
mirror of https://github.com/mashirozx/sakura.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add flex box gap polyfill

next
mashirozx 2021-07-29 00:01:45 +08:00
parent 1d97b87a69
commit eba002c503
25 changed files with 1299 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.postcssrc.js
View File

@ -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 100644
View File

@ -0,0 +1 @@
node_modules

10
.stylelintrc.json 100644
View 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
View File

@ -1,4 +1,5 @@
{
"stylelint.enable": false,
"php-docblocker.returnGap": true,
"php-docblocker.qualifyClassNames": true,
"php-docblocker.author": {

2
app/functions.php
View File

@ -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

9
package.json
View File

@ -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"
}
}

4
src/admin/Core.vue
View File

@ -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>

46
src/admin/components/MediaPicker.vue
View File

@ -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;

62
src/components/cards/postThumbCards/PostThumbCardClassic.vue
View File

@ -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 {

2
src/components/cards/postThumbCards/PostThumbCardIndex.vue
View File

@ -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">

30
src/components/cards/postThumbCards/PostThumbCardMobile.vue
View File

@ -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;

123
src/components/content/components/FeatureImage.vue
View File

@ -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 {
}
}
}
}

3
src/components/content/components/comment/CommentListItem.vue
View File

@ -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');
}
}
}

3
src/components/content/components/comment/Composer.vue
View File

@ -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;

5
src/components/loader/BookLoader.vue
View File

@ -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;

238
src/components/messages/MessageNormal.vue
View File

@ -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;
}
}
}
}

3
src/components/pagination/Pagination.vue
View File

@ -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;

36
src/layouts/components/cover/Cover.vue
View File

@ -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;
}
}
}
}

40
src/layouts/components/footer/Footer.vue
View File

@ -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>

4
src/layouts/components/header/HeaderMobile.vue
View File

@ -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;

32
src/layouts/components/header/NavDrawer.vue
View File

@ -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;

2
src/store/messages.ts
View File

@ -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 100644
View 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.";
}
}

12
vite.config.ts
View File

@ -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: {

899
yarn.lock
View File

File diff suppressed because it is too large Load Diff