From 770571d34c6ae93ff418bbd8dccc44ec14b8cf50 Mon Sep 17 00:00:00 2001 From: Daniele Tonon Date: Tue, 23 May 2023 11:02:49 +0200 Subject: [PATCH] Add a switch to show the formatted json --- event.html | 57 ++++++++++++++++++---- static/styles.css | 108 ++++++++++++++++++++++++++++++++---------- static/styles.css.map | 2 +- static/styles.scss | 103 +++++++++++++++++++++++++++++++++++----- 4 files changed, 223 insertions(+), 47 deletions(-) diff --git a/event.html b/event.html index daf23e6..87dc9d3 100644 --- a/event.html +++ b/event.html @@ -97,12 +97,20 @@
LN Address
{{.content_json.lud16}} +
Metadata Event
- {{.nevent}} +
{{.nevent}}
-
-
JSON
+ +
+ + + +
+ +
+
Event JSON
{{.eventJSON}}
@@ -137,10 +145,8 @@
-
- - powered by njump - +
+ Powered by njump
diff --git a/static/styles.css b/static/styles.css index 4033ab1..c268a48 100644 --- a/static/styles.css +++ b/static/styles.css @@ -66,7 +66,7 @@ a { @media (max-width: 580px) { .container_wrapper { display: block; - width: 90%; + padding: 0 1rem; margin: 0 auto; } } @@ -159,6 +159,7 @@ a { .container.profile .columnB { flex-basis: 100%; max-width: 100%; + margin-right: 0; } } .container.profile .columnB .name { @@ -193,6 +194,84 @@ a { font-size: 0.8rem; color: #E32A6D; } +.container.profile .columnB .field.advanced { + display: none; +} +.container.profile .columnB .field.advanced.visible { + display: block; +} +.container.profile .columnB .field.advanced .label { + padding: 0.2rem 1rem; + margin: 0 -1rem; + color: #373737; + background-color: #C9C9C9; +} +.container.profile .columnB .field .json, .container.profile .columnB .field .data { + white-space: pre-wrap; + word-break: break-all; + background-color: #F3F3F3; + padding: 1rem; + margin: 0 -1rem; +} +.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key { + display: inline-block; + margin-top: 0.5rem; + color: #E32A6D; +} +.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string { + color: #373737; +} +.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number { + color: darkorange; +} +.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean { + color: #373737; +} +.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null { + color: #373737; +} +.container.profile .columnB .field.advanced-switch-wrapper { + display: flex; + align-items: center; +} +.container.profile .columnB .field.advanced-switch-wrapper input[type=checkbox] { + height: 0; + width: 0; + visibility: hidden; + display: none; +} +.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type { + cursor: pointer; + text-indent: -9999px; + width: 3rem; + height: 1.4rem; + background: grey; + display: inline-block; + border-radius: 100px; + position: relative; + margin-right: 0.5rem; +} +.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 1.2rem; + height: 1.2rem; + background: #fff; + border-radius: 1rem; + transition: 0.5s; +} +.container.profile .columnB .field.advanced-switch-wrapper input:checked + label { + background: #E32A6D; +} +.container.profile .columnB .field.advanced-switch-wrapper input:checked + label:first-of-type:after { + left: calc(100% - 2px); + transform: translateX(-100%); +} +.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after { + width: 130px; +} .container.profile .columnC { flex-basis: 25%; margin-top: 2rem; @@ -312,30 +391,9 @@ a { } } -pre { - outline: 1px solid #ccc; - padding: 5px; - margin: 5px; -} - -.string { - color: green; -} - -.number { - color: darkorange; -} - -.boolean { - color: blue; -} - -.null { - color: magenta; -} - -.key { - color: red; +.footer { + font-size: 0.8rem; + text-align: center; } /*# sourceMappingURL=styles.css.map */ diff --git a/static/styles.css.map b/static/styles.css.map index b02dc48..693d9dc 100644 --- a/static/styles.css.map +++ b/static/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EAKA;EACA;EACA;EACA;;AAPA;EAHD;IAIE;IACA;;;AAMD;EACC;;AACA;EACC,OA1JM;;AA4JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA7JkB;;AA8JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA/KM;;AAmLT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA7OM;EA8ON,kBAxOiB;EAyOjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7PI;;;AAgQN;EACC,kBA1PgB;;AA8PjB;EADD;IAEE;;;AAED;EACC,kBAjQgB;EAkQhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAtQe;;AA0QlB;EACC;EACA;EACA,OArRM;;AAsRN;EAJD;IAKE;;;;AAQL;EAAK;EAAyB;EAAc;;;AAC5C;EAAU;;;AACV;EAAU;;;AACV;EAAW;;;AACX;EAAQ;;;AACR;EAAO","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,YArPK;;AAwPN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA/TM;EAgUN,kBA1TiB;EA2TjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA/UI;;;AAkVN;EACC,kBA5UgB;;AAgVjB;EADD;IAEE;;;AAED;EACC,kBAnVgB;EAoVhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAxVe;;AA4VlB;EACC;EACA;EACA,OAvWM;;AAwWN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"} \ No newline at end of file diff --git a/static/styles.scss b/static/styles.scss index 1b39a60..bbc221a 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -69,7 +69,7 @@ a { align-items: center; @media (max-width: 580px) { display: block; - width: 90%; + padding: 0 1rem; margin: 0 auto; } } @@ -142,14 +142,15 @@ a { .columnB { flex-basis: 50%; max-width: 50%; - @media (max-width: 580px) { - flex-basis: 100%; - max-width: 100%; - } flex-grow: 0; flex-shrink: 0; word-wrap: break-word; margin-right: 1vw; + @media (max-width: 580px) { + flex-basis: 100%; + max-width: 100%; + margin-right: 0; + } .name { font-size: 1.6rem; .display { @@ -177,6 +178,87 @@ a { font-size: 0.8rem; color: $color_3; } + &.advanced { + display: none; + &.visible { + display: block; + } + .label { + padding: 0.2rem 1rem; + margin: 0 -1rem; + color: $color_1; + background-color: $color_2; + } + } + .json, .data { + white-space: pre-wrap; + word-break: break-all; + background-color: $background-color_3; + padding: 1rem; + margin: 0 -1rem; + + .key { + display: inline-block; + margin-top: 0.5rem; + color: $color_3; + } + + .string { color: $color_1; } + .number { color: darkorange; } + .boolean { color: $color_1; } + .null { color: $color_1; } + } + + &.advanced-switch-wrapper { + display: flex; + align-items: center; + + input[type=checkbox]{ + height: 0; + width: 0; + visibility: hidden; + display: none; + } + + label:first-of-type { + cursor: pointer; + text-indent: -9999px; + width: 3rem; + height: 1.4rem; + background: grey; + display: inline-block; + border-radius: 100px; + position: relative; + margin-right: 0.5rem; + } + + label:first-of-type:after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 1.2rem; + height: 1.2rem; + background: #fff; + border-radius: 1rem; + transition: 0.5s; + } + + input:checked + label { + background: $color_3; + } + + input:checked + label:first-of-type:after { + left: calc(100% - 2px); + transform: translateX(-100%); + } + + label:first-of-type:active:after { + width: 130px; + } + + } + } } .columnC { @@ -288,10 +370,7 @@ a { } } - -pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } -.string { color: green; } -.number { color: darkorange; } -.boolean { color: blue; } -.null { color: magenta; } -.key { color: red; } \ No newline at end of file +.footer { + font-size: 0.8rem; + text-align: center; +} \ No newline at end of file