responsive and safari shit

3d4e3eb7 · liyirui_i · 90f35483 · 3d4e3eb7 · 3d4e3eb7 · 3d4e3eb7
14 changed file
--- a/document/common/js/ajax.js
+++ b/document/common/js/ajax.js
+export default function ajax (url) {
+  return new Promise(function (resolve, reject) {
+    const xhr = new window.XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.send(null)
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(xhr.responseText)
+        } else {
+          reject(xhr)
+        }
+      }
+    }
+  })
+}
--- a/document/common/stylus/base.styl
+++ b/document/common/stylus/base.styl
@@ -4,7 +4,7 @@ html, body
  width: 100%
  height: 100%
  color: $color-dark-grey
-  background: $color-background
+  background: white
  font-family -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif
  -webkit-font-smoothing antialiased
 input

--- a/document/common/stylus/md.styl
+++ b/document/common/stylus/md.styl
@@ -4,6 +4,8 @@
  font-size: $fontsize-medium
  line-height: 1.6
  color: $color-dark-grey
+  .hljs
+    background-color: #F9F8F8
  p
    margin: 1.2em 0
    .anchor
@@ -11,11 +13,11 @@
  h2
    margin-top: 1.2em
    margin-bottom: .8em
-    font-size: 1.5em
+    font-size: 2em
    font-weight: 600
  h3
    margin: 1em 0 1em
-    font-size: 1.25em
+    font-size: 1.4em
    font-weight: 600
  h4
    margin: 0.8em 0 0.8em
@@ -40,7 +42,7 @@
      word-break: break-word
    th
      font-weight: 600
-      background-color: $color-row-line
+      background-color: #F9F8F8
  ul, ol, li
    line-height: 20px
  li
@@ -78,4 +80,6 @@ strong
  font-weight: bold
 a
  text-decoration: none
