pwa
This commit is contained in:
mitanshu
parent
d735f16ef5
commit
632601850d
29
manifest.json
Normal file
29
manifest.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"short_name": "Calculator",
|
||||
"name": "React Calculator",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": "https://mitanshu21.github.io/react-calculator/",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#dfe9f5",
|
||||
"description": "Calculator created in react application.",
|
||||
"lang": "en",
|
||||
"orientation": "portrait-primary",
|
||||
"display_override": ["standalone"]
|
||||
}
|
||||
14293
package-lock.json
generated
14293
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -24,6 +24,7 @@
|
||||
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`.
|
||||
-->
|
||||
<script>navigator.serviceWorker.register("%PUBLIC_URL%/react-calculator-sw.js")</script>
|
||||
<title>React Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
@ -39,5 +40,15 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
|
||||
<script>
|
||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
navigator.serviceWorker.register('%PUBLIC_URL%/react-calculator-sw.js')
|
||||
}
|
||||
|
||||
if (window.matchMedia('(display-mode: standalone)').matches) {
|
||||
window.resizeTo(400, 630);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
18
public/react-calculator-sw.js
vendored
Normal file
18
public/react-calculator-sw.js
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
// This is the "Offline copy of pages" service worker
|
||||
|
||||
const CACHE = "pwabuilder-offline";
|
||||
|
||||
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
|
||||
|
||||
self.addEventListener("message", (event) => {
|
||||
if (event.data && event.data.type === "SKIP_WAITING") {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
new RegExp('/*'),
|
||||
new workbox.strategies.StaleWhileRevalidate({
|
||||
cacheName: CACHE
|
||||
})
|
||||
);
|
||||
@ -2,8 +2,13 @@
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
background-color: white;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.show-btn {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.equal {
|
||||
@ -11,18 +16,6 @@
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 6px auto;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
font-weight: medium;
|
||||
font-size: 40px;
|
||||
@ -33,18 +26,6 @@
|
||||
background-color: #6dd5ed;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #6dd5ed;
|
||||
color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #48b1bf;
|
||||
color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.clr {
|
||||
color: #d66d75;
|
||||
}
|
||||
@ -52,3 +33,47 @@
|
||||
.exp {
|
||||
color: #06beb6;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 6px auto;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
border: 0px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.btn:hover {
|
||||
background-color: #6dd5ed;
|
||||
color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.btn.touched {
|
||||
background-color: #48b1bf;
|
||||
color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.btn.touched {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,13 @@
|
||||
border: 0px;
|
||||
box-shadow: 0px 0px 3px 0.5px #c4e0e5;
|
||||
border-radius: 10px;
|
||||
max-width: 400px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.main {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
@ -2,12 +2,17 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-bottom: 20px;
|
||||
background: linear-gradient(90deg, #06beb6, #48b1bf 100%);
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.display {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.expression {
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user