Skip to content

E
Element
Commit deaee6ce authored by 杨奕's avatar 杨奕 Committed by Leopoldthecoder
Browse files
Options

Homepage: add responsive (#1177)

parent 07b8ec03
Show whitespace changes
Inline Side-by-side
Showing with 215 additions and 17 deletions
CHANGELOG.en-US.md
View file @ deaee6ce
......@@ -23,7 +23,7 @@
- Fixed DiatePicker not refresh year when switched in month picker, #1070
- Added $loading service
- Added `manual` trigger in Popover
- Added props: `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
### 1.0.0
......
CHANGELOG.zh-CN.md
View file @ deaee6ce
......@@ -23,7 +23,7 @@
- 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070
- 新增 $loading 服务，用以调用 Loading
- 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual`
- 新增 Tree 的 `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
### 1.0.0
......
examples/app.vue
View file @ deaee6ce
......@@ -54,6 +54,7 @@
.container,
.page-container {
width: 1140px;
padding: 0 30px;
margin: 0 auto;
}
......@@ -101,6 +102,13 @@
width: 100%;
}
}
@media (max-width: 768px) {
.container,
.page-container {
padding: 0 20px;
}
}
</style>
<template>
......
examples/assets/images/element-logo-small.svg 0 → 100644
View file @ deaee6ce
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="30px" height="30px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>Shape Copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
<path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
</g>
</g>
</svg>
\ No newline at end of file
examples/components/footer.vue
View file @ deaee6ce
......@@ -40,6 +40,7 @@
.container {
height: 100%;
box-sizing: border-box;
}
.footer-main {
......@@ -122,6 +123,13 @@
margin: 10px;
}
}
@media (max-width: 768px) {
.footer {
.footer-social {
display: none;
}
}
}
</style>
<script type="text/babel">
......
examples/components/header.vue
View file @ deaee6ce
......@@ -15,6 +15,7 @@
.container {
height: 100%;
box-sizing: border-box;
}
h1 {
......@@ -51,9 +52,13 @@
padding: 0;
margin: 0;
}
.nav-logo {
.nav-logo,
.nav-logo-small {
vertical-align: sub;
}
.nav-logo-small {
display: none;
}
.nav-item {
margin: 0;
float: left;
......@@ -116,6 +121,40 @@
top: 0;
background-color: rgba(32, 160, 255, 0);
}
@media (max-width: 850px) {
.header {
.nav-logo {
display: none;
}
.nav-logo-small {
display: inline-block;
}
.nav-item {
margin-left: 6px;
&:last-child {
margin-left: 10px;
}
a {
padding: 0 5px;
}
}
}
}
@media (max-width: 700px) {
.header {
.container {
padding: 0 12px;
}
.nav-item a,
.nav-lang {
font-size: 12px;
vertical-align: top;
}
}
}
</style>
<template>
<div class="headerWrapper">
......@@ -131,6 +170,10 @@
src="../assets/images/element-logo.svg"
alt="element-logo"
class="nav-logo">
<img
src="../assets/images/element-logo-small.svg"
alt="element-logo"
class="nav-logo-small">
</router-link></h1>
<ul class="nav">
<li class="nav-item">
......
examples/components/side-nav.vue
View file @ deaee6ce
......@@ -55,10 +55,10 @@
}
</style>
<template>
<div class="side-nav">
<div class="side-nav" :style="navStyle">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path">{{item.name}}</a>
<a v-if="!item.path" @click="expandMenu">{{item.name}}</a>
<router-link
v-else
active-class="active"
......@@ -79,7 +79,7 @@
</ul>
<template v-if="item.groups">
<div class="nav-group" v-for="group in item.groups">
<div class="nav-group__title">{{group.groupName}}</div>
<div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
<ul class="pure-menu-list">
<li
class="nav-item"
......@@ -110,8 +110,64 @@
data() {
return {
highlights: [],
navState: []
navState: [],
isSmallScreen: false,
};
},
watch: {
'$route.path'() {
this.handlePathChange();
}
},
computed: {
navStyle() {
return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
}
},
methods: {
handleResize() {
this.isSmallScreen = document.documentElement.clientWidth < 768;
this.handlePathChange();
},
handlePathChange() {
if (!this.isSmallScreen) {
this.expandAllMenu();
return;
}
this.$nextTick(() => {
this.hideAllMenu();
let activeAnchor = this.$el.querySelector('a.active');
let ul = activeAnchor.parentNode;
while (ul.tagName !== 'UL') {
ul = ul.parentNode;
}
ul.style.height = 'auto';
});
},
hideAllMenu() {
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
ul.style.height = '0';
});
},
expandAllMenu() {
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
ul.style.height = 'auto';
});
},
expandMenu(event) {
if (!this.isSmallScreen) return;
let target = event.currentTarget;
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
this.hideAllMenu();
event.currentTarget.nextElementSibling.style.height = 'auto';
}
},
mounted() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
};
</script>
examples/index.tpl
View file @ deaee6ce
......@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
<title>Element</title>
</head>
......
examples/pages/template/component.tpl
View file @ deaee6ce
<style>
.page-component {
padding-bottom: 95px;
box-sizing: border-box;
}
.page-component {
.content {
......@@ -41,10 +42,10 @@
<template>
<div class="page-container page-component">
<el-row>
<el-col :span="6">
<el-col :xs="24" :sm="6">
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
</el-col>
<el-col :span="18">
<el-col :xs="24" :sm="18">
<router-view class="content"></router-view>
<footer-nav></footer-nav>
</el-col>
......
examples/pages/template/design.tpl
View file @ deaee6ce
......@@ -28,28 +28,28 @@
<div>
<h2><%= 1 ></h2>
<el-row :gutter="14" class="cards">
<el-col :span="6">
<el-col :xs="12" :sm="6">
<div class="card">
<img src="~examples/assets/images/consistency.png" alt="Consistency">
<h4><%= 2 ></h4>
<span><%= 3 ></span>
</div>
</el-col>
<el-col :span="6">
<el-col :xs="12" :sm="6">
<div class="card">
<img src="~examples/assets/images/feedback.png" alt="Feedback">
<h4><%= 4 ></h4>
<span><%= 5 ></span>
</div>
</el-col>
<el-col :span="6">
<el-col :xs="12" :sm="6">
<div class="card">
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
<h4><%= 6 ></h4>
<span><%= 7 ></span>
</div>
</el-col>
<el-col :span="6">
<el-col :xs="12" :sm="6">
<div class="card">
<img src="~examples/assets/images/controllability.png" alt="Controllability">
<h4><%= 8 ></h4>
......
examples/pages/template/guide.tpl
View file @ deaee6ce
<style>
.page-guide {
padding: 55px 0 95px;
padding: 55px 30px 95px;
box-sizing: border-box;
.content {
padding-left: 25px;
......@@ -48,14 +49,22 @@
}
}
}
@media (max-width: 768px) {
.page-guide {
.content {
padding-left: 0;
}
}
}
</style>
<template>
<div class="page-container page-guide">
<el-row>
<el-col :span="5">
<el-col :xs="24" :sm="5">
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
</el-col>
<el-col :span="19">
<el-col :xs="24" :sm="19">
<router-view class="content"></router-view>
</el-col>
</el-row>
......
examples/pages/template/index.tpl
View file @ deaee6ce
......@@ -136,7 +136,6 @@
display: block;
&:hover {
background-color: #20a0ff;
color: #fff;
background: #20a0ff;
}
......@@ -153,6 +152,49 @@
@media (max-width: 1140px) {
.cards {
width: 100%;
.container {
width: 100%;
}
}
.banner .container {
width: 100%;
box-sizing: border-box;
}
.banner img {
right: 0;
}
}
@media (max-width: 1000px) {
.banner .container {
img {
display: none;
}
}
}
@media (max-width: 768px) {
.cards {
li {
width: 80%;
margin: 0 auto 20px;
float: none;
}
.card {
height: auto;
padding-bottom: 54px;
}
}
.banner-desc {
#line2 {
display: none;
}
h2 {
font-size: 32px;
}
p {
width: auto;
}
}
}
</style>
......
examples/pages/template/resource.tpl
View file @ deaee6ce
<style scoped>
.page-resource {
padding-top: 55px;
box-sizing: border-box;
}
.cards {
margin: 35px auto 110px;
......@@ -76,6 +77,23 @@
margin-top: 20px;
}
}
@media (max-width: 850px) {
.cards {
li {
max-width: 500px;
float: none;
margin: 10px auto 30px;
width: 80%;
.card {
height: auto;
padding-bottom: 20px;
}
}
h3 {
height: auto;
}
}
}
</style>
<template>
<div class="page-container page-resource">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment