Skip to content

Commit 990dc4e

Browse files
tangbctangbc
committed
Update demos with media query.
1 parent 5af33ef commit 990dc4e

File tree

9 files changed

+274
-39
lines changed

9 files changed

+274
-39
lines changed

‎demos/common/Item.vue

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,24 @@
22
<div class="item" v-bind:style="itemStyle">
33
<div class="index">#{{ index }}</div>
44
<div class="card">
5-
<div class="card-avatar" v-bind:class="{'no-avatar': !avatar}">
6-
<span v-if="!avatar">{{ info.name.substr(0, 2) }}</span>
5+
<div class="card-avatar"
6+
v-bind:class="{'no-avatar': !avatar}"
7+
v-bind:style="{'background-color': !avatar && info.color}"
8+
>
9+
<span v-if="!avatar">{{ getAbbrName(info.name) }}</span>
710
<img v-else class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR">
811
</div>
912
<div class="card-info">
1013
<div class="card-info-item name">Name: {{ info.name }}</div>
11-
<div class="card-info-item email">Email: {{ info.email }}</div>
14+
<div class="card-info-item time">Birthday: {{ info.time }}</div>
1215
</div>
1316
<div class="card-height">{{ this.height }}px</div>
1417
</div>
1518
</div>
1619
</template>
1720

