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 {
position: relative;
padding: 20px 35px 20px 0;
padding: 0 45px 0 0;
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
.label {
@ -86,11 +102,6 @@
font-size: 16px;
color: $darkgrey;
font-weight: normal;
&:hover,
&:focus,
&:active {
color: $blue;
}
}
.tag-description {
@ -102,36 +113,36 @@
.tags-count {
position: absolute;
top: 20px;
right: 2px;
right: 12px;
font-size: 16px;
color: $midbrown;
}
}//.settings-tag
// Tags with a parent get the arrow, and slightly different padding/margin
.settings-tag .settings-tag {
margin-left: 36px;
padding-bottom: 0;
border-bottom: 0;
margin-right: -35px;
// .settings-tag .settings-tag {
// margin-left: 36px;
// padding-bottom: 0;
// border-bottom: 0;
// margin-right: -35px;
&:before,
&:after {
content: '';
background: $lightbrown;
position: absolute;
}
// &:before,
// &:after {
// content: '';
// background: $lightbrown;
// position: absolute;
// }
&:before {
width: 1px;
height: 16px;
top: 16px;
left: -34px;
}
&:after {
width: 16px;
height: 1px;
top: 32px;
left: -34px;
}
}//.settings-tag .settings-tag
// &:before {
// width: 1px;
// height: 16px;
// top: 16px;
// left: -34px;
// }
// &:after {
// width: 16px;
// height: 1px;
// top: 32px;
// left: -34px;
// }
// }//.settings-tag .settings-tag

View File

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