Skip to content

Add RTL support .. #7

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.

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 2 commits into from
Sep 23, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions themes/vue/layout/partials/header.ejs
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div id="header">
<ul id="nav">
<%- partial('partials/main_menu', { context: 'nav' }) %>
</ul>
<a id="logo" href="<%- url_for("/") %>">
<img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
<span>Vue.js</span>
</a>
<ul id="nav">
<%- partial('partials/main_menu', { context: 'nav' }) %>
</ul>
</div>
12 changes: 7 additions & 5 deletions themes/vue/layout/partials/main_menu.ejs
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<li>
<form id="search-form">
<input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
</form>
</li>

<%- partial('partials/learn_dropdown') %>
<%- partial('partials/ecosystem_dropdown') %>
<li>
<a href="<%- url_for("/v2/guide/team.html") %>" class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">Team</a>
</li>
<%- partial('partials/support_vue_dropdown') %>
<%- partial('partials/language_dropdown') %>

<li>
<form id="search-form">
<input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
</form>
</li>
2 changes: 1 addition & 1 deletion themes/vue/source/css/_ad.styl
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
position: fixed
z-index: 99
bottom: 10px
right: 10px
left: 10px
padding: 10px
background-color: #fff
border-radius: 3px
Expand Down
10 changes: 7 additions & 3 deletions themes/vue/source/css/_common.styl
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ code
margin: 0 2px
border-radius: 2px
white-space: nowrap
text-align: left
direction: ltr

em
color: $light
Expand All @@ -63,7 +65,7 @@ input.button
text-indent: 1.4em;
> svg
position: absolute
left: 0.4em
right: 0.4em
top: 0.4em
width: 2em
&.white
Expand All @@ -79,7 +81,9 @@ input.button
z-index: 1
padding: 0 60px 30px
overflow-x: hidden

text-align: right
direction: rtl

#nav
.nav-link
cursor: pointer
Expand All @@ -101,7 +105,7 @@ input.button
overflow-y: auto
position: absolute
top: 100%
right: -15px
left: -20px
background-color: #fff
padding: 10px 0
border: 1px solid #ddd
Expand Down
3 changes: 3 additions & 0 deletions themes/vue/source/css/_demo.styl
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
-ms-user-select: none
user-select: none
overflow-x: auto
&.ltr
text-align: left
direction: ltr
h1
margin: 0 0 .5em
font-size: 1.8em
Expand Down
9 changes: 6 additions & 3 deletions themes/vue/source/css/_header.styl
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body.docs
margin: 0
padding: 0
position: absolute
right: 30px
left: 80px
top: $heading-padding-vertical
height: $header-height
line-height: $header-height
Expand All @@ -42,6 +42,7 @@ body.docs
margin: 0 .6em

.nav-dropdown
text-align: right
.nav-link
&:hover, &.current
border-bottom: none
Expand Down Expand Up @@ -93,7 +94,7 @@ body.docs
color: $dark
outline: none
border-radius: 15px
margin-right: 10px
margin-left: 10%
transition: border-color .2s ease
background: #fff url(../images/search.png) 8px 5px no-repeat
background-size: 20px
Expand All @@ -108,9 +109,11 @@ body.docs
color: $dark
font-family: $logo-font
font-weight: 500
position: absolute
left: 89%
img
vertical-align: middle
margin-right: 6px
margin-left: 6px
width: $header-height
height: $header-height

Expand Down
9 changes: 6 additions & 3 deletions themes/vue/source/css/_scrimba.styl
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@
a
color #486491 !important
position relative
padding-left 36px
padding-right 36px
display block
font-weight normal !important
line-height 25px
&:before
content ''
position absolute
display block
width 30px
height 30px
top -5px
left -4px
right -4px
border-radius 50%
background-color #73abfe
&:after
Expand All @@ -25,7 +28,7 @@
width 0
height 0
top 5px
left 8px
right 6px
border-top 5px solid transparent
border-bottom 5px solid transparent
border-left 8px solid #fff
23 changes: 17 additions & 6 deletions themes/vue/source/css/_sidebar.styl
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

