feat(crypto-helper): asn1: styling improvements: bigger gap between t…

…ree and hex views, fix wide values rendering by adding tree dots in the end of them (thanks to 'text-overflow: ellipsis')
TheBestTvarynka · Feb 3, 2024 · 963401f · 963401f
1 parent b3b0d48
commit 963401f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/public/styles/asn1/node.scss b/public/styles/asn1/node.scss
@@ -4,7 +4,7 @@
  gap: 0.2em;
  align-items: center;
  cursor: crosshair;
- width: 100%;
+ width: calc(100% - 0.5em);
 }
 
 .asn1-constructor-header {
@@ -37,6 +37,7 @@
  background-color: #aab7ce;
  font-size: 0.7em;
  overflow: hidden;
+ text-overflow: ellipsis;
 }
 
 .asn-bool-true {

diff --git a/public/styles/asn1/page.scss b/public/styles/asn1/page.scss
@@ -8,6 +8,6 @@
 .asn1-viewers {
  display: grid;
  grid-template-columns: 70% auto;
- gap: 0.1em;
+ gap: 0.7em;
  width: 100%;
 }
diff --git a/src/asn1/scheme/strings.rs b/src/asn1/scheme/strings.rs
@@ -26,7 +26,7 @@ pub fn octet_string(props: &OctetStringNodeProps) -> Html {
 
  match props.node.inner() {
  Some(asn1) => html! {
- <div style="cursor: crosshair">
+ <div style="cursor: crosshair; width: 100%;">
  <div class="asn1-constructor-header">
  <NodeOptions node_bytes={props.meta.raw_bytes().to_vec()} {offset} {length_len} {data_len} name={String::from("OctetString")}/>
  <span class="asn1-node-info-label">{format!("({} bytes)", octets.len())}</span>
@@ -77,7 +77,7 @@ pub fn bit_string(props: &BitStringNodeProps) -> Html {
 
  match props.node.inner() {
  Some(asn1) => html! {
- <div style="cursor: crosshair">
+ <div style="cursor: crosshair; width: 100%;">
  <div class="asn1-constructor-header">
  <NodeOptions node_bytes={props.meta.raw_bytes().to_vec()} {offset} {length_len} {data_len} name={String::from("BitString")} />
  <span class="asn1-node-info-label">{format!("({} bits)", bits_amount)}</span>