Fix mobile catalog toolbar layout and empty controls
This commit is contained in:
parent
f8bb0a78b4
commit
3f6980e5bc
@ -2,14 +2,86 @@
|
||||
@media (max-width:900px){
|
||||
html,body{max-width:100%;overflow-x:hidden}
|
||||
.work,.card,.catalog,.sun-catalog-shell,.sun-catalog-main{min-width:0!important;max-width:100%!important}
|
||||
.cats{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;overscroll-behavior-x:contain;scrollbar-width:thin}
|
||||
.cats>button{flex:0 0 auto!important;min-width:132px!important}
|
||||
.cats{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
|
||||
.cats::-webkit-scrollbar{display:none}
|
||||
.cats>button{flex:0 0 auto!important;min-width:132px!important;white-space:nowrap!important}
|
||||
.sun-catalog-view-switch,.sun-catalog-top-toolbar,.sun-settings-tabs{max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;overscroll-behavior-x:contain}
|
||||
.sun-catalog-view-switch>*{flex:0 0 auto!important}
|
||||
.enterprise-card,.sun-chat-shell,.sun-chat-main,.sun-chat-sidebar{min-width:0!important;max-width:100%!important}
|
||||
|
||||
/* Empty mobile header controls must not leave blank square placeholders. */
|
||||
header button:empty:not([aria-label]):not([title]){display:none!important}
|
||||
}
|
||||
|
||||
@media (max-width:650px){
|
||||
/* Catalog mobile toolbar: title -> full-width search -> PDF / Tabs / Menu. */
|
||||
#new .catalog .catalog-head{
|
||||
display:grid!important;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr))!important;
|
||||
gap:8px!important;
|
||||
align-items:center!important;
|
||||
width:100%!important;
|
||||
}
|
||||
#new .catalog .catalog-head>h1{
|
||||
grid-column:1/-1!important;
|
||||
min-width:0!important;
|
||||
margin:0 0 2px!important;
|
||||
}
|
||||
#new .catalog .catalog-head>.sun-catalog-search,
|
||||
#new .catalog .catalog-head>#sunCatalogSearch{
|
||||
grid-column:1/-1!important;
|
||||
width:100%!important;
|
||||
min-width:0!important;
|
||||
max-width:none!important;
|
||||
height:40px!important;
|
||||
margin:0!important;
|
||||
}
|
||||
#new .catalog .catalog-head>#sunLiveCatalogPdfButton,
|
||||
#new .catalog .catalog-head>#sunCatalogTabsButton,
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"]{
|
||||
width:100%!important;
|
||||
min-width:0!important;
|
||||
height:40px!important;
|
||||
min-height:40px!important;
|
||||
margin:0!important;
|
||||
padding:0 8px!important;
|
||||
border-radius:8px!important;
|
||||
display:inline-flex!important;
|
||||
align-items:center!important;
|
||||
justify-content:center!important;
|
||||
gap:6px!important;
|
||||
line-height:1!important;
|
||||
white-space:nowrap!important;
|
||||
}
|
||||
#new .catalog .catalog-head>#sunLiveCatalogPdfButton{grid-column:1!important}
|
||||
#new .catalog .catalog-head>#sunCatalogTabsButton{grid-column:2!important}
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"]{
|
||||
grid-column:3!important;
|
||||
font-size:0!important;
|
||||
}
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"]::after{
|
||||
content:'Меню';
|
||||
font-size:13px!important;
|
||||
font-weight:700!important;
|
||||
line-height:1!important;
|
||||
}
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"] svg,
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"] img{
|
||||
width:16px!important;
|
||||
height:16px!important;
|
||||
flex:0 0 16px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:420px){
|
||||
.catalog-head{gap:8px;flex-wrap:wrap}
|
||||
.catalog-head h1{flex:1 1 auto}
|
||||
.sun-catalog-top-toolbar{gap:6px!important}
|
||||
#new .catalog .catalog-head{gap:7px!important}
|
||||
#new .catalog .catalog-head>#sunLiveCatalogPdfButton,
|
||||
#new .catalog .catalog-head>#sunCatalogTabsButton,
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"]{
|
||||
padding-inline:6px!important;
|
||||
font-size:12px!important;
|
||||
}
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"]{font-size:0!important}
|
||||
#new .catalog .catalog-head>button[onclick*="openManager"]::after{font-size:12px!important}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user