aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-11 17:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move nevent under 'more details' and fix css details

Browse Source
This commit is contained in:
Daniele Tonon
2023-05-26 16:36:39 +02:00
parent fcdbf347b1
commit 7cb5233e65
5 changed files with 166 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
note.html
View File

@@ -49,34 +49,36 @@
<!----------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css" />
<link rel="stylesheet" href="/static/styles.css?v=20230526" />
</head>
<body>
<body class="note">
<div class="top">
<a href="https://nostr.com" class="nostr_link">What is nostr?</a>
<a href="https://nostr.com" class="nostr_link">What is <span>nostr</span>?</a>
</div>
<div class="container_wrapper">
<div class="container note">
<div class="container">
<div class="column column_content">
<div class="profile_intro">
<div class="pic-wrapper">
<a href="/{{.npub | SanitizeString}}"><img class="pic" src="{{.metadata.Picture | SanitizeString}}" /></a>
<div class="profile_intro">
<a href="/{{.npub | SanitizeString}}">
<div class="pic-wrapper">
<img class="pic" src="{{.metadata.Picture | SanitizeString}}" />
</div>
<div class="info-wrapper">
<div class="name">
{{.metadata.Name | SanitizeString}} <span class="display">{{.metadata.DisplayName | SanitizeString}}</span>
</div>
<div class="npub">{{.npubShort | SanitizeString}}</div>
</div>
<div class="published_at">
{{.createdAt | SanitizeString}}
</div>
</a>
</div>
<div class="info-wrapper">
<div class="name">
{{.metadata.Name | SanitizeString}} <span class="display">{{.metadata.DisplayName | SanitizeString}}</span>
</div>
<div class="npub">{{.npubShort | SanitizeString}}</div>
</div>
<div class="published_at">
{{.createdAt | SanitizeString}}
</div>
</div>
<div class="field separator"></div>
@@ -91,11 +93,6 @@
{{.npub}}
</div>
<div class="field">
<div class="label">Nevent</div>
<div>{{.nevent | SanitizeString}}</div>
</div>
<div class="field last_update">
Last update:<br/>
{{.createdAt | SanitizeString}}
@@ -108,6 +105,11 @@
</div>
<div class="field advanced">
<div class="label">Nevent</div>
<div>{{.nevent | SanitizeString}}</div>
</div>
<div class="field advanced boxed">
<div class="label">Event JSON</div>
<div class="json">{{.eventJSON | SanitizeString}}</div>
</div>

18
profile.html
View File

@@ -49,17 +49,17 @@
<!----------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css" />
<link rel="stylesheet" href="/static/styles.css?v=20230526" />
</head>
<body>
<body class="profile">
<div class="top">
<a href="https://nostr.com" class="nostr_link">What is nostr?</a>
<a href="https://nostr.com" class="nostr_link">What is <span>nostr</span>?</a>
</div>
<div class="container_wrapper">
<div class="container profile">
<div class="container">
<div class="column columnA">
<div class="info-wrapper">
@@ -101,11 +101,6 @@
{{.metadata.LUD16 | SanitizeString}}
</div>
<div class="field">
<div class="label">Metadata Event</div>
<div>{{.nevent | SanitizeString}}</div>
</div>
<div class="field last_update">
Last update:<br/>
{{.createdAt | SanitizeString}}
@@ -118,6 +113,11 @@
</div>
<div class="field advanced">
<div class="label">Metadata Event</div>
<div>{{.nevent | SanitizeString}}</div>
</div>
<div class="field advanced boxed">
<div class="label">Event JSON</div>
<div class="json">{{.eventJSON}}</div>
</div>

57
static/styles.css
View File

