Skip to content

Commit 0c50fec

Browse files
author
Adam Bradley
committed
feature(itemTextWrap): Set text-wrapping at the list level, closes #500 
1 parent 2236cf1 commit 0c50fec

File tree

2 files changed

+109
-111
lines changed

2 files changed

+109
-111
lines changed

‎scss/_items.scss

+1
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ a.item-content {
194194
text-decoration: none;
195195
}
196196

197+
.item-text-wrap .item,
197198
.item-text-wrap,
198199
.item-text-wrap h1,
199200
.item-text-wrap h2,

‎test/cards.html

+108-111
Original file line numberDiff line numberDiff line change
@@ -9,139 +9,136 @@
99
</head>
1010
<body>
1111

12-
<section>
13-
14-
<header class="bar bar-header bar-dark">
15-
<h1 class="title">Cards</h1>
16-
</header>
17-
18-
<main class="content has-header overflow-scroll ionic-pseudo">
19-
20-
<div class="card">
21-
<div class="item item-text-wrap">
22-
This is a basic Card with some text.
23-
</div>
12+
<header class="bar bar-header bar-dark">
13+
<h1 class="title">Cards</h1>
14+
</header>
15+
16+
<main class="content has-header overflow-scroll ionic-pseudo" style="position:fixed">
17+
18+
<div class="card">
19+
<div class="item item-text-wrap">
20+
This is a basic Card with some wrapping text.
21+
This is a basic Card with some wrapping text.
22+
This is a basic Card with some wrapping text.
2423
</div>
25-
26-
<div class="card">
27-
<div class="item item-divider">
28-
I'm a Header in a Card!
29-
</div>
30-
<div class="item item-text-wrap">
31-
This is a basic Card with some text.
32-
</div>
24+
</div>
25+
26+
<div class="card item-text-wrap">
27+
<div class="item">
28+
This is a basic Card with some wrapping text.
29+
This is a basic Card with some wrapping text.
30+
This is a basic Card with some wrapping text.
3331
</div>
34-
35-
<div class="card">
36-
<div class="item item-divider">
37-
I'm a Header in a Card!
38-
</div>
39-
<div class="item item-text-wrap">
40-
This is a basic Card with some text.
41-
</div>
42-
<div class="item item-divider">
43-
I'm a Footer in a Card!
44-
</div>
32+
</div>
33+
34+
<div class="card">
35+
<div class="item item-divider">
36+
I'm a Header in a Card!
4537
</div>
38+
<div class="item item-text-wrap">
39+
This is a basic Card with some text.
40+
</div>
41+
<div class="item item-divider">
42+
I'm a Footer in a Card!
43+
</div>
44+
</div>
4645

47-
<div class="list card">
46+
<div class="list card">
4847

49-
<a href="#" class="item item-icon-left">
50-
<i class="icon ion-home"></i>
51-
Enter home address
52-
</a>
48+
<a href="#" class="item item-icon-left">
49+
<i class="icon ion-home"></i>
50+
Enter home address
51+
</a>
5352

54-
<a href="#" class="item item-icon-left">
55-
<i class="icon ion-ios7-telephone"></i>
56-
Enter phone number
57-
</a>
53+
<a href="#" class="item item-icon-left">
54+
<i class="icon ion-ios7-telephone"></i>
55+
Enter phone number
56+
</a>
5857

59-
<a href="#" class="item item-icon-left">
60-
<i class="icon ion-wifi"></i>
61-
Enter wireless password
62-
</a>
58+
<a href="#" class="item item-icon-left">
59+
<i class="icon ion-wifi"></i>
60+
Enter wireless password
61+
</a>
6362

64-
<a href="#" class="item item-icon-left">
65-
<i class="icon ion-card"></i>
66-
Enter card information
67-
</a>
63+
<a href="#" class="item item-icon-left">
64+
<i class="icon ion-card"></i>
65+
Enter card information
66+
</a>
67+
68+
</div>
69+
70+
<div class="list card">
71+
72+
<div class="item item-avatar">
73+
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
74+
<h2>Pretty Hate Machine</h2>
75+
<p>Nine Inch Nails</p>
76+
</div>
6877

