From 80352fb390d6f8a40b3f15bc1d89d09de32cdcee Mon Sep 17 00:00:00 2001 From: realaravinth Date: Tue, 25 May 2021 20:40:57 +0530 Subject: [PATCH] mobile css setup --- src/main.rs | 4 +- templates/_reset.scss | 2 +- templates/_vars.scss | 1 + templates/auth/css/mobile.scss | 44 +++++++++++++++++++ templates/auth/login/index.html | 2 +- templates/auth/register/index.html | 2 +- .../index.html} | 0 .../main.scss} | 2 +- .../components/details-footer/mobile.scss | 29 ++++++++++++ templates/components/footers.html | 18 ++++++-- templates/index.ts | 2 +- templates/mobile.scss | 28 ++++++++++++ templates/mobile.ts | 23 ++++++++++ templates/panel/header/taskbar/mobile.scss | 29 ++++++++++++ templates/panel/help-banner/index.html | 7 +-- templates/panel/help-banner/main.scss | 5 +-- templates/panel/help-banner/mobile.scss | 23 ++++++++++ templates/panel/navbar/mobile.scss | 24 ++++++++++ webpack.config.js | 11 ++++- 19 files changed, 236 insertions(+), 20 deletions(-) create mode 100644 templates/auth/css/mobile.scss rename templates/components/{details-footers.html => details-footer/index.html} (100%) rename templates/components/{details.scss => details-footer/main.scss} (97%) create mode 100644 templates/components/details-footer/mobile.scss create mode 100644 templates/mobile.scss create mode 100644 templates/mobile.ts create mode 100644 templates/panel/header/taskbar/mobile.scss create mode 100644 templates/panel/help-banner/mobile.scss create mode 100644 templates/panel/navbar/mobile.scss diff --git a/src/main.rs b/src/main.rs index 09bd79d8..c0f55008 100644 --- a/src/main.rs +++ b/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"); diff --git a/templates/_reset.scss b/templates/_reset.scss index 475eaac4..c1e98269 100644 --- a/templates/_reset.scss +++ b/templates/_reset.scss @@ -29,7 +29,7 @@ a { } li { - list-style: none; +// list-style: none; } html { diff --git a/templates/_vars.scss b/templates/_vars.scss index 8a7bd9ed..ac422022 100644 --- a/templates/_vars.scss +++ b/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); diff --git a/templates/auth/css/mobile.scss b/templates/auth/css/mobile.scss new file mode 100644 index 00000000..81b20b0b --- /dev/null +++ b/templates/auth/css/mobile.scss @@ -0,0 +1,44 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +@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; +} diff --git a/templates/auth/login/index.html b/templates/auth/login/index.html index 174e0985..03f2d882 100644 --- a/templates/auth/login/index.html +++ b/templates/auth/login/index.html @@ -1,5 +1,5 @@ -
<. include!("../../components/headers.html"); .> +
diff --git a/templates/auth/register/index.html b/templates/auth/register/index.html index 20cf5e44..77783a28 100644 --- a/templates/auth/register/index.html +++ b/templates/auth/register/index.html @@ -1,5 +1,5 @@ -
<. include!("../../components/headers.html"); .> +
diff --git a/templates/components/details-footers.html b/templates/components/details-footer/index.html similarity index 100% rename from templates/components/details-footers.html rename to templates/components/details-footer/index.html diff --git a/templates/components/details.scss b/templates/components/details-footer/main.scss similarity index 97% rename from templates/components/details.scss rename to templates/components/details-footer/main.scss index 9c26d28b..41fd6d3e 100644 --- a/templates/components/details.scss +++ b/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 . */ -@import '../_vars.scss'; +@import '../../_vars.scss'; $footer-font-size: 14px; diff --git a/templates/components/details-footer/mobile.scss b/templates/components/details-footer/mobile.scss new file mode 100644 index 00000000..0c212311 --- /dev/null +++ b/templates/components/details-footer/mobile.scss @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ +@import '../../_vars.scss'; + +$footer-font-size: 14px; + +.details__container { + margin-top: 20px; + flex-direction: column-reverse; +} + +.details__copyright { + flex: 1; + margin: auto; +} diff --git a/templates/components/footers.html b/templates/components/footers.html index 355653ce..c1cefec7 100644 --- a/templates/components/footers.html +++ b/templates/components/footers.html @@ -1,7 +1,19 @@
-<. include!("./details-footers.html"); .> +<. include!("./details-footer/index.html"); .>
- - + + + + diff --git a/templates/index.ts b/templates/index.ts index 7fe67cc2..aa5a2c07 100644 --- a/templates/index.ts +++ b/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'; diff --git a/templates/mobile.scss b/templates/mobile.scss new file mode 100644 index 00000000..c3918b70 --- /dev/null +++ b/templates/mobile.scss @@ -0,0 +1,28 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +html { + overflow-x: hidden; +} + +// creadits: https://codepen.io/rachelandrew/pen/MmOvPr/?editors=1100 +.layout { + display: block; + max-width: 100vw; + width: 100%; + overflow-x: hidden; +} diff --git a/templates/mobile.ts b/templates/mobile.ts new file mode 100644 index 00000000..f982abf2 --- /dev/null +++ b/templates/mobile.ts @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +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'; diff --git a/templates/panel/header/taskbar/mobile.scss b/templates/panel/header/taskbar/mobile.scss new file mode 100644 index 00000000..c1b978e6 --- /dev/null +++ b/templates/panel/header/taskbar/mobile.scss @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +.taskbar__action:first-child { + margin-left: 20px; +} + +.taskbar__spacer { + display: none; +} + +.taskbar__icon { + width: 1rem; + margin: auto 5px; +} diff --git a/templates/panel/help-banner/index.html b/templates/panel/help-banner/index.html index 52f3fbd9..e78ace91 100644 --- a/templates/panel/help-banner/index.html +++ b/templates/panel/help-banner/index.html @@ -1,14 +1,11 @@ -
    +
    1. - 1 Add sitekey
    2. - 2 Add client-side code snippets in places that you want to protext
    3. - 3 Add servers-side verification logic
      4. -
+ diff --git a/templates/panel/help-banner/main.scss b/templates/panel/help-banner/main.scss index c94cb5e2..db282fbd 100644 --- a/templates/panel/help-banner/main.scss +++ b/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; diff --git a/templates/panel/help-banner/mobile.scss b/templates/panel/help-banner/mobile.scss new file mode 100644 index 00000000..96bd261e --- /dev/null +++ b/templates/panel/help-banner/mobile.scss @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +@import '../../reset'; +@import '../../vars'; + +.help-text { + flex-direction: column; +} diff --git a/templates/panel/navbar/mobile.scss b/templates/panel/navbar/mobile.scss new file mode 100644 index 00000000..d7920294 --- /dev/null +++ b/templates/panel/navbar/mobile.scss @@ -0,0 +1,24 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +.secondary-menu { + display: block; +} + +.secondary-menu__lsit { + position: sticky; +} diff --git a/webpack.config.js b/webpack.config.js index 8e0adbdb..458d365d 100644 --- a/webpack.config.js +++ b/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: {