Skip to content

Commit

Permalink
Updated for Example the notice with mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@YamiOdymel
YamiOdymel committed Apr 9, 2022
1 parent 050fff1 commit 6f41d49
Show file tree
Hide file tree
Showing 8 changed files with 123 additions and 12 deletions.
38 changes: 34 additions & 4 deletions cli/docs-builder/templates/assets/examples.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
background: var(--ts-gray-800);
color: var(--ts-gray-50);
border-radius: 0.4rem;
padding: 0.45rem 0.8rem;
padding: 0.4rem 0.8rem;
line-height: 1;
font-size: 13px;
font-weight: 500;
Expand All @@ -32,6 +32,33 @@
.文件內容-未完成標語-內容 {
}

.文件內容-電腦版設計 {
border: 1px solid var(--ts-gray-300);
color: var(--ts-gray-800);
font-size: 14px;
display: flex;
gap: 0.7rem;
padding: 0.3rem 0.7rem;
align-items: flex-start;
border-radius: 0.4rem;
margin: 0 auto;
margin-bottom: 2rem;
margin-top: -2rem;
}

.文件內容-電腦版設計-標題 {
background: var(--ts-gray-800);
color: var(--ts-gray-50);
border-radius: 0.4rem;
padding: 0.4rem 0.8rem;
line-height: 1;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}

.文件內容-電腦版設計-內容 {}

.文件內容-範例清單 {
display: block;
}
Expand Down Expand Up @@ -130,21 +157,24 @@
padding: 2rem 0 3rem;
}

