Skip to content

feat: add v3 banners #2701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 25, 2020
Merged

feat: add v3 banners #2701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# vuejs.org

> 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).

This site is built with [hexo](http://hexo.io/). Site content is written in Markdown format located in `src`. Pull requests welcome!

## Writing
Expand Down
7 changes: 2 additions & 5 deletions themes/vue/layout/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<% var isThemes = page.path === 'resources/themes.html' %>

<!DOCTYPE html>
<html lang="en">
<html lang="en" class="with-v3-banner">
<head>
<title><%- page.title ? page.title + ' — ' : '' %>Vue.js</title>
<meta charset="utf-8">
Expand Down Expand Up @@ -91,11 +91,8 @@
</head>
<body class="<%- isIndex ? '' : 'docs' -%>">
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
<a class="menu-button<%- isIndex ? ' blm' : '' %>"></a>
<a class="menu-button"></a>
<a class="logo" href="/"></a>
<% if (isIndex) { %>
<a class="blm-mobile" href="/#">#BlackLivesMatter</a>
<% } %>
</div>
<%- partial('partials/header') %>
<% if (!isIndex) { %>
Expand Down
5 changes: 5 additions & 0 deletions themes/vue/layout/page.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
</div>
<% } %>
<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %> <%- page.type === 'guide' ? page.path.replace(/.+\//, '').replace('.html', '') + '-guide' : '' %>">
<p class="tip warning v3-warning">
You’re browsing the documentation for v2.x and ealier.
For v3.x, <a href="https://v3.vuejs.org/">click here</a>.
</p>

<% if (page.type) { %>
<% if (page.type === 'menu') { %>
<form id="search-form">
Expand Down
10 changes: 4 additions & 6 deletions themes/vue/layout/partials/header.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<div>
<% if (page.path === 'index.html') { %>
<div id="blm">
<span id="blm-hashtag">#B<span>lack</span>L<span>ives</span>M<span>atter</span></span>
<a href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank" rel="noreferrer" id="blm-link">Support the Equal Justice Initiative.</a>
</div>
<% } %>
<div id="v3-banner">
<span class="hidden-sm">You’re browsing the documentation for v2.x and ealier.</span>
<a href="https://v3.vuejs.org/">Click here</a> for v3.x documentation.
</div>

<header id="header">
<a id="logo" href="<%- url_for("/") %>">
Expand Down
42 changes: 10 additions & 32 deletions themes/vue/source/css/_header.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,35 +17,25 @@ red-dot-before(leftPos = -8px)
position: relative
z-index: $z-header

#blm
background-color: #000
min-height: $blm-height
#v3-banner
background-color: $green
min-height: 40px
padding: $heading-padding-vertical 60px
z-index: $z-header - 1
box-sizing: border-box
text-align: center
color: #fff

#blm-hashtag
font-weight: bold
margin-right: 4px

#blm-hashtag span
color: #d6ffec
display: none

@media (min-width: 470px)
#blm-hashtag span
display: inline
a
color: #fff
font-weight: bold

#blm-link
color: $green
white-space: nowrap
@media screen and (max-width: 900px)
.hidden-sm
display: none

body.docs
#blm
position: fixed
top: 0
width: 100%
#header
position: fixed
width: 100%
Expand All @@ -54,10 +44,6 @@ body.docs
position: fixed
top: $heading-padding-vertical

@media screen and (max-width: 900px)
body.docs #blm
display: none

#nav
list-style-type: none
margin: 0
Expand Down Expand Up @@ -171,9 +157,6 @@ body.docs
left: 12px
background: url(../images/menu.png) center center no-repeat
background-size: 24px
&.blm
background: url(../images/menu-blm.png) center center no-repeat
background-size: 24px
.logo
position: absolute
width: 30px
Expand All @@ -183,11 +166,6 @@ body.docs
left: 50%
margin-left: -15px
background-size: 30px
.blm-mobile
position: absolute
right: 12px
line-height: 40px
font-weight: bold

@media print
#header
Expand Down
2 changes: 0 additions & 2 deletions themes/vue/source/css/_settings.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,3 @@ $z-sidebar = 10
$z-header = 20
$z-overlay = 30
$z-modal = 40

$blm-height = 40px
10 changes: 7 additions & 3 deletions themes/vue/source/css/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,13 @@ body
background-color: transparent
box-shadow: none
z-index: ($z-sidebar - 1)
.logo,
.blm-mobile
display: none

.with-v3-banner
#mobile-bar .logo
display: none !important

#v3-banner
display: block

#hero,
#news
Expand Down
7 changes: 7 additions & 0 deletions themes/vue/source/css/page.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,13 @@
content: "\f00c"
font-family: FontAwesome
background-color: $green
&.warning
border-left-color: orange
&:before
background-color: orange

&.v3-warning
margin-top: 0

.guide-links
margin-top: 2em
Expand Down