Message Searching/ Viewing html page

[seanlobo]

Searching / Displaying Messages 📝

The goal

To create a front end design that can elegantly display a user's conversation on a single, offline html page. The page would ideally combine the nice ui of messenger.com and the search features of facebook searching (as well as adding to them!) 💯

Specifications

The page would be entirely front end. There exist appropriate python methods that can be called to implement all searching and retrieval of message content, which includes a complete archive of messages sent, their date+time of sending and all participants in conversation(s). Below are some general guidelines as to the functionality:

1. The page should display a user's message history as its primary purpose
   • Each message should focus on the message content, but also be clear as to whose content it is and when it was sent
2. There should a search bar/ multiple search bars that allow users to search through messages, in all of the following ways, potentially simultaneously:
   • Start date
   • End date
   • Person who spoke the message
   • Message content, with both
     • Fuzzy searching
     • Regular Expression matching
3. There should be a view that displays retrieved messages which match queries in an ordered fashion and which allows users to select a conversation to then display (and similarly, a view when no results appear)
4. The page should at least support a resolution of 1024 x 768, but something responsive would be great
5. Anything else you think would be beneficial

[wylliec]

so how is this local offline html gonna be done? are you going to have a local python server hosting it?

[seanlobo]

I'll be using Flask to generate html and host the local files.

A basic html structure that could probably work for displaying the actual message content is

<div id="all-messages">
    <div class="message-group" data-message-number=1> 
        <p class="message-content">Test message</p>
        <div class="meta">
            <p class="person">Test Person</p>
            <p class="date">Test Date</p>
        </div>
    </div>
    .
    .
    .
</div>

The actual help I'd like is in getting styling (css and js) that can manipulate the above and make it pretty.

If possible adding the search bar(s) from bullet 2 above would be nice, but don't worry about any functionality for now, just a nice ui. Point 3 can also be put on hold for now