caterium/caterium-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore search/notification icons and catalog toolbar on mobile

Browse Source 
The sidebar's search and notification button icons are drawn entirely
by mask-image rules scoped to @media(min-width:901px) (the "enterprise
sidebar" redesign styling). The existing mobile block
(@media(max-width:900px)) predates that redesign and only hides the
button labels via font-size:0 - it never defined a mobile equivalent
of the icon rules, so on phones the buttons rendered with literally
nothing visible inside them: no text (hidden), no icon (never defined
for this breakpoint).

Adds a second @media(max-width:900px) block with the same mask-image
icons for #sunGlobalSearchBtn/#sunNotificationsBtn.

Also fixes the catalog toolbar (PDF / search / "Вкладки" / "Меню"):
on narrow screens flex-wrap put the title, buttons, and a
min-width:180px search input on uneven wrapped lines with no
consistent baseline. The title now takes its own full-width line
(order:-1, flex-basis:100%), the search input can shrink instead of
forcing overflow, and the toolbar buttons get an explicit
align-self:center so they land on one level together.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
pavlov346346-source 2026-09-12 17:45:31 +03:00
parent 09d54682c2
commit 1af9733154
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@ -4855,6 +4855,17 @@ window.SunQR = {
.sun-side-collapsed header .brand .real-logo{width:50px!important;height:50px!important}
}
@media(max-width:900px){body.sun-enterprise-sidebar,body.sun-side-collapsed{padding-left:0;padding-bottom:76px}.sun-enterprise-sidebar header{position:relative!important;width:auto!important;height:auto!important;min-height:64px!important;padding:9px 14px 10px!important;overflow:visible!important;display:flex!important;flex-direction:column!important}.sun-enterprise-sidebar header .brand{font-size:20px!important;padding:0;justify-content:flex-start}.sun-enterprise-sidebar header .brand .real-logo{width:42px!important;height:42px!important;margin-right:9px!important}.sun-side-tools{display:flex;gap:6px;overflow:auto}.sun-side-action{min-width:45px;width:auto;font-size:0;justify-content:center}.sun-side-action .badge{font-size:10px;position:absolute;margin:-27px -28px 0 0}.sun-current-user{display:none}.sun-side-footer{display:none}.sun-enterprise-sidebar header nav{position:fixed!important;left:0;right:0;bottom:0;z-index:100;display:flex!important;flex-direction:row!important;overflow-x:auto!important;width:auto!important}.sun-enterprise-sidebar .sun-nav-group{display:contents!important}.enterprise-grid{grid-template-columns:1fr}.enterprise-card.wide{grid-column:auto}.enterprise-fields{grid-template-columns:1fr}.enterprise-fields .wide{grid-column:auto}.audit-row{grid-template-columns:1fr}.sun-sidebar-collapse{display:none}.autosave-banner{margin:8px}.autosave-banner .actions{margin-left:0}}
@media(max-width:900px){
#sunGlobalSearchBtn>span:first-child,#sunNotificationsBtn>span:first-child{font-size:0!important;display:block!important;width:19px!important;height:19px!important;min-width:19px!important;background:currentColor!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-size:19px 19px!important;mask-size:19px 19px!important}
#sunGlobalSearchBtn>span:first-child{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-4-4%22%2F%3E%3C%2Fsvg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-4-4%22%2F%3E%3C%2Fsvg%3E")!important}
#sunNotificationsBtn>span:first-child{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%200%200-12%200c0%207-3%207-3%209h18c0-2-3-2-3-9Z%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3C%2Fsvg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%200%200-12%200c0%207-3%207-3%209h18c0-2-3-2-3-9Z%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3C%2Fsvg%3E")!important}
#sunGlobalSearchBtn>span:nth-child(2),#sunGlobalSearchBtn kbd,#sunNotificationsBtn>span:nth-child(2){display:none!important}
#sunNotificationsBtn .badge{position:absolute!important;right:-4px!important;top:-6px!important;margin:0!important;min-width:16px!important;height:16px!important;padding:0 4px!important;font-size:9px!important}
#new .catalog-head{align-items:center!important}
#new .catalog-head h1{flex:1 1 100%;order:-1}
#new .sun-catalog-search{flex:1 1 140px;min-width:0;width:auto}
#sunLiveCatalogPdfButton,#sunCatalogTabsButton,#new .catalog-head button{align-self:center}
}
@media print{.sun-side-tools,.sun-side-footer,#sunToastHost{display:none!important}}
`;
document.head.appendChild(style);