78+
<div class="item item-image">
79+
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
6980
</div>
7081

71-
<div class="list card">
82+
<a href="#" class="item item-icon-left">
83+
<i class="icon ion-music-note"></i>
84+
Start listening
85+
</a>
7286

73-
<div class="item item-avatar">
74-
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
75-
<h2>Pretty Hate Machine</h2>
76-
<p>Nine Inch Nails</p>
77-
</div>
87+
</div>
7888

79-
<div class="item item-image">
80-
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
81-
</div>
89+
<div class="list card">
8290

83-
<a href="#" class="item item-icon-left">
84-
<i class="icon ion-music-note"></i>
85-
Start listening
86-
</a>
91+
<div class="item item-avatar">
92+
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
93+
<h2>Marty McFly</h2>
94+
<p>November 05, 1955</p>
95+
</div>
8796

97+
<div class="item item-thumbnail-left">
98+
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
99+
<h2>Marty McFly</h2>
100+
<p>November 05, 1955</p>
88101
</div>
89102

90-
<div class="list card">
91-
92-
<div class="item item-avatar">
93-
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
94-
<h2>Marty McFly</h2>
95-
<p>November 05, 1955</p>
96-
</div>
97-
98-
<div class="item item-thumbnail-left">
99-
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
100-
<h2>Marty McFly</h2>
101-
<p>November 05, 1955</p>
102-
</div>
103-
104-
<div class="item item-thumbnail-right">
105-
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
106-
<h2>Marty McFly</h2>
107-
<p>November 05, 1955</p>
108-
</div>
109-
110-
<div class="item item-body">
111-
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
112-
<p>
113-
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
114-
the content is from a card-body consisting of an image and paragraph text. The footer
115-
consists of a Tab Bar, icons aligned left, within the card-footer.
116-
</p>
117-
<p>
118-
<a href="#" class="subdued">1 Like</a>
119-
<a href="#" class="subdued">5 Comments</a>
120-
</p>
121-
</div>
122-
123-
<div class="item tabs tabs-secondary tabs-icon-left">
124-
<a class="tab-item" href="#">
125-
<i class="icon ion-thumbsup"></i>
126-
Like
127-
</a>
128-
<a class="tab-item" href="#">
129-
<i class="icon ion-chatbox"></i>
130-
Comment
131-
</a>
132-
<a class="tab-item" href="#">
133-
<i class="icon ion-share"></i>
134-
Share
135-
</a>
136-
</div>
103+
<div class="item item-thumbnail-right">
104+
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
105+
<h2>Marty McFly</h2>
106+
<p>November 05, 1955</p>
107+
</div>
137108

109+
<div class="item item-body">
110+
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
111+
<p>
112+
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
113+
the content is from a card-body consisting of an image and paragraph text. The footer
114+
consists of a Tab Bar, icons aligned left, within the card-footer.
115+
</p>
116+
<p>
117+
<a href="#" class="subdued">1 Like</a>
118+
<a href="#" class="subdued">5 Comments</a>
119+
</p>
120+
</div>
121+
122+
<div class="item tabs tabs-secondary tabs-icon-left">
123+
<a class="tab-item" href="#">
124+
<i class="icon ion-thumbsup"></i>
125+
Like
126+
</a>
127+
<a class="tab-item" href="#">
128+
<i class="icon ion-chatbox"></i>
129+
Comment
130+
</a>
131+
<a class="tab-item" href="#">
132+
<i class="icon ion-share"></i>
133+
Share
134+
</a>
138135
</div>
139136

140-
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
137+
</div>
141138

142-
</main>
139+
<p><a class="button button-secondary" href="../">Homepage</a></p>
143140

144-
</section>
141+
</main>
145142

146143
</body>
147144
</html>

0 commit comments

Comments
 (0)