Small updates on posts page

Three small updates to the the “Posts” page in the admin section:

1 - In the title column, I would like to see the date of the post instead of the date of the post creation. I often post things with a date in the past (travel blog).

2 - Still in the title column, I would like to see the tags used for each post. It will be easier to spot a post with missing tags.

3 - Can we remove the “Sends” and “opens” columns when “Enable newsletter open-rate analytics” is OFF?

Because I need this page to quality control my posts, I’ve done a version as a template.

You can see the result here

Here is the code (custom-postslist.hbr file):

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

<style>
    .content-list{
        position: relative;
    }
    .gh-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: table;
        width: 100%;
    }

    .gh-title {
        color: hsla(0,0%,100%,.85);
        margin: 0 0 3px;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .gh-list-row {
        position: relative;
        display: table-row;
    }

    .gh-date {
        font-size: 1rem;
    }

    .gh-edit {
        font-size: 1rem;
    }

    .gh-tags {
        text-transform: uppercase;
        font-size: 1rem;
        font-weight: 500;
        display: inline-block;
        border-radius: 3px;
        padding: 0 3px;
    }

    .gh-list-header {
        border-top-left-radius: 5px;
        padding-left: 16px;
        padding: 0!important;
        border-bottom: 1px solid #e5eff5;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: .1px;
        text-transform: uppercase;
        padding: 10px 20px;
        white-space: nowrap;
        display: table-cell;
        vertical-align: middle;
        box-sizing: border-box;
    }

    .gh-posts-title-header {
        padding-left: 10px;
    }

    .gh-posts-tags {
        display: table-cell;
        vertical-align: middle;
        border-top: 1px ;
        transition: none!important;
        box-sizing: border-box;
    }
</style>


{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <div class="inner posts">

        <section class="content-list">
            <ol class="gh-list">
            <li class="gh-list-row header">
                    <div class="gh-list-header gh-posts-title-header">Title</div>
                    <div class="gh-list-header">Tags</div>
                </li>

            {{#get "posts" limit="all" include="tags"}}
                {{#foreach posts visibility="all"}}
                    <li class='gh-list-row'>
                        <span class='gh-date'>{{date}}
                        {{#has visibility="members"}}
                            🔒
                        {{/has}}
                        </span>
                        <a href="{{url}}"><span class='gh-title'>{{title}}</span></a>

                        <a href="{{url}}/edit"><span class='gh-edit'>📄</span></a>
                        <span class='gh-tags gh-posts-tags'>{{tags separator=", "}}</span>
                    </li>
                {{/foreach}}
            {{/get}}
            </ul>
        </div>

    </div>
</main>

{{> site-header}}

I’m not an expert in JS/CSS, so I’m sure that it could be improved a lot…

Tags used: show them on the same line as the author(s)/date.
Hide Send/Open if newsletter analytics off: yes.

However:

  1. All of the column headers should be SORT actions (getting rid of the “Sort By” menu)
  2. Date Created / Date Posted (updated) should BOTH be visible
  3. If newsletter analytics is on, then calc avg and display Sent (##) Open (YY%).

BHAG
Replace the search (magnifying glass) with a filter function like on the members page. There’s less moving focus and attention BUT more importantly, it’s persistent. I can filter for a member, go to the member profile and make a change, then go back to the members page and the filter is still in effect. Until there is a batch action function this will make some forms of editing faster.