Skip to content

Commit 8552650

Browse files
yyx990803yyx990803
committed
update banner
1 parent 2a4d684 commit 8552650

File tree

5 files changed

+101
-92
lines changed

5 files changed

+101
-92
lines changed

‎themes/vue/_config.yml

+41-33
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@ platinum:
2929
url: >-
3030
https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs
3131
img: ionic.png?v2
32-
- name: Nuxt
33-
url: https://nuxtjs.org/
34-
img: nuxt.png
3532
- name: ButterCMS
3633
url: >-
3734
https://buttercms.com/vuejs-cms/?utm_source=vuejs.org&utm_medium=banner&utm_campaign=sponsorship
@@ -45,11 +42,10 @@ platinum:
4542
- name: Chrome Frameworks Fund
4643
url: https://opencollective.com/2021-frameworks-fund
4744
img: chrome_frameworks_fund.png
48-
- name: Marker.io
49-
url: >-
50-
https://marker.io/?utm_source=vuejs&utm_medium=sponsor&utm_campaign=dev-community
51-
img: marker_io.svg
5245
gold:
46+
- name: Volta
47+
url: https://volta.net/?utm_source=vuejs.org&utm_campaign=sponsoring/
48+
img: volta.svg
5349
- name: Laravel
5450
url: https://laravel.com
5551
img: laravel.png
@@ -80,18 +76,12 @@ gold:
8076
- name: LINE Corporation
8177
url: https://linecorp.com
8278
img: line_corporation.png
83-
- name: PLAID, Inc.
84-
url: https://plaid.co.jp/
85-
img: plaid__inc_.svg
8679
- name: EMQ
8780
url: https://www.emqx.com
8881
img: emq.png
8982
- name: Onyx Gaming Limited
9083
url: https://www.aceonlinecasino.co.uk
9184
img: onyx_gaming_limited.svg
92-
- name: Lendio
93-
url: http://www.lendio.com
94-
img: lendio.png
9585
- name: Fenêtre Online Solutions
9686
url: https://www.fenetre.nl/
9787
img: fen_tre_online_solutions.svg
@@ -107,9 +97,10 @@ gold:
10797
- name: Cypress.io
10898
url: https://cypress.io
10999
img: cypress_io.svg
110-
- name: Handsontable - JavaScript Data Grid
111-
url: https://handsontable.com/
112-
img: handsontable___javascript_data_grid.svg
100+
- name: Localazy
101+
url: >-
102+
https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&utm_medium=banner&utm_campaign=sponsorships_vuejs&utm_content=logo
103+
img: localazy.svg
113104
- name: LearnVue
114105
url: https://learnvue.co
115106
img: learnvue.png
@@ -119,15 +110,34 @@ gold:
119110
- name: Casinoburst.com
120111
url: https://casinoburst.com/casino-utan-licens/
121112
img: casinoburst_com.png
122-
- name: uudetkasinot.com
123-
url: https://www.uudetkasinot.com
124-
img: uudetkasinot_com.png
125113
- name: spinsify.com/uk
126114
url: https://www.spinsify.com/uk/new-casinos
127115
img: spinsify_com_uk.png
128116
- name: 'Enkrypt: Ethereum and Polkadot Web3 Wallet'
129117
url: https://www.enkrypt.com
130118
img: enkrypt__ethereum_and_polkadot_web3_wallet.svg
119+
- name: uudetkasinot.com
120+
url: https://www.uudetkasinot.com
121+
img: uudetkasinot_com.png
122+
- name: Fathom Analytics
123+
url: https://usefathom.com/
124+
img: fathom_analytics.svg
125+
- name: RxDB
126+
url: >-
127+
https://rxdb.info/?utm_source=vuejs.org&utm_medium=banner&utm_campaign=vue-sponsored-gold
128+
img: rxdb.svg
129+
- name: Goread.io
130+
url: https://goread.io/buy-instagram-followers
131+
img: goread_io.png
132+
- name: Definir Tech
133+
url: https://definir-tech.com/
134+
img: definir_tech.png
135+
- name: Twicsy
136+
url: https://opencollective.com/twicsy
137+
img: twicsy.png
138+
- name: Sentry
139+
url: sentry.io/for/vue?utm_source=vuejs.org&utm_medium=paid-community
140+
img: sentry.png
131141
silver:
132142
- name: Draxlr
133143
url: https://www.draxlr.com
@@ -144,16 +154,15 @@ silver:
144154
- name: Doximity
145155
url: https://technology.doximity.com/
146156
img: doximity.png
147-
- name: CircleCI
148-
url: https://circleci.com/open-source/
149-
img: circleci.png
150157
- name: Interflora Group
151158
url: https://www.interflora.fr
152159
img: interflora_group.png
153-
- name: Localazy
154-
url: >-
155-
https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&utm_medium=banner&utm_campaign=sponsorships_vuejs&utm_content=logo
156-
img: localazy.png
160+
- name: Codesmith
161+
url: https://codesmith.io
162+
img: codesmith.png
163+
- name: Gcore
164+
url: https://gcore.com
165+
img: gcore.png
157166
bronze:
158167
- name: Derek Pollard
159168
url: https://polyglotengineer.com/derek.pollard
@@ -176,16 +185,15 @@ bronze:
176185
- name: Liip AG
177186
url: https://www.liip.ch/en
178187
img: liip_ag.png
179-
- name: Monarch Air Group
180-
url: https://monarchairgroup.com
181-
img: monarch_air_group.png
182188
- name: The Codest
183189
url: https://thecodest.co/
184190
img: the_codest.png?v2
185-
platinum_china:
186-
- name: 稀土掘金技术社区
187-
url: https://juejin.cn/frontend?utm_source=vue&utm_campaign=sponsor
188-
img: xitujuejinjishushequ.png
191+
- name: Bürkert Werke GmbH & Co KG
192+
url: https://www.burkert.com
193+
img: b_rkert_werke_gmbh___co_kg.png
194+
- name: Arcanite
195+
url: https://arcanite.ch
196+
img: arcanite.png
189197
# END SPONSORS
190198
redirects:
191199
'/v2/api/index.html': '/api/'

