Skip to content

Commit 6b2cf46

Browse files
nolimits4webnolimits4web
committed
Add apps
1 parent be5f97b commit 6b2cf46

17 files changed

+391
-257
lines changed

‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# This file is for unifying the coding style of different editors and IDEs.
2+
# editorconfig.org
3+
4+
root = true
5+
6+
[*]
7+
charset = utf-8
8+
end_of_line = lf
9+
indent_size = 2
10+
indent_style = space
11+
insert_final_newline = true
12+
trim_trailing_whitespace = true

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,6 @@ module.exports = {
2626
"jsx-a11y/anchor-is-valid": "off",
2727
"react/no-unescaped-entities": "off",
2828
"react/prop-types": "off",
29+
"max-len": "off",
2930
},
3031
};

‎package-lock.json

-35
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@
129129
"@babel/preset-env": "^7.8.7",
130130
"@babel/preset-react": "^7.8.3",
131131
"@babel/runtime": "^7.8.7",
132-
"axios": "^0.19.2",
133132
"babel-loader": "^8.0.6",
134133
"chalk": "^3.0.0",
135134
"copy-webpack-plugin": "^5.1.1",

‎src/apps-data.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
},
5252
{
5353
"id": 835599320,
54+
"featured": "New update",
5455
"title": "TikTok - Make Your Day",
5556
"slug": "tiktok-make-your-day",
5657
"subtitle": "Real People. Real Videos.",
@@ -102,6 +103,7 @@
102103
},
103104
{
104105
"id": 544007664,
106+
"featured": "New update",
105107
"title": "YouTube: Watch, Listen, Stream",
106108
"slug": "youtube-watch-listen-stream",
107109
"subtitle": "Videos, Music and Live Streams",
@@ -244,6 +246,7 @@
244246
},
245247
{
246248
"id": 389801252,
249+
"featured": "New update",
247250
"title": "Instagram",
248251
"slug": "instagram",
249252
"subtitle": "",
@@ -612,6 +615,7 @@
612615
},
613616
{
614617
"id": 363590051,
618+
"featured": "Limited time",
615619
"title": "Netflix",
616620
"slug": "netflix",
617621
"subtitle": "Start Watching",
@@ -1024,4 +1028,4 @@
10241028
}
10251029
]
10261030
}
1027-
]
1031+
]

‎src/components/AppsTableList.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import { List, ListItem, Button } from 'framework7-react';
33

