github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-23 14:58:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the CSS issues in queryable vertical protocol element (#526)

Browse Source
This commit is contained in:
M. Mert Yıldıran 2021-12-12 19:38:14 +03:00 committed by GitHub
parent 0a2aacfb02
commit d274db2d87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/components/EntryListItem/EntryListItem.module.sass
View File

@ -68,7 +68,6 @@
flex-direction: column
overflow: hidden
padding-right: 10px
padding-left: 10px
flex-grow: 1
.separatorRight

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

@ -120,6 +120,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
break;
}
const isStatusCodeEnabled = ((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0);
var endpointServiceContainer = "10px";
if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
return <>
<div
id={`entry-${entry.id.toString()}`}
@ -142,10 +146,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
horizontal={false}
updateQuery={updateQuery}
/> : null}
{((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0) && <div>
{isStatusCodeEnabled && <div>
<StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/>
</div>}
<div className={styles.endpointServiceContainer}>
<div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
<Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/>
<div className={styles.service}>
<Queryable

3
ui/src/components/UI/Protocol.tsx
View File

@ -48,7 +48,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={false}
iconStyle={{marginTop: "48px"}}
iconStyle={{marginTop: "52px", marginRight: "10px", zIndex: 1000}}
>
<span
className={`${styles.base} ${styles.vertical}`}
@ -56,6 +56,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
backgroundColor: protocol.backgroundColor,
color: protocol.foregroundColor,
fontSize: protocol.fontSize,
marginRight: "-20px",
}}
title={protocol.longName}
>

2
ui/src/components/UI/StatusCode.tsx
View File

@ -22,7 +22,7 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
updateQuery={updateQuery}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginTop: "40px"}}
iconStyle={{marginTop: "40px", paddingLeft: "10px"}}
>
<span
title="Status Code"