update DemoReactMarvelApp,
This commit is contained in:
louiscklaw
@@ -0,0 +1,43 @@
|
|||||||
|
.characterContainer {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-item {
|
||||||
|
--padding-start: 0;
|
||||||
|
--inner-padding-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-label {
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterNameContainer {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99999;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterNameContainer ion-icon {
|
||||||
|
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterNameContainer ion-label {
|
||||||
|
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { IonCol, IonIcon, IonImg, IonItem, IonLabel, IonSkeletonText } from "@ionic/react";
|
||||||
|
import { chevronForwardOutline } from "ionicons/icons";
|
||||||
|
import { Character } from "../../types";
|
||||||
|
import styles from "./CharacterItem.module.scss";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
details: Character;
|
||||||
|
load?: boolean;
|
||||||
|
grid?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CharacterItem = (props: Props): React.JSX.Element => {
|
||||||
|
|
||||||
|
const { details, load = false, grid = true } = props;
|
||||||
|
const loadAmount = 20;
|
||||||
|
|
||||||
|
if (!load) {
|
||||||
|
return (
|
||||||
|
|
||||||
|
<IonCol size={ grid ? "6" : "12" }>
|
||||||
|
<IonItem detail={ false } routerLink={ `/character/${ details.id }` } lines="none" className={ styles.characterContainer }>
|
||||||
|
<IonImg src={ grid ? `${ details.thumbnail.path }/standard_fantastic.${ details.thumbnail.extension }` : `${ details.thumbnail.path }.${ details.thumbnail.extension }` } />
|
||||||
|
<div className={ styles.characterNameContainer }>
|
||||||
|
<IonLabel>{ details.name }</IonLabel>
|
||||||
|
<IonIcon icon={ chevronForwardOutline } />
|
||||||
|
</div>
|
||||||
|
</IonItem>
|
||||||
|
</IonCol>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<>
|
||||||
|
{ Array.from({length: loadAmount }, (item, index) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonCol key={ `loading_${ index }`} size="6">
|
||||||
|
<IonItem lines="none" className={ styles.characterContainer }>
|
||||||
|
<IonSkeletonText animated style={{ width: "100%", height: "180px" }} />
|
||||||
|
</IonItem>
|
||||||
|
</IonCol>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CharacterItem;
|
||||||
@@ -1,38 +1,31 @@
|
|||||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
import { IonRouterOutlet, IonTabs } from '@ionic/react';
|
||||||
|
|
||||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
|
||||||
import { Route, Redirect } from 'react-router';
|
import { Route, Redirect } from 'react-router';
|
||||||
|
|
||||||
import Tab1 from './AppPages/Tab1';
|
// import Tab1 from './AppPages/Tab1';
|
||||||
import Tab2 from './AppPages/Tab2';
|
// import Tab2 from './AppPages/Tab2';
|
||||||
|
|
||||||
import './style.scss';
|
import './theme/variables.scss';
|
||||||
|
import Home from './pages/Home';
|
||||||
|
import ViewCharacter from './pages/ViewCharacter';
|
||||||
|
import Info from './pages/Info';
|
||||||
|
|
||||||
function DemoReactMarvelApp() {
|
function DemoReactMarvelApp() {
|
||||||
return (
|
return (
|
||||||
<IonTabs>
|
<IonTabs>
|
||||||
<IonRouterOutlet>
|
<IonRouterOutlet>
|
||||||
<Route exact path="/demo-react-marvel-app/tab1">
|
<Route exact path="/demo-react-marvel-app/home">
|
||||||
<Tab1 />
|
<Home />
|
||||||
</Route>
|
</Route>
|
||||||
<Route exact path="/demo-react-marvel-app/tab2">
|
<Route exact path="/demo-react-marvel-app/character/:id">
|
||||||
<Tab2 />
|
<ViewCharacter />
|
||||||
|
</Route>
|
||||||
|
<Route exact path="/demo-react-marvel-app/info">
|
||||||
|
<Info />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Redirect exact path="/demo-react-marvel-app" to="/demo-react-marvel-app/tab1" />
|
<Redirect exact path="/demo-react-marvel-app" to="/demo-react-marvel-app/home" />
|
||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
|
|
||||||
{/* */}
|
|
||||||
<IonTabBar slot="bottom">
|
|
||||||
<IonTabButton tab="tab1" href="/demo-react-marvel-app/tab1">
|
|
||||||
<IonIcon icon={cloudOutline} />
|
|
||||||
<IonLabel>Dashboard</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="tab2" href="/demo-react-marvel-app/tab2">
|
|
||||||
<IonIcon icon={searchOutline} />
|
|
||||||
<IonLabel>Search</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
</IonTabs>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
32
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Home.css
Normal file
32
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Home.css
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
.character-container {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.character-name-container {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
position:absolute;
|
||||||
|
z-index: 99999;
|
||||||
|
background-color: rgba(0,0,0,0.7);
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-name-container ion-icon {
|
||||||
|
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-name-container ion-label {
|
||||||
|
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
208
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Home.tsx
Normal file
208
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Home.tsx
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import {
|
||||||
|
IonButton,
|
||||||
|
IonButtons,
|
||||||
|
IonContent,
|
||||||
|
IonHeader,
|
||||||
|
IonIcon,
|
||||||
|
IonInfiniteScroll,
|
||||||
|
IonInfiniteScrollContent,
|
||||||
|
IonPage,
|
||||||
|
IonRow,
|
||||||
|
IonTitle,
|
||||||
|
IonToast,
|
||||||
|
IonToolbar,
|
||||||
|
useIonRouter,
|
||||||
|
} from '@ionic/react';
|
||||||
|
|
||||||
|
import './Home.css';
|
||||||
|
import {
|
||||||
|
addOutline,
|
||||||
|
chevronBackOutline,
|
||||||
|
expandOutline,
|
||||||
|
gridOutline,
|
||||||
|
informationCircleOutline,
|
||||||
|
searchOutline,
|
||||||
|
} from 'ionicons/icons';
|
||||||
|
import CharacterItem from '../components/CharacterItem';
|
||||||
|
|
||||||
|
const Home = (): React.JSX.Element => {
|
||||||
|
const [grid, setGrid] = useState<boolean>(true);
|
||||||
|
const [characters, setCharacters] = useState([]);
|
||||||
|
const [amountLoaded, setAmountLoaded] = useState<number>(20);
|
||||||
|
const [showToast, setShowToast] = useState<{ show: boolean; message: string }>({
|
||||||
|
show: false,
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const buttInstall = document.getElementById('buttInstall');
|
||||||
|
window.addEventListener('beforeinstallprompt', (event) => {
|
||||||
|
console.log('👍', 'beforeinstallprompt', event);
|
||||||
|
|
||||||
|
// Save the event so it can be triggered later.
|
||||||
|
window.deferredPrompt = event;
|
||||||
|
buttInstall.classList.toggle('hidden', false);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('appinstalled', (event) => {
|
||||||
|
console.log('👍', 'appinstalled', event);
|
||||||
|
// Clear the deferredPrompt so it can be garbage collected
|
||||||
|
window.deferredPrompt = null;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const getCharacters = async () => {
|
||||||
|
const response = await fetch(
|
||||||
|
'https://gateway.marvel.com/v1/public/characters?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75&limit=20&orderBy=-modified'
|
||||||
|
);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const results = data.data.results;
|
||||||
|
setCharacters(results);
|
||||||
|
};
|
||||||
|
|
||||||
|
getCharacters();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchMore = async (e) => {
|
||||||
|
// Fetch more characters
|
||||||
|
// How?
|
||||||
|
// Lets limit it by 20, and offset it by the amount loaded already
|
||||||
|
// E.g. 20, 40, 60 just like pagination :)
|
||||||
|
// Get the response into json
|
||||||
|
const response = await fetch(
|
||||||
|
`https://gateway.marvel.com/v1/public/characters?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75&limit=20&offset=${amountLoaded}&orderBy=-modified`
|
||||||
|
);
|
||||||
|
const data = await response.json();
|
||||||
|
const results = data.data.results;
|
||||||
|
|
||||||
|
// Set the characters by adding the new results to the current
|
||||||
|
// Increment the amount loaded by 20 for the next iteration
|
||||||
|
// Complete the scroll action
|
||||||
|
setCharacters((prevResults) => [...prevResults, ...results]);
|
||||||
|
setAmountLoaded((prevAmount) => prevAmount + 20);
|
||||||
|
e.target.complete();
|
||||||
|
};
|
||||||
|
|
||||||
|
const addToHomeScreen = async () => {
|
||||||
|
const buttInstall = document.getElementById('buttInstall');
|
||||||
|
|
||||||
|
console.log('👍', 'buttInstall-clicked');
|
||||||
|
const promptEvent = window.deferredPrompt;
|
||||||
|
|
||||||
|
if (!promptEvent) {
|
||||||
|
// The deferred prompt isn't available.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the install prompt.
|
||||||
|
promptEvent.prompt();
|
||||||
|
|
||||||
|
// Log the result
|
||||||
|
const result = await promptEvent.userChoice;
|
||||||
|
console.log('👍', 'userChoice', result);
|
||||||
|
|
||||||
|
// Reset the deferred prompt variable, since
|
||||||
|
// prompt() can only be called once.
|
||||||
|
window.deferredPrompt = null;
|
||||||
|
|
||||||
|
// Hide the install button.
|
||||||
|
buttInstall.classList.toggle('hidden', true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const router = useIonRouter();
|
||||||
|
function handleBackClick() {
|
||||||
|
router.goBack();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage id="home-page">
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonButton onClick={() => handleBackClick()}>
|
||||||
|
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
|
||||||
|
<IonTitle>Marvel Characters</IonTitle>
|
||||||
|
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonButton color="dark" routerLink="/info">
|
||||||
|
<IonIcon icon={informationCircleOutline} />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton
|
||||||
|
color="dark"
|
||||||
|
onClick={() =>
|
||||||
|
setShowToast({
|
||||||
|
show: true,
|
||||||
|
message: 'We could easily add a search button here to search characters.',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IonIcon icon={searchOutline} />
|
||||||
|
</IonButton>
|
||||||
|
|
||||||
|
<IonButton
|
||||||
|
id="buttInstall"
|
||||||
|
color="danger"
|
||||||
|
fill="solid"
|
||||||
|
size="small"
|
||||||
|
className="add-button hidden"
|
||||||
|
onClick={() => addToHomeScreen()}
|
||||||
|
>
|
||||||
|
<IonIcon icon={addOutline} />
|
||||||
|
Install App
|
||||||
|
</IonButton>
|
||||||
|
|
||||||
|
<IonButton color="danger" onClick={() => setGrid((grid) => !grid)}>
|
||||||
|
<IonIcon icon={grid ? expandOutline : gridOutline} />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle size="large">Marvel Characters</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
{characters.length > 0 ? (
|
||||||
|
characters.map((character, index) => {
|
||||||
|
if (!character.thumbnail.path.includes('image_not_available')) {
|
||||||
|
return <CharacterItem key={`character_${index}`} grid={grid} details={character} />;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<CharacterItem load={true} />
|
||||||
|
)}
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonInfiniteScroll threshold="100px" onIonInfinite={fetchMore}>
|
||||||
|
<IonInfiniteScrollContent
|
||||||
|
loadingSpinner="bubbles"
|
||||||
|
loadingText="Getting more super heroes..."
|
||||||
|
></IonInfiniteScrollContent>
|
||||||
|
</IonInfiniteScroll>
|
||||||
|
</IonContent>
|
||||||
|
|
||||||
|
<IonToast
|
||||||
|
isOpen={showToast.show}
|
||||||
|
onDidDismiss={() => setShowToast({ show: false, message: '' })}
|
||||||
|
message={showToast.message}
|
||||||
|
duration={3500}
|
||||||
|
color="danger"
|
||||||
|
/>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
95
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Info.tsx
Normal file
95
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Info.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonImg, IonItem, IonLabel, IonPage, IonRow, IonSkeletonText, IonTitle, IonToolbar } from '@ionic/react';
|
||||||
|
import { arrowRedoOutline, heartOutline } from 'ionicons/icons';
|
||||||
|
import styles from "./ViewCharacter.module.scss";
|
||||||
|
|
||||||
|
interface Profile {
|
||||||
|
name: string;
|
||||||
|
bio: string;
|
||||||
|
avatar: string;
|
||||||
|
codeLink: string;
|
||||||
|
links: Array<{
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Info = (): React.JSX.Element => {
|
||||||
|
|
||||||
|
const profile = {
|
||||||
|
|
||||||
|
name: "Alan Montgomery",
|
||||||
|
bio: "My name is Alan. I’m a Mobile Team Lead and Senior Developer and have built numerous production, real world mobile apps for local government authorities. I have a real passion and love for sharing my knowledge and expertise with developers wanting to learn and get better at using certain technologies.",
|
||||||
|
avatar: "/assets/alan.jpg",
|
||||||
|
codeLink: "https://github.com/alanmontgomery/ionic-react-marvel-app",
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
name: "Twitter",
|
||||||
|
url: "https://twitter.com/93alan"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<IonPage id="view-message-page">
|
||||||
|
<IonHeader translucent>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons>
|
||||||
|
<IonBackButton text="Characters"></IonBackButton>
|
||||||
|
</IonButtons>
|
||||||
|
|
||||||
|
{ navigator.platform.match(/iPhone|iPod|iPad/) && <IonTitle>{ profile.name }</IonTitle> }
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonContent fullscreen>
|
||||||
|
{ profile ?
|
||||||
|
(
|
||||||
|
<>
|
||||||
|
<IonItem lines="none">
|
||||||
|
<IonImg src={ profile.avatar } />
|
||||||
|
<div className={ styles.characterNameContainer }>
|
||||||
|
<IonLabel>{ profile.name }</IonLabel>
|
||||||
|
</div>
|
||||||
|
</IonItem>
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<p className="ion-text-justify">
|
||||||
|
{ profile.bio }
|
||||||
|
</p>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<a href={ profile.links[0].url } target="_blank" rel="noreferrer" className="non-link">
|
||||||
|
<IonButton color="secondary" expand="full">
|
||||||
|
Lets connect on Twitter
|
||||||
|
<IonIcon slot="end" icon={ arrowRedoOutline } />
|
||||||
|
</IonButton>
|
||||||
|
</a>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<a href={ profile.codeLink } target="_blank" rel="noreferrer" className="non-link">
|
||||||
|
<IonButton color="dark" expand="full">
|
||||||
|
Source code for this app
|
||||||
|
<IonIcon slot="end" icon={ arrowRedoOutline } />
|
||||||
|
</IonButton>
|
||||||
|
</a>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
:
|
||||||
|
<IonSkeletonText animated style={{ width: "100%", height: "100vh" }} />
|
||||||
|
}
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Info;
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
.characterContainer {
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-item {
|
||||||
|
--padding-start: 0;
|
||||||
|
--inner-padding-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-label {
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterNameContainer {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99999;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterNameContainer ion-label {
|
||||||
|
|
||||||
|
font-size: 1rem !important;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterStats {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterStat {
|
||||||
|
|
||||||
|
background-color: var(--ion-color-primary);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterStat ion-card-title {
|
||||||
|
|
||||||
|
font-size: 1rem;
|
||||||
|
--color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characterStat ion-card-subtitle {
|
||||||
|
|
||||||
|
font-size: 1rem;
|
||||||
|
--color: white;
|
||||||
|
}
|
||||||
@@ -0,0 +1,298 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
IonBackButton,
|
||||||
|
IonButton,
|
||||||
|
IonButtons,
|
||||||
|
IonCardSubtitle,
|
||||||
|
IonCardTitle,
|
||||||
|
IonCol,
|
||||||
|
IonContent,
|
||||||
|
IonGrid,
|
||||||
|
IonHeader,
|
||||||
|
IonIcon,
|
||||||
|
IonImg,
|
||||||
|
IonItem,
|
||||||
|
IonLabel,
|
||||||
|
IonPage,
|
||||||
|
IonRow,
|
||||||
|
IonSkeletonText,
|
||||||
|
IonTitle,
|
||||||
|
IonToast,
|
||||||
|
IonToolbar,
|
||||||
|
useIonViewWillEnter,
|
||||||
|
} from '@ionic/react';
|
||||||
|
import { arrowRedoOutline, heartOutline } from 'ionicons/icons';
|
||||||
|
import { useParams } from 'react-router';
|
||||||
|
|
||||||
|
import styles from './ViewCharacter.module.scss';
|
||||||
|
|
||||||
|
interface Comic {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
image: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Character {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
thumbnail: {
|
||||||
|
path: string;
|
||||||
|
extension: string;
|
||||||
|
};
|
||||||
|
comics: {
|
||||||
|
available: number;
|
||||||
|
items: Array<{
|
||||||
|
name: string;
|
||||||
|
resourceURI: string;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
stories: {
|
||||||
|
available: number;
|
||||||
|
};
|
||||||
|
series: {
|
||||||
|
available: number;
|
||||||
|
};
|
||||||
|
urls: Array<{
|
||||||
|
type: string;
|
||||||
|
url: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ViewCharacter = (): React.JSX.Element => {
|
||||||
|
const [character, setCharacter] = useState<Character | undefined>();
|
||||||
|
const [characterComics, setCharacterComics] = useState<Comic[]>([]);
|
||||||
|
const [showToast, setShowToast] = useState<{ show: boolean; message: string }>({
|
||||||
|
show: false,
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
const params = useParams();
|
||||||
|
|
||||||
|
const getComic = async (comicID: string): Promise<string | false> => {
|
||||||
|
var comicImageURL = false;
|
||||||
|
const response = await fetch(
|
||||||
|
`https://gateway.marvel.com/v1/public/comics/${comicID}?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75`
|
||||||
|
);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
if (data.data) {
|
||||||
|
if (data.data.results.length > 0) {
|
||||||
|
comicImageURL =
|
||||||
|
data.data.results[0].thumbnail.path +
|
||||||
|
'/portrait_incredible.' +
|
||||||
|
data.data.results[0].thumbnail.extension;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return comicImageURL;
|
||||||
|
};
|
||||||
|
|
||||||
|
const parseComics = async (result: Character): Promise<void> => {
|
||||||
|
const comics = result.comics.items;
|
||||||
|
|
||||||
|
await comics.forEach(async (comic) => {
|
||||||
|
const name = comic.name;
|
||||||
|
const link = comic.resourceURI;
|
||||||
|
|
||||||
|
const linkParts = link.split('/');
|
||||||
|
const id = linkParts[linkParts.length - 1];
|
||||||
|
const image = await getComic(id);
|
||||||
|
|
||||||
|
setCharacterComics((current) => [
|
||||||
|
...current,
|
||||||
|
{
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
image,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useIonViewWillEnter(async () => {
|
||||||
|
const response = await fetch(
|
||||||
|
`https://gateway.marvel.com/v1/public/characters/${params.id}?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75`
|
||||||
|
);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
if (data.data) {
|
||||||
|
if (data.data.results) {
|
||||||
|
const result = data.data.results[0];
|
||||||
|
setCharacter(result);
|
||||||
|
parseComics(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage id="view-message-page">
|
||||||
|
<IonHeader translucent>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons>
|
||||||
|
<IonBackButton text="Characters"></IonBackButton>
|
||||||
|
</IonButtons>
|
||||||
|
|
||||||
|
{navigator.platform.match(/iPhone|iPod|iPad/) && (
|
||||||
|
<IonTitle>{character && character.name}</IonTitle>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton
|
||||||
|
color="dark"
|
||||||
|
onClick={() =>
|
||||||
|
setShowToast({
|
||||||
|
show: true,
|
||||||
|
message:
|
||||||
|
"We could easily add a 'like' button here to add a character to favourites.",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IonIcon icon={heartOutline} />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonContent fullscreen>
|
||||||
|
{character ? (
|
||||||
|
<>
|
||||||
|
{navigator.platform.match(/iPhone|iPod|iPad/) ? (
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonItem lines="none">
|
||||||
|
<IonImg src={`${character.thumbnail.path}.${character.thumbnail.extension}`} />
|
||||||
|
<div className={styles.characterNameContainer}>
|
||||||
|
<IonLabel>{character.name}</IonLabel>
|
||||||
|
</div>
|
||||||
|
</IonItem>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
) : (
|
||||||
|
<IonItem lines="none">
|
||||||
|
<IonImg src={`${character.thumbnail.path}.${character.thumbnail.extension}`} />
|
||||||
|
<div className={styles.characterNameContainer}>
|
||||||
|
<IonLabel>{character.name}</IonLabel>
|
||||||
|
</div>
|
||||||
|
</IonItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
{character.description && (
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<p className="ion-text-justify">{character.description}</p>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<IonRow className={styles.characterStats}>
|
||||||
|
<IonCol size="4">
|
||||||
|
<div className={styles.characterStat}>
|
||||||
|
<IonCardSubtitle>{character.comics.available}</IonCardSubtitle>
|
||||||
|
<IonCardTitle>comics</IonCardTitle>
|
||||||
|
</div>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol size="4">
|
||||||
|
<div className={styles.characterStat}>
|
||||||
|
<IonCardSubtitle>{character.stories.available}</IonCardSubtitle>
|
||||||
|
<IonCardTitle>stories</IonCardTitle>
|
||||||
|
</div>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol size="4">
|
||||||
|
<div className={styles.characterStat}>
|
||||||
|
<IonCardSubtitle>{character.series.available}</IonCardSubtitle>
|
||||||
|
<IonCardTitle>series</IonCardTitle>
|
||||||
|
</div>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
{character.urls && (
|
||||||
|
<>
|
||||||
|
{character.urls[1] && (
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<a
|
||||||
|
href={character.urls[1].url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="non-link"
|
||||||
|
>
|
||||||
|
<IonButton color="danger" expand="full">
|
||||||
|
View full profile on Marvel
|
||||||
|
<IonIcon slot="end" icon={arrowRedoOutline} />
|
||||||
|
</IonButton>
|
||||||
|
</a>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{character.urls[2] && (
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<a
|
||||||
|
href={character.urls[2].url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="non-link"
|
||||||
|
>
|
||||||
|
<IonButton color="dark" expand="full">
|
||||||
|
View all comics on Marvel
|
||||||
|
<IonIcon slot="end" icon={arrowRedoOutline} />
|
||||||
|
</IonButton>
|
||||||
|
</a>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{characterComics && (
|
||||||
|
<>
|
||||||
|
<IonRow className="ion-text-center ion-padding">
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonCardSubtitle color="dark">Showing 20 comics...</IonCardSubtitle>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
<IonRow>
|
||||||
|
{characterComics.map((comic, index) => {
|
||||||
|
if (comic.image && comic.name) {
|
||||||
|
return (
|
||||||
|
<IonCol key={`${character.name}_comic_${index}`} size="6">
|
||||||
|
<IonItem lines="none">
|
||||||
|
<IonImg src={comic.image} />
|
||||||
|
<div className={styles.characterNameContainer}>
|
||||||
|
<IonLabel>{comic.name}</IonLabel>
|
||||||
|
</div>
|
||||||
|
</IonItem>
|
||||||
|
</IonCol>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</IonRow>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</IonGrid>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<IonSkeletonText animated style={{ width: '100%', height: '100vh' }} />
|
||||||
|
)}
|
||||||
|
</IonContent>
|
||||||
|
|
||||||
|
<IonToast
|
||||||
|
isOpen={showToast.show}
|
||||||
|
onDidDismiss={() => setShowToast({ show: false, message: '' })}
|
||||||
|
message={showToast.message}
|
||||||
|
duration={3500}
|
||||||
|
color="danger"
|
||||||
|
/>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ViewCharacter;
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
#about-page {
|
|
||||||
ion-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
--background: transparent;
|
|
||||||
--color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-toolbar ion-back-button,
|
|
||||||
ion-toolbar ion-button,
|
|
||||||
ion-toolbar ion-menu-button {
|
|
||||||
--color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .about-image {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transition: opacity 500ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .madison {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .austin {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .chicago {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .seattle {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info {
|
|
||||||
position: relative;
|
|
||||||
margin-top: -10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--ion-background-color, #fff);
|
|
||||||
z-index: 2; // display rounded border above header image
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info ion-list {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info p {
|
|
||||||
line-height: 130%;
|
|
||||||
|
|
||||||
color: var(--ion-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info ion-icon {
|
|
||||||
margin-inline-end: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* iOS Only
|
|
||||||
*/
|
|
||||||
|
|
||||||
.ios .about-info {
|
|
||||||
--ion-padding: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ios .about-info h3 {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#date-input-popover {
|
|
||||||
--offset-y: -var(--ion-safe-area-bottom);
|
|
||||||
|
|
||||||
--max-width: 90%;
|
|
||||||
--width: 336px;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,245 @@
|
|||||||
|
.demo-react-marvel-app {
|
||||||
|
/* Ionic Variables and Theming. For more info, please see:
|
||||||
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
|
/** Ionic CSS Variables **/
|
||||||
|
:root {
|
||||||
|
/** primary **/
|
||||||
|
--ion-color-primary: #3880ff;
|
||||||
|
--ion-color-primary-rgb: 56, 128, 255;
|
||||||
|
--ion-color-primary-contrast: #ffffff;
|
||||||
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-primary-shade: #3171e0;
|
||||||
|
--ion-color-primary-tint: #4c8dff;
|
||||||
|
|
||||||
|
/** secondary **/
|
||||||
|
--ion-color-secondary: #3dc2ff;
|
||||||
|
--ion-color-secondary-rgb: 61, 194, 255;
|
||||||
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
|
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-secondary-shade: #36abe0;
|
||||||
|
--ion-color-secondary-tint: #50c8ff;
|
||||||
|
|
||||||
|
/** tertiary **/
|
||||||
|
--ion-color-tertiary: #5260ff;
|
||||||
|
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||||
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-tertiary-shade: #4854e0;
|
||||||
|
--ion-color-tertiary-tint: #6370ff;
|
||||||
|
|
||||||
|
/** success **/
|
||||||
|
--ion-color-success: #2dd36f;
|
||||||
|
--ion-color-success-rgb: 45, 211, 111;
|
||||||
|
--ion-color-success-contrast: #ffffff;
|
||||||
|
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-success-shade: #28ba62;
|
||||||
|
--ion-color-success-tint: #42d77d;
|
||||||
|
|
||||||
|
/** warning **/
|
||||||
|
--ion-color-warning: #ffc409;
|
||||||
|
--ion-color-warning-rgb: 255, 196, 9;
|
||||||
|
--ion-color-warning-contrast: #000000;
|
||||||
|
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-warning-shade: #e0ac08;
|
||||||
|
--ion-color-warning-tint: #ffca22;
|
||||||
|
|
||||||
|
/** danger **/
|
||||||
|
--ion-color-danger: #eb445a;
|
||||||
|
--ion-color-danger-rgb: 235, 68, 90;
|
||||||
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-danger-shade: #cf3c4f;
|
||||||
|
--ion-color-danger-tint: #ed576b;
|
||||||
|
|
||||||
|
/** dark **/
|
||||||
|
--ion-color-dark: #222428;
|
||||||
|
--ion-color-dark-rgb: 34, 36, 40;
|
||||||
|
--ion-color-dark-contrast: #ffffff;
|
||||||
|
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-dark-shade: #1e2023;
|
||||||
|
--ion-color-dark-tint: #383a3e;
|
||||||
|
|
||||||
|
/** medium **/
|
||||||
|
--ion-color-medium: #92949c;
|
||||||
|
--ion-color-medium-rgb: 146, 148, 156;
|
||||||
|
--ion-color-medium-contrast: #ffffff;
|
||||||
|
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-medium-shade: #808289;
|
||||||
|
--ion-color-medium-tint: #9d9fa6;
|
||||||
|
|
||||||
|
/** light **/
|
||||||
|
--ion-color-light: #f4f5f8;
|
||||||
|
--ion-color-light-rgb: 244, 245, 248;
|
||||||
|
--ion-color-light-contrast: #000000;
|
||||||
|
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-light-shade: #d7d8da;
|
||||||
|
--ion-color-light-tint: #f5f6f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @media (prefers-color-scheme: dark) { */
|
||||||
|
/*
|
||||||
|
* Dark Colors
|
||||||
|
* -------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
--ion-color-primary: #ee0000;
|
||||||
|
--ion-color-primary-rgb: 66, 140, 255;
|
||||||
|
--ion-color-primary-contrast: #ffffff;
|
||||||
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-primary-shade: #3a7be0;
|
||||||
|
--ion-color-primary-tint: #5598ff;
|
||||||
|
|
||||||
|
--ion-color-secondary: #50c8ff;
|
||||||
|
--ion-color-secondary-rgb: 80, 200, 255;
|
||||||
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
|
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-secondary-shade: #46b0e0;
|
||||||
|
--ion-color-secondary-tint: #62ceff;
|
||||||
|
|
||||||
|
--ion-color-tertiary: #6a64ff;
|
||||||
|
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||||
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-tertiary-shade: #5d58e0;
|
||||||
|
--ion-color-tertiary-tint: #7974ff;
|
||||||
|
|
||||||
|
--ion-color-success: #2fdf75;
|
||||||
|
--ion-color-success-rgb: 47, 223, 117;
|
||||||
|
--ion-color-success-contrast: #000000;
|
||||||
|
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-success-shade: #29c467;
|
||||||
|
--ion-color-success-tint: #44e283;
|
||||||
|
|
||||||
|
--ion-color-warning: #ffd534;
|
||||||
|
--ion-color-warning-rgb: 255, 213, 52;
|
||||||
|
--ion-color-warning-contrast: #000000;
|
||||||
|
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-warning-shade: #e0bb2e;
|
||||||
|
--ion-color-warning-tint: #ffd948;
|
||||||
|
|
||||||
|
--ion-color-danger: #ee0000;
|
||||||
|
--ion-color-danger-rgb: 255, 73, 97;
|
||||||
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-danger-shade: #e04055;
|
||||||
|
--ion-color-danger-tint: #ff5b71;
|
||||||
|
|
||||||
|
--ion-color-dark: #f4f5f8;
|
||||||
|
--ion-color-dark-rgb: 244, 245, 248;
|
||||||
|
--ion-color-dark-contrast: #000000;
|
||||||
|
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-dark-shade: #d7d8da;
|
||||||
|
--ion-color-dark-tint: #f5f6f9;
|
||||||
|
|
||||||
|
--ion-color-medium: #989aa2;
|
||||||
|
--ion-color-medium-rgb: 152, 154, 162;
|
||||||
|
--ion-color-medium-contrast: #000000;
|
||||||
|
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-medium-shade: #86888f;
|
||||||
|
--ion-color-medium-tint: #a2a4ab;
|
||||||
|
|
||||||
|
--ion-color-light: #222428;
|
||||||
|
--ion-color-light-rgb: 34, 36, 40;
|
||||||
|
--ion-color-light-contrast: #ffffff;
|
||||||
|
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-light-shade: #1e2023;
|
||||||
|
--ion-color-light-tint: #383a3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* iOS Dark Theme
|
||||||
|
* -------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.ios body {
|
||||||
|
--ion-background-color: #000000;
|
||||||
|
--ion-background-color-rgb: 0, 0, 0;
|
||||||
|
|
||||||
|
--ion-text-color: #ffffff;
|
||||||
|
--ion-text-color-rgb: 255, 255, 255;
|
||||||
|
|
||||||
|
--ion-color-step-50: #0d0d0d;
|
||||||
|
--ion-color-step-100: #1a1a1a;
|
||||||
|
--ion-color-step-150: #262626;
|
||||||
|
--ion-color-step-200: #333333;
|
||||||
|
--ion-color-step-250: #404040;
|
||||||
|
--ion-color-step-300: #4d4d4d;
|
||||||
|
--ion-color-step-350: #595959;
|
||||||
|
--ion-color-step-400: #666666;
|
||||||
|
--ion-color-step-450: #737373;
|
||||||
|
--ion-color-step-500: #808080;
|
||||||
|
--ion-color-step-550: #8c8c8c;
|
||||||
|
--ion-color-step-600: #999999;
|
||||||
|
--ion-color-step-650: #a6a6a6;
|
||||||
|
--ion-color-step-700: #b3b3b3;
|
||||||
|
--ion-color-step-750: #bfbfbf;
|
||||||
|
--ion-color-step-800: #cccccc;
|
||||||
|
--ion-color-step-850: #d9d9d9;
|
||||||
|
--ion-color-step-900: #e6e6e6;
|
||||||
|
--ion-color-step-950: #f2f2f2;
|
||||||
|
|
||||||
|
--ion-item-background: #000000;
|
||||||
|
|
||||||
|
--ion-card-background: #1c1c1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ios ion-modal {
|
||||||
|
--ion-background-color: var(--ion-color-step-100);
|
||||||
|
--ion-toolbar-background: var(--ion-color-step-150);
|
||||||
|
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Material Design Dark Theme
|
||||||
|
* -------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.md body {
|
||||||
|
--ion-background-color: #121212;
|
||||||
|
--ion-background-color-rgb: 18, 18, 18;
|
||||||
|
|
||||||
|
--ion-text-color: #ffffff;
|
||||||
|
--ion-text-color-rgb: 255, 255, 255;
|
||||||
|
|
||||||
|
--ion-border-color: #222222;
|
||||||
|
|
||||||
|
--ion-color-step-50: #1e1e1e;
|
||||||
|
--ion-color-step-100: #2a2a2a;
|
||||||
|
--ion-color-step-150: #363636;
|
||||||
|
--ion-color-step-200: #414141;
|
||||||
|
--ion-color-step-250: #4d4d4d;
|
||||||
|
--ion-color-step-300: #595959;
|
||||||
|
--ion-color-step-350: #656565;
|
||||||
|
--ion-color-step-400: #717171;
|
||||||
|
--ion-color-step-450: #7d7d7d;
|
||||||
|
--ion-color-step-500: #898989;
|
||||||
|
--ion-color-step-550: #949494;
|
||||||
|
--ion-color-step-600: #a0a0a0;
|
||||||
|
--ion-color-step-650: #acacac;
|
||||||
|
--ion-color-step-700: #b8b8b8;
|
||||||
|
--ion-color-step-750: #c4c4c4;
|
||||||
|
--ion-color-step-800: #d0d0d0;
|
||||||
|
--ion-color-step-850: #dbdbdb;
|
||||||
|
--ion-color-step-900: #e7e7e7;
|
||||||
|
--ion-color-step-950: #f3f3f3;
|
||||||
|
|
||||||
|
--ion-item-background: #1e1e1e;
|
||||||
|
|
||||||
|
--ion-toolbar-background: #1f1f1f;
|
||||||
|
|
||||||
|
--ion-tab-bar-background: #1f1f1f;
|
||||||
|
|
||||||
|
--ion-card-background: #1e1e1e;
|
||||||
|
}
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
.non-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user