Reza added pwa without icons

master
Reza_ashrafi 3 years ago
parent 7ca18bbe67
commit dd3e29fcb9
  1. 6
      public/.htaccess
  2. 48
      public/index.html
  3. 11
      public/manifest.json
  4. 45
      public/offline.html
  5. 42
      public/serviceworker.js
  6. 4
      src/views/About/index.js
  7. 2
      src/views/Contact/index.js
  8. 4
      src/views/Contact/index.scss
  9. 23
      src/views/Home/HomeSlider/Blog/index.js
  10. 5
      src/views/Home/HomeSlider/Blog/index.scss

@ -0,0 +1,6 @@
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

@ -5,43 +5,33 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" /> <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta name="description" content="فروشگاه کتاب دانوین" />
name="description"
content="Web site created using create-react-app"
/>
<link <link
href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
rel="stylesheet" rel="stylesheet"
/> />
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <meta name="apple-mobile-web-app-capable" content="yes">
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above. <title>Danovin</title>
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <script>
This HTML file is a template. if ('serviceWorker' in navigator) {
If you open it directly in the browser, you will see an empty page. window.addEventListener('load', function () {
navigator.serviceWorker.register('./serviceworker.js')
You can add webfonts, meta tags, or analytics to this file. .then((registration) => {
The build step will place the bundled scripts into the <body> tag. // Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
To begin the development, run `npm start` or `yarn start`. })
To create a production bundle, use `npm run build` or `yarn build`. .catch((err) => {
--> console.log(err)
});
});
}
</script>
</body> </body>
</html> </html>

@ -5,17 +5,20 @@
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon",
"purpose": "any maskable"
}, },
{ {
"src": "logo192.png", "src": "logo192.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "192x192",
"purpose": "any maskable"
}, },
{ {
"src": "logo512.png", "src": "logo.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "512x512",
"purpose": "any maskable"
} }
], ],
"start_url": ".", "start_url": ".",

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>دعوت</title>
<style type="text/css">
body {
height: 100%;
margin: 0px;
background-color: aquamarine;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.city {
align-items: center;
width: 80%;
display: flex;
justify-content: center;
flex-direction: column;
padding: 40px 8%;
border-radius: 20px;
background-color: #fff;
}
.city-name {
font-size: 2em;
}
</style>
</head>
<body>
<div class="city">
<h2 class="city-name">
<span>لطفا اتصال به شبکه را چک کنید.</span>
</h2>
</div>
</body>
</html>

@ -0,0 +1,42 @@
const CACHE_NAME = "version-1";
const urlsToCache = ['index.html', 'offline.html'];
const self = this;
//Install SW
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
)
});
//Listen for requests
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(() => {
return fetch(event.request)
.catch(() => caches.match('offline.html'));
})
);
});
//Activate the SW
self.addEventListener('activate', (event) => {
const cacheWhiteList = [];
cacheWhiteList.push(CACHE_NAME);
event.waitUntil(
caches.keys().then((cacheNames) => Promise.all(
cacheNames.map((cacheName) => {
if (!cacheWhiteList.includes(cacheName)) {
return caches.delete(cacheName);
}
})
))
)
});

@ -16,9 +16,9 @@ const maxMobileSize = 650;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
}, },
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18, h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,

@ -16,7 +16,7 @@ const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80, p : window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80,
span : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80, span : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
} }
} }

@ -21,7 +21,6 @@
border-color: #cecece !important; border-color: #cecece !important;
border-width: 1px !important; border-width: 1px !important;
color: green !important; color: green !important;
font-size: calc(100vw / 85) !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
@ -53,7 +52,6 @@
background-color: white; background-color: white;
max-width: 120px; max-width: 120px;
text-align: center; text-align: center;
font-size: calc(100vw / 85) !important;
color: #797979 !important; color: #797979 !important;
letter-spacing: -1px; letter-spacing: -1px;
} }
@ -114,13 +112,11 @@
border: 1px solid #cecece !important; border: 1px solid #cecece !important;
text-align: center !important; text-align: center !important;
border-radius: 10px !important; border-radius: 10px !important;
font-size: calc(100vw / 85);
color: #76797e !important; color: #76797e !important;
&:focus { &:focus {
background-color: white !important; background-color: white !important;
} }
option { option {
font-size: calc(100vw / 80) !important;
padding: 5px !important; padding: 5px !important;
} }
} }

@ -2,6 +2,17 @@ import React, { Component } from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import './index.scss'; import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop : {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110,
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90,
}
}
export default class Simple extends Component { export default class Simple extends Component {
render() { render() {
const { height, data } = this.props; const { height, data } = this.props;
@ -15,19 +26,19 @@ export default class Simple extends Component {
}}> }}>
<div> <div>
<img src={data.image} alt={data.title} /> <img src={data.image} alt={data.title} />
<h1>{data.title}</h1> <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<h2>{data.subTitle}</h2> <h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
<div className="slider-blog__footer d-flex mt-3"> <div className="slider-blog__footer d-flex mt-3">
<div className="d-flex"> <div className="d-flex">
{/* <img src={} /> */} {/* <img src={} /> */}
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<span>مطالعه کامل در {data.duration}</span> <span style={{ fontSize: fontSize.desktop.span }}>مطالعه کامل در {data.duration}</span>
<span>تاریخ انتشار {data.data}</span> <span style={{ fontSize: fontSize.desktop.span }}>تاریخ انتشار {data.data}</span>
</div> </div>
</div> </div>
<Link to={data.link}>{data.buttonText}</Link> <Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>{data.buttonText}</Link>
</div> </div>
<span className="slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span> <span className="slider-blog__category" style={{backgroundColor: data.category.color, fontSize: fontSize.desktop.span}}>{data.category.name}</span>
</div> </div>
</article> : null </article> : null
} }

@ -15,13 +15,11 @@
h1 { h1 {
font-family: numeralBold; font-family: numeralBold;
margin-top: 15px; margin-top: 15px;
font-size: calc(100vw / 80);
color: #6f7074; color: #6f7074;
} }
h2 { h2 {
font-family: numeralLight; font-family: numeralLight;
margin-top: 5px; margin-top: 5px;
font-size: calc(100vw / 100);
color: #a5a5a5; color: #a5a5a5;
} }
&__category{ &__category{
@ -32,7 +30,6 @@
color: white; color: white;
padding: 5px 7px; padding: 5px 7px;
border-radius: 5px; border-radius: 5px;
font-size: calc(100vw / 120);
} }
&__footer { &__footer {
@ -46,14 +43,12 @@
color: #02733c; color: #02733c;
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
font-size: calc(100vw / 120);
&:hover{ &:hover{
color: #02733c; color: #02733c;
} }
} }
span{ span{
font-family: numeralLight; font-family: numeralLight;
font-size: calc(100vw / 120);
color: #a5a5a5; color: #a5a5a5;
letter-spacing: -1px; letter-spacing: -1px;
} }

Loading…
Cancel
Save