Merge lp:~stephen-stewart/ulysses/tidy-up-dropdown into lp:ulysses

[Stephen Stewart]

tidy up dropdowns style

tidy up dropdowns style

[Fabián Ezequiel Gallina (fgallina)]

LGTM

review: Approve

=== modified file 'README.md'
--- README.md	2014-09-24 20:05:57 +0000
+++ README.md	2014-10-09 13:58:47 +0000
@@ -39,6 +39,8 @@
 ### Tests
 
 Visual regression testing is handled by PhantomCSS:
+(for which you'll either need CasperJS and PhantomJS on PATH, or just run
+./tarmac_verify.sh)
 
 ```
 gulp test

=== modified file 'gulpfile.js'
--- gulpfile.js	2014-10-07 10:55:01 +0000
+++ gulpfile.js	2014-10-09 13:58:47 +0000
@@ -27,7 +27,7 @@
 gulp.task('update', ['clean', 'copy', 'grids', 'build']);
 gulp.task('svg', ['symbols']);
 
-gulp.task('watch', function() {
+gulp.task('watch', ['webserver'], function() {
   gulp.watch(paths.src + '**/*.css', ['build']);
   gulp.watch([paths.normalize, paths.grids], ['copy']);
   gulp.watch('gulpfile.js', ['grids']);

=== modified file 'public/dropdowns.css'
--- public/dropdowns.css	2014-09-23 17:12:20 +0000
+++ public/dropdowns.css	2014-10-09 13:58:47 +0000
@@ -1,1 +1,1 @@
-.ues-dropdown{position:relative}.ues-dropdown-menu{font-size:13px;position:absolute;display:none;top:100%;left:0;z-index:10000000;float:left;min-width:160px;padding:5px 0;list-style:none;background-clip:padding-box;background-color:#fff;color:#333;box-shadow:0 1px 5px 0 rgba(0,0,0,.1);margin:0;border:1px solid #ddd;border-top:none}.open .ues-dropdown-menu{display:block}.ues-dropdown-menu>li>a{display:block;white-space:nowrap;clear:both;padding:0 15px}.ues-dropdown-menu>li>a:hover{background-color:#eee}.ues-dropdown-divider{height:1px;margin:5px 0;overflow:hidden;background-color:#ddd}.ues-dropdown-header{display:block;padding:2px 20px;color:#999}
\ No newline at end of file
+.ues-dropdown{position:relative}.ues-dropdown-menu{font-size:13px;position:absolute;display:none;top:100%;left:0;z-index:10000000;float:left;min-width:160px;padding:5px 0;list-style:none;background-clip:padding-box;background-color:#fff;color:#333;box-shadow:0 1px 6px 0 rgba(0,0,0,.1);margin:2px 0 0;border:1px solid #ddd;border-radius:4px}.open .ues-dropdown-menu{display:block}.ues-dropdown-menu>li>a{display:block;white-space:nowrap;clear:both;padding:0 15px}.ues-dropdown-menu>li>a:hover{background-color:#dd4814;color:#fff}.ues-dropdown-divider{height:1px;margin:5px 0;overflow:hidden;background-color:#ddd}.ues-dropdown-header{display:block;padding:0 14px;color:#999}
\ No newline at end of file

=== modified file 'public/ulysses.css'
--- public/ulysses.css	2014-10-03 16:06:24 +0000
+++ public/ulysses.css	2014-10-09 13:58:47 +0000
@@ -1,7 +1,7 @@
 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
 
 .ues-button{background-color:#dedede;background-image:-webkit-linear-gradient(top,#f7f7f7 0%,#e6e6e6 100%);background-image:linear-gradient(to bottom,#f7f7f7 0%,#e6e6e6 100%);border-radius:3px;display:inline-block;font-weight:300;font-size:13px;line-height:20px;padding:5px 19px;text-align:center;vertical-align:baseline;text-transform:uppercase;border:1px solid #ccc}.ues-button:hover{background-color:#e6e6e6;background-image:-webkit-linear-gradient(top,#fff 0%,#e6e6e6 100%);background-image:linear-gradient(to bottom,#fff 0%,#e6e6e6 100%)}.ues-button:focus{box-shadow:#f7f6f5 0 0 0 1px}.ues-button:focus,.ues-button:active{background-color:#e6e6e6;background-image:-webkit-linear-gradient(top,#e6e6e6 0%,#cdcdcd 90%,#fff 100%);background-image:linear-gradient(to bottom,#e6e6e6 0%,#cdcdcd 90%,#fff 100%)}.ues-button-primary{background-color:#dd4814;background-image:-webkit-linear-gradient(top,#f39455 0%,#ef5e1f 5%,#dd4814 100%);background-image:linear-gradient(to bottom,#f39455 0%,#ef5e1f 5%,#dd4814 100%);color:#fff;border-color:#ad2e03}.ues-button-primary:hover{background-color:#f28a45;background-image:-webkit-linear-gradient(top,#f39455 0%,#f28a45 5%,#dd4814 100%);background-image:linear-gradient(to bottom,#f39455 0%,#f28a45 5%,#dd4814 100%)}.ues-button-primary:focus,.ues-button-primary:active{background-color:#dd4814;background-image:-webkit-linear-gradient(top,#dd4814 0%,#bf3b0d 5%,#f39455 100%);background-image:linear-gradient(to bottom,#dd4814 0%,#bf3b0d 5%,#f39455 100%);border-color:#333}.ues-button-tertiary{background-color:#fff;background-image:none;border:1px solid #c8c8c8}.ues-button-tertiary:hover{background-color:#e6e6e6;background-image:none;border-color:#cdcdcd}.ues-button-tertiary:focus,.ues-button-tertiary:active{background-color:#e6e6e6;background-image:none;border-color:#dd4814}.ues-button-search{background-color:transparent;background-image:none;border:none;border-left:1px solid #eee}.ues-button-search:hover{background-color:#f0f0f0;border-color:#dedede}.ues-button-search:focus,.ues-button-search:active{border-color:#c8c8c8;background-color:#dedede}a.ues-button{color:inherit}.ues-button-small{border-radius:3px;font-size:11px;padding:0 5px;font-weight:400}.ues-button-large{font-size:16px;padding:14px 38px;border-radius:7px}.ues-button-block{margin:.5em 0;display:block;width:100%}.ues-button-icon{padding-left:7px;padding-right:7px}.ues-button-group{position:relative;display:inline-block;vertical-align:middle}.ues-button-group:before,.ues-button-group:after{content:' ';display:table}.ues-button-group:after{clear:both}.ues-button-group .ues-button,.ues-button-group input[type="search"]{float:left}.ues-button-group>input[type="search"]:first-child:not(:last-child):not(.ues-dropdown-toggle),.ues-button-group>.ues-button:first-child:not(:last-child):not(.ues-dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.ues-button-group>input[type="search"]:last-child:not(:first-child),.ues-button-group>.ues-button:last-child:not(:first-child),.ues-button-group>.ues-dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.ues-button-group>.ues-button:not(:first-child):not(:last-child):not(.ues-dropdown-toggle){border-radius:0;border-right:none}
-.ues-dropdown{position:relative}.ues-dropdown-menu{font-size:13px;position:absolute;display:none;top:100%;left:0;z-index:10000000;float:left;min-width:160px;padding:5px 0;list-style:none;background-clip:padding-box;background-color:#fff;color:#333;box-shadow:0 1px 5px 0 rgba(0,0,0,.1);margin:0;border:1px solid #ddd;border-top:none}.open .ues-dropdown-menu{display:block}.ues-dropdown-menu>li>a{display:block;white-space:nowrap;clear:both;padding:0 15px}.ues-dropdown-menu>li>a:hover{background-color:#eee}.ues-dropdown-divider{height:1px;margin:5px 0;overflow:hidden;background-color:#ddd}.ues-dropdown-header{display:block;padding:2px 20px;color:#999}
+.ues-dropdown{position:relative}.ues-dropdown-menu{font-size:13px;position:absolute;display:none;top:100%;left:0;z-index:10000000;float:left;min-width:160px;padding:5px 0;list-style:none;background-clip:padding-box;background-color:#fff;color:#333;box-shadow:0 1px 6px 0 rgba(0,0,0,.1);margin:2px 0 0;border:1px solid #ddd;border-radius:4px}.open .ues-dropdown-menu{display:block}.ues-dropdown-menu>li>a{display:block;white-space:nowrap;clear:both;padding:0 15px}.ues-dropdown-menu>li>a:hover{background-color:#dd4814;color:#fff}.ues-dropdown-divider{height:1px;margin:5px 0;overflow:hidden;background-color:#ddd}.ues-dropdown-header{display:block;padding:0 14px;color:#999}
 .ues-message{padding:.5em .6em;border-radius:2px;background-color:#E6E4E2;border-color:#AEA79F;color:#555}.ues-message a:link{color:inherit;color:rgba(0,0,0,.75);text-decoration:underline}.ues-message a:hover{color:#000}.ues-message-inline{display:inline-block}.ues-message-bordered{border-width:1px;border-style:solid;box-shadow:1px 1px 3px 0 rgba(0,0,0,.25)}.ues-message-stack li{border-radius:0;border-top-width:0;border-bottom-color:#000;border-bottom-color:rgba(0,0,0,.25)}.ues-message-stack :first-child{border-radius:2px 2px 0 0;border-top-width:1px}.ues-message-stack :last-child{border-radius:0 0 2px 2px;border-bottom-width:1px}.ues-message-closeable{position:relative;cursor:pointer;-webkit-transition:.3s ease all;transition:.3s ease all;overflow:hidden;max-height:1000px}.ues-message-closeable:after{content:"✖";position:absolute;right:.6em;opacity:0}.ues-message-closeable:hover:after{opacity:1}.ues-message-closed{max-height:0;padding:0;border:none;box-shadow:none;margin:0;opacity:0}.ues-disabled{color:#999;border-color:#ccc}.ues-success{background-color:#AFE1B6;border-color:#38B44A;color:#114918}.ues-warning{background-color:#F8E2B1;border-color:#EFB73E;color:#68563F}.ues-error{background-color:#F5C2BF;border-color:#DF382C;color:#A11E1A}@-webkit-keyframes ues-error-pulsating{from{background:#FFE6E5}to{background:#FFA09B}}@keyframes ues-error-pulsating{from{background:#FFE6E5}to{background:#FFA09B}}.ues-error-pulsating{-webkit-animation:ues-error-pulsating .7s ease-in-out infinite alternate;animation:ues-error-pulsating .7s ease-in-out infinite alternate}.ues-information{background-color:#B9E9FA;border-color:#19B6EE;color:#40525C}
 form{margin:15px 0}fieldset{padding:0}fieldset,legend{border:0;margin:0 0 15px}legend{display:block;width:100%;font-size:23px;line-height:inherit}label{display:block;margin:10px 0 5px}input[type="checkbox"],input[type="radio"]{margin-right:5px}.ues-form-help{font-size:14px;padding:0 15px;border-radius:3px;background-color:#eee;color:#555;position:relative;margin:10px 0}span.ues-form-help{display:inline-block;margin:0}.ues-inline{display:inline-block;margin-right:10px}input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],input[type="color"],select,textarea{box-shadow:inset 0 1px 1px rgba(0,0,0,.075);border-radius:2px;width:100%;padding:8px;margin:0 0 8px;display:block;border:1px solid #ccc;line-height:14px;font-weight:inherit;-webkit-transition:.3s linear border;transition:.3s linear border}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,select:focus,textarea:focus{outline:0;outline:thin dotted \9;border-color:#129FEA}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:1px auto #129FEA}input[type="text"][disabled],input[type="password"][disabled],input[type="email"][disabled],input[type="url"][disabled],input[type="date"][disabled],input[type="month"][disabled],input[type="time"][disabled],input[type="datetime"][disabled],input[type="datetime-local"][disabled],input[type="week"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="color"][disabled],select[disabled],textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}input[readonly],select[readonly],textarea[readonly]{background:#eee;color:#777;border-color:#ccc}input:focus:invalid,textarea:focus:invalid,select:focus:invalid{color:#b94a48;border:1px solid #ee5f5b}input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus{border-color:#e9322d}input[type="file"]:focus:invalid:focus,input[type="radio"]:focus:invalid:focus,input[type="checkbox"]:focus:invalid:focus{outline-color:#e9322d}select,.ues-form-inline label,.ues-form-inline input{display:inline-block;width:auto}.ues-form-inline label{margin-left:1em;margin-right:1em}.ues-site-search{position:relative}.ues-site-search .ues-site-search-input{box-shadow:none;height:44px;line-height:44px;margin-bottom:0;padding:0 15px;-webkit-transition:.2s ease border;transition:.2s ease border;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #bbb;appearance:none;background-color:#fff}.ues-site-search .ues-site-search-input:focus{border:1px solid #ad2e03}.ues-icon-search+.ues-site-search-input{padding-left:40px;padding-right:0}.ues-site-search>.ues-icon-search{left:15px;position:absolute;top:15px}.ues-site-search .ues-button-search{border-radius:0 2px 2px 0;border-width:0 0 0 1px;bottom:1px;padding:0 20px;position:absolute;right:1px;top:1px}
 /*!

=== modified file 'src/dropdowns.css'
--- src/dropdowns.css	2014-02-02 19:11:18 +0000
+++ src/dropdowns.css	2014-10-09 13:58:47 +0000
@@ -7,7 +7,7 @@
     position:absolute;
     display:none;
     top:100%;
-    left:0px;
+    left:0;
     z-index:10000000;
     float:left;
     min-width:160px;
@@ -16,10 +16,10 @@
     background-clip: padding-box;
     background-color:#fff;
     color:#333;
-    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
-    margin:0;
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
+    margin:2px 0 0 0;
     border:1px solid #ddd;
-    border-top:none;
+    border-radius:4px;
 }
 
 .open .ues-dropdown-menu {
@@ -35,7 +35,8 @@
 }
 
 .ues-dropdown-menu > li > a:hover {
-    background-color:#eee;
+    background-color:#dd4814;
+    color:white;
 }
 
 .ues-dropdown-divider {
@@ -47,6 +48,6 @@
 
 .ues-dropdown-header {
     display:block;
-    padding:2px 20px;
+    padding:0 14px;
     color:#999;
 }

=== modified file 'test/index.html'
--- test/index.html	2014-10-07 10:39:45 +0000
+++ test/index.html	2014-10-09 13:58:47 +0000
@@ -218,60 +218,21 @@
     </div>
     </p>
   </div>
+  </section>
+
+  <section class="clear">
 
   <h1>Dropdowns</h1>
 
-  <!-- Link or button to toggle dropdown -->
-  <div class="ues-dropdown clear">
-    <ul class="ues-dropdown-menu">
-      <li><a tabindex="-1" href="#">Action</a></li>
-      <li><a tabindex="-1" href="#">Another action</a></li>
-      <li><a tabindex="-1" href="#">Something else here</a></li>
-      <li class="ues-dropdown-divider"></li>
-      <li><a tabindex="-1" href="#">Separated link</a></li>
-    </ul>
-  </div>
-  <div class="ues-dropdown clear">
-    <!-- Link or button to toggle dropdown -->
-    <ul class="ues-dropdown-menu">
-      <li class="ues-dropdown-header">Dropdown header</li>
-      <li><a tabindex="-1" href="#">Action</a></li>
-      <li><a tabindex="-1" href="#">Another action</a></li>
-      <li><a tabindex="-1" href="#">Something else here</a></li>
-      <li class="ues-dropdown-divider"></li>
-      <li class="ues-dropdown-header">Dropdown header</li>
-      <li><a tabindex="-1" href="#">Separated link</a></li>
-    </ul>
-  </div>
-  <h2>Button Dropdowns</h2>
-  <div class="ues-button-group">
-    <button type="button" class="ues-button ues-dropdown-toggle">
-      Do Something &#x25BC;
-    </button>
-    <ul class="ues-dropdown-menu">
-      <li><a tabindex="-1" href="#">Action</a></li>
-      <li><a tabindex="-1" href="#">Another action</a></li>
-      <li><a tabindex="-1" href="#">Something else here</a></li>
-      <li class="ues-dropdown-divider"></li>
-      <li><a tabindex="-1" href="#">Separated link</a></li>
-    </ul>
-  </div>
-  <div class="ues-button-group">
-    <button type="button" class="ues-button">
-      Action
-    </button>
-    <button type="button" class="ues-button ues-button-icon ues-dropdown-toggle">
-      &#x25BC;
-    </button>
-    <ul class="ues-dropdown-menu">
-      <li><a tabindex="-1" href="#">Action</a></li>
-      <li><a tabindex="-1" href="#">Another action</a></li>
-      <li><a tabindex="-1" href="#">Something else here</a></li>
-      <li class="ues-dropdown-divider"></li>
-      <li><a tabindex="-1" href="#">Separated link</a></li>
-    </ul>
-  </div>
-</section>
+  <ul data-qa="dropdown" class="ues-dropdown-menu" style="display:block; position:static">
+    <li class="ues-dropdown-header">Dropdown header</li>
+    <li><a tabindex="-1" href="#">Action</a></li>
+    <li><a tabindex="-1" href="#">Another action</a></li>
+    <li><a tabindex="-1" href="#">Something else here</a></li>
+    <li class="ues-dropdown-divider"></li>
+    <li><a tabindex="-1" href="#">Separated link</a></li>
+  </ul>
+  </section>
 
 
 <section>

=== modified file 'test/visual/config/large.js'
--- test/visual/config/large.js	2014-10-07 10:05:00 +0000
+++ test/visual/config/large.js	2014-10-09 13:58:47 +0000
@@ -29,10 +29,11 @@
     // headlines
     phantomcss.screenshot('[data-qa="headlines"]', 'Headlines');
 
+    // dropdowns
+    phantomcss.screenshot('[data-qa="dropdown"]', 'Dropdown');
+
     // navbars
     phantomcss.screenshot('[data-qa="navbar-simple"]', 'Simple Navbar');
-    // failing due to issue with font
-    // https://bugs.launchpad.net/ulysses/+bug/1300209
     phantomcss.screenshot('[data-qa="navbar-invert"]', 'Invert Navbar');
     phantomcss.screenshot('[data-qa="navbar-full"]', 'Full Navbar');
     phantomcss.screenshot('[data-qa="navbar-button"]', 'Navbar with button');

=== added file 'test/visual/screenshots/large/dropdown.png'
Binary files test/visual/screenshots/large/dropdown.png	1970-01-01 00:00:00 +0000 and test/visual/screenshots/large/dropdown.png	2014-10-09 13:58:47 +0000 differ