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
TryGhost · Nov 24, 2014 · 7b1cfce · 7b1cfce
1 parent aa58aef
commit 7b1cfce
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git a/core/client/assets/sass/layouts/tags.scss b/core/client/assets/sass/layouts/tags.scss
@@ -9,13 +9,13 @@
     position: relative;
     display: inline-block;
     margin-left: 7px;
-    
+
     .btn {
         position: relative;
         padding-left: 10px;
         padding-right: 10px;
         transition: padding 0.3s ease-in-out;
-        
+
         .icon-search:before {
             font-size: 1.3rem;
         }
@@ -40,12 +40,12 @@
     }
 
     &.opened {
-        
+
         .tags-search-input {
             opacity: 1;
             pointer-events: auto;
         }
-        
+
         @media (max-width: 400px) {
             .btn {
                 padding-left: 120px;
@@ -54,7 +54,7 @@
                 width: 110px;
             }
         }
-        
+
         @media (min-width: 401px) {
             .btn {
                 padding-left: 140px;
@@ -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;
-
-    &:before,
-    &:after {
-        content: '';
-        background: $lightbrown;
-        position: absolute;
-    }
+// .settings-tag .settings-tag {
+//     margin-left: 36px;
+//     padding-bottom: 0;
+//     border-bottom: 0;
+//     margin-right: -35px;
 
-    &:before { 
-        width: 1px;
-        height: 16px;  
-        top: 16px;
-        left: -34px;
-    }
-    &:after {
-        width: 16px;
-        height: 1px;
-        top: 32px;
-        left: -34px;
-    }
-}//.settings-tag .settings-tag
+//     &: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
diff --git a/core/client/templates/settings/tags.hbs b/core/client/templates/settings/tags.hbs
@@ -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>