v1.0; mobile debug

package.json

@@ -30,7 +30,7 @@
     "node-sass": "4.14.1",
     "redux-devtools-extension": "2.13.8",
     "typescript": "4.0.5",
-    "react-scripts": "4.0.0"
+    "react-scripts": "3.4.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/index.tsx

@@ -6,16 +6,12 @@ import store from "./store/store";
 import * as Sentry from '@sentry/react';
 import App from './pages/App/App';
 import * as serviceWorker from './serviceWorker';
-// @ts-ignore
-import eruda from 'eruda';
 
 if(process.env.NODE_ENV === 'production')
     Sentry.init({
         dsn: "https://27a5473611834ece9aca26216d79ad86@sentry.io/1810028"
     });
 
-eruda.init();
-
 ReactDOM.render(
     <BrowserRouter>
         <Provider store={store}>

src/pages/App/App.tsx

@@ -28,6 +28,9 @@ import Settings from "../User/Settings/Settings";
 import { setUser } from "../../store/ducks/currentUser";
 import { setSettings } from "../../store/ducks/userSettings";
 import { withProfiler } from "@sentry/react";
+// @ts-ignore
+import eruda from 'eruda';
+import { hasPermission } from "../../utils";
 
 type Props = {
     notifications: React.ReactNode[]
@@ -64,6 +67,8 @@ class App extends React.Component<Props, State> {
                     document.body.setAttribute('theme', settings.theme);
                 }
             });
+            if(hasPermission(user, 'mobile_debug'))
+                eruda.init();
         }).catch((err: ApiError) => {
             if(err.code !== 3 && err.text)
                 console.error(err.text);

src/pages/Character/Character.sass

@@ -19,6 +19,8 @@
       height: 250px
       margin-right: .5rem
       border-radius: $borderRadius
+      background-size: cover
+      background-position: center
 
     .Character__Info
       display: flex
@@ -59,4 +61,4 @@
 
       img
         width: 100%
-        border-radius: $borderRadius
+        border-radius: $borderRadius

src/pages/Main/News.tsx

@@ -30,7 +30,7 @@ class News extends React.Component<{}, State> {
                     <div>Новости</div>
                     <Link to={'/news'}>Все новости</Link>
                 </div>
-                {news.slice(0, 3).map(post => (
+                {news.slice(0, 3).sort((a, b) => b.id-a.id).map(post => (
                     <Link key={post.id} to={`/news/${post.id}`}>
                         <NewsPost {...post} />
                     </Link>

src/pages/News/Post.sass

@@ -10,4 +10,4 @@
     border-top: var(--link-color) 1px solid
     border-bottom: var(--link-color) 1px solid
     padding: .5rem 0
-    margin: .5rem 0
+    margin: .5rem 0

src/pages/Novel/Novel.sass

@@ -115,7 +115,6 @@
       .Novel__Character
         box-sizing: border-box
         width: 150px
-        height: 250px
         border-radius: $borderRadius
         background-color: var(--block-color)
         margin: 0 .5rem
@@ -126,8 +125,8 @@
 
         .Character_Image
           border-radius: $borderRadius $borderRadius 0 0
-          width: 100%
+          width: 150px
-          height: calc(100% - 1.5rem)
+          height: 250px
           background-size: cover
           background-position: center
           margin-bottom: .2rem

src/utils.ts

@@ -9,8 +9,10 @@ const getRandomInt: (min: number, max: number) => number = (min: number, max: nu
 };
 
 const hasPermission = (user: UserType, permission: string) => {
-    const permissions = user?.group?.permissions.split(',');
+    if(!user.group) return false;
-    return permissions?.filter(perm => perm === permission).length > 0;
+    if(user.is_superuser || user.group.is_superuser) return true;
+    const permissions = user.group.permissions.split(',');
+    return permissions.filter(perm => perm === permission).length > 0;
 };
 
 const hasAccessToAdminPanel = (user: UserType) => user.is_superuser || user.group.is_superuser || hasPermission(user, 'admin_panel')