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){
|
@media (max-width:900px){
|
||||||
html,body{max-width:100%;overflow-x:hidden}
|
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}
|
.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{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>button{flex:0 0 auto!important;min-width:132px!important}
|
.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,.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}
|
.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}
|
.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){
|
@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}
|
.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