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" />
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta name="description" content="فروشگاه کتاب دانوین" />
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
rel="stylesheet"
/>
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
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/
-->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
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>
<title>Danovin</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('./serviceworker.js')
.then((registration) => {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch((err) => {
console.log(err)
});
});
}
</script>
</body>
</html>

@ -5,17 +5,20 @@
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"type": "image/x-icon",
"purpose": "any maskable"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
"sizes": "192x192",
"purpose": "any maskable"
},
{
"src": "logo512.png",
"src": "logo.png",
"type": "image/png",
"sizes": "512x512"
"sizes": "512x512",
"purpose": "any maskable"
}
],
"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 = {
desktop: {
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,
li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,

@ -16,7 +16,7 @@ const maxMobileSize = 550;
const fontSize = {
desktop: {
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,
}
}

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

@ -2,6 +2,17 @@ import React, { Component } from 'react';
import {Link} from 'react-router-dom';
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 {
render() {
const { height, data } = this.props;
@ -15,19 +26,19 @@ export default class Simple extends Component {
}}>
<div>
<img src={data.image} alt={data.title} />
<h1>{data.title}</h1>
<h2>{data.subTitle}</h2>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
<div className="slider-blog__footer d-flex mt-3">
<div className="d-flex">
{/* <img src={} /> */}
<div className="d-flex flex-column">
<span>مطالعه کامل در {data.duration}</span>
<span>تاریخ انتشار {data.data}</span>
<span style={{ fontSize: fontSize.desktop.span }}>مطالعه کامل در {data.duration}</span>
<span style={{ fontSize: fontSize.desktop.span }}>تاریخ انتشار {data.data}</span>
</div>
</div>
<Link to={data.link}>{data.buttonText}</Link>
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>{data.buttonText}</Link>
</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>
</article> : null
}

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

Loading…
Cancel
Save