.文件內容-未完成標語 {
.文件內容-未完成標語,
.文件內容-電腦版設計 {
display: block;
margin-top: 0;
padding-top: 0.7rem;
margin-bottom: 1.5rem;
}

.文件內容-未完成標語-標題 {
.文件內容-未完成標語-標題,
.文件內容-電腦版設計-標題 {
display: inline-block;
margin-right: 0.5rem;
margin-bottom: 0.25rem;
padding: 0.35rem 0.8rem;
}

.文件內容-未完成標語-內容 {
.文件內容-未完成標語-內容,
.文件內容-電腦版設計-內容 {
display: inline;
}

Expand Down
5 changes: 5 additions & 0 deletions cli/docs-builder/templates/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,11 @@
<div class="文件內容-未完成標語-內容">{{ "Example_WIP_Description" | i18n }}</div>
</div>-->

<div class="文件內容-電腦版設計">
<div class="文件內容-電腦版設計-標題">{{ "Example_DesignedForDesktop" | i18n }}</div>
<div class="文件內容-電腦版設計-內容">{{ "Example_DesignedForDesktop_Description" | i18n }}</div>
</div>

<div class="文件內容-範例清單">
{{ range .Examples }}
<div class="文件內容-範例清單-段落">
Expand Down
38 changes: 34 additions & 4 deletions docs/en-us/assets/examples.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
background: var(--ts-gray-800);
color: var(--ts-gray-50);
border-radius: 0.4rem;
padding: 0.45rem 0.8rem;
padding: 0.4rem 0.8rem;
line-height: 1;
font-size: 13px;
font-weight: 500;
Expand All @@ -32,6 +32,33 @@
.文件內容-未完成標語-內容 {
}

.文件內容-電腦版設計 {
border: 1px solid var(--ts-gray-300);
color: var(--ts-gray-800);
font-size: 14px;
display: flex;
gap: 0.7rem;
padding: 0.3rem 0.7rem;
align-items: flex-start;
border-radius: 0.4rem;
margin: 0 auto;
margin-bottom: 2rem;
margin-top: -2rem;
}

.文件內容-電腦版設計-標題 {
background: var(--ts-gray-800);
color: var(--ts-gray-50);
border-radius: 0.4rem;
padding: 0.4rem 0.8rem;
line-height: 1;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}

.文件內容-電腦版設計-內容 {}

.文件內容-範例清單 {
display: block;
}
Expand Down Expand Up @@ -130,21 +157,24 @@
padding: 2rem 0 3rem;
}

.文件內容-未完成標語 {
.文件內容-未完成標語,
.文件內容-電腦版設計 {
display: block;
margin-top: 0;
padding-top: 0.7rem;
margin-bottom: 1.5rem;
}

.文件內容-未完成標語-標題 {
.文件內容-未完成標語-標題,
.文件內容-電腦版設計-標題 {
display: inline-block;
margin-right: 0.5rem;
margin-bottom: 0.25rem;
padding: 0.35rem 0.8rem;
}

.文件內容-未完成標語-內容 {
.文件內容-未完成標語-內容,
.文件內容-電腦版設計-內容 {
display: inline;
}

Expand Down
5 changes: 5 additions & 0 deletions docs/en-us/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,11 @@
<div class="文件內容-未完成標語-內容">由於元件正在持續新增，我們亦會不斷地更新範例頁面，請定時回來檢查更新。</div>
</div>-->

<div class="文件內容-電腦版設計">
<div class="文件內容-電腦版設計-標題">NOTCIE</div>
<div class="文件內容-電腦版設計-內容">These examples were made for the desktops; The layout may be distorted or cropped if viewed on a mobile device.</div>
</div>

<div class="文件內容-範例清單">

<div class="文件內容-範例清單-段落">
Expand Down
38 changes: 34 additions & 4 deletions docs/zh-tw/assets/examples.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
background: var(--ts-gray-800);
color: var(--ts-gray-50);
border-radius: 0.4rem;
padding: 0.45rem 0.8rem;
padding: 0.4rem 0.8rem;
line-height: 1;
font-size: 13px;
font-weight: 500;
Expand All @@ -32,6 +32,33 @@
.文件內容-未完成標語-內容 {
}

.文件內容-電腦版設計 {
border: 1px solid var(--ts-gray-300);
color: var(--ts-gray-800);
font-size: 14px;
display: flex;
gap: 0.7rem;
padding: 0.3rem 0.7rem;
align-items: flex-start;
border-radius: 0.4rem;
margin: 0 auto;
margin-bottom: 2rem;
margin-top: -2rem;
}

.文件內容-電腦版設計-標題 {
background: var(--ts-gray-800);
color: var(--ts-gray-50);
border-radius: 0.4rem;
padding: 0.4rem 0.8rem;
line-height: 1;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}

.文件內容-電腦版設計-內容 {}

.文件內容-範例清單 {
display: block;
}
Expand Down Expand Up @@ -130,21 +157,24 @@
padding: 2rem 0 3rem;
}

.文件內容-未完成標語 {
.文件內容-未完成標語,
.文件內容-電腦版設計 {
display: block;
margin-top: 0;
padding-top: 0.7rem;
margin-bottom: 1.5rem;
}

.文件內容-未完成標語-標題 {
.文件內容-未完成標語-標題,
.文件內容-電腦版設計-標題 {
display: inline-block;
margin-right: 0.5rem;
margin-bottom: 0.25rem;
padding: 0.35rem 0.8rem;
}

.文件內容-未完成標語-內容 {
.文件內容-未完成標語-內容,
.文件內容-電腦版設計-內容 {
display: inline;
}

Expand Down
5 changes: 5 additions & 0 deletions docs/zh-tw/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,11 @@
<div class="文件內容-未完成標語-內容">由於元件正在持續新增，我們亦會不斷地更新範例頁面，請定時回來檢查更新。</div>
</div>-->

<div class="文件內容-電腦版設計">
<div class="文件內容-電腦版設計-標題">看過來</div>
<div class="文件內容-電腦版設計-內容">這些範例是以電腦版本為設計初衷，若以行動裝置檢視，其格局可能會變形或被裁切。</div>
</div>

<div class="文件內容-範例清單">

<div class="文件內容-範例清單-段落">
Expand Down
3 changes: 3 additions & 0 deletions languages/en-us/meta.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ UI:
Example_WIP: WIP
Example_WIP_Description: 由於元件正在持續新增，我們亦會不斷地更新範例頁面，請定時回來檢查更新。

Example_DesignedForDesktop: NOTCIE
Example_DesignedForDesktop_Description: These examples were made for the desktops; The layout may be distorted or cropped if viewed on a mobile device.

#=======================================================
# Index
#=======================================================
Expand Down
3 changes: 3 additions & 0 deletions languages/zh-tw/meta.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ UI:
Example_WIP: 尚未完成
Example_WIP_Description: 由於元件正在持續新增，我們亦會不斷地更新範例頁面，請定時回來檢查更新。

Example_DesignedForDesktop: 看過來
Example_DesignedForDesktop_Description: 這些範例是以電腦版本為設計初衷，若以行動裝置檢視，其格局可能會變形或被裁切。

#=======================================================
# Index
#=======================================================
Expand Down

0 comments on commit 6f41d49

Please sign in to comment.