‎themes/vue/layout/page.ejs

+46-52
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,57 @@
1-
<% if (page.type) { %>
2-
<%- partial('partials/sidebar', { type: page.type === 'menu' ? 'guide' : page.type, index: page.index }) %>
3-
<% } else { %>
4-
<div class="sidebar">
5-
<ul class="main-menu">
6-
<%- partial('partials/main_menu', { context: 'sidebar' }) %>
7-
</ul>
8-
</div>
1+
<% if (page.type) { %> <%- partial('partials/sidebar', { type: page.type ===
2+
'menu' ? 'guide' : page.type, index: page.index }) %> <% } else { %>
3+
<div class="sidebar">
4+
<ul class="main-menu">
5+
<%- partial('partials/main_menu', { context: 'sidebar' }) %>
6+
</ul>
7+
</div>
98
<% } %>
10-
<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %> <%- page.type === 'guide' ? page.path.replace(/.+\//, '').replace('.html', '') + '-guide' : '' %>">
11-
<p class="tip warning v3-warning">
12-
You’re browsing the documentation for v2.x and earlier.
13-
For v3.x, <a href="https://vuejs.org/">click here</a>.
14-
</p>
15-
16-
<% if (page.type) { %>
17-
<% if (page.type === 'menu') { %>
18-
<form id="search-form">
19-
<input type="text" id="search-query-menu" aria-label="Search Vue.JS site" class="search-query st-default-search-input">
20-
</form>
21-
<%- partial('partials/toc', { type: 'guide' }) %>
22-
<% } else { %>
23-
<%- partial('partials/ad') %>
9+
<div
10+
class="content <%- page.type ? page.type + ' with-sidebar' : '' %> <%- page.type === 'guide' ? page.path.replace(/.+\//, '').replace('.html', '') + '-guide' : '' %>"
11+
>
12+
<% if (page.type) { %> <% if (page.type === 'menu') { %>
13+
<form id="search-form">
14+
<input
15+
type="text"
16+
id="search-query-menu"
17+
aria-label="Search Vue.JS site"
18+
class="search-query st-default-search-input"
19+
/>
20+
</form>
21+
<%- partial('partials/toc', { type: 'guide' }) %> <% } else { %> <%-
22+
partial('partials/ad') %> <% } %> <% } %> <% if (page.title.trim()) { %>
23+
<h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>
24+
<% } %> <% if (page.sponsors) { %> <%- partial('sponsors-page') %> <% } else
25+
if (page.partners) { %> <%- partial('partners-page') %> <% } else if
26+
(page.search) { %> <%- partial('search-page') %> <% } else { %> <%-
27+
page.content %> <% } %> <% if (page.type === 'guide') { %>
28+
<div class="guide-links">
29+
<% const lastPage = site.pages.find({ type: page.type, order: { $lt:
30+
page.order }}).sort({ order: -1 }).first(); %> <% if (lastPage) { %>
31+
<span
32+
>← <a href="<%- url_for(lastPage.path) %>"><%- lastPage.title %></a></span
33+
>
34+
<% } %> <% const nextPage = site.pages.find({ type: page.type, order: { $gt:
35+
page.order }}).sort({ order: 1 }).first(); %> <% if (nextPage) { %>
36+
<span style="float: right"
37+
><a href="<%- url_for(nextPage.path) %>"><%- nextPage.title %></a> →</span
38+
>
2439
<% } %>
25-
<% } %>
26-
<% if (page.title.trim()) { %>
27-
<h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>
28-
<% } %>
29-
<% if (page.sponsors) { %>
30-
<%- partial('sponsors-page') %>
31-
<% } else if (page.partners) { %>
32-
<%- partial('partners-page') %>
33-
<% } else if (page.search) { %>
34-
<%- partial('search-page') %>
35-
<% } else { %>
36-
<%- page.content %>
37-
<% } %>
38-
<% if (page.type === 'guide') { %>
39-
<div class="guide-links">
40-
<% const lastPage = site.pages.find({ type: page.type, order: { $lt: page.order }}).sort({ order: -1 }).first(); %>
41-
<% if (lastPage) { %>
42-
<span>← <a href="<%- url_for(lastPage.path) %>"><%- lastPage.title %></a></span>
43-
<% } %>
44-
<% const nextPage = site.pages.find({ type: page.type, order: { $gt: page.order }}).sort({ order: 1 }).first(); %>
45-
<% if (nextPage) { %>
46-
<span style="float: right;"><a href="<%- url_for(nextPage.path) %>"><%- nextPage.title %></a> →</span>
47-
<% } %>
48-
</div>
40+
</div>
4941
<% } %>
5042
<div class="footer">
51-
<%_ if (!page.sponsors) { _%>
52-
<%- partial('partials/ad-text') %>
53-
<%_ } _%>
43+
<%_ if (!page.sponsors) { _%> <%- partial('partials/ad-text') %> <%_ } _%>
5444
Caught a mistake or want to contribute to the documentation?
55-
<a href="https://github.com/vuejs/v2.vuejs.org/blob/master/src/<%- page.path.replace(/\.html$/, '.md') %>" rel="noopener" target="_blank">
45+
<a
46+
href="https://github.com/vuejs/v2.vuejs.org/blob/master/src/<%- page.path.replace(/\.html$/, '.md') %>"
47+
rel="noopener"
48+
target="_blank"
49+
>
5650
Edit this on GitHub!
5751
</a>
5852
Deployed on
5953
<a href="https://url.netlify.com/HJ8X2mxP8" rel="noopener" target="_blank">
60-
Netlify
61-
</a>.
54+
Netlify </a
55+
>.
6256
</div>
6357
</div>

‎themes/vue/layout/partials/header.ejs

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<div>
22
<div id="v3-banner">
3-
<span class="hidden-sm">You’re browsing the documentation for v2.x and earlier.</span>
4-
<a href="https://vuejs.org/">Click here</a> for v3.x documentation.
3+
<span class="hidden-sm">You’re browsing Vue 2 docs.</span>
4+
Learn more about <a href="/v2/guide/migration-vue-2-7.html">Vue 2.7</a> or
5+
go to <a href="https://vuejs.org/">Vue 3 docs</a>.
56
</div>
67

78
<header id="header">

‎themes/vue/source/css/_header.styl

+9-4
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,18 @@ red-dot-before(leftPos = -8px)
2121
box-sizing: border-box
2222

2323
#v3-banner
24-
background-color: $green
24+
background-color: #4e6981
2525
min-height: 40px
2626
padding: $heading-padding-vertical 60px
2727
z-index: $z-header - 1
2828
box-sizing: border-box
2929
text-align: center
30-
color: #d6ffec
31-
display: none
30+
color: #fff
31+
display: block
32+
// display: none
3233

3334
a
34-
color: #fff
35+
color: #7adeb2
3536
font-weight: bold
3637

3738
@media screen and (max-width: 900px)
@@ -40,6 +41,10 @@ red-dot-before(leftPos = -8px)
4041

4142
body.docs
4243
#header
44+
position: fixed
45+
width: 100%
46+
top: 40px
47+
#v3-banner
4348
position: fixed
4449
width: 100%
4550
top: 0

‎themes/vue/source/css/_settings.styl

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ $content-padding-vertical = 35px
2323
// header settings
2424
$header-inner-height = 41px
2525
$heading-padding-vertical = 10px
26-
$header-height = $header-inner-height + $heading-padding-vertical * 2
26+
$v3-banner-height = 40px
27+
$header-height = $header-inner-height + $heading-padding-vertical * 2 + $v3-banner-height
2728
$mobile-header-height = 40px
2829
// prevent headers from being covered by the top nav upon navigation
2930
$heading-link-padding-top = $header-height + $content-padding-vertical

0 commit comments

Comments
 (0)