Skip to content
This repository was archived by the owner on Mar 15, 2018. It is now read-only.

Commit 63a1e74

Browse files
spasovskingokevin
spasovski
authored and
ngokevin
committed
app list layout pages (bug 1103294)
1 parent 07117ad commit 63a1e74

32 files changed

+481
-346
lines changed

‎src/dev.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<link rel="stylesheet" href="/media/css/reset.styl.css">
2424
<link rel="stylesheet" href="/media/css/typography.styl.css">
2525
<link rel="stylesheet" href="/media/css/site.styl.css">
26+
<link rel="stylesheet" href="/media/css/footer.styl.css">
2627
<link rel="stylesheet" href="/media/css/header.styl.css">
2728
<link rel="stylesheet" href="/media/css/navbar.styl.css">
2829
<link rel="stylesheet" href="/media/css/category-icons.styl.css">

‎src/media/css/app-list.styl

Lines changed: 80 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
/*
22
App listing.
3-
One column in an island on mobile.
4-
Two columns of tiles on wider screens.
3+
- One column on mobile
4+
- Two columns on tablet.
5+
- Three columns on desktop.
56
TODO: move app list styles here.
67
*/
78
@import 'lib';
89

10+
$border = 1px solid $tile-border;
11+
$desktop-tile-padding = 20px 50px;
12+
913
.app-list-page {
1014
padding: 10px 0;
1115
}
@@ -33,67 +37,91 @@ TODO: move app list styles here.
3337
}
3438
}
3539

