reponsive moblie
This commit is contained in:
@@ -73,6 +73,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assets-mobile-list,
|
||||
.consumables-mobile-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body.app-shell {
|
||||
width: 100%;
|
||||
@@ -177,6 +182,54 @@
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.assets-page,
|
||||
.consumables-page {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.assets-page .page-header,
|
||||
.consumables-page .page-header {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.assets-page .asset-header-actions,
|
||||
.consumables-page .consumable-header-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.assets-page .asset-header-actions > button,
|
||||
.consumables-page .consumable-header-actions > button {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.assets-page .page-filters,
|
||||
.consumables-page .page-filters {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.assets-page .assets-desktop-table,
|
||||
.consumables-page .consumables-desktop-table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assets-page .assets-mobile-list,
|
||||
.consumables-page .consumables-mobile-list {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.assets-page .asset-mobile-card,
|
||||
.consumables-page .consumable-mobile-card {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.page-pager {
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
@@ -201,7 +254,18 @@
|
||||
.apps-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.assets-page .page-header h1,
|
||||
.consumables-page .page-header h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.assets-page .page-header p,
|
||||
.consumables-page .page-header p {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="app-shell bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
|
||||
Reference in New Issue
Block a user