note char limit with read more link and other UI improvements

bija/jinja_filters.py

@@ -1,4 +1,5 @@
 import json
+import textwrap
 
 from flask import render_template
 import arrow
@@ -79,7 +80,9 @@ def _jinja2_filter_media(json_string):
 
 
 @app.template_filter('process_note_content')
-def _jinja2_filter_note(content: str):
+def _jinja2_filter_note(content: str, limit=200):
+    if limit is not None:
+        content = textwrap.shorten(content, width=limit, placeholder="... <a href='#' class='read-more'>more</a>")
     tags = get_at_tags(content)
     for tag in tags:
         pk = tag[1:]

bija/routes.py

@@ -165,7 +165,7 @@ def profile_page():
         raw = json.loads(profile.raw)
         meta = json.loads(raw['content'])
         for item in meta.keys():
-            if item not in ['name', 'picture', 'about', 'nip05']:
+            if item in ['website', 'lud06', 'lud16']:
                 metadata[item] = meta[item]
 
     return render_template("profile.html", page_id=page_id, title="Profile", threads=t.threads, last=t.last_ts,
@@ -267,6 +267,14 @@ def thread_item():
     return render_template("thread.item.html", item=note, profile=profile)
 
 
+@app.route('/read_more', methods=['GET'])
+def read_more():
+    note_id = request.args['id']
+    note = DB.get_note(note_id)
+    return render_template("note.content.html", note=note)
+
+
+
 @app.route('/settings', methods=['GET', 'POST'])
 @login_required
 def settings_page():
@@ -336,7 +344,8 @@ def update_profile():
     if request.method == 'POST':
         profile = {}
         for item in request.json:
-            if item[0] in ['name', 'about', 'picture', 'nip05']:
+            valid_vals = ['name', 'about', 'picture', 'nip05', 'website', 'lud06', 'lud16']
+            if item[0] in valid_vals and len(item[1].strip()) > 0:
                 profile[item[0]] = item[1].strip()
         if 'nip05' in profile and len(profile['nip05']) > 0:
             valid_nip5 = MetadataEvent.validate_nip05(profile['nip05'], get_key())

bija/static/page.js

@@ -725,9 +725,6 @@ class bijaNotes{
                 this.setLikeClickedEvents(like_el)
             }
 
-            const content_el = note.querySelector(".note-content pre");
-            this.setExpandableHeight(content_el)
-
             const im_el = note.querySelector(".image-attachment img");
             if(im_el){
                 this.setImageClickEvents(im_el)
@@ -745,42 +742,37 @@ class bijaNotes{
             if(emoji_link){
                 new Emojis(note)
             }
+            const read_more_link = note.querySelector(".read-more");
+            if(read_more_link){
+                this.setReadMoreClicks(read_more_link, note.dataset.id)
+            }
+
         }
     }
 
+    setReadMoreClicks(elem, id){
+        elem.addEventListener('click', (e) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            const cb = function(response, data){
+                if(response != '0'){
+                    const note_el = document.querySelector('.note[data-id="'+data.id+'"]')
+                    const content_el = note_el.querySelector('.note-content pre')
+                    content_el.innerHTML = response
+                }
+            }
+            fetchGet('/read_more?id='+id, cb, {'id': id})
+        })
+    }
+
     setImageClickEvents(elem){
         elem.addEventListener("click", (event)=>{
             const im = elem.parentElement.innerHTML
             popup(im)
         });
     }
 
-    setExpandableHeight(elem){
-        if(elem.offsetHeight > 150){
-            elem.style.height = '150px'
-            elem.style.overflow = 'hidden'
-            elem.style.paddingBottom = '60px'
-            elem.dataset.state = 0
-            const reveal_btn = document.createElement('div')
-            reveal_btn.classList.add('reveal')
-            reveal_btn.innerHTML = '<span>show more</span>'
-            elem.append(reveal_btn)
-            reveal_btn.addEventListener("click", (event)=>{
-                event.stopPropagation();
-                const btn = elem.querySelector('span')
-                if(elem.dataset.state == 0){
-                    elem.style.height = 'auto'
-                    elem.dataset.state = 1
-                    btn.innerText = 'show less'
-                }
-                else{
-                    elem.style.height = '150px'
-                    elem.dataset.state = 0
-                    btn.innerText = 'show more'
-                }
-            });
-        }
-    }
 
     setReplyClickedEvents(elem){
         elem.addEventListener("click", (event)=>{

bija/static/styles.css

@@ -1210,7 +1210,7 @@ p.note-tools {
   10%, 80% { opacity: 1 }
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 800px) {
     :root {
         --spacing-tiny: 5px;
         --spacing-sm: 10px;

bija/templates/note.content.html

@@ -0,0 +1 @@
+{{note['content'] | process_note_content(none) |safe}}

bija/templates/profile.header.html

@@ -40,12 +40,27 @@ <h1 class="profile-name">{{profile['name'] | ident_string(profile['public_key'],
             {%- set pic_url='' -%}
         {%- endif -%}
     <form id="profile_updater" data-vis="0">
+        <label for="pname" class="sm">Handle</label>
         <input type="text" id="pname" name="name" class="pname" value="{{pname}}">
-        <label for="pmsg">About</label>
+
+        <label for="pmsg" class="sm">About</label>
         <textarea name="about" id="pmsg" rows="10" cols="30">{{about}}</textarea>
-        <label for="pim">Image URL</label>
+
+        <label for="pim" class="sm">Image URL</label>
         <input type="text" id="pim" name="picture" value="{{pic_url}}">
-        <input type="text" id="nip5" name="nip05" value="{{profile['nip05']}}">
+
+        <label for="pnip5" class="sm">Nip05 identifier</label>
+        <input type="text" id="pnip5" name="nip5" value="{{profile['nip05']}}">
+
+        <label for="pwebsite" class="sm">Website</label>
+        <input type="text" id="pwebsite" name="website" value="{{meta['website']}}">
+
+        <label for="plud06" class="sm">LNURL</label>
+        <input type="text" id="plud06" name="lud06" value="{{meta['lud06']}}">
+
+        <label for="plud16" class="sm">Lightning address</label>
+        <input type="text" id="plud16" name="lud16" value="{{meta['lud16']}}">
+
         <input type="submit" id="pupd" name="pupd" value="Update">
     </form>
     {%- endif -%}