mobile css setup

src/main.rs

@@ -54,7 +54,9 @@ lazy_static! {
     pub static ref JS: &'static str =
         FILES.get("./static-assets/bundle/bundle.js").unwrap();
     pub static ref CSS: &'static str =
-        FILES.get("./static-assets/bundle/main.css").unwrap();
+        FILES.get("./static-assets/bundle/bundle.css").unwrap();
+    pub static ref MOBILE_CSS: &'static str =
+        FILES.get("./static-assets/bundle/mobile.css").unwrap();
 }
 
 pub static OPEN_API_DOC: &str = env!("OPEN_API_DOCS");

templates/_reset.scss

@@ -29,7 +29,7 @@ a {
 }
 
 li {
-  list-style: none;
+//  list-style: none;
 }
 
 html {

templates/_vars.scss

@@ -26,6 +26,7 @@ $white: #fff;
 $black-text: #000;
 
 $auth-content-width: 30%;
+$auth-content-width-mobile: 80%;
 
 $blue-link: rgb(3, 102, 214);
 

templates/auth/css/mobile.scss

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '../../reset';
+@import '../../vars';
+@import '../../components/inner-container';
+@import '../../components/main';
+
+body {
+  background-color: $backdrop;
+}
+
+.auth-inner-container {
+  @include inner-container;
+  display: block;
+  max-width: $auth-content-width-mobile;
+  margin: auto;
+  width: $auth-content-width-mobile;
+  position: static;
+  transform: translate(0, 0);
+}
+
+.auth__secondary-action__banner {
+  margin: 5px auto auto;
+  width: 90%;
+}
+
+.auth__logo {
+  width: 120px;
+}

templates/auth/login/index.html

@@ -1,5 +1,5 @@
-<div class="tmp-layout">
 <. include!("../../components/headers.html"); .>
+<div class="tmp-layout">
 <main class="auth-main">
   <div class="auth-inner-container">
 

templates/auth/register/index.html

@@ -1,5 +1,5 @@
-<div class="tmp-layout">
 <. include!("../../components/headers.html"); .>
+<div class="tmp-layout">
 <main class="auth-main">
   <div class="auth-inner-container">
 

templates/components/details-footer/main.scss

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../_vars.scss';
+@import '../../_vars.scss';
 
 $footer-font-size: 14px;
 

templates/components/details-footer/mobile.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+@import '../../_vars.scss';
+
+$footer-font-size: 14px;
+
+.details__container {
+  margin-top: 20px;
+  flex-direction: column-reverse;
+}
+
+.details__copyright {
+  flex: 1;
+  margin: auto;
+}

templates/components/footers.html

@@ -1,7 +1,19 @@
 </main>
-<. include!("./details-footers.html"); .>
+<. include!("./details-footer/index.html"); .>
 </div>
-</body>
-<link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
+  <link
+    rel="stylesheet"
+    media="all"
+    type="text/css"
+    href="<.= &*crate::CSS .>" 
+  />
+
+  <link
+    rel="stylesheet"
+    media="screen and (max-width: 768px)"
+    type="text/css"
+    href="<.= &*crate::MOBILE_CSS .>" 
+  />
 <script src="<.= &*crate::JS .>"></script>
+</body>
 </html>

templates/index.ts

@@ -28,7 +28,7 @@ import VIEWS from './views/v1/routes';
 
 import './main.scss';
 import './auth/css/main.scss';
-import './components/details.scss';
+import './components/details-footer/main.scss';
 import './components/showPassword/main.scss';
 import './panel/css/main.scss';
 import './panel/navbar/main.scss';

templates/mobile.scss

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+html {
+    overflow-x: hidden;
+}
+
+// creadits: https://codepen.io/rachelandrew/pen/MmOvPr/?editors=1100
+.layout {
+	display: block;
+	max-width: 100vw;
+	width: 100%;
+	overflow-x: hidden;
+}

templates/mobile.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import './mobile.scss';
+import './auth/css/mobile.scss';
+import './components/details-footer/mobile.scss';
+import './panel/header/taskbar/mobile.scss';
+import './panel/navbar/mobile.scss';
+import './panel/help-banner/mobile.scss';

templates/panel/header/taskbar/mobile.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.taskbar__action:first-child {
+  margin-left: 20px;
+}
+
+.taskbar__spacer {
+	display: none;
+}
+
+.taskbar__icon {
+  width: 1rem;
+  margin: auto 5px;
+}

templates/panel/help-banner/index.html

@@ -1,14 +1,11 @@
-<ul class="help-text">
+<ol class="help-text">
   <li class="help-text__instructions">
-    <span class="help-text__serial-num">1</span>
     Add sitekey
   </li>
   <li class="help-text__instructions">
-    <span class="help-text__serial-num">2</span>
     Add client-side code snippets in places that you want to protext
   </li>
   <li class="help-text__instructions">
-    <span class="help-text__serial-num">3</span>
     Add servers-side verification logic
   </li>
-</ul>
+</ol>

templates/panel/help-banner/main.scss

@@ -29,8 +29,7 @@
   margin-top: 40px;
 }
 
-.help-text__serial-num {
-  display: inline-flex;
+li.help-text__instructions::marker {
   background-color: $violet;
   color: $light-text;
   width: 30px;
@@ -41,8 +40,6 @@
 }
 
 .help-text__instructions {
-  display: inline-block;
-  list-style: none;
   font-size: 19px;
   font-weight: 500;
   padding: 10px;

templates/panel/help-banner/mobile.scss

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '../../reset';
+@import '../../vars';
+
+.help-text {
+  flex-direction: column;
+}

templates/panel/navbar/mobile.scss

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.secondary-menu {
+  display: block;
+}
+
+.secondary-menu__lsit {
+  position: sticky;
+}

webpack.config.js

@@ -3,13 +3,19 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
+const mobileCss = (new MiniCssExtractPlugin().options.filename = 'mobile.css');
+const mainCss = (new MiniCssExtractPlugin().options.filename = 'main.css');
+
 module.exports = {
   devtool: 'inline-source-map',
   mode: 'development',
   //mode: 'production',
-  entry: './templates/index.ts',
+  entry: {
+    bundle:  './templates/index.ts',
+    mobile: './templates/mobile.ts',
+  },
   output: {
-    filename: 'bundle.js',
+    filename: '[name].js',
     path: path.resolve(__dirname, './static-assets/bundle/'),
   },
   module: {
@@ -32,6 +38,7 @@ module.exports = {
           },
         ],
       },
+
     ],
   },
   resolve: {