Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 7efb351

Browse files
devversionThomasBurleson
devversion
authored and
ThomasBurleson
committed
fix(list): make dense and normal showcase responsive.
Currently the dense / normal demo won't shrink on mobile screen sizes. After this commit, the two showcases will wrap on a small screen size. But notice, the divider is now also splitting the toolbar, instead of only the content. Closes #7395
1 parent be5a57a commit 7efb351

File tree

1 file changed

+145
-128
lines changed

1 file changed

+145
-128
lines changed

‎src/components/list/demoBasicUsage/index.html

Lines changed: 145 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,146 @@
1-
<div ng-controller="AppCtrl" ng-cloak>
2-
<md-toolbar layout="row" class="md-hue-2">
3-
<div flex class="md-toolbar-tools">
4-
<span>Normal</span>
5-
</div>
6-
<div flex class="md-toolbar-tools">
7-
<span>Dense</span>
8-
</div>
9-
</md-toolbar>
10-
<md-content layout="row">
11-
<md-list flex>
12-
<md-subheader class="md-no-sticky">3 line item</md-subheader>
13-
<md-list-item class="md-3-line" ng-repeat="item in todos">
14-
<img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
15-
<div class="md-list-item-text" layout="column">
16-
<h3>{{ item.who }}</h3>
17-
<h4>{{ item.what }}</h4>
18-
<p>{{ item.notes }}</p>
19-
</div>
20-
</md-list-item>
21-
<md-divider ></md-divider>
22-
<md-subheader class="md-no-sticky">2 line item</md-subheader>
23-
<md-list-item class="md-2-line">
24-
<img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
25-
<div class="md-list-item-text">
26-
<h3>{{ todos[0].who }}</h3>
27-
<p>Secondary text</p>
28-
</div>
29-
</md-list-item>
30-
<md-divider ></md-divider>
31-
<md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
32-
<md-list-item class="md-3-line md-long-text">
33-
<img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
34-
<div class="md-list-item-text">
35-
<h3>{{ todos[0].who }}</h3>
36-
<p>
37-
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
38-
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
39-
velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
40-
</p>
41-
</div>
42-
</md-list-item>
43-
<md-list-item class="md-3-line md-long-text">
44-
<img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}" />
45-
<div class="md-list-item-text">
46-
<h3>{{ todos[1].who }}</h3>
47-
<p>
48-
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
49-
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
50-
velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
51-
</p>
52-
</div>
53-
</md-list-item>
54-
<md-divider ></md-divider>
55-
<md-subheader class="md-no-sticky">Classes</md-subheader>
56-
<md-list-item class="md-2-line" ng-repeat="phone in phones">
57-
<md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
58-
<img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
59-
ng-if="phone.options.face"/>
60-
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
61-
<h3> {{ phone.number }} </h3>
62-
<p> {{ phone.type }} </p>
63-
</div>
64-
<md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)" ng-if="phone.options.actionIcon" aria-label="call">
65-
<md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
66-
</md-button>
67-
</md-list-item>
68-
</md-list>
69-
<md-divider></md-divider>
70-
<md-list flex class="md-dense">
71-
<md-subheader class="md-no-sticky">3 line item</md-subheader>
72-
<md-list-item class="md-3-line" ng-repeat="item in todos">
73-
<img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
74-
<div class="md-list-item-text" layout="column">
75-
<h3>{{ item.who }}</h3>
76-
<h4>{{ item.what }}</h4>
77-
<p>{{ item.notes }}</p>
78-
</div>
79-
</md-list-item>
80-
<md-divider ></md-divider>
81-
<md-subheader class="md-no-sticky">2 line item</md-subheader>
82-
<md-list-item class="md-2-line">
83-
<img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
84-
<div class="md-list-item-text">
85-
<h3>{{ todos[0].who }}</h3>
86-
<p>Secondary text</p>
87-
</div>
88-
</md-list-item>
89-
<md-divider ></md-divider>
90-
<md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
91-
<md-list-item class="md-3-line md-long-text">
92-
<img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
93-
<div class="md-list-item-text">
94-
<h3>{{ todos[0].who }}</h3>
95-
<p>
96-
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
97-
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
98-
velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
99-
</p>
100-
</div>
101-
</md-list-item>
102-
<md-list-item class="md-3-line md-long-text">
103-
<img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}" />
104-
<div class="md-list-item-text">
105-
<h3>{{ todos[1].who }}</h3>
106-
<p>
107-
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
108-
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
109-
velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
110-
</p>
111-
</div>
112-
</md-list-item>
113-
<md-divider ></md-divider>
114-
<md-subheader class="md-no-sticky">Classes</md-subheader>
115-
<md-list-item class="md-2-line" ng-repeat="phone in phones">
116-
<md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
117-
<img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
118-
ng-if="phone.options.face"/>
119-
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
120-
<h3> {{ phone.number }} </h3>
121-
<p> {{ phone.type }} </p>
122-
</div>
123-
<md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)" ng-if="phone.options.actionIcon" aria-label="call">
124-
<md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
125-
</md-button>
126-
</md-list-item>
127-
</md-list>
128-
</md-content>
1+
<div ng-controller="AppCtrl" ng-cloak layout-gt-sm="row" layout="column">
2+
3+
<div flex-gt-sm="50" flex>
4+
5+
<md-toolbar layout="row" class="md-hue-2">
6+
<div class="md-toolbar-tools">
7+
<span>Normal</span>
8+
</div>
9+
</md-toolbar>
10+
11+
<md-content>
12+
<md-list flex>
13+
<md-subheader class="md-no-sticky">3 line item</md-subheader>
14+
<md-list-item class="md-3-line" ng-repeat="item in todos">
15+
<img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
16+
<div class="md-list-item-text" layout="column">
17+
<h3>{{ item.who }}</h3>
18+
<h4>{{ item.what }}</h4>
19+
<p>{{ item.notes }}</p>
20+
</div>
21+
</md-list-item>
22+
<md-divider ></md-divider>
23+
<md-subheader class="md-no-sticky">2 line item</md-subheader>
24+
<md-list-item class="md-2-line">
25+
<img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
26+
<div class="md-list-item-text">
27+
<h3>{{ todos[0].who }}</h3>
28+
<p>Secondary text</p>
29+
</div>
30+
</md-list-item>
31+
<md-divider ></md-divider>
32+
<md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
33+
<md-list-item class="md-3-line md-long-text">
34+
<img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
35+
<div class="md-list-item-text">
36+
<h3>{{ todos[0].who }}</h3>
37+
<p>
38+
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
39+
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
40+
velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
41+
</p>
42+
</div>
43+
</md-list-item>
44+
<md-list-item class="md-3-line md-long-text">
45+
<img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}" />
46+
<div class="md-list-item-text">
47+
<h3>{{ todos[1].who }}</h3>
48+
<p>
49+
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
50+
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
51+
velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
52+
</p>
53+
</div>
54+
</md-list-item>
55+
<md-divider ></md-divider>
56+
<md-subheader class="md-no-sticky">Classes</md-subheader>
57+
<md-list-item class="md-2-line" ng-repeat="phone in phones">
58+
<md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
59+
<img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
60+
ng-if="phone.options.face"/>
61+
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
62+
<h3> {{ phone.number }} </h3>
63+
<p> {{ phone.type }} </p>
64+
</div>
65+
<md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)" ng-if="phone.options.actionIcon" aria-label="call">
66+
<md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
67+
</md-button>
68+
</md-list-item>
69+
</md-list>
70+
</md-content>
71+
</div>
72+
73+
<md-divider></md-divider>
74+
75+
<div flex-gt-sm="50" flex>
76+
77+
<md-toolbar layout="row" class="md-hue-2">
78+
<div class="md-toolbar-tools">
79+
<span>Dense</span>
80+
</div>
81+
</md-toolbar>
82+
83+
<md-content>
84+
85+
<md-list class="md-dense" flex>
86+
<md-subheader class="md-no-sticky">3 line item</md-subheader>
87+
<md-list-item class="md-3-line" ng-repeat="item in todos">
88+
<img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
89+
<div class="md-list-item-text" layout="column">
90+
<h3>{{ item.who }}</h3>
91+
<h4>{{ item.what }}</h4>
92+
<p>{{ item.notes }}</p>
93+
</div>
94+
</md-list-item>
95+
<md-divider ></md-divider>
96+
<md-subheader class="md-no-sticky">2 line item</md-subheader>
97+
<md-list-item class="md-2-line">
98+
<img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
99+
<div class="md-list-item-text">
100+
<h3>{{ todos[0].who }}</h3>
101+
<p>Secondary text</p>
102+
</div>
103+
</md-list-item>
104+
<md-divider ></md-divider>
105+
<md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
106+
<md-list-item class="md-3-line md-long-text">
107+
<img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
108+
<div class="md-list-item-text">
109+
<h3>{{ todos[0].who }}</h3>
110+
<p>
111+
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
112+
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
113+
velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
114+
</p>
115+
</div>
116+
</md-list-item>
117+
<md-list-item class="md-3-line md-long-text">
118+
<img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}" />
119+
<div class="md-list-item-text">
120+
<h3>{{ todos[1].who }}</h3>
121+
<p>
122+
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
123+
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
124+
velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos himenaeos.
125+
</p>
126+
</div>
127+
</md-list-item>
128+
<md-divider ></md-divider>
129+
<md-subheader class="md-no-sticky">Classes</md-subheader>
130+
<md-list-item class="md-2-line" ng-repeat="phone in phones">
131+
<md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
132+
<img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
133+
ng-if="phone.options.face"/>
134+
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
135+
<h3> {{ phone.number }} </h3>
136+
<p> {{ phone.type }} </p>
137+
</div>
138+
<md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)" ng-if="phone.options.actionIcon" aria-label="call">
139+
<md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
140+
</md-button>
141+
</md-list-item>
142+
</md-list>
143+
</md-content>
144+
</div>
145+
129146
</div>

0 commit comments

Comments
 (0)