Fix: Icon button too small to trigger

zhangbufan · May 3, 2016 · b23eeb0 · b23eeb0
1 parent 2ff22c3
commit b23eeb0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/Console/Console.hbs b/src/Console/Console.hbs
@@ -1,17 +1,17 @@
 <div class="eruda-control">
-    <span class="eruda-icon-blocked clear-console"></span>
+    <span class="eruda-icon-blocked clear-console" ontouchstart></span>
     <span class="eruda-filter filter eruda-active" data-filter="all">All</span>
     <span class="eruda-filter filter" data-filter="error">Error</span>
     <span class="eruda-filter filter" data-filter="warn">Warning</span>
     <span class="eruda-filter filter" data-filter="info">Info</span>
     <span class="eruda-filter filter" data-filter="log">Log</span>
-    <span class="eruda-icon-info help"></span>
+    <span class="eruda-icon-info help" ontouchstart></span>
 </div>
 <div class="eruda-logs"></div>
 <div class="eruda-js-input">
     <div class="eruda-buttons">
-        <div class="eruda-button cancel">Cancel</div>
-        <div class="eruda-button execute">Execute</div>
+        <div class="eruda-button cancel" ontouchstart>Cancel</div>
+        <div class="eruda-button execute" ontouchstart>Execute</div>
     </div>
     <textarea placeholder="Type JavaScript here"></textarea>
 </div>
diff --git a/src/Console/Console.scss b/src/Console/Console.scss
@@ -6,30 +6,36 @@
             position: absolute;
             left: 0;
             top: 0;
-            padding: 10px;
+            padding: 10px 10px 10px 40px;
             background: #fff;
             height: 40px;
             line-height: 20px;
             width: 100%;
             .icon-blocked, .icon-info {
+                display: inline-block;
                 color: $gray;
-                position: relative;
-                top: 2px;
+                padding: 5px;
+                font-size: 16px;
+                position: absolute;
+                top: 8px;
                 &:active {
                     color: $gray-light;
                 }
             }
             .icon-blocked {
-                margin-right: 10px;
+                left: 10px;
             }
             .icon-info {
-                float: right;
+                right: 10px;
             }
             .filter {
                 color: $gray;
                 margin: 0 1px;
                 font-size: 12px;
-                padding: 4px;
+                height: 20px;
+                display: inline-block;
+                padding: 0 4px;
+                line-height: 20px;
                 border-radius: 4px;
                 &.active {
                     background: $gray;

diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss
@@ -85,6 +85,8 @@
                 word-break: break-all;
                 .icon-bin {
                     color: $red-dark;
+                    display: inline-block;
+                    padding: 5px;
                 }
                 &.key {
                     white-space: nowrap;