Skip to content

Commit

Permalink
feat: ui update, use narrow layout by default
Browse files Browse the repository at this point in the history
  • Loading branch information
egoist committed Oct 3, 2019
1 parent b2f4d20 commit e0c3e70
Show file tree
Hide file tree
Showing 12 changed files with 136 additions and 137 deletions.
5 changes: 3 additions & 2 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export default {
z-index: 33;
border-bottom: 1px solid var(--border-color);
background: var(--header-background);
color: var(--header-text-color);
@media print {
position: static;
Expand All @@ -100,7 +101,7 @@ export default {
white-space: nowrap;
& a {
color: var(--text-color);
color: inherit;
text-decoration: none;
}
}
Expand All @@ -126,7 +127,7 @@ export default {
position: absolute;
right: 20px;
top: 0;
height: calc(var(--header-height) - 1px);
height: 100%;
background: var(--header-background);
@media print {
Expand Down
32 changes: 24 additions & 8 deletions src/components/HeaderNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<div class="header-nav-item" v-for="(item, index) in nav" :key="index">
<div class="dropdown-wrapper" v-if="item.children">
<span class="dropdown-trigger">
{{ item.title }} <span class="arrow"></span>
{{ item.title }}
<span class="arrow"></span>
</span>
<ul class="dropdown-list" v-if="item.children">
<li
Expand All @@ -14,6 +15,7 @@
<uni-link
:to="childItem.link"
:openInNewTab="childItem.openInNewTab"
:externalLinkIcon="false"
>{{ childItem.title }}</uni-link
>
</li>
Expand All @@ -24,6 +26,7 @@
v-if="!item.children"
:to="item.link"
:openInNewTab="item.openInNewTab"
:externalLinkIcon="false"
>{{ item.title }}</uni-link
>
</div>
Expand Down Expand Up @@ -56,7 +59,7 @@ export default {
.header-nav {
display: flex;
align-items: center;
font-size: 0.9rem;
font-size: 1rem;
@media (max-width: 768px) {
display: none;
Expand All @@ -68,21 +71,34 @@ export default {
}
.header-nav-item {
height: 100%;
&:not(:first-child) {
margin-left: 25px;
}
& > /deep/ a {
border-bottom: 2px solid transparent;
display: inline-block;
display: flex;
align-items: center;
line-height: 1.4;
height: 100%;
position: relative;
&:not(.is-external-link):hover {
border-color: var(--nav-link-hover-border-color);
&:after {
content: '';
height: 2px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
}
&:not(.is-external-link).router-link-exact-active {
border-color: var(--accent-color);
&.router-link-exact-active {
&:after {
background-color: var(--nav-link-border-color);
}
}
}
}
Expand Down
19 changes: 10 additions & 9 deletions src/components/Sidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
v-for="(item, index) in $store.getters.sidebar"
:key="index"
:item="item"
:open="openItems.indexOf(index) !== -1"
:open="closedItems.indexOf(index) === -1"
@toggle="toggleItem(index)"
/>
</div>
Expand All @@ -35,7 +35,7 @@ export default {
},
data() {
return {
openItems: []
closedItems: []
}
},
watch: {
Expand All @@ -52,15 +52,15 @@ export default {
},
methods: {
openItem(index) {
if (this.openItems.indexOf(index) === -1) {
this.openItems.push(index)
if (this.closedItems.indexOf(index) > -1) {
this.closedItems = this.closedItems.filter(v => v !== index)
}
},
toggleItem(index) {
if (this.openItems.indexOf(index) === -1) {
this.openItems.push(index)
if (this.closedItems.indexOf(index) === -1) {
this.closedItems.push(index)
} else {
this.openItems = this.openItems.filter(v => v !== index)
this.closedItems = this.closedItems.filter(v => v !== index)
}
},
getCurrentIndex(currentPath, sidebarItems) {
Expand Down Expand Up @@ -91,9 +91,8 @@ export default {
bottom: 0;
z-index: 9;
overflow-y: auto;
padding: 30px 0;
padding: 40px 0 30px 0;
word-break: break-word;
border-right: 1px solid var(--border-color);
& a {
text-decoration: none;
Expand All @@ -105,6 +104,8 @@ export default {
transform: translateX(-100%);
width: 80%;
transition: transform 0.5s cubic-bezier(0.5, 0.32, 0.01, 1);
padding: 30px 0;
border-right: 1px solid var(--border-color);
&.isShown {
transform: translateX(0);
Expand Down
2 changes: 1 addition & 1 deletion src/components/SidebarItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default {
font-size: 0.875rem;
& a {
& /deep/ a {
color: var(--sidebar-link-color);
&:hover {
Expand Down
17 changes: 13 additions & 4 deletions src/components/UniLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,19 @@ import {isExternalLink} from '../utils'
export default {
functional: true,
render(h, {data, children}) {
props: ['openInNewTab', 'externalLinkIcon'],
render(
h,
{
data,
children,
props: {openInNewTab, externalLinkIcon}
}
) {
const attrs = {...data.attrs}
const {to, openInNewTab} = attrs
delete attrs.openInNewTab
const {to} = attrs
if (isExternalLink(to)) {
delete attrs.to
delete attrs.prefetchFiles
Expand All @@ -24,7 +33,7 @@ export default {
},
[
...children,
openInNewTab === false
openInNewTab === false || externalLinkIcon === false
? null
: h('external-link-icon', {class: 'external-link-icon'})
]
Expand Down
3 changes: 1 addition & 2 deletions src/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ a {
}

.Content a {
color: var(--accent-color);
&:hover {
text-decoration: underline;
}
Expand All @@ -33,7 +32,7 @@ a {
}

.Wrap {
max-width: 1060px;
max-width: 1180px;
}

.layout-wide .Wrap {
Expand Down
7 changes: 5 additions & 2 deletions src/css/page-content.css
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,16 @@
font-size: 12px;
color: #cacaca;
}

& code {
color: var(--code-block-text-color);
}
}

& pre,
& .code-mask {
overflow: auto;
position: relative;
font-size: 13px;
margin: 0;
z-index: 2;
font-family: var(--code-font);
Expand All @@ -111,7 +114,7 @@
margin: 0;
padding: 0;
border: none;
font-size: 100%;
font-size: 1em;
background: transparent;
}

Expand Down
Loading

0 comments on commit e0c3e70

Please sign in to comment.