36-
@media $base-desktop {
37-
.app-list-page {
38-
padding: 0;
40+
.app-list {
41+
list-style: none;
42+
margin-top: 30px;
43+
44+
li:not(.loadmore) {
45+
border-bottom: 1px solid $filters-border;
46+
padding-top: 15px;
3947
}
40-
body[data-page-type~=app-list] {
41-
.feed {
42-
max-width: $desktop-content;
43-
}
44-
.app-list {
45-
position: relative;
46-
max-width: $desktop-content;
48+
}
4749

48-
li:not(.loadmore) {
49-
float: left;
50-
margin-right: 20px;
51-
width: 335px;
50+
.app-list-filters {
51+
color: $filters-label;
52+
margin: 0 auto;
53+
min-height: 20px;
54+
position: relative;
55+
text-transform: uppercase;
56+
}
57+
58+
@media $base-tablet {
59+
.app-list {
60+
position: relative;
61+
62+
li:not(.loadmore) {
63+
border-bottom: $border;
64+
border-right: $border;
65+
float: left;
66+
padding: $desktop-tile-padding;
67+
width: 50%;
5268

53-
&.mini-tile {
54-
background-color: #fff;
55-
border-radius: 5px;
56-
height: 80px;
57-
padding: 10px;
58-
}
59-
&:nth-child(2n) {
60-
margin-right: 0;
61-
}
69+
&:nth-child(2n) {
70+
border-right: 0;
71+
padding-right: 0;
72+
}
73+
&:nth-child(2n + 1) {
74+
padding-left: 0;
75+
}
76+
// Last 3 (thanks loadmore!).
77+
&:nth-last-child(-n + 3) {
78+
border-bottom: 0;
6279
}
6380
}
64-
.feed-tile-header:before {
65-
left: 0;
66-
top: 0;
67-
}
68-
.multi-app-tile.mkt-tile {
69-
background-color: transparent;
70-
box-shadow: none;
71-
max-width: $desktop-content;
72-
padding: 0;
81+
}
82+
.app-list-filters {
83+
border-bottom: 2px solid $filters-border;
84+
padding: 30px 0;
85+
width: $desktop-content;
86+
}
87+
}
7388

74-
.app-list {
75-
width: $desktop-content;
89+
@media $base-desktop {
90+
.app-list-page {
91+
padding: 0;
92+
}
93+
.app-list {
94+
max-width: $desktop-content;
7695

77-
.fragment-error {
78-
background-color: transparent;
79-
display: inline-block;
80-
padding: 20px;
81-
}
96+
li:not(.loadmore) {
97+
width: (100/3)%;
98+
99+
&:nth-child(2n),
100+
&:nth-child(2n + 1) {
101+
padding: $desktop-tile-padding;
82102
}
83-
> .icon {
84-
display: none;
103+
&:nth-child(2n) {
104+
border-right: $border;
85105
}
86-
> .info {
87-
height: 60px;
88-
margin-left: 0;
89-
width: 100%;
90-
91-
h1 {
92-
font-size: 24px;
93-
line-height: 24px;
94-
}
106+
&:nth-child(3n) {
107+
border-right: 0;
108+
padding-right: 0;
109+
}
110+
&:nth-child(3n + 1) {
111+
padding-left: 0;
112+
}
113+
// Last 4.
114+
&:nth-last-child(-n + 4) {
115+
border-bottom: 0;
95116
}
96117
}
118+
}
119+
.cat-header .cat-icon:before {
120+
background-size: 180px auto;
121+
height: 60px;
122+
width: 60px;
123+
}
124+
body[data-page-type~=app-list] {
97125
.placeholder {
98126
clear: both;
99127
}

‎src/media/css/buttons.styl

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
*
1515
*/
1616

17-
// Don't (line-height: height + $shadow-size) if the box-shadow goes away.
18-
// It's only there for perceived vertical alignment.
19-
2017
// Default state.
2118
$btn = #4CB1FF; // blue
2219
$action = #64BE3C; // green
@@ -59,29 +56,25 @@ $btn-install-width = 90px;
5956
// Install button font-size.
6057
$install-font-size = 12px;
6158

62-
// Button box-shadow size.
63-
$shadow-size = 2px;
64-
65-
commonprops($colour, $shadow) {
59+
commonprops($colour, $border) {
6660
background: $colour;
6761

68-
if ($shadow == 'none') {
69-
box-shadow: none;
62+
if ($border == 'none') {
63+
border-bottom: 0;
7064
} else {
71-
box-shadow: 0 (-1 * $shadow-size) $shadow inset;
65+
border-bottom: 1px solid $border;
7266
}
7367
}
7468

7569
.button {
7670
border: 0;
77-
border-radius: 5px;
7871
color: #fff;
7972
commonprops($btn, $btn-act);
8073
display: inline-block;
8174
ellipsis();
8275
font: 400 $font-size/$medium $open-stack;
8376
height: $medium;
84-
line-height: $medium + $shadow-size;
77+
line-height: 1;
8578
padding: 0 $h-padding;
8679
text-align: center;
8780
text-decoration: none;
@@ -139,15 +132,12 @@ commonprops($colour, $shadow) {
139132
}
140133
&.t, &.product {
141134
height: $tiny;
142-
line-height: $tiny + $shadow-size;
143135
}
144136
&.s {
145137
height: $small;
146-
line-height: $small + $shadow-size;
147138
}
148139
&.l {
149140
height: $large;
150-
line-height: $large + $shadow-size;
151141
}
152142

153143
// Waiting/Loading spinner.
@@ -196,8 +186,6 @@ commonprops($colour, $shadow) {
196186
.mkt-tile .install {
197187
// Unset many .button properties.
198188
// To compensate for the larger click target.
199-
// Calculation: (24-34)/2 + $shadow-size
200-
bottom: -2px;
201189
commonprops(transparent, 'none');
202190
cursor: pointer;
203191
font-size: $install-font-size;
@@ -209,7 +197,6 @@ commonprops($colour, $shadow) {
209197

210198
em {
211199
// This em becomes the visual button.
212-
border-radius: 5px;
213200
commonprops($btn, $btn-act);
214201
display: inline-block;
215202
ellipsis();
@@ -225,8 +212,6 @@ commonprops($colour, $shadow) {
225212
}
226213
// Accomodate a better vertical align since this state has no box-shadow.
227214
&[disabled] {
228-
bottom: -4px;
229-
230215
em {
231216
commonprops($disabled, 'none')
232217
}
@@ -332,6 +317,7 @@ commonprops($colour, $shadow) {
332317

333318
@media $base-desktop {
334319
.loadmore {
320+
clear: both;
335321
padding: 25px 10px 0;
336322
}
337323
.grid-if-desktop .loadmore {

‎src/media/css/categories.styl

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,25 @@
6464
display: none;
6565
}
6666

67+
.category .compat-filter,
68+
.category .app-list-filters {
69+
display: none;
70+
}
71+
72+
.category .app-list {
73+
margin-top: 0;
74+
}
75+
76+
.cat-header .expand-toggle {
77+
top: 3px;
78+
}
79+
80+
@media $base-tablet {
81+
.category .app-list {
82+
margin-top: 30px;
83+
}
84+
}
85+
6786
@media $base-desktop {
6887
.category-header-desktop {
6988
margin: 0 auto 20px;
@@ -95,4 +114,17 @@
95114
}
96115
}
97116
}
117+
// TODO: Look into whether these should be the base "tabs".
118+
.category .app-list-filters .new-pop-tabs {
119+
display: inline-block;
120+
position: relative;
121+
top: 3.5px;
122+
width: auto;
123+
}
124+
.cat-header .expand-toggle {
125+
top: -2px;
126+
}
127+
.category .app-list-filters {
128+
display: block;
129+
}
98130
}

‎src/media/css/compat-filtering.styl

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22

33
.compat-filter {
44
clear: both;
5-
display: block;
5+
display: inline-block;
66
margin: 0 auto;
7-
padding: 0;
87
position: absolute;
98
z-index: 1;
109

1110
select {
12-
font-size: 13px;
11+
font-size: 15px;
1312
vertical-align: middle;
1413
width: 229px;
1514
}
1615
label {
17-
color: $hungry-text;
16+
color: $filters-label;
1817
display: inline-block;
19-
font-size: 12px;
18+
font-size: 15px;
2019
font-weight: 400;
2120
line-height: 18px;
2221
margin-right: 5px;
22+
text-transform: uppercase;
2323
vertical-align: middle;
2424
}
2525
}
@@ -28,6 +28,7 @@
2828
vertical-align: middle;
2929
}
3030

31+
// TODO: These need to be outside a media query.
3132
@media (max-width: 709px) {
3233
.compat-filter {
3334
margin: 0 auto;
@@ -48,16 +49,14 @@
4849
.category,
4950
#search-results .search-listing {
5051
position: relative;
51-
top: 47px;
5252
}
5353
.category-header + .compat-filter,
54-
#search-results .compat-filter {
55-
top: 47px;
56-
}
57-
54+
#search-results .compat-filter,
55+
[data-page-type~="purchases"] .compat-filter,
5856
[data-page-type~="app-list"] .compat-filter {
59-
top: 7px;
57+
top: 15px;
6058
}
59+
6160
.category-header + .compat-filter {
6261
margin-top: 2px;
6362
}
@@ -81,15 +80,13 @@
8180
}
8281
}
8382

84-
@media (min-width: 710px) {
83+
@media $base-tablet {
8584
.compat-filter {
86-
right: 0;
87-
top: 0;
88-
}
89-
#search-results .expand-toggle {
90-
bottom: 0;
91-
top: auto;
85+
position: static;
9286
}
87+
}
88+
89+
@media $base-desktop {
9390
#search-results .secondary-header {
9491
height: 80px;
9592
max-height: 80px;

0 commit comments

Comments
 (0)