Skip to content

Commit 18cfaee

Browse files
phananphanan
authored
feat: add v3 banners (#2701)
1 parent 1575077 commit 18cfaee

File tree

8 files changed

+37
-48
lines changed

8 files changed

+37
-48
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# vuejs.org
22

3+
> Important: This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the [v3 doc repo](https://github.com/vuejs/docs-next).
4+
35
This site is built with [hexo](http://hexo.io/). Site content is written in Markdown format located in `src`. Pull requests welcome!
46

57
## Writing

‎themes/vue/layout/layout.ejs‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<% var isThemes = page.path === 'resources/themes.html' %>
33

44
<!DOCTYPE html>
5-
<html lang="en">
5+
<html lang="en" class="with-v3-banner">
66
<head>
77
<title><%- page.title ? page.title + ' — ' : '' %>Vue.js</title>
88
<meta charset="utf-8">
@@ -91,11 +91,8 @@
9191
</head>
9292
<body class="<%- isIndex ? '' : 'docs' -%>">
9393
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
94-
<a class="menu-button<%- isIndex ? ' blm' : '' %>"></a>
94+
<a class="menu-button"></a>
9595
<a class="logo" href="/"></a>
96-
<% if (isIndex) { %>
97-
<a class="blm-mobile" href="/#">#BlackLivesMatter</a>
98-
<% } %>
9996
</div>
10097
<%- partial('partials/header') %>
10198
<% if (!isIndex) { %>

‎themes/vue/layout/page.ejs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
</div>
99
<% } %>
1010
<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 ealier.
13+
For v3.x, <a href="https://v3.vuejs.org/">click here</a>.
14+
</p>
15+
1116
<% if (page.type) { %>
1217
<% if (page.type === 'menu') { %>
1318
<form id="search-form">

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<div>
2-
<% if (page.path === 'index.html') { %>
3-
<div id="blm">
4-
<span id="blm-hashtag">#B<span>lack</span>L<span>ives</span>M<span>atter</span></span>
5-
<a href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank" rel="noreferrer" id="blm-link">Support the Equal Justice Initiative.</a>
6-
</div>
7-
<% } %>
2+
<div id="v3-banner">
3+
<span class="hidden-sm">You’re browsing the documentation for v2.x and ealier.</span>
4+
<a href="https://v3.vuejs.org/">Click here</a> for v3.x documentation.
5+
</div>
86

97
<header id="header">
108
<a id="logo" href="<%- url_for("/") %>">

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

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,35 +17,25 @@ red-dot-before(leftPos = -8px)
1717
position: relative
1818
z-index: $z-header
1919

20-
#blm
21-
background-color: #000
22-
min-height: $blm-height
20+
#v3-banner
21+
background-color: $green
22+
min-height: 40px
2323
padding: $heading-padding-vertical 60px
2424
z-index: $z-header - 1
2525
box-sizing: border-box
2626
text-align: center
27-
color: #fff
28-
29-
#blm-hashtag
30-
font-weight: bold
31-
margin-right: 4px
32-
33-
#blm-hashtag span
27+
color: #d6ffec
3428
display: none
3529

36-
@media (min-width: 470px)
37-
#blm-hashtag span
38-
display: inline
30+
a
31+
color: #fff
32+
font-weight: bold
3933

40-
#blm-link
41-
color: $green
42-
white-space: nowrap
34+
@media screen and (max-width: 900px)
35+
.hidden-sm
36+
display: none
4337

4438
body.docs
45-
#blm
46-
position: fixed
47-
top: 0
48-
width: 100%
4939
#header
5040
position: fixed
5141
width: 100%
@@ -54,10 +44,6 @@ body.docs
5444
position: fixed
5545
top: $heading-padding-vertical
5646

57-
@media screen and (max-width: 900px)
58-
body.docs #blm
59-
display: none
60-
6147
#nav
6248
list-style-type: none
6349
margin: 0
@@ -171,9 +157,6 @@ body.docs
171157
left: 12px
172158
background: url(../images/menu.png) center center no-repeat
173159
background-size: 24px
174-
&.blm
175-
background: url(../images/menu-blm.png) center center no-repeat
176-
background-size: 24px
177160
.logo
178161
position: absolute
179162
width: 30px
@@ -183,11 +166,6 @@ body.docs
183166
left: 50%
184167
margin-left: -15px
185168
background-size: 30px
186-
.blm-mobile
187-
position: absolute
188-
right: 12px
189-
line-height: 40px
190-
font-weight: bold
191169

192170
@media print
193171
#header

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,3 @@ $z-sidebar = 10
3737
$z-header = 20
3838
$z-overlay = 30
3939
$z-modal = 40
40-
41-
$blm-height = 40px

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,13 @@ body
2525
background-color: transparent
2626
box-shadow: none
2727
z-index: ($z-sidebar - 1)
28-
.logo,
29-
.blm-mobile
30-
display: none
28+
29+
.with-v3-banner
30+
#mobile-bar .logo
31+
display: none !important
32+
33+
#v3-banner
34+
display: block
3135

3236
#hero,
3337
#news

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,13 @@
177177
content: "\f00c"
178178
font-family: FontAwesome
179179
background-color: $green
180+
&.warning
181+
border-left-color: orange
182+
&:before
183+
background-color: orange
184+
185+
&.v3-warning
186+
margin-top: 0
180187

181188
.guide-links
182189
margin-top: 2em

0 commit comments

Comments
 (0)