fix mobile version

2026-08-14 00:41:44 +03:00
parent a5a3c6f1e2
commit 134b5c5849
7 changed files with 51 additions and 29 deletions
--- a/.env
+++ b/.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_API_URL=http://192.168.1.75:8080
--- a/public/index.html
+++ b/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"
--- a/src/components/feed/FeedTopBar.jsx
+++ b/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>
          }
--- a/src/index.css
+++ b/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',
--- a/src/pages/ReviewsPage.jsx
+++ b/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) => {
-              if (label === "Главная") navigate("/feed");
-            }}
+            onNavClick={(key) => 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>
  );
 }
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -266,10 +266,10 @@
    padding: 10px 12px;
  }

-  /* Кнопка создания объявления — меньше */
+  /* Кнопка создания объявления — как «Войти» */
  .f-post-btn {
-    padding: 10px 16px;
-    font-size: 0.85rem;
+    padding: 10px 14px;
+    font-size: 0.8rem;
  }

  .f-login-btn {
@@ -296,16 +296,16 @@

@media (max-width: 600px) {
  .f-post-btn {
-    padding: 4px 8px;
-    font-size: 0.7rem;
-    gap: 3px;
-    border-radius: 10px;
+    padding: 8px 8px;
+    font-size: 0.68rem;
+    gap: 4px;
+    border-radius: 8px;
  }

  .f-post-btn span {
-    width: 14px;
-    height: 14px;
-    font-size: 0.75rem;
+    width: 12px;
+    height: 12px;
+    font-size: 0.7rem;
  }

  .f-login-btn {
--- a/src/styles/ui.css
+++ b/src/styles/ui.css
@@ -1,28 +1,43 @@
 /* ── Post Button (topbar CTA) ── */
 .f-post-btn {
-  display: flex; align-items: center; gap: 10px;
-  padding: 12px 28px; border-radius: 16px;
-  font-family: var(--font); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.3px;
+  display: flex; align-items: center; gap: 6px;
+  padding: 14px 18px; border-radius: 14px;
+  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;
-  background: linear-gradient(120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05) 40%, transparent 60%);
-  opacity: 0.4; pointer-events: none;
+  content: ""; position: absolute; top: 0; left: 0;
+  width: 60%; height: 100%;
+  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%;
-  background: rgba(var(--teal-rgb), 0.2); box-shadow: 0 0 10px rgba(var(--teal-rgb), 0.4);
-  font-size: 1.2rem; transform: translateY(-2px);
+  width: 16px; height: 16px; border-radius: 50%;
+  background: rgba(var(--teal-rgb), 0.2); box-shadow: 0 0 6px rgba(var(--teal-rgb), 0.4);
+  font-size: 0.9rem; transform: translateY(-1px);
 }

 /* ── Feed Empty / Error States ── */