4+
import './AppsTableList.less';
5+
46
const AppsTableList = ({ apps }) => {
57
return (
68
<List className="apps-table-list" noChevron noHairlines>

‎src/components/AppsTableList.less

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.apps-table-list {
2+
--f7-list-bg-color: transparent;
3+
--f7-list-item-title-white-space: normal;
4+
--f7-list-item-text-max-lines: 1;
5+
--f7-list-item-text-font-size: 13px;
6+
--f7-list-link-pressed-bg-color: transparent;
7+
--f7-list-item-title-line-height: 1.2;
8+
.item-link .item-inner {
9+
padding-right: 0;
10+
}
11+
.item-content {
12+
padding-left: 0px;
13+
}
14+
ul {
15+
flex-shrink: 0;
16+
display: flex;
17+
flex-direction: column;
18+
height: 78px * 3px;
19+
flex-wrap: wrap;
20+
overflow: auto;
21+
padding-left: calc(var(--f7-safe-area-left) + var(--f7-list-item-padding-horizontal));
22+
scroll-snap-type: x mandatory;
23+
scrollbar-width: none;
24+
&::-webkit-scrollbar {
25+
display: none;
26+
opacity: 0;
27+
}
28+
@media (min-width: 768px) {
29+
scroll-padding-left: 16px;
30+
}
31+
}
32+
li {
33+
width: calc(100% - 16px);
34+
max-width: 350px;
35+
margin-right: 10px;
36+
scroll-snap-align: center center;
37+
@media (min-width: 768px) {
38+
margin-right: 24px;
39+
scroll-snap-align: start start;
40+
}
41+
&:nth-child(3n) .item-inner:after {
42+
display: none;
43+
}
44+
}
45+
&.list ul:after {
46+
content: '' !important;
47+
width: calc(var(--f7-safe-area-right) + var(--f7-list-item-padding-horizontal));
48+
height: 1px;
49+
display: block !important;
50+
position: static;
51+
transform: none;
52+
height: 78px * 3px;
53+
background: transparent;
54+
}
55+
&-title {
56+
display: -webkit-box;
57+
-webkit-line-clamp: 2;
58+
-webkit-box-orient: vertical;
59+
position: relative;
60+
overflow: hidden;
61+
text-overflow: ellipsis;
62+
}
63+
&-image {
64+
width: 62px;
65+
height: 62px;
66+
background: #ccc;
67+
border-radius: 13px;
68+
background-size: cover;
69+
background-position: center;
70+
}
71+
&-button {
72+
flex-shrink: 0;
73+
display: flex;
74+
flex-direction: column;
75+
align-items: center;
76+
margin-left: var(--f7-list-item-padding-horizontal);
77+
--f7-button-bg-color: rgba(0,0,0,0.07);
78+
--f7-button-pressed-bg-color: rgba(0,0,0,0.4);
79+
.theme-dark & {
80+
--f7-button-bg-color: rgba(255,255,255,0.11);
81+
--f7-button-pressed-bg-color: rgba(255,255,255,0.075);
82+
}
83+
span {
84+
margin-top: 4px;
85+
font-size: 8px;
86+
display: block;
87+
color: var(--f7-list-item-text-text-color);
88+
}
89+
}
90+
}

‎src/components/AppstoreBlockTitle.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
3+
import './AppstoreBlockTitle.less';
4+
5+
const AppstoreBlockTitle = ({
6+
title,
7+
children,
8+
}) => {
9+
return (
10+
<div className="block-title appstore-block-title">
11+
{title && (<span>{title}</span>)}
12+
{children}
13+
</div>
14+
);
15+
};
16+
17+
export default AppstoreBlockTitle;

‎src/components/AppstoreBlockTitle.less

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import url("../css/_mixins.less");
2+
3+
.appstore-block-title {
4+
.hairline(top, var(--f7-block-strong-border-color));
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
padding-top: 10px;
9+
white-space: normal;
10+
--f7-block-title-font-size: 21px;
11+
--f7-block-title-font-weight: bold;
12+
--f7-block-title-line-height: 1.4;
13+
> .link {
14+
font-size: 17px;
15+
font-weight: normal;
16+
flex-shrink: 0;
17+
}
18+
}

‎src/components/FeaturedApps.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
import './FeaturedApps.less';
4+
5+
const FeaturedApps = ({ apps, useIcon }) => {
6+
return (
7+
<div className="block featured-apps">
8+
{apps.map((app) => (
9+
<div className="featured-app" key={app.id}>
10+
<a href={`/app/${app.id}`}>
11+
<div className="featured-app-headline">{app.featured}</div>
12+
<div className="featured-app-title">{app.title}</div>
13+
<div className="featured-app-subtitle">{app.subtitle}</div>
14+
<div className="featured-app-image" style={{ backgroundImage: `url(${useIcon ? app.icon : app.screenshots[0]})` }} />
15+
</a>
16+
</div>
17+
))}
18+
</div>
19+
);
20+
};
21+
22+
export default FeaturedApps;

‎src/components/FeaturedApps.less

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import url("../css/_mixins.less");
2+
3+
.featured-apps {
4+
overflow: auto;
5+
display: flex;
6+
scroll-snap-type: x mandatory;
7+
scrollbar-width: none;
8+
&:first-child {
9+
margin-top: 0;
10+
}
11+
&::-webkit-scrollbar {
12+
display: none;
13+
opacity: 0;
14+
}
15+
&::after {
16+
content: '';
17+
width: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
18+
height: 1px;
19+
flex-shrink: 0;
20+
}
21+
@media (min-width: 768px) {
22+
scroll-padding-left: 16px;
23+
}
24+
}
25+
.featured-app {
26+
flex-shrink: 0;
27+
width: 100%;
28+
max-width: 350px;
29+
scroll-snap-align: center center;
30+
padding: 5px 0px 0px;
31+
position: relative;
32+
margin-right: 10px;
33+
@media (min-width: 768px) {
34+
margin-right: 24px;
35+
scroll-snap-align: start start;
36+
}
37+
.hairline(top, var(--f7-block-strong-border-color));
38+
> a {
39+
color: inherit;
40+
}
41+
&-headline {
42+
text-transform: uppercase;
43+
color: var(--f7-theme-color);
44+
font-size: 11px;
45+
font-weight: 500;
46+
}
47+
&-title {
48+
font-size: 21px;
49+
line-height: 1.25;
50+
}
51+
&-subtitle {
52+
opacity: 0.54;
53+
font-size: 21px;
54+
line-height: 1.25;
55+
&:after {
56+
content: ' ';
57+
display: inline-block;
58+
}
59+
}
60+
&-image {
61+
margin-top: 5px;
62+
height: 220px;
63+
border-radius: 5px;
64+
background: #ccc;
65+
background-size: cover;
66+
background-position: center;
67+
}
68+
}

0 commit comments

Comments
 (0)