github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-05 20:38:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the CSS issues in the cheatsheet modal (#448)

Browse Source 
* Fix the CSS issues in the cheatsheet modal

* Change the Sass variable names
This commit is contained in:
M. Mert Yıldıran 2021-11-11 11:26:20 +03:00 committed by GitHub
parent ed8d36cdad
commit 5382a52025
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/Filters.tsx
View File

@ -38,9 +38,9 @@ interface QueryFormProps {
const style = {
position: 'absolute',
top: '50%',
top: '10%',
left: '50%',
transform: 'translate(-50%, -50%)',
transform: 'translate(-50%, 0%)',
width: '80vw',
bgcolor: 'background.paper',
borderRadius: '5px',
@ -214,7 +214,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
language="python"
/>
</Grid>
<Divider orientation="vertical" flexItem />
<Divider className={styles.divider1} orientation="vertical" flexItem />
<Grid item xs style={{margin: "10px"}}>
<Typography id="modal-modal-description">
Since Mizu supports various protocols like gRPC, AMQP, Kafka and Redis. It's possible to write complex queries that match multiple protocols like this:
@ -262,7 +262,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
language="python"
/>
</Grid>
<Divider orientation="vertical" flexItem />
<Divider className={styles.divider2} orientation="vertical" flexItem />
<Grid item xs style={{margin: "10px"}}>
<Typography id="modal-modal-description">
There are a few helper methods included the in the filter language* to help building queries more easily.

16
ui/src/components/style/Filters.module.sass
View File

@ -31,3 +31,19 @@
border: 1px solid #BCC6DD
fieldset
border: none
$divider-breakpoint-1: 1474px
$divider-breakpoint-2: 1366px
$divider-breakpoint-3: 1980px
@media (max-width: $divider-breakpoint-1)
.divider1
display: none
@media (max-width: $divider-breakpoint-2)
.divider2
display: none
@media (min-width: $divider-breakpoint-1) and (max-width: $divider-breakpoint-3)
.divider2
display: none