mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 14:24:47 +00:00
feat(кабинет): мобильный адаптив — гамбургер-меню + выезжающий сайдбар (Telegram на телефоне)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
509ce225b9
commit
11486ce8a8
@ -172,10 +172,36 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
|
||||
.exp-d{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
|
||||
.exp-btns{display:flex;flex-wrap:wrap;gap:10px}
|
||||
@media print{.sb,.hdr,.pb,.hero,.nav,.exp-bar,.modal,.mic,.inp-bar{display:none!important}.main,.sv,.scroll,.pad{display:block!important;overflow:visible!important;height:auto!important;margin:0!important;padding:0!important}body{background:#fff}}
|
||||
/* ── Мобильный (Telegram на телефоне) ── */
|
||||
.hdr-burger{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0}
|
||||
.sb-backdrop{display:none;position:fixed;inset:54px 0 0 0;background:rgba(0,0,0,.55);z-index:40}
|
||||
.sb-backdrop.show{display:block}
|
||||
@media(max-width:680px){
|
||||
.hdr{padding:0 12px;gap:8px}
|
||||
.hdr-burger{display:block}
|
||||
.hdr-t{font-size:12px}
|
||||
.hdr-client{display:none}
|
||||
.elena-nm{display:none}
|
||||
.sb{position:fixed;left:-260px;top:54px;bottom:0;z-index:50;width:240px;transition:left .25s ease;box-shadow:3px 0 18px rgba(0,0,0,.45)}
|
||||
.sb.open{left:0}
|
||||
.main{width:100%}
|
||||
.hero{padding:13px 15px;gap:11px}
|
||||
.hero-ic{width:38px;height:38px;font-size:17px}
|
||||
.hero-h{font-size:16px}
|
||||
.hero-d{font-size:12px}
|
||||
.chat{padding:16px 13px;gap:11px}
|
||||
.msg{max-width:90%}
|
||||
.bb{font-size:13.5px}
|
||||
.inbar{padding:10px 13px;gap:8px}
|
||||
.icon-btn{width:40px;height:40px}
|
||||
.run-card{padding:20px 16px;margin:8px 14px 16px}
|
||||
.exp-bar{padding:16px 14px}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hdr">
|
||||
<button class="hdr-burger" onclick="toggleSb()" aria-label="Меню">☰</button>
|
||||
<div class="hdr-ic">@</div>
|
||||
<div class="hdr-t">wasrusgen1<span class="hdr-sep"></span><b>КОНСАЛТИНГ</b></div>
|
||||
<div class="hdr-client" id="hdrClient"></div>
|
||||
@ -226,7 +252,8 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout">
|
||||
<aside class="sb">
|
||||
<div class="sb-backdrop" id="sbBackdrop" onclick="toggleSb()"></div>
|
||||
<aside class="sb" id="sbNav">
|
||||
<div class="sb-nav">
|
||||
<div class="si" id="si0" onclick="go(0)" style="margin-bottom:4px"><div class="si-num" style="background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)">👤</div><div class="si-body"><div class="si-name">Профиль компании</div><div class="si-sub">О вашей деятельности</div></div></div>
|
||||
<div style="height:1px;background:rgba(255,255,255,.06);margin:4px 18px 8px"></div>
|
||||
@ -311,8 +338,17 @@ const PCTS={1:20,2:40,3:60,4:80,5:100};
|
||||
function esc(s){return (s||"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}
|
||||
function fmt(s){return esc(s).replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>")}
|
||||
|
||||
function toggleSb(){
|
||||
const sb=document.getElementById('sbNav'), bd=document.getElementById('sbBackdrop');
|
||||
const open=sb.classList.toggle('open'); bd.classList.toggle('show',open);
|
||||
}
|
||||
function closeSb(){
|
||||
const sb=document.getElementById('sbNav'), bd=document.getElementById('sbBackdrop');
|
||||
if(sb)sb.classList.remove('open'); if(bd)bd.classList.remove('show');
|
||||
}
|
||||
function go(n){
|
||||
if(document.getElementById('si'+n).classList.contains('locked'))return;
|
||||
if(window.innerWidth<=680)closeSb();
|
||||
cur=n;
|
||||
document.querySelectorAll('.sv').forEach(s=>s.classList.remove('active'));
|
||||
document.getElementById('sv'+n).classList.add('active');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user