Merge remote-tracking branch 'gitlab/dev' into editor

# Conflicts:
#	package-lock.json
#	package.json
#	src/components/Views/AllAuthors.tsx
#	src/components/Views/AllTopics.tsx

api/image.mjs

@@ -0,0 +1,24 @@
+import fetch from 'node-fetch'
+
+export default async function handler(req, res) {
+  const imageUrl = req.query.url
+
+  if (!imageUrl) {
+    return res.status(400).send('Missing URL parameter')
+  }
+
+  try {
+    const imageRes = await fetch(imageUrl)
+
+    if (!imageRes.ok) {
+      return res.status(404).send('Image not found')
+    }
+
+    res.setHeader('Content-Type', imageRes.headers.get('content-type'))
+
+    imageRes.body.pipe(res)
+  } catch (err) {
+    console.error(err)
+    return res.status(404).send('Error')
+  }
+}

package.json

@@ -35,7 +35,8 @@
     "@hocuspocus/provider": "^1.1.3",
     "formidable": "^2.1.1",
     "i18next": "^22.4.11",
-    "mailgun.js": "^8.2.1"
+    "mailgun.js": "^8.2.1",
+    "node-fetch": "^3.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",

src/components/Discours/ProfileSettingsNavigation.module.scss

@@ -1,8 +1,7 @@
 .navigationHeader {
   @include font-size(1.8rem);
-
   font-weight: bold;
-  margin-top: 1.1em !important;
+  margin-top: 1.1em;
 }
 
 .navigation {

src/components/Nav/Header.module.scss

@@ -54,7 +54,7 @@
   align-items: center;
   background: #fff;
   flex-wrap: nowrap !important;
-  justify-content: space-between;
+  justify-content: flex-start;
   margin: 0;
 
   .fixed & {

src/components/Views/Author.module.scss

@@ -1,7 +1,7 @@
 .ratingContainer {
   @include font-size(1.5rem);
 
-  display: inline-block;
+  display: inline-flex;
   vertical-align: top;
 }
 

src/components/Views/Feed.tsx

@@ -83,7 +83,7 @@ export const FeedView = () => {
     <>
       <div class="wide-container feed">
         <div class="row">
-          <div class={clsx('left-col col-md-5 col-xl-4', styles.feedNavigation)}>
+          <div class={clsx('col-md-5 col-xl-4', styles.feedNavigation)}>
             <FeedSidebar authors={sortedAuthors()} />
           </div>
 

src/components/_shared/Image/Image.tsx

@@ -0,0 +1,8 @@
+import { splitProps } from 'solid-js'
+import type { JSX } from 'solid-js'
+
+export const Image = (props: JSX.ImgHTMLAttributes<HTMLImageElement>) => {
+  const [local, others] = splitProps(props, ['src'])
+
+  return <img src={`/api/image?url=${encodeURI(local.src)}`} {...others} />
+}

src/components/_shared/Image/index.ts

@@ -0,0 +1 @@
+export { Image } from './Image'

src/pages/profile/Settings.module.scss

@@ -114,6 +114,10 @@ h5 {
 
 .leftNavigation {
   top: 9rem !important;
+
+  h4:first-child {
+    margin-top: 0;
+  }
 }
 
 .passwordToggleControl {

src/pages/profile/profileSecurity.page.tsx

@@ -8,13 +8,14 @@ export const ProfileSecurityPage = () => {
   return (
     <PageLayout>
       <div class="wide-container">
-        <div class="offset-md-5">
+        <div class="row">
-          <div class="left-col">
+          <div class="col-md-5">
             <div class={clsx('left-navigation', styles.leftNavigation)}>
               <ProfileSettingsNavigation />
             </div>
           </div>
 
+          <div class="col-md-19">
             <div class="row">
               <div class="col-md-20 col-lg-18 col-xl-16">
                 <h1>Вход и&nbsp;безопасность</h1>
@@ -126,6 +127,7 @@ export const ProfileSecurityPage = () => {
             </div>
           </div>
         </div>
+      </div>
     </PageLayout>
   )
 }

src/pages/profile/profileSettings.page.tsx

@@ -12,6 +12,7 @@ import { useSession } from '../../context/session'
 import { Button } from '../../components/_shared/Button'
 import { useSnackbar } from '../../context/snackbar'
 import { useLocalize } from '../../context/localize'
+import { Image } from '../../components/_shared/Image'
 
 const handleFileUpload = async (uploadFile: UploadFile) => {
   const formData = new FormData()
@@ -84,12 +85,13 @@ export const ProfileSettingsPage = () => {
     <PageLayout>
       <Show when={form}>
         <div class="wide-container">
-          <div class="offset-md-5">
+          <div class="row">
-            <div class="left-col">
+            <div class="col-md-5">
               <div class={clsx('left-navigation', styles.leftNavigation)}>
                 <ProfileSettingsNavigation />
               </div>
             </div>
+            <div class="col-md-19">
               <div class="row">
                 <div class="col-md-20 col-lg-18 col-xl-16">
                   <h1>{t('Profile settings')}</h1>
@@ -99,7 +101,7 @@ export const ProfileSettingsPage = () => {
                     <div class="pretty-form__item">
                       <div class={styles.avatarContainer}>
                         <Show when={!isUserpicUpdating()} fallback={<Loading />}>
-                        <img
+                          <Image
                             class={styles.avatar}
                             src={form.userpic}
                             alt={form.name}
@@ -227,6 +229,7 @@ export const ProfileSettingsPage = () => {
               </div>
             </div>
           </div>
+        </div>
       </Show>
     </PageLayout>
   )

src/pages/profile/profileSubscriptions.page.tsx

@@ -9,13 +9,14 @@ export const ProfileSubscriptionsPage = () => {
   return (
     <PageLayout>
       <div class="wide-container">
-        <div class="offset-md-5">
+        <div class="row">
-          <div class="left-col">
+          <div class="col-md-5">
             <div class={clsx('left-navigation', styles.leftNavigation)}>
               <ProfileSettingsNavigation />
             </div>
           </div>
 
+          <div class="col-md-19">
             <div class="row">
               <div class="col-md-20 col-lg-18 col-xl-16">
                 <h1>Подписки</h1>
@@ -128,6 +129,7 @@ export const ProfileSubscriptionsPage = () => {
             </div>
           </div>
         </div>
+      </div>
     </PageLayout>
   )
 }

src/styles/app.scss

@@ -726,22 +726,6 @@ figcaption {
     margin-left: 235px;
   }
 
-  .left-col {
-    height: 100%;
-    padding-right: 2rem;
-    right: 100%;
-    top: 0;
-
-    @include media-breakpoint-up(md) {
-      position: absolute;
-      width: 161px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      width: 235px;
-    }
-  }
-
   .left-navigation {
     position: sticky;
     top: 0;