Merge pull request #44 from SlimusMinus/fix-mobile_version

fix mobile version

.env

@@ -1,2 +1,3 @@
 REACT_APP_YANDEX_GEOCODER_KEY=c2d3c717-a109-4494-8863-7edbc32044e3
-REACT_APP_YANDEX_MAPS_KEY=d4696cc8-6a1f-4356-9219-108ac474093b
+REACT_APP_YANDEX_MAPS_KEY=d4696cc8-6a1f-4356-9219-108ac474093b
+REACT_APP_API_URL=http://192.168.1.75:8080

public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

src/components/feed/FeedTopBar.jsx

@@ -19,7 +19,7 @@ export default function FeedTopBar({
           loginLabel={t('feed.login')}
           centerContent={
             <button className="f-post-btn" onClick={onCreatePost}>
-              <span style={{ fontSize: "1.15rem", fontWeight: 900, lineHeight: 1 }}>+</span>
+              <span style={{ fontSize: "0.9rem", fontWeight: 900, lineHeight: 1 }}>+</span>
               {t('feed.createPost')}
             </button>
           }

src/index.css

@@ -1,3 +1,8 @@
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/pages/ReviewsPage.jsx

@@ -6,6 +6,7 @@ import Sidebar from "../components/Sidebar";
 import AppTopBar from "../components/layout/AppTopBar";
 import { ProfileModal } from "../components/profile";
 import AuthModal from "../components/AuthModal";
+import RulesModal from "../components/RulesModal";
 import ReviewCard from "../components/reviews/ReviewCard";
 import ReviewForm from "../components/reviews/ReviewForm";
 import RatingSummary from "../components/reviews/RatingSummary";
@@ -21,6 +22,7 @@ export default function ReviewsPage() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [profileModalOpen, setProfileModalOpen] = useState(false);
   const [authModalOpen, setAuthModalOpen] = useState(false);
+  const [rulesModalOpen, setRulesModalOpen] = useState(false);
 
   const profileData = useMemo(() => {
     if (!user) return {};
@@ -54,12 +56,10 @@ export default function ReviewsPage() {
             open={sidebarOpen}
             activeNav="reviews"
             onClose={() => setSidebarOpen(false)}
-            onNavClick={(label) => {
+            onNavClick={(key) => navigate("/feed")}
-              if (label === "Главная") navigate("/feed");
-            }}
             isAuthenticated={isAuthenticated}
             onLoginClick={() => setAuthModalOpen(true)}
-            onRulesClick={() => {}}
+            onRulesClick={() => setRulesModalOpen(true)}
         />
 
         <div className="f-main">
@@ -123,6 +123,7 @@ export default function ReviewsPage() {
             <ProfileModal onClose={() => setProfileModalOpen(false)} initialData={profileData} />
         )}
         {authModalOpen && <AuthModal onClose={() => setAuthModalOpen(false)} />}
+        {rulesModalOpen && <RulesModal onClose={() => setRulesModalOpen(false)} />}
       </div>
   );
 }

src/styles/layout.css

@@ -266,10 +266,10 @@
     padding: 10px 12px;
   }
 
-  /* Кнопка создания объявления — меньше */
+  /* Кнопка создания объявления — как «Войти» */
   .f-post-btn {
-    padding: 10px 16px;
+    padding: 10px 14px;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
   }
 
   .f-login-btn {
@@ -296,16 +296,16 @@
 
 @media (max-width: 600px) {
   .f-post-btn {
-    padding: 4px 8px;
+    padding: 8px 8px;
-    font-size: 0.7rem;
+    font-size: 0.68rem;
-    gap: 3px;
+    gap: 4px;
-    border-radius: 10px;
+    border-radius: 8px;
   }
 
   .f-post-btn span {
-    width: 14px;
+    width: 12px;
-    height: 14px;
+    height: 12px;
-    font-size: 0.75rem;
+    font-size: 0.7rem;
   }
 
   .f-login-btn {

src/styles/ui.css

@@ -1,28 +1,43 @@
 /* ── Post Button (topbar CTA) ── */
 .f-post-btn {
-  display: flex; align-items: center; gap: 10px;
+  display: flex; align-items: center; gap: 6px;
-  padding: 12px 28px; border-radius: 16px;
+  padding: 14px 18px; border-radius: 14px;
-  font-family: var(--font); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.3px;
+  font-family: var(--font); font-weight: 900; font-size: 0.85rem; letter-spacing: 0.3px;
   color: var(--teal);
   background: rgba(var(--teal-rgb), 0.12); backdrop-filter: blur(14px);
   border: 1px solid rgba(var(--teal-rgb), 0.25);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 12px rgba(var(--teal-rgb), 0.15), 0 0 18px rgba(var(--teal-rgb), 0.15);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 6px rgba(var(--teal-rgb), 0.15), 0 0 9px rgba(var(--teal-rgb), 0.15);
   cursor: pointer; transition: all 0.25s ease;
   position: relative; overflow: hidden;
+  animation: postBtnGlow 3s ease-in-out infinite;
 }
 .f-post-btn::before {
-  content: ""; position: absolute; inset: 0;
+  content: ""; position: absolute; top: 0; left: 0;
-  background: linear-gradient(120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05) 40%, transparent 60%);
+  width: 60%; height: 100%;
-  opacity: 0.4; pointer-events: none;
+  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.15) 62%, transparent);
+  transform: skewX(-20deg) translateX(-150%);
+  pointer-events: none;
+  animation: postBtnShine 2.6s ease-in-out infinite;
 }
 .f-post-btn:hover {
   transform: translateY(-2px) scale(1.02);
   border-color: rgba(var(--teal-rgb), 0.5);
-  box-shadow: 0 12px 32px rgba(0,0,0,0.45), inset 0 0 18px rgba(var(--teal-rgb), 0.25), 0 0 26px rgba(var(--teal-rgb), 0.35);
+  box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 0 9px rgba(var(--teal-rgb), 0.25), 0 0 13px rgba(var(--teal-rgb), 0.35);
 }
 .f-post-btn:active {
   transform: translateY(0) scale(0.98);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 10px rgba(var(--teal-rgb), 0.2);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 5px rgba(var(--teal-rgb), 0.2);
+}
+
+@keyframes postBtnShine {
+  0%   { transform: skewX(-20deg) translateX(-150%); }
+  55%  { transform: skewX(-20deg) translateX(250%); }
+  100% { transform: skewX(-20deg) translateX(250%); }
+}
+
+@keyframes postBtnGlow {
+  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 6px rgba(var(--teal-rgb), 0.15), 0 0 8px rgba(var(--teal-rgb), 0.25); }
+  50%      { box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 12px rgba(var(--teal-rgb), 0.3), 0 0 18px rgba(var(--teal-rgb), 0.5); }
 }
 /* ── Login Button (topbar) ── */
 .f-login-btn {
@@ -53,9 +68,9 @@
 
 .f-post-btn span {
   display: flex; align-items: center; justify-content: center;
-  width: 22px; height: 22px; border-radius: 50%;
+  width: 16px; height: 16px; border-radius: 50%;
-  background: rgba(var(--teal-rgb), 0.2); box-shadow: 0 0 10px rgba(var(--teal-rgb), 0.4);
+  background: rgba(var(--teal-rgb), 0.2); box-shadow: 0 0 6px rgba(var(--teal-rgb), 0.4);
-  font-size: 1.2rem; transform: translateY(-2px);
+  font-size: 0.9rem; transform: translateY(-1px);
 }
 
 /* ── Feed Empty / Error States ── */