mirror of
https://github.com/jellyfin/jellyfin.org.git
synced 2025-03-02 18:47:50 +00:00
Update home screen features section
This commit is contained in:
Bill Thornton
parent
40aee938d2
commit
0feea6e50d
59
package-lock.json
generated
59
package-lock.json
generated
@ -21,6 +21,7 @@
|
||||
"file-loader": "6.2.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"swiper": "8.3.2",
|
||||
"url-loader": "4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -9843,6 +9844,14 @@
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/dom7": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
|
||||
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
|
||||
"dependencies": {
|
||||
"ssr-window": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
@ -17222,6 +17231,11 @@
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
|
||||
},
|
||||
"node_modules/ssr-window": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
|
||||
},
|
||||
"node_modules/stable": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
|
||||
@ -17549,6 +17563,29 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.3.2.tgz",
|
||||
"integrity": "sha512-8wsC7ORYvVSnLUoxs2+xmfLrDPNjBVQXMCFbOlqtHeON6wtu/blOyySDr8TCBCdse1bdcIbn7m8xJNxVFL8o4Q==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"dom7": "^4.0.4",
|
||||
"ssr-window": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||
@ -26262,6 +26299,14 @@
|
||||
"entities": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"dom7": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
|
||||
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
|
||||
"requires": {
|
||||
"ssr-window": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
@ -31616,6 +31661,11 @@
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
|
||||
},
|
||||
"ssr-window": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
|
||||
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
|
||||
},
|
||||
"stable": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
|
||||
@ -31854,6 +31904,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.3.2.tgz",
|
||||
"integrity": "sha512-8wsC7ORYvVSnLUoxs2+xmfLrDPNjBVQXMCFbOlqtHeON6wtu/blOyySDr8TCBCdse1bdcIbn7m8xJNxVFL8o4Q==",
|
||||
"requires": {
|
||||
"dom7": "^4.0.4",
|
||||
"ssr-window": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"tapable": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
"file-loader": "6.2.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"swiper": "8.3.2",
|
||||
"url-loader": "4.1.1"
|
||||
},
|
||||
"browserslist": {
|
||||
|
||||
@ -1,7 +1,18 @@
|
||||
import React from 'react';
|
||||
import React, { ComponentType, HTMLProps, ReactNode } from 'react';
|
||||
import { Navigation } from 'swiper';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import styles from './HomepageFeatures.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
type Feature = {
|
||||
title: string;
|
||||
description: ReactNode;
|
||||
Svg: ComponentType<HTMLProps<HTMLElement & SVGElement>>;
|
||||
};
|
||||
|
||||
const FeatureList: Feature[] = [
|
||||
{
|
||||
title: 'Movies',
|
||||
Svg: require('/static/images/illustrations/undraw_home_cinema.svg').default,
|
||||
@ -39,17 +50,17 @@ const FeatureList = [
|
||||
}
|
||||
];
|
||||
|
||||
function Feature({ Svg, title, description }: { Svg: any; title: string; description: JSX.Element; key: number }) {
|
||||
function FeatureCard({ Svg, title, description }: Feature) {
|
||||
return (
|
||||
<div className='col col--3'>
|
||||
<>
|
||||
<div className='text--center'>
|
||||
<Svg className={styles.featureSvg} alt={title} />
|
||||
<Svg className={styles.featureSvg} title={title} />
|
||||
</div>
|
||||
<div className='text--center padding-horiz--md'>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -57,10 +68,32 @@ export default function HomepageFeatures() {
|
||||
return (
|
||||
<section className={`${styles.features} landing-section padding-vert--xl`}>
|
||||
<div className='container'>
|
||||
<div className='row row-justify--center padding-horiz--sm'>
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
<div className='row row--center text--center'>
|
||||
<div className='col col--8'>
|
||||
<h2>What is Jellyfin?</h2>
|
||||
<p>
|
||||
Jellyfin enables you to collect, manage, and stream your media. Run the Jellyfin server on your system and
|
||||
gain access to the leading free-software entertainment system, bells <em>and</em> whistles included.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row row--center padding-horiz--sm'>
|
||||
{FeatureList.map((feature) => (
|
||||
<div key={`column-${feature.title}`} className='col col--3 hidden--mobile'>
|
||||
<SwiperSlide>
|
||||
<FeatureCard {...feature} />
|
||||
</SwiperSlide>
|
||||
</div>
|
||||
))}
|
||||
<div className='col hidden--desktop'>
|
||||
<Swiper navigation modules={[Navigation]}>
|
||||
{FeatureList.map((feature) => (
|
||||
<SwiperSlide key={`slide-${feature.title}`}>
|
||||
<FeatureCard {...feature} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -43,6 +43,9 @@ html {
|
||||
--ifm-navbar-search-input-background-color: #172138;
|
||||
--ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
|
||||
|
||||
/* custom swiper colors */
|
||||
--swiper-theme-color: #ffffff !important;
|
||||
|
||||
/* custom Jellyfin colors */
|
||||
--jf-gradient-color-primary-dark: #003c50;
|
||||
--jf-gradient-color-secondary-dark: #3e2247;
|
||||
@ -85,7 +88,7 @@ a.pills__item:not(.pills__item--active) {
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.row-justify--center {
|
||||
.row--center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -130,3 +133,15 @@ a.pills__item:not(.pills__item--active) {
|
||||
.client-icon-block {
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.hidden--mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.hidden--desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user