Larger edit tag hit area

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

View File

@ -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

View File

@ -9,10 +9,12 @@
<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="tag-title">{{tag.name}}</span>
<span class="label label-default">/{{tag.slug}}</span> <span class="label label-default">/{{tag.slug}}</span>
<p class="tag-description">{{tag.description}}</p> <p class="tag-description">{{tag.description}}</p>
<span class="tags-count">N/A</span> <span class="tags-count">N/A</span>
</button>
</div> </div>
{{/each}} {{/each}}
</section> </section>