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

Proposed by Stephen Stewart on 2014-10-09
Status: Merged
Approved by: Stephen Stewart on 2014-10-09
Approved revision: 47
Merged at revision: 47
Proposed branch: lp:~stephen-stewart/ulysses/tidy-up-dropdown
Merge into: lp:ulysses
Diff against target: 190 lines (+27/-62)
7 files modified
README.md (+2/-0)
gulpfile.js (+1/-1)
public/dropdowns.css (+1/-1)
public/ulysses.css (+1/-1)
src/dropdowns.css (+7/-6)
test/index.html (+12/-51)
test/visual/config/large.js (+3/-2)
To merge this branch: bzr merge lp:~stephen-stewart/ulysses/tidy-up-dropdown
Reviewer Review Type Date Requested Status
Fabián Ezequiel Gallina (community) 2014-10-09 Approve on 2014-10-09
Review via email: mp+237788@code.launchpad.net

Commit message

tidy up dropdowns style

Description of the change

tidy up dropdowns style

To post a comment you must log in.
Fabián Ezequiel Gallina (fgallina) wrote :

LGTM

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'README.md'
2--- README.md 2014-09-24 20:05:57 +0000
3+++ README.md 2014-10-09 13:58:47 +0000
4@@ -39,6 +39,8 @@
5 ### Tests
6
7 Visual regression testing is handled by PhantomCSS:
8+(for which you'll either need CasperJS and PhantomJS on PATH, or just run
9+./tarmac_verify.sh)
10
11 ```
12 gulp test
13
14=== modified file 'gulpfile.js'
15--- gulpfile.js 2014-10-07 10:55:01 +0000
16+++ gulpfile.js 2014-10-09 13:58:47 +0000
17@@ -27,7 +27,7 @@
18 gulp.task('update', ['clean', 'copy', 'grids', 'build']);
19 gulp.task('svg', ['symbols']);
20
21-gulp.task('watch', function() {
22+gulp.task('watch', ['webserver'], function() {
23 gulp.watch(paths.src + '**/*.css', ['build']);
24 gulp.watch([paths.normalize, paths.grids], ['copy']);
25 gulp.watch('gulpfile.js', ['grids']);
26
27=== modified file 'public/dropdowns.css'
28--- public/dropdowns.css 2014-09-23 17:12:20 +0000
29+++ public/dropdowns.css 2014-10-09 13:58:47 +0000
30@@ -1,1 +1,1 @@
31-.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}
32\ No newline at end of file
33+.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}
34\ No newline at end of file
35
36=== modified file 'public/ulysses.css'
37--- public/ulysses.css 2014-10-03 16:06:24 +0000
38+++ public/ulysses.css 2014-10-09 13:58:47 +0000
39@@ -1,7 +1,7 @@
40 /*! 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}
41
42 .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}
43-.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}
44+.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}
45 .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}
46 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}
47 /*!
48
49=== modified file 'src/dropdowns.css'
50--- src/dropdowns.css 2014-02-02 19:11:18 +0000
51+++ src/dropdowns.css 2014-10-09 13:58:47 +0000
52@@ -7,7 +7,7 @@
53 position:absolute;
54 display:none;
55 top:100%;
56- left:0px;
57+ left:0;
58 z-index:10000000;
59 float:left;
60 min-width:160px;
61@@ -16,10 +16,10 @@
62 background-clip: padding-box;
63 background-color:#fff;
64 color:#333;
65- box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
66- margin:0;
67+ box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
68+ margin:2px 0 0 0;
69 border:1px solid #ddd;
70- border-top:none;
71+ border-radius:4px;
72 }
73
74 .open .ues-dropdown-menu {
75@@ -35,7 +35,8 @@
76 }
77
78 .ues-dropdown-menu > li > a:hover {
79- background-color:#eee;
80+ background-color:#dd4814;
81+ color:white;
82 }
83
84 .ues-dropdown-divider {
85@@ -47,6 +48,6 @@
86
87 .ues-dropdown-header {
88 display:block;
89- padding:2px 20px;
90+ padding:0 14px;
91 color:#999;
92 }
93
94=== modified file 'test/index.html'
95--- test/index.html 2014-10-07 10:39:45 +0000
96+++ test/index.html 2014-10-09 13:58:47 +0000
97@@ -218,60 +218,21 @@
98 </div>
99 </p>
100 </div>
101+ </section>
102+
103+ <section class="clear">
104
105 <h1>Dropdowns</h1>
106
107- <!-- Link or button to toggle dropdown -->
108- <div class="ues-dropdown clear">
109- <ul class="ues-dropdown-menu">
110- <li><a tabindex="-1" href="#">Action</a></li>
111- <li><a tabindex="-1" href="#">Another action</a></li>
112- <li><a tabindex="-1" href="#">Something else here</a></li>
113- <li class="ues-dropdown-divider"></li>
114- <li><a tabindex="-1" href="#">Separated link</a></li>
115- </ul>
116- </div>
117- <div class="ues-dropdown clear">
118- <!-- Link or button to toggle dropdown -->
119- <ul class="ues-dropdown-menu">
120- <li class="ues-dropdown-header">Dropdown header</li>
121- <li><a tabindex="-1" href="#">Action</a></li>
122- <li><a tabindex="-1" href="#">Another action</a></li>
123- <li><a tabindex="-1" href="#">Something else here</a></li>
124- <li class="ues-dropdown-divider"></li>
125- <li class="ues-dropdown-header">Dropdown header</li>
126- <li><a tabindex="-1" href="#">Separated link</a></li>
127- </ul>
128- </div>
129- <h2>Button Dropdowns</h2>
130- <div class="ues-button-group">
131- <button type="button" class="ues-button ues-dropdown-toggle">
132- Do Something &#x25BC;
133- </button>
134- <ul class="ues-dropdown-menu">
135- <li><a tabindex="-1" href="#">Action</a></li>
136- <li><a tabindex="-1" href="#">Another action</a></li>
137- <li><a tabindex="-1" href="#">Something else here</a></li>
138- <li class="ues-dropdown-divider"></li>
139- <li><a tabindex="-1" href="#">Separated link</a></li>
140- </ul>
141- </div>
142- <div class="ues-button-group">
143- <button type="button" class="ues-button">
144- Action
145- </button>
146- <button type="button" class="ues-button ues-button-icon ues-dropdown-toggle">
147- &#x25BC;
148- </button>
149- <ul class="ues-dropdown-menu">
150- <li><a tabindex="-1" href="#">Action</a></li>
151- <li><a tabindex="-1" href="#">Another action</a></li>
152- <li><a tabindex="-1" href="#">Something else here</a></li>
153- <li class="ues-dropdown-divider"></li>
154- <li><a tabindex="-1" href="#">Separated link</a></li>
155- </ul>
156- </div>
157-</section>
158+ <ul data-qa="dropdown" class="ues-dropdown-menu" style="display:block; position:static">
159+ <li class="ues-dropdown-header">Dropdown header</li>
160+ <li><a tabindex="-1" href="#">Action</a></li>
161+ <li><a tabindex="-1" href="#">Another action</a></li>
162+ <li><a tabindex="-1" href="#">Something else here</a></li>
163+ <li class="ues-dropdown-divider"></li>
164+ <li><a tabindex="-1" href="#">Separated link</a></li>
165+ </ul>
166+ </section>
167
168
169 <section>
170
171=== modified file 'test/visual/config/large.js'
172--- test/visual/config/large.js 2014-10-07 10:05:00 +0000
173+++ test/visual/config/large.js 2014-10-09 13:58:47 +0000
174@@ -29,10 +29,11 @@
175 // headlines
176 phantomcss.screenshot('[data-qa="headlines"]', 'Headlines');
177
178+ // dropdowns
179+ phantomcss.screenshot('[data-qa="dropdown"]', 'Dropdown');
180+
181 // navbars
182 phantomcss.screenshot('[data-qa="navbar-simple"]', 'Simple Navbar');
183- // failing due to issue with font
184- // https://bugs.launchpad.net/ulysses/+bug/1300209
185 phantomcss.screenshot('[data-qa="navbar-invert"]', 'Invert Navbar');
186 phantomcss.screenshot('[data-qa="navbar-full"]', 'Full Navbar');
187 phantomcss.screenshot('[data-qa="navbar-button"]', 'Navbar with button');
188
189=== added file 'test/visual/screenshots/large/dropdown.png'
190Binary 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

Subscribers

People subscribed via source and target branches