@@ -62,6 +62,9 @@ a {
font-size: 0.8rem;
}
}
.top span {
color: #E32A6D;
}
.pic-wrapper {
max-width: 100%;
@@ -201,7 +204,7 @@ a {
.container .column_content .field.advanced.visible {
display: block;
}
.container .column_content .field.advanced .label {
.container .column_content .field.advanced.boxed .label {
padding: 0.2rem 1rem;
margin: 0 -1rem;
color: #373737;
@@ -261,6 +264,9 @@ a {
.container .column_content .field.advanced-switch-wrapper label:first-of-type:active:after {
width: 2rem;
}
.container .column_content .field.content {
line-height: 1.4rem;
}
.container .column_content .field.content img {
max-width: 100%;
margin: 1rem 0;
@@ -321,6 +327,7 @@ a {
.container .column_clients .title {
font-size: 0.8rem;
margin-bottom: 1rem;
text-align: center;
}
.container .column_clients .title span.open, .container .column_clients .title span.close {
display: none;
@@ -359,7 +366,7 @@ a {
}
}
.container .column_clients .btn a {
flex-basis: 80%;
flex-basis: 100%;
padding: 0.4rem;
text-align: center;
font-size: 0.9rem;
@@ -417,63 +424,77 @@ a {
display: none;
}
}
.container.profile .column_content {
body.profile .column_content {
flex-basis: 50%;
max-width: 50%;
}
@media (max-width: 580px) {
.container.profile .column_content {
body.profile .column_content {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
.container.note .column_content {
@media (max-width: 580px) {
body.note .top {
text-align: right;
}
}
body.note .column_content {
flex-basis: 70%;
max-width: 70%;
}
@media (max-width: 580px) {
.container.note .column_content {
body.note .column_content {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
.container.note .column_content .profile_intro {
body.note .column_content .profile_intro {
display: flex;
max-width: 100%;
align-items: center;
}
body.note .column_content .profile_intro a {
display: inherit;
align-items: inherit;
margin: 1rem 0 1rem 0;
text-decoration: none;
flex-wrap: wrap;
}
@media (max-width: 580px) {
.container.note .column_content .profile_intro {
flex-wrap: wrap;
body.note .column_content .profile_intro a {
margin-top: 0rem;
margin-bottom: -0.5rem;
}
}
.container.note .column_content .profile_intro .info-wrapper {
display: block;
body.note .column_content .profile_intro .info-wrapper {
flex-basis: 80%;
}
@media (max-width: 580px) {
.container.note .column_content .profile_intro .info-wrapper {
flex-basis: 80%;
body.note .column_content .profile_intro .info-wrapper {
display: block;
}
}
@media (max-width: 580px) {
.container.note .column_content .profile_intro .info-wrapper .name, .container.note .column_content .profile_intro .info-wrapper .npub {
body.note .column_content .profile_intro .info-wrapper .name, body.note .column_content .profile_intro .info-wrapper .npub {
display: block-inline;
font-size: 0.9rem;
}
}
.container.note .column_content .profile_intro .pic-wrapper {
body.note .column_content .profile_intro .pic-wrapper {
flex-basis: 16%;
margin-right: 1rem;
}
@media (max-width: 580px) {
.container.note .column_content .profile_intro .pic-wrapper {
body.note .column_content .profile_intro .pic-wrapper {
margin-right: 0.5rem;
}
}
.container.note .column_content .profile_intro .published_at {
body.note .column_content .profile_intro .published_at {
flex-grow: 1;
text-align: right;
align-self: end;
@@ -481,7 +502,7 @@ a {
color: #9a9a9a;
}
@media (max-width: 580px) {
.container.note .column_content .profile_intro .published_at {
body.note .column_content .profile_intro .published_at {
padding-top: 0.5rem;
}
}

2
static/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAIF;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;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,OArIK;;;AAyIR;EACC;EACA;EACA;EACA,OA7IO;;AA8IP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OA7JM;;AA+JP;EACC;EACA,OAjKM;;AAmKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBApKkB;;AAqKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAtLM;;AAwLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OAlMK;EAmML,kBAlMK;;AAqMP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA7MgB;EA8MhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAhPK;;AAmPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAED;EACC;EACA;EACA,kBA9PiB;EA+PjB;EACA;;AACA;EACC;EACA;EACA,OA1QK;;AA4QN;EAAU,OA9QJ;;AA+QN;EAAU;;AACV;EAAW,OAhRL;;AAiRN;EAAQ,OAjRF;;AAmRP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAvRK;;;AA8RT;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,OAvVM;EAwVN,kBAlViB;EAmVjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvWI;;;AA0WN;EACC,kBApWgB;;AAwWjB;EADD;IAEE;;;AAED;EACC,kBA3WgB;EA4WhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhXe;;AAoXlB;EACC;EACA;EACA,OA/XM;;AAgYN;EAJD;IAKE;;;AAOH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAMF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EAgBC;EACA;EACA;EACA;;AAlBA;EADD;IAEE;;;AAED;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAQH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;EACA,OA5bK;;AA6bL;EAND;IAOE;;;;AASN;EACC;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;AAEC;EADD;IAEE;;;;AAIH;EACC,OA/BS;;;AAiCV;EACC;EACA;EACA;EACA;EACA;EACA,kBAjCoB;EAkCpB;EACA;;AACA;EACC;EACA;EACA,kBAtCmB;EAuCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AAED;EACC,OApEQ;;;AAwEV;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAGD;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,OAzIK;;;AA6IR;EACC;EACA;EACA;EACA,OAjJO;;AAkJP;EALD;IAME;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC,OAjKM;;AAmKP;EACC;EACA,OArKM;;AAuKP;EATD;IAUE;;;AAGF;EACC;EACA;EACA;EACA,kBAxKkB;;AAyKlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA1LM;;AA4LP;EACC;;AACA;EACC;;AAGA;EACC;EACA;EACA,OAvMI;EAwMJ,kBAvMI;;AA2MP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAnNgB;EAoNhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YAtPK;;AAyPN;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA,kBAvQiB;EAwQjB;EACA;;AACA;EACC;EACA;EACA,OAnRK;;AAqRN;EAAU,OAvRJ;;AAwRN;EAAU;;AACV;EAAW,OAzRL;;AA0RN;EAAQ,OA1RF;;AA4RP;EACC;;AACA;EAFD;IAGE;IACA;IACA,OAhSK;;;AAuST;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;EACA;;AACA;EACC;;AAED;EAPD;IAQE;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,OAjWM;EAkWN,kBA5ViB;EA6VjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAjXI;;;AAoXN;EACC,kBA9WgB;;AAkXjB;EADD;IAEE;;;AAED;EACC,kBArXgB;EAsXhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBA1Xe;;AA8XlB;EACC;EACA;EACA,OAzYM;;AA0YN;EAJD;IAKE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;;;AAGF;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAIH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;EACA,OApdM;;AAqdN;EAND;IAOE;;;;AAOL;EACC;EACA","file":"styles.css"}

164
static/styles.scss
View File

@@ -67,6 +67,9 @@ a {
margin: 1.5rem auto 0 auto;
font-size: 0.8rem;
}
span {
color: $color_3;
}
}
.pic-wrapper {
@@ -102,6 +105,7 @@ a {
text-align: right;
text-decoration: none;
}
.container {
display: flex;
width: 70%;
@@ -189,11 +193,13 @@ a {
&.visible {
display: block;
}
.label {
padding: 0.2rem 1rem;
margin: 0 -1rem;
color: $color_1;
background-color: $color_2;
&.boxed {
.label {
padding: 0.2rem 1rem;
margin: 0 -1rem;
color: $color_1;
background-color: $color_2;
}
}
}
&.advanced-switch-wrapper {
@@ -253,10 +259,13 @@ a {
}
}
&.content img {
max-width: 100%;
margin: 1rem 0;
}
&.content{
line-height: 1.4rem;
img {
max-width: 100%;
margin: 1rem 0;
}
}
.json, .data {
white-space: pre-wrap;
word-break: break-all;
@@ -307,6 +316,7 @@ a {
.title {
font-size: 0.8rem;
margin-bottom: 1rem;
text-align: center;
span.open, span.close {
display: none;
}
@@ -340,7 +350,7 @@ a {
margin-bottom: 0;
}
a {
flex-basis: 80%;
flex-basis: 100%;
padding: 0.4rem;
text-align: center;
font-size: 0.9rem;
@@ -393,68 +403,80 @@ a {
}
}
&.profile {
.column_content {
flex-basis: 50%;
max-width: 50%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
}
&.note {
.column_content {
flex-basis: 70%;
max-width: 70%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
.profile_intro {
@media (max-width: 580px) {
flex-wrap: wrap;
}
.info-wrapper {
display: block;
@media (max-width: 580px) {
flex-basis: 80%;
}
.name, .npub {
@media (max-width: 580px) {
display: block-inline;
font-size: 0.9rem;
}
}
}
display: flex;
max-width: 100%;
align-items: center;
margin: 1rem 0 1rem 0;
.pic-wrapper {
flex-basis: 16%;
margin-right: 1rem;
@media (max-width: 580px) {
margin-right: 0.5rem;
}
}
.published_at {
flex-grow: 1;
text-align: right;
align-self: end;
font-size: 0.8rem;
color: $color_5;
@media (max-width: 580px) {
padding-top: 0.5rem;
}
}
}
}
}
}
body.profile {
.column_content {
flex-basis: 50%;
max-width: 50%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
}
body.note {
.top {
@media (max-width: 580px) {
text-align: right;
}
}
.column_content {
flex-basis: 70%;
max-width: 70%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
.profile_intro {
display: flex;
max-width: 100%;
align-items: center;
a {
display: inherit;
align-items: inherit;
margin: 1rem 0 1rem 0;
text-decoration: none;
flex-wrap: wrap;
@media (max-width: 580px) {
margin-top: -0rem;
margin-bottom: -0.5rem;
}
}
.info-wrapper {
flex-basis: 80%;
@media (max-width: 580px) {
display: block;
}
.name, .npub {
@media (max-width: 580px) {
display: block-inline;
font-size: 0.9rem;
}
}
}
.pic-wrapper {
flex-basis: 16%;
margin-right: 1rem;
@media (max-width: 580px) {
margin-right: 0.5rem;
}
}
.published_at {
flex-grow: 1;
text-align: right;
align-self: end;
font-size: 0.8rem;
color: $color_5;
@media (max-width: 580px) {
padding-top: 0.5rem;
}
}
}
}
}
.footer {