mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-05-24 09:14:47 +01:00
d657c4919e
* [accessibility-2278267]:[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel. * feat: implement zoom level hook and update components for responsive design. * Format fixed. * feat: add conditionalClass utility and refactor className assignments for improved readability. --------- Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
111 lines
2.3 KiB
TypeScript
111 lines
2.3 KiB
TypeScript
import { makeStyles, shorthands } from "@fluentui/react-components";
|
|
import { cosmosShorthands } from "Explorer/Theme/ThemeUtil";
|
|
|
|
export type QueryTabStyles = ReturnType<typeof useQueryTabStyles>;
|
|
export const useQueryTabStyles = makeStyles({
|
|
queryTab: {
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
},
|
|
queryEditor: {
|
|
...shorthands.border("none"),
|
|
paddingTop: "4px",
|
|
height: "100%",
|
|
width: "100%",
|
|
},
|
|
executeCallToAction: {
|
|
height: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
},
|
|
queryResultsPanel: {
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
"@media (max-width: 420px)": {
|
|
overflow: "scroll",
|
|
},
|
|
},
|
|
queryResultsMessage: {
|
|
...shorthands.margin("5px"),
|
|
},
|
|
queryResultsBody: {
|
|
flexGrow: 1,
|
|
justifySelf: "stretch",
|
|
},
|
|
queryResultsTabPanel: {
|
|
height: "100%",
|
|
display: "flex",
|
|
rowGap: "12px",
|
|
flexDirection: "column",
|
|
"@media (max-width: 420px)": {
|
|
height: "auto",
|
|
},
|
|
},
|
|
queryResultsTabContentContainer: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
paddingLeft: "12px",
|
|
paddingRight: "12px",
|
|
overflow: "auto",
|
|
},
|
|
queryResultsViewer: {
|
|
flexGrow: 1,
|
|
},
|
|
queryResultsBar: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
columnGap: "4px",
|
|
paddingBottom: "4px",
|
|
},
|
|
flexGrowSpacer: {
|
|
flexGrow: 1,
|
|
},
|
|
queryStatsGrid: {
|
|
flexGrow: 1,
|
|
overflow: "auto",
|
|
},
|
|
metricsGridContainer: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
paddingBottom: "6px",
|
|
maxHeight: "100%",
|
|
},
|
|
metricsGridButtons: {
|
|
...cosmosShorthands.borderTop(),
|
|
},
|
|
errorListTableCell: {
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
},
|
|
errorListMessageCell: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
width: "100%",
|
|
alignItems: "center",
|
|
},
|
|
errorListMessage: {
|
|
flexGrow: 1,
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
},
|
|
errorListMessageActions: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
},
|
|
responsiveImg: {
|
|
"@media (max-width: 420px)": {
|
|
width: "50px",
|
|
},
|
|
},
|
|
zoomedImageSize: {
|
|
width: "60px",
|
|
},
|
|
});
|