~netlandish/links

2f8f060763c1b505d95b71304ba664c800c9f5d2 — Yader Velasquez 2 months ago 25542f4
Add horizontal scroll to short and list table
Fix list, short wrong autocomplete script
More responsibe fixes
M list/routes.go => list/routes.go +9 -10
@@ 1066,16 1066,15 @@ func (s *Service) ListingList(c echo.Context) error {
		return err
	}
	gmap := gobwebs.Map{
		"pd":                 pd,
		"org":                org,
		"navFlag":            "listing",
		"lists":              result.Listings.Result,
		"tagFilter":          strings.Replace(tag, ",", ", ", -1),
		"excludeTagFilter":   strings.Replace(excludeTag, ",", ", ", -1),
		"advancedSearch":     true,
		"queries":            template.URL(queries.Encode()),
		"useTagAutocomplete": true,
		"autoCompleteOrgID":  org.ID,
		"pd":                pd,
		"org":               org,
		"navFlag":           "listing",
		"lists":             result.Listings.Result,
		"tagFilter":         strings.Replace(tag, ",", ", ", -1),
		"excludeTagFilter":  strings.Replace(excludeTag, ",", ", ", -1),
		"advancedSearch":    true,
		"queries":           template.URL(queries.Encode()),
		"autoCompleteOrgID": org.ID,
	}
	if result.Listings.PageInfo.HasPrevPage {
		gmap["prevURL"] = links.GetPaginationParams("prev", tag, "", result.Listings.PageInfo.Cursor)

M short/routes.go => short/routes.go +9 -10
@@ 169,16 169,15 @@ func (s *Service) LinkShortList(c echo.Context) error {

	linkShorts := result.LinkShorts.Result
	gmap := gobwebs.Map{
		"pd":                 pd,
		"links":              linkShorts,
		"org":                org,
		"navFlag":            "short",
		"tagFilter":          strings.Replace(tag, ",", ", ", -1),
		"excludeTagFilter":   strings.Replace(excludeTag, ",", ", ", -1),
		"advancedSearch":     true,
		"queries":            template.URL(queries.Encode()),
		"useTagAutocomplete": true,
		"autoCompleteOrgID":  org.ID,
		"pd":                pd,
		"links":             linkShorts,
		"org":               org,
		"navFlag":           "short",
		"tagFilter":         strings.Replace(tag, ",", ", ", -1),
		"excludeTagFilter":  strings.Replace(excludeTag, ",", ", ", -1),
		"advancedSearch":    true,
		"queries":           template.URL(queries.Encode()),
		"autoCompleteOrgID": org.ID,
	}

	if result.LinkShorts.PageInfo.HasPrevPage {

M static/css/style.css => static/css/style.css +18 -7
@@ 76,6 76,10 @@ body {
  align-items: flex-start !important;
}

.advanced-search-btn {
    margin-top: 23px;
}

.app-header--centered {
  justify-content: center;
}


@@ 712,18 716,25 @@ a.bullet-link:before {

@media screen and (max-width: 600px) {
  aside {
      display: none;
    display: none;
  }
  .app-content {
      width: 100%;
      padding: 0 calc(var(--grid-gutter)/2);
    width: 100%;
    padding: 0 calc(var(--grid-gutter)/2);
  }
  body {
      flex-direction: column;
      padding-left: 0 !important;
      padding-right: 0 !important;
    flex-direction: column;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mobile-nav {
      display: flex;
    display: flex;
  }

  .advanced-search-btn {
    margin-top: 0;
  }
  .responsive-table {
    overflow-x:auto;
  }
}

M templates/feed.html => templates/feed.html +6 -7
@@ 17,22 17,21 @@
    </section>
    <section id="advanced-search-div" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
        <div class="row">
            <div class="col-5"><label>{{.pd.Data.include_tags}}</label></div>
            <div class="col-5"><label>{{.pd.Data.exclude_tags}}</label></div>
            <div class="col-2"></div>
        </div>
        <div class="row">
            <div class="col-5">
                <label>{{.pd.Data.include_tags}}</label>
                <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
                <div class="d-none autocomplete-tags"></div>
            </div>
            <div class="col-5">
                <label>{{.pd.Data.exclude_tags}}</label>
                <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
                <div class="d-none autocomplete-tags"></div>
            </div>
            <div class="col-2 is-right">
                <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
                <a href="{{.currURL}}{{if .hasUnreadFilter}}?filter=unread{{else if .hasStarredFilter}}?filter=starred{{end}}" class="button primary is-small">{{.pd.Data.clear}}</a>
                <button type="submit" class="button primary is-small advanced-search-btn">{{.pd.Data.apply}}</button>
                <a href="{{.currURL}}{{if .hasUnreadFilter}}?filter=unread{{else if .hasStarredFilter}}?filter=starred{{end}}" class="button primary is-small advanced-search-btn">
                    {{.pd.Data.clear}}
                </a>
            </div>
        </div>
    </section>

M templates/link_list.html => templates/link_list.html +6 -7
@@ 20,22 20,21 @@
    {{if and (not .hideNav) (.advancedSearch)}}
    <section id="advanced-search-div" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
        <div class="row">
            <div class="col-5"><label>{{.pd.Data.include_tags}}</label></div>
            <div class="col-5"><label>{{.pd.Data.exclude_tags}}</label></div>
            <div class="col-2"></div>
        </div>
        <div class="row">
            <div class="col-5">
                <label>{{.pd.Data.include_tags}}</label>
                <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
                <div class="d-none autocomplete-tags"></div>
            </div>
            <div class="col-5">
                <label>{{.pd.Data.exclude_tags}}</label>
                <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
                <div class="d-none autocomplete-tags"></div>
            </div>
            <div class="col-2 is-right">
                <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
                <a href="{{.currURL}}{{if .hasUnreadFilter}}?filter=unread{{else if .hasStarredFilter}}?filter=starred{{end}}" class="button primary is-small">{{.pd.Data.clear}}</a>
                <button type="submit" class="button primary is-small advanced-search-btn">{{.pd.Data.apply}}</button>
                <a href="{{.currURL}}{{if .hasUnreadFilter}}?filter=unread{{else if .hasStarredFilter}}?filter=starred{{end}}" class="button primary is-small advanced-search-btn">
                    {{.pd.Data.clear}}
                </a>
            </div>
        </div>
    </section>

M templates/link_short_list.html => templates/link_short_list.html +62 -63
@@ 9,22 9,19 @@
    <section id="advanced-search-div" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
        <form method="GET" id="advanced-search-form" action="{{reverse "short:link_short_list" .org.Slug}}">
            <div class="row">
                <div class="col-5"><label>{{.pd.Data.include_tags}}</label></div>
                <div class="col-5"><label>{{.pd.Data.exclude_tags}}</label></div>
                <div class="col-2"></div>
            </div>
            <div class="row">
                <div class="col-5">
                    <label>{{.pd.Data.include_tags}}</label>
                    <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-5">
                    <label>{{.pd.Data.exclude_tags}}</label>
                    <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-2 is-right">
                    <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
                    <a href="{{reverse "short:link_short_list" .org.Slug}}" class="button primary is-small">{{.pd.Data.clear}}</a>
                    <button type="submit" class="button primary is-small advanced-search-btn">{{.pd.Data.apply}}</button>
                    <a href="{{reverse "short:link_short_list" .org.Slug}}" class="button primary is-small advanced-search-btn">{{.pd.Data.clear}}</a>
                </div>
            </div>
        </form>


@@ 32,62 29,64 @@
{{end}}

<section class="card shadow-card">
  <table class="striped">
    <thead>
      <tr>
        <th class="text-uppercase">{{.pd.Data.title}}</th>
        <th class="text-uppercase">{{.pd.Data.tags}}</th>
        <th class="text-uppercase">URL</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
        {{ if .links }}
            {{range .links}}
            <tr>
                <td>
                    <span class="d-block">{{truncate .Title 50}}</span>
                    <time class="text-grey" datetime="{{formatDate .CreatedOn}}">
                        <small>{{formatDate .CreatedOn}}</small>
                    </time>
                </td>
                <td>
                    {{if .Tags}}
                    <div class="link-tag">
                        {{range .Tags}}
                            {{if isTagUsedInFilter .Slug $.tagFilter}}
                                <small class="link-tag__item">#{{.Name}}</small>
                            {{else}}
                                <a class="link-tag__item"
                                   href="{{if $.queries}}?{{addQueryElement $.queries "tag" .Slug}}{{else}}?tag={{.Slug}}{{end}}">#{{.Name}}</a>
                            {{end}}
                        {{end}}
                    </div>
                    {{end}}
                </td>
                <td><a href="{{buildServiceURL .LookupName .ShortCode}}">{{buildServiceURL .LookupName .ShortCode}}</a></td>
                <td>
                    <details class="dropdown">
                        <summary class="button outline is-small">{{$.pd.Data.actions}}</summary>
                        <div class="card dropdown-card">
                            <p><a class="mr-1" href="{{reverse "short:link_short_qrcode_list" $.org.Slug .ID}}">{{$.pd.Data.manage_qr}}</a></p>
                            {{if eq .UserID $.currentUserID}}
                            <p><a class="mr-1" href="{{reverse "short:link_short_edit" $.org.Slug .ID}}">{{$.pd.Data.edit}}</a></p>
                            <p><a class="mr-1" href="{{reverse "short:link_short_delete" $.org.Slug .ID}}">{{$.pd.Data.delete}}</a></p>
                            <p><a class="mr-1" href="{{reverse "analytics:detail" $.org.Slug "shorts" .ID}}">{{$.pd.Data.analytics}}</a></p>
                            {{end}}
                        </div>
                    </details>
                </td>
            </tr>
            {{end}}
        {{else}}
            <tr>
                <td colspan="4" class="text-center">{{.pd.Data.no_short_links}}</td>
            </tr>
        {{end}}
    </tbody>
  </table>
  <div class="responsive-table">
      <table class="striped">
          <thead>
              <tr>
                  <th class="text-uppercase">{{.pd.Data.title}}</th>
                  <th class="text-uppercase">{{.pd.Data.tags}}</th>
                  <th class="text-uppercase">URL</th>
                  <th></th>
              </tr>
          </thead>
          <tbody>
              {{ if .links }}
              {{range .links}}
              <tr>
                  <td>
                      <span class="d-block">{{truncate .Title 50}}</span>
                      <time class="text-grey" datetime="{{formatDate .CreatedOn}}">
                          <small>{{formatDate .CreatedOn}}</small>
                      </time>
                  </td>
                  <td>
                      {{if .Tags}}
                      <div class="link-tag">
                          {{range .Tags}}
                          {{if isTagUsedInFilter .Slug $.tagFilter}}
                          <small class="link-tag__item">#{{.Name}}</small>
                          {{else}}
                          <a class="link-tag__item"
                             href="{{if $.queries}}?{{addQueryElement $.queries "tag" .Slug}}{{else}}?tag={{.Slug}}{{end}}">#{{.Name}}</a>
                          {{end}}
                          {{end}}
                      </div>
                      {{end}}
                  </td>
                  <td><a href="{{buildServiceURL .LookupName .ShortCode}}">{{buildServiceURL .LookupName .ShortCode}}</a></td>
                  <td>
                      <details class="dropdown">
                          <summary class="button outline is-small">{{$.pd.Data.actions}}</summary>
                          <div class="card dropdown-card">
                              <p><a class="mr-1" href="{{reverse "short:link_short_qrcode_list" $.org.Slug .ID}}">{{$.pd.Data.manage_qr}}</a></p>
                              {{if eq .UserID $.currentUserID}}
                              <p><a class="mr-1" href="{{reverse "short:link_short_edit" $.org.Slug .ID}}">{{$.pd.Data.edit}}</a></p>
                              <p><a class="mr-1" href="{{reverse "short:link_short_delete" $.org.Slug .ID}}">{{$.pd.Data.delete}}</a></p>
                              <p><a class="mr-1" href="{{reverse "analytics:detail" $.org.Slug "shorts" .ID}}">{{$.pd.Data.analytics}}</a></p>
                              {{end}}
                          </div>
                      </details>
                  </td>
              </tr>
              {{end}}
              {{else}}
              <tr>
                  <td colspan="4" class="text-center">{{.pd.Data.no_short_links}}</td>
              </tr>
              {{end}}
          </tbody>
      </table>
  </div>
  {{if or .prevURL .nextURL}}
  <footer class="is-right">
    {{if .prevURL}}

M templates/listing_list.html => templates/listing_list.html +62 -63
@@ 9,22 9,19 @@
    <section id="advanced-search-div" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
        <form method="GET" id="advanced-search-form" action="{{reverse "list:listing_list" .org.Slug}}">
            <div class="row">
                <div class="col-5"><label>{{.pd.Data.include_tags}}</label></div>
                <div class="col-5"><label>{{.pd.Data.exclude_tags}}</label></div>
                <div class="col-2"></div>
            </div>
            <div class="row">
                <div class="col-5">
                    <label>{{.pd.Data.include_tags}}</label>
                    <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-5">
                    <label>{{.pd.Data.exclude_tags}}</label>
                    <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-2 is-right">
                    <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
                    <a href="{{reverse "list:listing_list" .org.Slug}}" class="button primary is-small">{{.pd.Data.clear}}</a>
                    <button type="submit" class="button primary is-small advanced-search-btn">{{.pd.Data.apply}}</button>
                    <a href="{{reverse "list:listing_list" .org.Slug}}" class="button primary is-small advanced-search-btn">{{.pd.Data.clear}}</a>
                </div>
            </div>
        </form>


@@ 32,63 29,65 @@
{{end}}

<section class="card shadow-card">
  <table class="striped">
    <thead>
      <tr>
        <th class="text-uppercase">{{.pd.Data.title}}</th>
        <th class="text-uppercase">{{.pd.Data.tags}}</th>
        <th class="text-uppercase">URL</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{if .lists}}
      {{range .lists}}
      <tr>
        <td>
            <span class="d-block">{{truncate .Title 50}}</span>
            <time class="text-grey" datetime="{{formatDate .CreatedOn}}">
                <small>{{formatDate .CreatedOn}}</small>
            </time>
        </td>
        <td>
          <div class="link-tag">
            {{if .Tags}}
                {{range .Tags}}
                    {{if isTagUsedInFilter .Slug $.tagFilter}}
                        <small class="link-tag__item">#{{.Name}}</small>
                    {{else}}
                        <a class="link-tag__item"
                           href="{{if $.queries}}?{{addQueryElement $.queries "tag" .Slug}}{{else}}?tag={{.Slug}}{{end}}">#{{.Name}}</a>
                    {{end}}
                {{end}}
            {{end}}
          </div>
        </td>
        <td><a href="{{buildServiceURL .LookupName .Slug}}" target="_blank">{{truncate (buildServiceURL .LookupName .Slug) 50}}</a></td>
        <td>
          <details class="dropdown">
            <summary class="button outline is-small">{{$.pd.Data.actions}}</summary>
            <div class="card dropdown-card">
                <p><a class="mr-1" href="{{reverse "list:listing_qrcode_list" $.org.Slug .ID}}">{{$.pd.Data.manage_qr}}</a></p>
              {{if eq .UserID $.currentUserID}}
              <p><a class="mr-1" href="{{reverse "list:listing_links" $.org.Slug .ID}}">{{$.pd.Data.manage_links}}</a></p>
              <p><a class="mr-1" href="{{reverse "list:listing_update" $.org.Slug .ID}}">{{$.pd.Data.edit}}</a></p>
              <p><a class="mr-1" href="{{reverse "list:listing_delete" $.org.Slug .ID}}">{{$.pd.Data.delete}}</a></p>
              <p><a class="mr-1" href="{{reverse "analytics:detail" $.org.Slug "lists" .ID}}">{{$.pd.Data.analytics}}</a></p>
  <div class="responsive-table">
      <table class="striped">
          <thead>
              <tr>
                  <th class="text-uppercase">{{.pd.Data.title}}</th>
                  <th class="text-uppercase">{{.pd.Data.tags}}</th>
                  <th class="text-uppercase">URL</th>
                  <th></th>
              </tr>
          </thead>
          <tbody>
              {{if .lists}}
              {{range .lists}}
              <tr>
                  <td>
                      <span class="d-block">{{truncate .Title 50}}</span>
                      <time class="text-grey" datetime="{{formatDate .CreatedOn}}">
                          <small>{{formatDate .CreatedOn}}</small>
                      </time>
                  </td>
                  <td>
                      <div class="link-tag">
                          {{if .Tags}}
                          {{range .Tags}}
                          {{if isTagUsedInFilter .Slug $.tagFilter}}
                          <small class="link-tag__item">#{{.Name}}</small>
                          {{else}}
                          <a class="link-tag__item"
                             href="{{if $.queries}}?{{addQueryElement $.queries "tag" .Slug}}{{else}}?tag={{.Slug}}{{end}}">#{{.Name}}</a>
                          {{end}}
                          {{end}}
                          {{end}}
                      </div>
                  </td>
                  <td><a href="{{buildServiceURL .LookupName .Slug}}" target="_blank">{{truncate (buildServiceURL .LookupName .Slug) 50}}</a></td>
                  <td>
                      <details class="dropdown">
                          <summary class="button outline is-small">{{$.pd.Data.actions}}</summary>
                          <div class="card dropdown-card">
                              <p><a class="mr-1" href="{{reverse "list:listing_qrcode_list" $.org.Slug .ID}}">{{$.pd.Data.manage_qr}}</a></p>
                              {{if eq .UserID $.currentUserID}}
                              <p><a class="mr-1" href="{{reverse "list:listing_links" $.org.Slug .ID}}">{{$.pd.Data.manage_links}}</a></p>
                              <p><a class="mr-1" href="{{reverse "list:listing_update" $.org.Slug .ID}}">{{$.pd.Data.edit}}</a></p>
                              <p><a class="mr-1" href="{{reverse "list:listing_delete" $.org.Slug .ID}}">{{$.pd.Data.delete}}</a></p>
                              <p><a class="mr-1" href="{{reverse "analytics:detail" $.org.Slug "lists" .ID}}">{{$.pd.Data.analytics}}</a></p>
                              {{end}}
                          </div>
                      </details>
                  </td>
              </tr>
              {{end}}
            </div>
          </details>
        </td>
      </tr>
      {{end}}
      {{else}}
      <tr>
        <td colspan="4" class="text-center">{{.pd.Data.no_lists}}</td>
      </tr>
      {{end}}
    </tbody>
  </table>
              {{else}}
              <tr>
                  <td colspan="4" class="text-center">{{.pd.Data.no_lists}}</td>
              </tr>
              {{end}}
          </tbody>
      </table>
  </div>
  {{if or .prevURL .nextURL}}
  <footer>
    {{if .prevURL}}