refactor(2.0): simplify CSS

android-com-pl · Dec 13, 2024 · 0aece36 · 0aece36
1 parent 6605a30
commit 0aece36
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 116 deletions.
diff --git a/js/package.json b/js/package.json
@@ -15,8 +15,8 @@
   "scripts": {
     "dev": "webpack --mode development --watch",
     "build": "webpack --mode production",
-    "format": "prettier --write src",
-    "format-check": "prettier --check src",
+    "format": "prettier --write src ../less/forum.less",
+    "format-check": "prettier --check src ../less/forum.less",
     "analyze": "cross-env ANALYZER=true yarn run build",
     "clean-typings": "npx rimraf dist-typings && mkdir dist-typings",
     "build-typings": "yarn run clean-typings && ([ -e src/@types ] && cp -r src/@types dist-typings/@types || true) && tsc && yarn run post-build-typings",

diff --git a/js/src/forum/components/MobileTab.tsx b/js/src/forum/components/MobileTab.tsx
@@ -7,7 +7,6 @@ import ItemList from 'flarum/common/utils/ItemList';
 import LinkButton from 'flarum/common/components/LinkButton';
 import Button from 'flarum/common/components/Button';
 
-import MobileTabItem from './MobileTabItem';
 import MobileTabSessionDropdown from './MobileTabSessionDropdown';
 
 export default class MobileTab extends Component {
@@ -22,24 +21,36 @@ export default class MobileTab extends Component {
   items(): ItemList<Children> {
     const items = new ItemList<Children>();
 
-    items.add('home', <MobileTabItem route="/" icon="fas fa-home" label={app.translator.trans('acpl-mobile-tab.forum.home')} />, 100);
+    items.add(
+      'home',
+      <LinkButton href="/" icon="fas fa-home">
+        {app.translator.trans('acpl-mobile-tab.forum.home')}
+      </LinkButton>,
+      100
+    );
 
     if (app.routes.index.path === '/all') {
       items.add(
         'all',
-        <MobileTabItem route={app.route('index')} icon="fas fa-comments" label={app.translator.trans('acpl-mobile-tab.forum.all_discussions')} />,
+        <LinkButton href={app.route('index')} icon="fas fa-comments">
+          {app.translator.trans('acpl-mobile-tab.forum.all_discussions')}
+        </LinkButton>,
         90
       );
     } else if ('askvortsov-categories' in flarum.extensions) {
       items.add(
         'categories',
-        <MobileTabItem route={app.route('categories')} icon="fas fa-th-list" label={app.translator.trans('acpl-mobile-tab.forum.categories')} />,
+        <LinkButton href={app.route('categories')} icon="fas fa-th-list">
+          {app.translator.trans('acpl-mobile-tab.forum.categories')}
+        </LinkButton>,
         90
       );
     } else if ('flarum-tags' in flarum.extensions) {
       items.add(
         'tags',
-        <MobileTabItem route={app.route('tags')} icon="fas fa-tags" label={app.translator.trans('acpl-mobile-tab.forum.tags')} />,
+        <LinkButton href={app.route('tags')} icon="fas fa-tags">
+          {app.translator.trans('acpl-mobile-tab.forum.tags')}
+        </LinkButton>,
         90
       );
     }
@@ -49,13 +60,8 @@ export default class MobileTab extends Component {
       // The default Flarum component opens as a dropdown on mobile if the drawer is not open
       items.add(
         'notifications',
-        <LinkButton
-          href={app.route('notifications')}
-          icon="fas fa-bell"
-          title={app.translator.trans('acpl-mobile-tab.forum.notifications')}
-          className="Dropdown NotificationsDropdown"
-        >
-          {unread ? <span className="NotificationsDropdown-unread">{unread}</span> : ''}
+        <LinkButton href={app.route('notifications')} icon="fas fa-bell" title={app.translator.trans('acpl-mobile-tab.forum.notifications')}>
+          {unread ? <span className="Bubble">{unread}</span> : ''}
           {app.translator.trans('acpl-mobile-tab.forum.notifications')}
         </LinkButton>,
         80

diff --git a/js/src/forum/components/MobileTabItem.tsx b/js/src/forum/components/MobileTabItem.tsx
diff --git a/js/src/forum/components/index.ts b/js/src/forum/components/index.ts
@@ -1,9 +1,7 @@
 import MobileTab from './MobileTab';
-import MobileTabItem from './MobileTabItem';
 import MobileTabSessionDropdown from './MobileTabSessionDropdown';
 
 export const components = {
   MobileTab,
-  MobileTabItem,
   MobileTabSessionDropdown,
 };
diff --git a/less/forum.less b/less/forum.less
@@ -4,6 +4,7 @@
   --mobile-tab-zindex: var(--zindex-header);
   --mobile-tab-shadow: 0 2px 6px var(--shadow-color);
   --mobile-tab-item-color: var(--header-control-color);
+  --mobile-tab-item-active-color: var(--primary-color);
 }
 
 .MobileTab {
@@ -27,100 +28,65 @@
     align-items: center;
     list-style: none;
     height: 100%;
-
     margin: 0 auto;
     padding: 0 0 env(safe-area-inset-bottom, 0);
     text-align: center;
 
-    li {
+    > li {
       flex-basis: 100%;
-    }
-
-    a,
-    > li > .Button,
-    > li > .Dropdown {
-      color: var(--mobile-tab-item-color);
-      display: block;
-      width: 100%;
-      -webkit-tap-highlight-color: color-mix(in srgb, var(--control-bg) 40%, transparent);
-      padding-top: 5px;
-      height: 100%;
-      text-align: center;
-    }
-
-    > li > a {
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    // Style buttons but not buttons in dropdowns
-    > li > .Button > .Button,
-    > li > a > .Button,
-    > li > .Dropdown > .Button > .Button {
-      padding: 0;
-      margin: 0;
-      color: var(--mobile-tab-item-color);
-      background: transparent;
-
-      &-icon {
-        margin-right: 0;
-        margin-bottom: 6px;
-        font-size: 20px;
-      }
-
-      &-label {
-        display: block;
-        font-size: 9px;
-        line-height: 1em;
-        margin: 0;
-      }
-    }
-
-    > li > .ButtonGroup.Dropdown {
-      padding: 0;
-    }
-
-    > li > .ButtonGroup.Dropdown > .Button {
-      float: none;
-      width: 100%;
 
-      &:focus,
-      &:active {
-        background: transparent;
-        box-shadow: none;
+      > .ButtonGroup {
+        width: 100%;
       }
-    }
 
-    .item-session {
-      > .Dropdown > .Button {
-        padding: 0;
+      > .LinkButton,
+      > .ButtonGroup > .Button {
+        position: relative;
+        color: var(--mobile-tab-item-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        height: 100%;
+        -webkit-tap-highlight-color: color-mix(
+          in srgb,
+          var(--control-bg) 40%,
+          transparent
+        );
+        padding: 5px 0;
+
+        .Button-icon {
+          font-size: 20px;
+        }
+
+        .Button-label {
+          font-size: 9px;
+          line-height: 1em;
+          margin: 0;
+        }
+
+        &:hover,
+        &:active {
+          text-decoration: none;
+          background-color: transparent;
+          box-shadow: none;
+        }
       }
 
-      .Button:hover,
-      .Button:active {
-        background: transparent;
+      > [active="true"] {
+        color: var(--primary-color);
       }
     }
 
-    .SessionDropdown {
-      .Avatar {
-        margin: 0 0 6px;
-        border: 1px solid var(--control-bg);
-      }
-    }
-
-    a[active="true"] {
-      color: var(--primary-color);
-    }
-
-    .item-notifications .Button-label {
-      position: relative;
+    .SessionDropdown .Avatar {
+      margin: 0 0 5px 0;
+      border: 1px solid var(--control-bg);
     }
 
-    .NotificationsDropdown-unread {
-      top: -28px;
-      left: 50%;
+    .Bubble {
+      top: 6px;
+      left: 52%;
     }
   }
 }