add shadows (#37)

Co-authored-by: Artem Netsvetaev <physphile@vk.com>

Author: netsvetoch

.eslintrc

@@ -2,11 +2,7 @@
     "env": {
         "node": true
     },
-    "extends": [
-        "plugin:vue/vue3-essential",
-        "eslint:recommended",
-        "@vue/eslint-config-prettier"
-    ],
+    "extends": ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-prettier"],
     "parserOptions": {
         "parser": "@babel/eslint-parser",
         "requireConfigFile": false
@@ -27,6 +23,6 @@
             }
         ],
         "object-shorthand": "warn",
-        "no-console": "warn"
+        "no-debugger": "error"
     }
 }

.prettierrc

@@ -4,8 +4,9 @@
     "bracketSpacing": true,
     "trailingComma": "all",
     "semi": true,
-    "printWidth": 80,
+    "printWidth": 120,
     "singleQuote": true,
     "quoteProps": "consistent",
-    "singleAttributePerLine": true
+    "singleAttributePerLine": true,
+    "endOfLine": "auto"
 }

src/microfrontend-layout.html

@@ -3,10 +3,10 @@
         from="/"
         to="/timetable"
     ></redirect>
-    <header style="position: fixed; top: 0; width: 100%">
+    <header class="layout-toolbar">
         <application name="@profcomff/toolbar-element"></application>
     </header>
-    <main style="min-height: 100vh; padding: 56px 0">
+    <main class="layout-main">
         <route path="/timetable">
             <application name="@profcomff/timetable-webapp"></application>
         </route>
@@ -21,22 +21,13 @@
         </route>
 
         <route default>
-            <div
-                style="
-                    display: flex;
-                    flex-flow: column;
-                    justify-content: center;
-                    width: 100%;
-                    min-height: 100vh;
-                "
-            >
+            <div style="display: flex; flex-flow: column; justify-content: center; width: 100%; min-height: 100vh">
                 <div style="margin: 0 10%">
                     <p
                         class="display-5"
                         style="word-wrap: break-word"
                     >
-                        Вы попали на страницу, которой еще не существует в
-                        приложении =(
+                        Вы попали на страницу, которой еще не существует в приложении =(
                     </p>
                     <p></p>
                     <p class="display-6">
@@ -48,7 +39,7 @@
         </route>
     </main>
 
-    <nav style="position: fixed; bottom: 0; width: 100%">
+    <nav class="layout-navbar">
         <application name="@profcomff/navbar-element"></application>
     </nav>
 </single-spa-router>

src/profcomff-root-config.js

@@ -2,11 +2,7 @@ import './scss/styles.scss';
 import 'bootstrap';
 
 import { registerApplication, start } from 'single-spa';
-import {
-    constructApplications,
-    constructRoutes,
-    constructLayoutEngine,
-} from 'single-spa-layout';
+import { constructApplications, constructRoutes, constructLayoutEngine } from 'single-spa-layout';
 import microfrontendLayout from './microfrontend-layout.html';
 import { register } from 'register-service-worker';
 
@@ -17,9 +13,7 @@ function isLocalhost() {
             // [::1] is the IPv6 localhost address.
             window.location.hostname === '[::1]' ||
             // 127.0.0.1/8 is considered localhost for IPv4.
-            window.location.hostname.match(
-                /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
-            ),
+            window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
     );
 }
 
@@ -45,22 +39,16 @@ if (!isLocalhost())
             console.log('Service worker has been registered:' + registration);
         },
         cached(registration) {
-            console.log(
-                'Content has been cached for offline use:' + registration,
-            );
+            console.log('Content has been cached for offline use:' + registration);
         },
         updatefound(registration) {
             console.log('New content is downloading:' + registration);
         },
         updated(registration) {
-            console.log(
-                'New content is available; please refresh:' + registration,
-            );
+            console.log('New content is available; please refresh:' + registration);
         },
         offline() {
-            console.log(
-                'No internet connection found. App is running in offline mode.',
-            );
+            console.log('No internet connection found. App is running in offline mode.');
         },
         error(error) {
             console.error('Error during service worker registration:', error);

src/scss/styles.scss

@@ -11,3 +11,22 @@
     user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }
+
+.layout-main {
+    min-height: 100vh;
+    padding: 56px 0;
+}
+
+.layout-toolbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    box-shadow: 0 2px 4px rgba($color: #000000, $alpha: 0.5);
+}
+
+.layout-navbar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-shadow: 0 -2px 4px rgba($color: #000000, $alpha: 0.5);
+}

src/service-worker.js

@@ -1,10 +1,6 @@
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
-import {
-    CacheFirst,
-    StaleWhileRevalidate,
-    NetworkFirst,
-} from 'workbox-strategies';
+import { CacheFirst, StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies';
 import { ExpirationPlugin } from 'workbox-expiration';
 import { CacheableResponsePlugin } from 'workbox-cacheable-response';
 

webpack.config.js

@@ -14,9 +14,7 @@ module.exports = (webpackConfigEnv, argv) => {
         disableHtmlGeneration: true,
     });
 
-    let nonlocal_plugins = !webpackConfigEnv.local
-        ? [new InjectManifest({ swSrc: './src/service-worker.js' })]
-        : [];
+    let nonlocal_plugins = !webpackConfigEnv.local ? [new InjectManifest({ swSrc: './src/service-worker.js' })] : [];
 
     return merge(defaultConfig, {
         module: {
@@ -53,16 +51,14 @@ module.exports = (webpackConfigEnv, argv) => {
                 templateParameters: {
                     local: webpackConfigEnv && webpackConfigEnv.local,
                     production: webpackConfigEnv && webpackConfigEnv.production,
-                    development:
-                        webpackConfigEnv && webpackConfigEnv.development,
+                    development: webpackConfigEnv && webpackConfigEnv.development,
                     orgName,
                 },
             }),
             new WebpackPwaManifest({
                 name: 'Твой физфак!',
                 short_name: 'Твой ФФ!',
-                description:
-                    'Приложение с сервисами для студентов и сотрудников физического факультета МГУ',
+                description: 'Приложение с сервисами для студентов и сотрудников физического факультета МГУ',
                 display: 'standalone',
                 theme_color: '#00004b',
                 background_color: '#00004b',