1821
<script>
19-
import { getQuery } from './util'
22+
import { getQuery, isMobile } from './util'
2023
2124
export default {
2225
name: 'item',
@@ -26,14 +29,15 @@ export default {
2629
index: Number,
2730
info: {
2831
name: String,
29-
email: String,
30-
avatar: String
32+
time: String,
33+
avatar: String,
34+
color: String
3135
}
3236
},
3337
3438
data () {
3539
return {
36-
avatar: getQuery('avatar') !== null
40+
avatar: isMobile ? getQuery('avatar') !== null : getQuery('noavatar') === null
3741
}
3842
},
3943
@@ -44,6 +48,17 @@ export default {
4448
'line-height': `${this.height}px`,
4549
}
4650
}
51+
},
52+
53+
methods: {
54+
getAbbrName (name) {
55+
const arr = name.split(' ')
56+
if (arr.length > 1) {
57+
return arr[0][0] + arr[1][0]
58+
} else {
59+
return name.substr(0, 2)
60+
}
61+
}
4762
}
4863
}
4964
</script>
@@ -52,11 +67,11 @@ export default {
5267
.item {
5368
box-sizing: border-box;
5469
display: flex;
55-
// &:hover {
56-
// .card-height {
57-
// visibility: visible;
58-
// }
59-
// }
70+
-webkit-user-select: none;
71+
user-select: none;
72+
&:active, &:hover {
73+
background-color: #f0f8ff;
74+
}
6075
.index {
6176
flex: 1;
6277
text-align: center;
@@ -66,7 +81,10 @@ export default {
6681
flex: 4;
6782
display: flex;
6883
align-items: center;
69-
border-bottom: 1px dashed #a9a9a9;
84+
border-bottom: 1px dashed #cecece;
85+
@media (max-width: 640px), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
86+
border-bottom: 0.5px solid #cccccc;
87+
}
7088
&-avatar {
7189
width: 40px;
7290
height: 40px;
@@ -100,21 +118,26 @@ export default {
100118
text-overflow: ellipsis;
101119
max-width: 300px;
102120
overflow: hidden;
121+
@media (max-width: 640px) {
122+
max-width: 180px;
123+
}
103124
&.name {
104125
top: 25%;
105126
}
106-
&.email {
127+
&.time {
107128
top: 5%;
108129
color: #a9a9a9;
109130
}
110131
}
111132
}
112133
&-height {
113-
// visibility: hidden;
114134
position: absolute;
115135
right: 30px;
116136
font-style: italic;
117137
color: #d8bfd8;
138+
@media (max-width: 375px) {
139+
visibility: hidden;
140+
}
118141
}
119142
}
120143
}

‎demos/common/app.less

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ header {
1212
font-family: monospace;
1313
h1 {
1414
padding: 20px 0;
15+
@media (max-width: 640px) {
16+
padding: 10px 0;
17+
}
1518
}
1619
p {
1720
font-size: 14px;
@@ -32,11 +35,19 @@ header {
3235
position: absolute;
3336
left: 50%;
3437
transform: translateX(-50%);
38+
@media (max-width: 640px) {
39+
width: 90%;
40+
}
3541
}
3642
.main {
3743
padding: 5px;
38-
background-color: #b6bda7;
44+
border-radius: 3px;
45+
background-color: #4682b4;
46+
@media (max-width: 640px) {
47+
padding: 3px;
48+
}
3949
}
4050
.list {
4151
background-color: #ffffff;
52+
-webkit-overflow-scrolling: touch;
4253
}

‎demos/common/util.js

Lines changed: 185 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,187 @@
11
import { Random } from './mock.min'
22

3+
const topTypeArr = [
4+
'NoHair',
5+
'Eyepatch',
6+
'Hat',
7+
'Hijab',
8+
'Turban',
9+
'WinterHat1',
10+
'WinterHat2',
11+
'WinterHat3',
12+
'WinterHat4',
13+
'LongHairBigHair',
14+
'LongHairBob',
15+
'LongHairBun',
16+
'LongHairCurly',
17+
'LongHairCurvy',
18+
'LongHairDreads',
19+
'LongHairFrida',
20+
'LongHairFro',
21+
'LongHairFroBand',
22+
'LongHairNotTooLong',
23+
'LongHairShavedSides',
24+
'LongHairMiaWallace',
25+
'LongHairStraight',
26+
'LongHairStraight2',
27+
'LongHairStraightStrand',
28+
'ShortHairDreads01',
29+
'ShortHairDreads02',
30+
'ShortHairFrizzle',
31+
'ShortHairShaggyMullet',
32+
'ShortHairShortCurly',
33+
'ShortHairShortFlat',
34+
'ShortHairShortRound',
35+
'ShortHairShortWaved',
36+
'ShortHairSides',
37+
'ShortHairTheCaesar',
38+
'ShortHairTheCaesarSidePart',
39+
]
40+
const accessoriesTypeArr = [
41+
'Blank',
42+
'Kurt',
43+
'Prescription01',
44+
'Prescription02',
45+
'Round',
46+
'Sunglasses',
47+
'Wayfarers',
48+
]
49+
const facialHairTypeArr = [
50+
'Blank',
51+
'BeardMedium',
52+
'BeardLight',
53+
'BeardMagestic',
54+
'MoustacheFancy',
55+
'MoustacheMagnum',
56+
]
57+
const facialHairColor = [
58+
'Auburn',
59+
'Black',
60+
'Blonde',
61+
'BlondeGolden',
62+
'Brown',
63+
'BrownDark',
64+
'Platinum',
65+
'Red',
66+
]
67+
const clotheTypeArr = [
68+
'BlazerShirt',
69+
'BlazerSweater',
70+
'CollarSweater',
71+
'GraphicShirt',
72+
'Hoodie',
73+
'Overall',
74+
'ShirtCrewNeck',
75+
'ShirtScoopNeck',
76+
'ShirtVNeck',
77+
]
78+
const clotheColor = [
79+
'Black',
80+
'Blue01',
81+
'Blue02',
82+
'Blue03',
83+
'Gray01',
84+
'Gray02',
85+
'Heather',
86+
'PastelBlue',
87+
'PastelGreen',
88+
'PastelOrange',
89+
'PastelRed',
90+
'PastelYellow',
91+
'Pink',
92+
'Red',
93+
'White',
94+
]
95+
const graphicTypeArr = [
96+
'Bat',
97+
'Cumbia',
98+
'Deer',
99+
'Diamond',
100+
'Hola',
101+
'Pizza',
102+
'Resist',
103+
'Selena',
104+
'Bear',
105+
'SkullOutline',
106+
'Skull',
107+
]
108+
const eyeTypeArr = [
109+
'Close',
110+
'Cry',
111+
'Default',
112+
'Dizzy',
113+
'EyeRoll',
114+
'Happy',
115+
'Hearts',
116+
'Side',
117+
'Squint',
118+
'Surprised',
119+
'Wink',
120+
'WinkWacky',
121+
]
122+
const eyebrowTypeArr = [
123+
'Angry',
124+
'AngryNatural',
125+
'Default',
126+
'DefaultNatural',
127+
'FlatNatural',
128+
'RaisedExcited',
129+
'RaisedExcitedNatural',
130+
'SadConcerned',
131+
'SadConcernedNatural',
132+
'UnibrowNatural',
133+
'UpDown',
134+
'UpDownNatural',
135+
]
136+
const mouthTypeArr = [
137+
'Concerned',
138+
'Default',
139+
'Disbelief',
140+
'Eating',
141+
'Grimace',
142+
'Sad',
143+
'ScreamOpen',
144+
'Serious',
145+
'Smile',
146+
'Tongue',
147+
'Twinkle',
148+
'Vomit',
149+
]
150+
const skinColorArr = [
151+
'Tanned',
152+
'Yellow',
153+
'Pale',
154+
'Light',
155+
'Brown',
156+
'DarkBrown',
157+
'Black',
158+
]
159+
160+
export const getRandomAvatar = () => {
161+
return 'https://avataaars.io/?' + [
162+
`avatarStyle=Transparent`,
163+
`topType=${Random.pick(topTypeArr)}`,
164+
`accessoriesType=${Random.pick(accessoriesTypeArr)}`,
165+
`hatColor=${Random.pick(facialHairTypeArr)}`,
166+
`facialHairType=${Random.pick(facialHairTypeArr)}`,
167+
`facialHairColor=${Random.pick(facialHairColor)}`,
168+
// `clotheType=${Random.pick(clotheTypeArr)}`,
169+
`clotheColor=${Random.pick(clotheColor)}`,
170+
`graphicType=${Random.pick(graphicTypeArr)}`,
171+
`eyeType=${Random.pick(eyeTypeArr)}`,
172+
// `eyebrowType=${Random.pick(eyebrowTypeArr)}`,
173+
`mouthType=${Random.pick(mouthTypeArr)}`,
174+
`skinColor=${Random.pick(skinColorArr)}`,
175+
].join('&')
176+
}
177+
3178
export const getRandomUser = () => {
4-
const name = Random.name()
5179
return {
6-
name: name,
7-
email: Random.email(),
8-
avatar: `https://api.adorable.io/avatars/100/${name}`
9-
// avatar: `https://getavataaars.com/?hairColor=BrownDark&topType=LongHairStraight2`
180+
name: Random.name(),
181+
time: Random.date(),
182+
color: Random.color(),
183+
avatar: getRandomAvatar(),
184+
// avatar: `https://api.adorable.io/avatars/100/${Random.name()}`
10185
}
11186
}
12187

@@ -17,3 +192,8 @@ export const getQuery = (query) => {
17192
return false
18193
}
19194
}
195+
196+
const ua = navigator.userAgent
197+
const Android = !!ua.match(/Android/i)
198+
export const iOS = !!ua.match(/iPhone|iPad|iPod/i)
199+
export const isMobile = Android || iOS

‎demos/item-mode/App.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="container">
55
<header>
66
<h1>item-mode</h1>
7-
<p>Use vNode to build item list.</p>
7+
<p>Use vNode to build list.</p>
88
</header>
99
<div class="main">
1010
<virtual-list class="list"
@@ -30,6 +30,11 @@ const remain = 6
3030
const itemSize = 80
3131
const itemCount = 1000 * 100
3232
33+
let userInfoList = []
34+
for (let i = 0; i < itemCount; i++) {
35+
userInfoList.push(getRandomUser())
36+
}
37+
3338
export default {
3439
name: 'app',
3540
@@ -53,7 +58,7 @@ export default {
5358
props: {
5459
height: itemSize,
5560
index: itemIndex,
56-
info: getRandomUser()
61+
info: userInfoList[itemIndex] || {}
5762
}
5863
}
5964
}

‎demos/item-mode/build.js

Lines changed: 8 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/vfor-mode/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="container">
55
<header>
66
<h1>vfor-mode</h1>
7-
<p>Use v-for to build item list.</p>
7+
<p>Use v-for to build list.</p>
88
</header>
99
<div class="main">
1010
<virtual-list class="list"

0 commit comments

Comments
 (0)