Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Larger edit tag hit area

Browse source 
Closes #4505

- Increases the size of hit area on tags settings pages
- Comments out the styles for nested tags as these will need revisiting
This commit is contained in:
Paul Adam Davis 2014-11-24 11:08:02 +00:00
parent 4436242e9b
commit ba67a02b9b
2 changed files with 58 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
ghost/admin/assets/sass/layouts/tags.scss
View file

@ -9,13 +9,13 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-left: 7px; margin-left: 7px;
.btn { .btn {
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
transition: padding 0.3s ease-in-out; transition: padding 0.3s ease-in-out;
.icon-search:before { .icon-search:before {
font-size: 1.3rem; font-size: 1.3rem;
} }
@ -40,12 +40,12 @@
} }
&.opened { &.opened {
.tags-search-input { .tags-search-input {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.btn { .btn {
padding-left: 120px; padding-left: 120px;
@ -54,7 +54,7 @@
width: 110px; width: 110px;
} }
} }
@media (min-width: 401px) { @media (min-width: 401px) {
.btn { .btn {
padding-left: 140px; padding-left: 140px;
@ -68,9 +68,25 @@
.settings-tag { .settings-tag {
position: relative; position: relative;
padding: 20px 35px 20px 0; padding: 0 45px 0 0;
display: block; display: block;
border-bottom: 1px solid $lightbrown; border-top: 1px solid $lightbrown;
.tag-edit-button {
width: calc(100% + 45px);
padding: 20px 15px;
text-align: left;
&:hover,
&:focus,
&:active {
background: lighten($lightbrown, 5%);
}
}
&:last-of-type:hover .tag-edit-button {
box-shadow: inset 0px -1px 0px $lightbrown;
}
// Permalink/labels // Permalink/labels
.label { .label {
@ -86,11 +102,6 @@
font-size: 16px; font-size: 16px;
color: $darkgrey; color: $darkgrey;
font-weight: normal; font-weight: normal;
&:hover,
&:focus,
&:active {
color: $blue;
}
} }
.tag-description { .tag-description {
@ -102,36 +113,36 @@
.tags-count { .tags-count {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 2px; right: 12px;
font-size: 16px; font-size: 16px;
color: $midbrown; color: $midbrown;
} }
}//.settings-tag }//.settings-tag
// Tags with a parent get the arrow, and slightly different padding/margin // Tags with a parent get the arrow, and slightly different padding/margin
.settings-tag .settings-tag { // .settings-tag .settings-tag {
margin-left: 36px; // margin-left: 36px;
padding-bottom: 0; // padding-bottom: 0;
border-bottom: 0; // border-bottom: 0;
margin-right: -35px; // margin-right: -35px;
&:before, // &:before,
&:after { // &:after {
content: ''; // content: '';
background: $lightbrown; // background: $lightbrown;
position: absolute; // position: absolute;
} // }
&:before { // &:before {
width: 1px; // width: 1px;
height: 16px; // height: 16px;
top: 16px; // top: 16px;
left: -34px; // left: -34px;
} // }
&:after { // &:after {
width: 16px; // width: 16px;
height: 1px; // height: 1px;
top: 32px; // top: 32px;
left: -34px; // left: -34px;
} // }
}//.settings-tag .settings-tag // }//.settings-tag .settings-tag

18
ghost/admin/templates/settings/tags.hbs
View file

@ -7,12 +7,14 @@
</header> </header>
<section class="content settings-tags"> <section class="content settings-tags">
{{#each tag in tags}} {{#each tag in tags}}
<div class="settings-tag"> <div class="settings-tag">
<button {{action "editTag" tag}} class="tag-title">{{tag.name}}</button> <button class="tag-edit-button" {{action "editTag" tag}}>
<span class="label label-default">/{{tag.slug}}</span> <span class="tag-title">{{tag.name}}</span>
<p class="tag-description">{{tag.description}}</p> <span class="label label-default">/{{tag.slug}}</span>
<span class="tags-count">N/A</span> <p class="tag-description">{{tag.description}}</p>
</div> <span class="tags-count">N/A</span>
{{/each}} </button>
</div>
{{/each}}
</section> </section>