-  color: rgb(0, 154, 97)
+  color:#3CA0E6
+  &:hover
+    color: #137DC6
--- a/document/components/badge/badge.vue
+++ b/document/components/badge/badge.vue
+<template>
+  <div class="badge">
+    <span class="badge-left">{{badgeName}}</span>
+    <span class="badge-right">
+    {{badgeValue}}</span>
+  </div>
+</template>
+<script>
+  import ajax from '../../common/js/ajax.js'
+  const urlMap = {
+    Star: 'https://img.shields.io/github/stars/didi/cube-ui.json',
+    Fork: 'https://img.shields.io/github/forks/didi/cube-ui.json',
+    Watch: 'https://img.shields.io/github/watchers/didi/cube-ui.json'
+  }
+  export default{
+    data() {
+      return {
+        badgeName: '',
+        badgeValue: ''
+      }
+    },
+    props: {
+      type: {
+        type: String,
+        default () {
+          return ''
+        }
+      }
+    },
+    mounted() {
+      let badge = this.type
+      this.getData(badge)
+    },
+    methods: {
+      getData (badge) {
+        let url = urlMap[badge]
+        ajax(url).then((response) => {
+          let result = JSON.parse(response)
+          console.log(result)
+          this.badgeName = result.name
+          this.badgeValue = result.value
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus">
+  .badge
+    display: inline-block
+    text-align: center
+    border: 1px #4AA8FF solid
+    border-radius: 3px
+    font-size: 0px
+    color: #000000
+    margin-right: 3px
+    span
+      display: inline-block
+      font-size: 12px
+    .badge-left
+      padding: 4px 11px
+      background-color: #89C6FF
+    .badge-right
+      padding: 4px 11px
+      border-left: 1px #4AA8FF solid
+      background-color: white
+</style>
--- a/document/components/display/display.vue
+++ b/document/components/display/display.vue
@@ -2,7 +2,7 @@
  <div class="page-display">
    <div class="display-wrapper">
      <section class="mofang-demo">
-        <iframe :src="ifrSrc" frameborder="0" width="100%" height="100%"></iframe>
+        <iframe :src="ifrSrc" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
      </section>
    </div>
  </div>
@@ -39,21 +39,24 @@
  .page-display
    position: relative
    .display-wrapper
-      position: absolute
+      position: relative 
      width: 330px
      height: 645px
      top: 50%
-      left: 50%
-      transform: translate(-50%, -50%)
+      transform: translate(0, -50%)
      background: url("./iphoneX.png") no-repeat
      background-size: cover
+      margin: 0 45px
      .mofang-demo
        position: absolute
        top: 64px
        left: 22px
-        right: 22px
+        width: 286px
        bottom: 36px
        overflow: hidden
        border-radius: 0 0 35px 35px
        background-color: #edf0f4
+        iframe
+          // safari shit
+          width: 286px!important
 </style>
--- a/document/components/example/example.vue
+++ b/document/components/example/example.vue
@@ -31,8 +31,7 @@
      display: inline-block
      margin-bottom: 20px
    .page-display
-      width: 100%
      .display-wrapper
-        position: static
+        margin: 0
        transform: none
 </style>
--- a/document/components/home/home.vue
+++ b/document/components/home/home.vue
@@ -9,7 +9,9 @@
        <site-lang></site-lang>
      </div>
      <span class="toggle-nav" @click="toggleNav">
-        <img src="./nav.svg">
+        <svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
+          <path d="M151.990813 175.990625h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743807a35.999719 35.999719 0 0 1-35.999718 35.999718h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999718V211.990344a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 288.741744h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v22.511824a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-22.511824a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 286.509762h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743806a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-24.743806a35.999719 35.999719 0 0 1 35.999719-35.999719z" fill="#dedcdc"></path>
+        </svg>
      </span>
    </div>
    <div class="router-view">
@@ -68,7 +70,7 @@
    overflow: hidden
    @media screen and (max-width: 960px)
      padding: 0
-      background-color: $color-regular-blue
+      background-color: transparent
    .toggle-nav
      display: none
      @media screen and (max-width: 960px)
@@ -87,6 +89,8 @@
        height: 20px
    &.active
      height: 255px
+      .tabs
+          height: auto
    .logo
      float: left
      padding: 0 28px
@@ -99,10 +103,13 @@
    .tabs
      float: right
      padding: 0 30px
+      box-shadow: none
+      height: 0
      @media screen and (max-width: 960px)
        float: none
        padding: 0
-        border-top: solid 1px rgba(255, 255, 255, 0.5)
+        background-color: #fbfbfb
+        box-shadow: 0 -2px 8px rgba(0,0,0,0.1)
      .tab
        display: inline-block
        margin: 0 10px
@@ -112,7 +119,7 @@
          display: block
          line-height: 45px
          margin: 0 20px
-          color: $color-white
+          color: black
        &:hover
          color: $color-orange
      .router-link-active

--- a/document/components/index/index.vue
+++ b/document/components/index/index.vue
@@ -6,9 +6,13 @@
        <slot name="desc"></slot>
      </p>
      <div class="ghbtns">
-        <a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/stars/didi/cube-ui.svg?style=social&label=Star"></a>
-        <a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/forks/didi/cube-ui.svg?style=social&label=Fork"></a>
-        <a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/watchers/wepyjs/wepy.svg?style=social&label=Watch"></a>
+        <Badge type="Star"></Badge>
+        <Badge type="Fork"></Badge>
+        <Badge type="Watch"></Badge>
+      </div>
+      <div>
+        <router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
+        <router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速开始</span></router-link>
      </div>
    </div>
    <section class="features">
@@ -46,9 +50,16 @@
 </template>

 <script>
-  export default {}
+  import Badge from '../badge/badge.vue'
+  export default {
+    components: {
+      Badge
+    }
+  }
 </script>
 <style lang="stylus">
+@require "~@/common/stylus/variable.styl"
+
  .home-index
    min-height: 100%
    box-sizing: border-box
@@ -62,19 +73,32 @@
      background: url("./cube.png") no-repeat 520px -31px
      background-size: 1515px 696px
      @media screen and (max-width: 960px)
-        padding: 50px 0 30px 0
+        padding: 40px 0 30px 0
+        margin-top: 0
        text-align: center
      h2
        font-size: 60px
        @media screen and (max-width: 960px)
          font-size: 30px
      > p
-        margin: 30px 0
+        margin: 30px 0 26px 0
        font-size: 18px
-  .ghbtns
-    height: 22px
-    a
-      display: inline-block
+  .btn-link
+    display: inline-block
+    box-sizing: border-box
+    width: 164px
+    height: 42px
+    text-align: center
+    line-height: 42px
+    font-size: $fontsize-large-x
+    color: #000000
+    background-color: #89C6FF
+    border-radius: 3px
+    margin-top: 36px
+    margin-right: 18px
+    border: 2px solid #89C6FF
+  .btn-active
+    background-color: white
  .features
    padding: 60px 0 20px 0
    background-color: #FBFBFB

--- a/document/components/lang/lang.vue
+++ b/document/components/lang/lang.vue
@@ -38,7 +38,7 @@
    a
      color: #4B4B4C
      @media screen and (max-width: 960px)
-        color: $color-white
+        color: black
      &:active, &:hover
        color: $color-orange
 </style>
--- a/document/components/side-list/side-list.vue
+++ b/document/components/side-list/side-list.vue
@@ -28,7 +28,6 @@
        docPath = newPath.split('/').pop()
        root = this.seekRoot(navList, docPath)
        rootNav = root && navList[root]
-        console.log('xx', rootNav, root)
        this.$set(rootNav, 'isRootActive', true)
      }, {immediate: true})
    },

--- a/document/components/side-nav/side-nav.vue
+++ b/document/components/side-nav/side-nav.vue
@@ -2,7 +2,7 @@
  <ul class="nav-ul">
    <li class="nav-li" v-for="(item, key) in data" :class="{open: item.isRootActive}" :key="key">
      <template v-if="item.name">
-        <p class="nav-name" @click="Switch(item)">{{item.name}}</p>
+        <p class="nav-name" @click="derail(item)">{{item.name}}</p>
        <side-nav :data="item.subList"></side-nav>
      </template>
      <router-link
@@ -29,7 +29,7 @@
      }
    },
    methods: {
-      Switch (item) {
+      derail (item) {
        let nowActive = item.isRootActive
        this.$set(item, 'isRootActive', !nowActive)
      }
@@ -55,7 +55,7 @@
      left: 30px
      top: 0
      font-size: 22px
-      color: $color-black
+      color: #000000
    .arrow
      width: 10px
      height: 10px
@@ -73,13 +73,13 @@
        top: 0
        right: 0px
      &::before
-        border-top-color: $color-black
+        border-top-color: #000000
        top: 2px
    .rotate
      transform: rotate(180deg)
    .nav-name
      font-size: $fontsize-large-xxx
-      color: $color-black
+      color: #000000
      border-bottom: #E3E3E3 solid 1px
      padding: 15px 0 15px 30px
      margin-left: 30px
@@ -92,7 +92,7 @@
        padding: 5px 0
      .nav-name
        font-size: $fontsize-large-x
-        color: $color-black
+        color: #000000
        border: none
        padding: 0
        margin: 0
@@ -111,7 +111,7 @@
          content: ""
          width: 20px
          height: 100%
-          background-color: $color-orange-light
+          background-color: #FFC9A9
          position: absolute
          z-index: 1
          left: 0

--- a/document/components/viewport/viewport.vue
+++ b/document/components/viewport/viewport.vue
@@ -113,34 +113,33 @@
      &.active
        background-color: rgba(0, 0, 0 ,0.2)
        transition: all 0.4s ease
-  .page-sidelist
-    flex: none
-    width: 280px
-    height: 100%
-    box-sizing: border-box
-    overflow-y: auto
-    padding-right: 40px
-    @media screen and (max-width: 960px)
+    .page-sidelist
+      flex: none
+      width: 280px
      height: 100%
-      padding: 5px 20px
-  .page-doc
-    flex: 1
-    height: 100%
-    padding: 44px 20px 20px 20px
-    box-sizing: border-box
-    overflow-y: auto
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: auto
-      padding: 20px 20px 0 20px
-    h2:first-child
-      margin-top: 0
-  .page-display
-    flex: none
-    height: 100%
-    width: 420px
-    overflow-y: auto
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: 800px
+      box-sizing: border-box
+      overflow-y: auto
+      padding-right: 40px
+      @media screen and (max-width: 960px)
+        height: 100%
+        padding: 5px 20px
+    .page-doc
+      flex: 1
+      height: 100%
+      padding: 44px 20px 20px 20px
+      box-sizing: border-box
+      overflow-y: auto
+      @media screen and (max-width: 960px)
+        flex: 1 1 100%
+        height: auto
+        padding: 20px 20px 0 20px
+      h2:first-child
+        margin-top: 0
+    .page-display
+      flex: none
+      height: 100%
+      overflow-y: auto
+      @media screen and (max-width: 960px)
+        flex: 1 1 100%
+        height: 800px
 </style>
--- a/document/main.js
+++ b/document/main.js
@@ -4,16 +4,16 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import hljs from './common/js/highlight'
+import './common/js/highlight'

 // TODO 需要使用 vConsole 的同学请打开注释即可
 /* eslint-disable no-unused-vars */
 // import vConsole from 'vconsole'

 import './common/stylus/index.styl'
-import 'highlight.js/styles/solarized-dark.css'
+import 'highlight.js/styles/atelier-dune-light.css'

-hljs.initHighlightingOnLoad()
+// hljs.initHighlightingOnLoad()

 import './common/js/directive.js'


--- a/src/common/stylus/var/color.styl
+++ b/src/common/stylus/var/color.styl
 // color vars
 //// basic
-$color-orange = #FC9153
-$color-orange-light = #FFC9A9
+$color-orange = #fc9153
 $color-regular-blue = #4a4c5b
 $color-background = #f3f4f5
 $color-white = #fff
@@ -35,6 +34,3 @@ $color-col-line = #f5f5f5

 /// mask
 $color-mask-bg = rgba(37, 38, 45, .4)
-
-//black
-$color-black = #000000
\ No newline at end of file