From 44d48182520da64d6ff9f51edd4e5727ed15315c Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 8 Sep 2018 15:11:12 +0900 Subject: [PATCH] Improve welcome page --- assets/about/drive.png | 3 + assets/about/post.png | 3 + assets/about/reaction.png | 3 + assets/about/ui.png | 3 + locales/ja-JP.yml | 13 + .../app/desktop/views/pages/welcome.vue | 468 +++++++++++------- 6 files changed, 307 insertions(+), 186 deletions(-) create mode 100644 assets/about/drive.png create mode 100644 assets/about/post.png create mode 100644 assets/about/reaction.png create mode 100644 assets/about/ui.png diff --git a/assets/about/drive.png b/assets/about/drive.png new file mode 100644 index 000000000..88cb0fabd --- /dev/null +++ b/assets/about/drive.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c8820f3b0a0f43cf215e45806dfd79a491fe4e4678c524a78ded38f6bb2d25d6 +size 112977 diff --git a/assets/about/post.png b/assets/about/post.png new file mode 100644 index 000000000..b5e76950b --- /dev/null +++ b/assets/about/post.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5a38a766d30c2d5189235d0b6da31da980a759470f199b5ee91310169ee10568 +size 352793 diff --git a/assets/about/reaction.png b/assets/about/reaction.png new file mode 100644 index 000000000..b75d8d06b --- /dev/null +++ b/assets/about/reaction.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:816b30f3c9f8bad032c24286bb6ddcc3c9174a0877cc22a8b11518b482f6ecc2 +size 24621 diff --git a/assets/about/ui.png b/assets/about/ui.png new file mode 100644 index 000000000..7a006124f --- /dev/null +++ b/assets/about/ui.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1804c7afdcbb61aca60f2f9450799eefb4394899abb1ee5facaa9ff59859b63f +size 128212 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 07d8e7f48..9404cd6ba 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -6,6 +6,19 @@ common: misskey: "A ⭐ of fediverse" about-title: "A ⭐ of fediverse." about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた分散マイクロブログSNSです。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。" + intro: + title: "Misskeyって？" + about: "Misskeyはオープンソースの分散型マイクロブログSNSです。リッチで高度にカスタマイズできるUI、投稿へのリアクション、ファイルを一元管理できるドライブなど、先進的な機能を揃えています。また、Fediverseと呼ばれるネットワークに接続できるため、他のSNSともやり取りできます。例えば、あなたが何か投稿すると、その投稿はMisskeyだけでなく他のSNSにも伝わります。ちょうどある惑星から他の惑星に電波を発信している様子をイメージしてください。" + features: "特徴" + rich-contents: "投稿" + rich-contents-desc: "自分の考え、話題の出来事、皆と共有したいことについて発信してください。必要であれば、様々な構文を使って投稿を装飾したり、好きな画像、動画などのファイルやアンケートを添付することもできます。" + reaction: "リアクション" + reaction-desc: "あなたの気持ちを伝える最も簡単な方法です。Misskeyは、他のユーザーの投稿に様々なリアクションを付けることができます。いちどMisskeyのリアクション機能を体験してしまうと、もう「いいね」の概念しか存在しないSNSには戻れなくなるかもしれません。" + ui: "インターフェース" + ui-desc: "どのようなUIが使いやすいかは人それぞれです。だから、Misskeyは自由度の高いUIを持っています。レイアウトやデザインを調整したり、カスタマイズ可能な様々なウィジェットを配置したりして、自分だけのホームを作ってください。" + drive: "ドライブ" + drive-desc: "以前投稿したことのある画像をまた投稿したくなったことはありませんか？もしくは、アップロードしたファイルをフォルダ分けして整理したくなったことはありませんか？Misskeyの根幹に組み込まれたドライブ機能によってそれらが解決します。ファイルの共有も簡単です。" + outro: "他にもMisskeyにしかない機能はまだまだあるので、ぜひあなた自身の目で確かめてください。Misskeyは分散型SNSなので、このインスタンスが気に入らなければ他のインスタンスを試すこともできます。それでは、GLHF!" adblock: detected: "広告ブロッカーを無効にしてください" warning: "Misskeyは広告を掲載していませんが、広告をブロックする機能が有効だと一部の機能が利用できなかったり、不具合が発生する場合があります。" diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue index 549d9175f..441ce890d 100644 --- a/src/client/app/desktop/views/pages/welcome.vue +++ b/src/client/app/desktop/views/pages/welcome.vue @@ -7,86 +7,128 @@ -
-
-
-

{{ name }}

-

- -
- {{ host }} - - - %fa:user% {{ stats.originalUsersCount | number }} - %fa:pencil-alt% {{ stats.originalNotesCount | number }} - -
- -

- -

- - | - -

- - -
-
- -
-
%fa:broadcast-tower% %i18n:@announcements%
-
-
-

-
-
-
-
- -
-
%fa:images% %i18n:@photos%
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+
+
- +

{{ name }}

+

+ +
+ {{ host }} - + + %fa:user% {{ stats.originalUsersCount | number }} + %fa:pencil-alt% {{ stats.originalNotesCount | number }} + +
+ +

+ %i18n:@about% + +

+ + | + +

+ +
-
-
%fa:comment-alt R% %i18n:@timeline%
-
- +
+
%fa:broadcast-tower% %i18n:@announcements%
+
+
+

+
+
-
-
%fa:info-circle% %i18n:@info%
+
+
%fa:images% %i18n:@photos%
-
-

Version: {{ meta.version }}

-

Maintainer: {{ meta.maintainer.name }}

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
%fa:comment-alt R% %i18n:@timeline%
+
+ +
+
+ +
+
%fa:info-circle% %i18n:@info%
+
+
+

Version: {{ meta.version }}

+

Maintainer: {{ meta.maintainer.name }}

+
-
+
+ + +
+

%i18n:common.intro.title%

+

+
+

%i18n:common.intro.features%

+
+
+

%i18n:common.intro.rich-contents%

+

+
+
+
+
+
+

%i18n:common.intro.reaction%

+

+
+
+
+
+
+

%i18n:common.intro.ui%

+

+
+
+
+
+
+

%i18n:common.intro.drive%

+

+
+
+
+
+

+
+
%i18n:@signup%
@@ -147,6 +189,10 @@ export default Vue.extend({ }, methods: { + about() { + this.$modal.show('about'); + }, + signup() { this.$modal.show('signup'); }, @@ -199,6 +245,54 @@ export default Vue.extend({ margin 0 48px font-size 1.5em +.v--modal-overlay.about + .v--modal-box.v--modal + margin 32px 0 + +.fpdezooorhntlzyeszemrsqdlgbysvxq + padding 64px + + > p:last-child + margin-bottom 0 + + > h1 + margin-top 0 + + > section + > h2 + border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05) + + > section + display grid + grid-template-rows 1fr + grid-template-columns 180px 1fr + gap 32px + margin-bottom 32px + padding-bottom 32px + border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05) + + &:nth-child(odd) + grid-template-columns 1fr 180px + + > .body + grid-column 1 + + > .image + grid-column 2 + + > .body + grid-row 1 + grid-column 2 + + > .image + grid-row 1 + grid-column 1 + + > img + display block + width 100% + height 100% + object-fit cover