diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css index 55af6b477e..ba3a4a7488 100644 --- a/ghost/admin/app/styles/components/lists.css +++ b/ghost/admin/app/styles/components/lists.css @@ -118,6 +118,10 @@ width: 100%; } +.gh-list-cellwidth-min { + max-width: 0; +} + .gh-list-cellwidth-2-3 { width: 67%; } diff --git a/ghost/admin/app/styles/layouts/tags.css b/ghost/admin/app/styles/layouts/tags.css index cdbdef01c6..f6299a0e64 100644 --- a/ghost/admin/app/styles/layouts/tags.css +++ b/ghost/admin/app/styles/layouts/tags.css @@ -1,21 +1,13 @@ /* Tag list /* ---------------------------------------------------------- */ - -.gh-tags-count:hover { +a.gh-tag-list-posts-count:hover { color: color-mod(var(--blue) l(-25%) s(+15%)); - font-weight: 500; } textarea.gh-tag-details-textarea { max-width: 100%; } -.gh-tag-image-uploader .gh-image-uploader { - margin: 4px 0 0; - border: 1px solid var(--lightgrey); - min-height: 147px; -} - .gh-tags-placeholder { width: 118px; margin: -30px 0 15px; @@ -23,12 +15,127 @@ textarea.gh-tag-details-textarea { .gh-tag-list-slug { white-space: nowrap; - max-width: 300px; overflow: hidden; text-overflow: ellipsis; } +.gh-tag-list-description { + max-width: 320px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .tags-view { max-width: 1220px; margin: 0 auto; +} + +/* Mobile style of tag list */ +@media (max-width: 1000px) { + .gh-tags-list-item { + display: flex; + position: relative; + flex-wrap: wrap; + border-bottom: 1px solid var(--lightgrey); + margin: 0; + } + + .gh-tags-list-item:nth-of-type(2) { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + .gh-tags-list-item .gh-list-data { + border-top: none !important; + } + + .gh-tags-list-item:hover { + background: var(--whitegrey-l2); + } + + .gh-tags-list-item:hover .gh-list-data { + background: none !important; + } + + .gh-tag-list-title { + display: block; + flex: 1 1 100%; + padding-bottom: 0; + } + + .gh-tag-list-slug { + display: inline-block; + width: unset; + padding: 2px 0 20px 16px; + } + + .gh-tag-list-posts-count { + display: inline-block; + flex: 1 1 auto; + width: unset; + padding: 2px 0 20px 0; + } + + .gh-tag-list-slug:after { + content: "\2022"; + display: inline-block; + margin-right: 4px; + color: var(--midgrey-l2); + } + + .gh-tag-list-chevron { + display: block; + position: absolute; + right: 0; + top: 0; + bottom: 0; + } +} + +@media (max-width: 450px) { + .tags-header { + justify-content: flex-end; + min-height: 120px; + } + + .tags-header .gh-canvas-title { + position: absolute; + top: 29px; + left: 21px; + } + + .tags-header .view-actions { + flex-direction: column; + align-items: flex-end; + margin-top: 18px; + overflow-y: hidden; + width: 100%; + } + + .tags-header .view-actions .gh-contentfilter { + order: 2; + margin: 10px 0 -20px; + padding: 6px 0 26px; + max-width: calc(100vw - 10px); + overflow-x: auto; + align-self: stretch; + } + + .tags-header .view-actions .gh-contentfilter button { + flex: 1 1 50%; + } + + .gh-tag-list-description { + max-width: 200px; + } +} + +/* Tag details +/* ---------------------------------------------------------- */ + +.gh-tag-image-uploader .gh-image-uploader { + margin: 4px 0 0; + border: 1px solid var(--lightgrey); + min-height: 147px; } \ No newline at end of file diff --git a/ghost/admin/app/templates/components/gh-tags-list-item.hbs b/ghost/admin/app/templates/components/gh-tags-list-item.hbs index a9eabb6de1..2667c6fe1f 100644 --- a/ghost/admin/app/templates/components/gh-tags-list-item.hbs +++ b/ghost/admin/app/templates/components/gh-tags-list-item.hbs @@ -1,4 +1,4 @@ -{{#link-to "tags.tag" tag class="gh-list-data" title="Edit tag"}} +{{#link-to "tags.tag" tag class="gh-list-data gh-tag-list-title" title="Edit tag"}}

{{this.tag.name}}

@@ -9,22 +9,22 @@ {{/if}} {{/link-to}} -{{#link-to "tags.tag" tag class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Edit tag"}} - {{this.slug}} +{{#link-to "tags.tag" tag class="gh-list-data middarkgrey f8 gh-tag-list-slug gh-list-cellwidth-10" title="Edit tag"}} + {{this.slug}} {{/link-to}} {{#if this.postsCount}} - {{#link-to "posts" (query-params type=null author=null tag=tag.slug order=null) class="gh-list-data blue gh-tag-list-posts-count gh-tags-count f8" title=(concat "List posts tagged with '" this.tag.name "'")}} + {{#link-to "posts" (query-params type=null author=null tag=tag.slug order=null) class="gh-list-data blue gh-tag-list-posts-count gh-list-cellwidth-10 f8" title=(concat "List posts tagged with '" this.tag.name "'")}} {{this.postsLabel}} {{/link-to}} {{else}} - {{#link-to "tags.tag" tag class="gh-list-data gh-tag-list-posts-count" title="Edit tag"}} + {{#link-to "tags.tag" tag class="gh-list-data gh-tag-list-posts-count gh-list-cellwidth-10" title="Edit tag"}} {{this.postsLabel}} {{/link-to}} {{/if}} -{{#link-to "tags.tag" tag class="gh-list-data" title="Edit tag"}} -
+{{#link-to "tags.tag" tag class="gh-list-data gh-list-cellwidth-min gh-tag-list-chevron" title="Edit tag"}} +
{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}
{{/link-to}} \ No newline at end of file diff --git a/ghost/admin/app/templates/tags.hbs b/ghost/admin/app/templates/tags.hbs index 400820926f..92146fde3b 100644 --- a/ghost/admin/app/templates/tags.hbs +++ b/ghost/admin/app/templates/tags.hbs @@ -1,7 +1,7 @@ {{#unless selectedTag}}
-
- {{#gh-view-title}}Tags{{/gh-view-title}} + +

Tags

@@ -9,16 +9,15 @@
{{#link-to "tags.new" class="gh-btn gh-btn-green"}}New tag{{/link-to}}
-
- +
    {{#if sortedTags}}
  1. -
    Tag
    -
    Slug
    -
    No. of posts
    -
    +
    Tag
    +
    Slug
    +
    No. of posts
    +
  2. {{#vertical-collection items=sortedTags