.sidebar
position: absolute
direction: ltr
border-left: solid 1px #eee
z-index: 10
top: $header-height
left: 0
right: 0
bottom: 0
overflow-x: hidden
overflow-y: auto
Expand All @@ -20,13 +22,15 @@
li
margin-top: .5em
.sidebar-inner
direction rtl
width: 260px
padding: $content-padding-top + 40px 0px 60px 20px
padding: $content-padding-top + 40px 20px 60px 0px
.version-select
vertical-align: middle
margin-left: 5px
.menu-root
padding-left: 0
padding-inline-start: 0
.sidebar-link
color: $light
&.current
Expand Down Expand Up @@ -63,19 +67,21 @@
margin: 0

@media screen and (max-width: 900px)
#ad
display: none
.sidebar
position: fixed
z-index: 10
background-color: #f9f9f9
height: 100%
top: 0
left: 0
right: 0
box-shadow: 0 0 10px rgba(0,0,0,.2)
transition: all .4s cubic-bezier(0.4, 0, 0, 1)
-webkit-transform: translate(-280px, 0)
transform: translate(-280px, 0)
-webkit-transform: translate(280px, 0)
transform: translate(280px, 0)
.sidebar-inner
padding: 50px 10px 10px 20px
padding: 10px 10px 10px 20px
box-sizing: border-box
.sidebar-inner-index
padding: 10px 10px 10px 20px
Expand All @@ -87,6 +93,11 @@
&.open
-webkit-transform: translate(0, 0)
transform: translate(0, 0)
padding-inline-start: 10px
ul
padding-inline-start: 10px
div.list
display: none

@media print
.sidebar
Expand Down
1 change: 1 addition & 0 deletions themes/vue/source/css/_sponsors-index.styl
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
#sponsors
direction: rtl
text-align: center
padding: 35px 40px 45px
background-color: #f6f6f6
Expand Down
2 changes: 1 addition & 1 deletion themes/vue/source/css/_sponsors-sidebar.styl
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
position fixed
z-index 99
top 90px
right 20px
left 20px

@media screen and (min-width: 1300px)
#sidebar-sponsors-platinum-left
Expand Down
4 changes: 4 additions & 0 deletions themes/vue/source/css/_syntax.styl
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ pre code
display: block

.hljs
&-comment
display inline-block
direction rtl

&-tag,
&-tag &-title,
&-change,
Expand Down
11 changes: 7 additions & 4 deletions themes/vue/source/css/_vue-mastery.styl
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,18 @@
a
color #486491 !important
position relative
padding-left 36px
padding-right 36px
display block
font-weight normal !important
line-height 25px
&:before
content ''
position absolute
display block
width 30px
height 30px
top -5px
left -4px
right -4px
border-radius 50%
background-color #73abfe
&:after
Expand All @@ -26,7 +29,7 @@
width 0
height 0
top 5px
left 8px
right 6px
border-top 5px solid transparent
border-bottom 5px solid transparent
border-left 8px solid #fff
border-left 8px solid #fff
16 changes: 10 additions & 6 deletions themes/vue/source/css/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ body

#hero,
#news
direction: rtl
padding: $space 40px 30px
background-color: #fff
.inner
Expand All @@ -44,12 +45,13 @@ body
.hero-logo
width: 215px
height: 215px
float: right
margin-right: 60px
float: left
margin-left: 60px
h1
font-weight: 300
font-weight: 200
margin: 0
font-size: 3.2em
font-size: 2.5em
line-height: 2em
h2
font-family: $logo-font
font-weight: 500
Expand Down Expand Up @@ -88,7 +90,7 @@ body
.newsletter-input
width: 100%
box-sizing: border-box
padding: 10px 80px 10px 20px
padding: 10px 20px 10px 80px
height: 50px
border-radius: 50px
border: 1px solid #ccc
Expand All @@ -101,7 +103,7 @@ body
padding: 4px 20px
margin: 0
height: calc(100% - 8px)
right: 4px
left: 4px
top: 4px

#special-sponsor
Expand All @@ -121,6 +123,7 @@ body
#highlights
background-color: #fff
padding-bottom: 70px
direction: rtl
.inner
max-width: $width
margin: 0 auto
Expand All @@ -144,6 +147,7 @@ body
padding: $space 0
color: #fff
text-align: center
direction: rtl
.social-icon
margin 0 5px
svg
Expand Down
Loading