← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/tests/common/tests/manual/skins_jeff_proposed_css_changes.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/tests/common/tests/manual/skins_jeff_proposed_css_changes.html
1
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
 
<html>
3
 
<head>
4
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
5
 
    <title>(Jeff) Widget Skins Test Page</title>
6
 
    <script src="../../../../build/yui/yui-min.js"></script>
7
 
    <link type="text/css" rel="stylesheet" href="../../../../build/cssreset/cssreset.css">
8
 
    <link type="text/css" rel="stylesheet" href="../../../../build/cssfonts/cssfonts.css">
9
 
    <link type="text/css" rel="stylesheet" href="../../../../build/cssgrids/cssgrids.css">
10
 
    <link type="text/css" rel="stylesheet" href="../../../../build/slider-base/assets/skins/night/slider-base.css">
11
 
    <link type="text/css" rel="stylesheet" href="../../../../build/tabview/assets/skins/night/tabview.css">
12
 
    <link type="text/css" rel="stylesheet" href="../../../../build/datatable-base/assets/skins/night/datatable-base.css">
13
 
    <link type="text/css" rel="stylesheet" href="../../../../build/dial/assets/skins/night/dial.css">
14
 
    <link type="text/css" rel="stylesheet" href="../../../../build/scrollview-list/assets/skins/night/scrollview-list.css">
15
 
    <link type="text/css" rel="stylesheet" href="../../../../build/panel/assets/skins/night/panel.css" charset="utf-8">
16
 
 
17
 
    <!--
18
 
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/gallery-2011.08.04-15-16/build/gallerycss-cssbutton/gallerycss-cssbutton.css" charset="utf-8">
19
 
    -->
20
 
    <link type="text/css" rel="stylesheet" href="http://derek.io/~/fixedbutton.css" charset="utf-8">
21
 
    <style>
22
 
        .yui3-js-enabled .yui3-widget-loading {
23
 
            display: none;
24
 
        }
25
 
 
26
 
        .yui3-panel form li {
27
 
            list-style: none;
28
 
        }       
29
 
 
30
 
        .yui3-panel label {
31
 
            display: block;
32
 
            margin-top: 1em;
33
 
        }    
34
 
 
35
 
        .yui3-widget {
36
 
            margin: 15px;
37
 
        }
38
 
 
39
 
        .yui3-tabview {
40
 
            width: 400px;
41
 
        }
42
 
 
43
 
        #buttons-dir,
44
 
        #buttons-skin {
45
 
            margin: 0 2em;
46
 
        }
47
 
 
48
 
        .button-group {
49
 
            text-align: center;
50
 
        }
51
 
 
52
 
        .yui3-panel {
53
 
            position: static !important;
54
 
        }
55
 
 
56
 
        /* workaround site CSS */
57
 
        .yui3-datatable th,
58
 
        .yui3-calendar th,
59
 
        .yui3-calendar h4 {
60
 
            background: transparent;
61
 
            border: none;
62
 
            color: inherit;
63
 
            font-size: inherit;
64
 
        }
65
 
 
66
 
/* Jeff CSS recommendations */
67
 
html .yui3-skin-sam .yui3-panel-content {
68
 
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
69
 
}
70
 
/* un-comment this to check the panel box-shadow when over other objects
71
 
html {
72
 
    background: url(assets/images/background_components_panel_shadow_check.png);
73
 
}*/
74
 
 
75
 
html .yui3-skin-sam .yui3-scrollview-vert .yui3-scrollview-content .yui3-scrollview-item {
76
 
    /*background-color: #151515;*/
77
 
    border-bottom: 1px solid #cccccc;
78
 
}
79
 
html .yui3-skin-sam .yui3-scrollview {
80
 
    border: solid 1px #808080;
81
 
}
82
 
html .yui3-skin-night .yui3-calendar-content {
83
 
    background: #494A4A;
84
 
    /*border: 1px solid gray;*/
85
 
    border-radius: 5px 5px 5px 5px;
86
 
    color: #fff;
87
 
    font-family: "Lucida Grande","Lucida Sans",Calibri,Helvetica,Arial,sans-serif;
88
 
    font-size: 0.8em;
89
 
    padding: 10px;
90
 
}
91
 
html .yui3-skin-night .yui3-calendar-day, 
92
 
html .yui3-skin-night .yui3-calendar-prevmonth-day,
93
 
html .yui3-skin-night .yui3-calendar-nextmonth-day {
94
 
    background: none repeat scroll 0 0 #585959;
95
 
    border: 1px solid #414342;
96
 
    text-align: center;
97
 
}
98
 
html .yui3-skin-night .yui3-calendar-weekdayrow{
99
 
    color:#969696;
100
 
}
101
 
html .yui3-skin-night .yui3-calendar-day-selected {
102
 
    background-color: #70A4EB;
103
 
    color: #000000;
104
 
}
105
 
    </style> 
106
 
 
107
 
    <body class="yui3-skin-sam">
108
 
    <div id="skin-demo"> 
109
 
        <div class="yui3-g button-group">
110
 
            <div id="buttons-skin" class="yui3-u">
111
 
                <button id="sam" class="yui3-button yui3-button-selected">Sam</button>
112
 
                <button id="night" class="yui3-button">Night</button>
113
 
            </div>
114
 
 
115
 
            <div id="buttons-dir" class="yui3-u">
116
 
                <button id="rtl" class="yui3-button">RTL</button>
117
 
                <button id="ltr" class="yui3-button yui3-button-selected">LTR</button>
118
 
            </div>
119
 
        </div>
120
 
        <div class="yui3-g">
121
 
            <div class="yui3-u">
122
 
                <div class="yui3-widget-loading" id="demo-tabview"> 
123
 
                    <ul> 
124
 
                        <li> 
125
 
                            <a href="#pork">Pork</a> 
126
 
                        </li> 
127
 
                        <li> 
128
 
                            <a href="#meatball">Meatball</a> 
129
 
                        </li> 
130
 
                        <li> 
131
 
                            <a href="#salami">Salami</a> 
132
 
                        </li> 
133
 
                    </ul> 
134
 
                    <div> 
135
 
                        <div id="pork"> 
136
 
                            <p>Pork tail short loin ground round. Spare ribs bresaola cow prosciutto. Ground round shoulder shankle venison tongue, beef ribs spare ribs salami frankfurter bacon turducken tri-tip tail ribeye pork chop. Chicken tail bacon, biltong corned beef shankle pancetta shoulder brisket pork belly ham pork bresaola pig. Kielbasa filet mignon beef ribs, brisket ham ribeye pig ground round jerky flank turkey ham hock. Bacon swine jowl, pancetta salami boudin rump venison meatloaf strip steak. Fatback shoulder beef capicola.</p> 
137
 
                        </div> 
138
 
                        <div id="meatball"> 
139
 
                            <p>Meatball cow leberkäse, tenderloin sirloin spare ribs beef ribs turkey ball tip flank pork loin fatback andouille strip steak tri-tip. Kielbasa drumstick pastrami tongue, strip steak shank tail beef ribs pork turducken pork loin pork chop. Capicola ground round tail t-bone pork chop kielbasa, chicken prosciutto bacon brisket sausage jowl. Andouille shoulder pork pig swine. Venison beef ribs turducken pork chop, sausage turkey drumstick sirloin ham swine chicken. Kielbasa pancetta t-bone ham. Brisket tenderloin meatball turducken, hamburger ball tip rump pork flank ground round spare ribs kielbasa beef ribs bacon.</p> 
140
 
                        </div> 
141
 
                        <div id="salami"> 
142
 
                            <p>Salami short ribs corned beef, pancetta ham hock jowl frankfurter tail rump flank capicola tri-tip andouille sirloin. Biltong bresaola sausage hamburger ground round, pork loin tri-tip pig andouille fatback short ribs pork jowl. Capicola boudin sirloin tongue, beef prosciutto spare ribs shankle ball tip ham beef ribs turducken tenderloin. Drumstick tenderloin ribeye leberkäse, pork belly pancetta turducken frankfurter bresaola pig biltong. Pastrami beef ribs meatball tri-tip, chuck jerky prosciutto beef rump drumstick bresaola jowl. Hamburger leberkäse pork chop, ball tip meatball ham andouille fatback corned beef pork loin shoulder boudin. Shoulder short loin flank filet mignon tri-tip.</p> 
143
 
                        </div> 
144
 
                    </div> 
145
 
                </div> 
146
 
            </div>
147
 
 
148
 
            <div class="yui3-u"><div id="demo-datatable"></div></div>
149
 
 
150
 
            <div class="yui3-u">
151
 
                <div class="yui3-panel yui3-widget" id="demo-panel"> 
152
 
                    <div class="yui3-panel-content yui3-widget-stdmod"> 
153
 
                        <div class="yui3-widget-hd">Add A New Product</div> 
154
 
                        <div class="yui3-widget-bd"> 
155
 
                            <form> 
156
 
                                <fieldset> 
157
 
                                    <ul> 
158
 
                                        <li> 
159
 
                                            <label for="productId">ID</label> 
160
 
                                            <input type="text" name="productId" id="productId">
161
 
                                        </li> 
162
 
                                        <li> 
163
 
                                            <label for="name">Name</label> 
164
 
                                            <input type="text" name="name" id="name"> 
165
 
                                        </li> 
166
 
                                        <li> 
167
 
                                            <label for="price">Price</label> 
168
 
                                            <input type="text" name="price" id="price"> 
169
 
                                        </li> 
170
 
                                    </ul> 
171
 
                                </fieldset> 
172
 
                            </form> 
173
 
                        </div>
174
 
                        <div class="yui3-widget-ft"> 
175
 
                            <button class="yui3-button">Add Item</button> 
176
 
                            <button class="yui3-button">Remove All Items</button> 
177
 
                        </div> 
178
 
                    </div> 
179
 
                </div>
180
 
            </div>
181
 
            <div class="yui3-u">
182
 
                 <div id="demo-calendar"></div>
183
 
            </div> 
184
 
            <div class="yui3-u">
185
 
                 <div id="demo-dial"></div>
186
 
            </div> 
187
 
            <div class="yui3-u">
188
 
                 <div id="demo-xslider"></div>
189
 
            </div> 
190
 
            <div class="yui3-u">
191
 
                 <div id="demo-yslider"></div>
192
 
            </div> 
193
 
 
194
 
            <div class="yui3-u">
195
 
                <div id="demo-scrollview">
196
 
                    <ul>
197
 
                        <li>Sir DZL</li>
198
 
                        <li>Casual</li>
199
 
                        <li>A-Plus</li>
200
 
                        <li>Opio</li>
201
 
                        <li>Phesto</li>
202
 
                        <li>Tajai</li>
203
 
                        <li>Pep Love</li>
204
 
                        <li>Domino</li>
205
 
                        <li>Toure</li>
206
 
                        <li>Bukue One</li>
207
 
                        <li>Z-Man</li>
208
 
                    </ul>
209
 
                </div>
210
 
            </div> 
211
 
 
212
 
            <div class="yui3-u">
213
 
                <div id="demo-menunav" class="yui3-menu"> 
214
 
                    <div class="yui3-menu-content"> 
215
 
                        <ul class="first-of-type"> 
216
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li> 
217
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li> 
218
 
                            <li> 
219
 
                                <a class="yui3-menu-label" href="#pim">PIM</a> 
220
 
                                <div id="pim" class="yui3-menu"> 
221
 
                                    <div class="yui3-menu-content">    
222
 
 
223
 
                                        <ul> 
224
 
                                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li> 
225
 
                                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li> 
226
 
                                        </ul> 
227
 
 
228
 
                                        <ul> 
229
 
                                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li> 
230
 
                                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li> 
231
 
                                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li> 
232
 
                                        </ul> 
233
 
                                        
234
 
                                        <ul> 
235
 
                                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li> 
236
 
                                        </ul> 
237
 
                                        
238
 
                                    </div>    
239
 
                                </div>                    
240
 
                            </li> 
241
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li> 
242
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li> 
243
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li> 
244
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li> 
245
 
                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li> 
246
 
                        </ul>    
247
 
                    </div> 
248
 
                </div>      
249
 
            </div>      
250
 
        </div>      
251
 
    </div> 
252
 
<script>
253
 
YUI({filter: 'raw'}).use('tabview', 'datatable-sort', 'calendar', 'panel', 'dial', 'node-menunav', 'node-event-delegate', 'slider', 'scrollview', 'scrollview-list', function(Y) {
254
 
    var buttonHandlers = {
255
 
        sam: function(e) {
256
 
            Y.one('body').replaceClass('yui3-skin-night', 'yui3-skin-sam');
257
 
        },
258
 
 
259
 
        night: function(e) {
260
 
            Y.one('body').replaceClass('yui3-skin-sam', 'yui3-skin-night');
261
 
        },
262
 
 
263
 
        rtl: function(e) {
264
 
            Y.one('body').setAttribute('dir', 'rtl');
265
 
        },
266
 
 
267
 
        ltr: function(e) {
268
 
            Y.one('body').setAttribute('dir', 'ltr');
269
 
        }
270
 
    };
271
 
 
272
 
    function buttonGroupHandler(e) {
273
 
        var button = e.currentTarget,
274
 
            handler = buttonHandlers[button.get('id')],
275
 
            selectedClass = Y.ClassNameManager.getClassName('button', 'selected');
276
 
 
277
 
        if (handler) {
278
 
            button.addClass(selectedClass);
279
 
            button.siblings().removeClass(selectedClass);
280
 
 
281
 
            handler.call(this, e);
282
 
        }
283
 
    }
284
 
 
285
 
    new Y.TabView({
286
 
        srcNode: '#demo-tabview'
287
 
    }).render();
288
 
 
289
 
    // what if...
290
 
    // Y.TabView('#demo-tabview');
291
 
    // Y.one('#demo-tabview').plug('tabs');
292
 
 
293
 
    new Y.DataTable.Base({
294
 
        srcNode: '#demo-datatable',
295
 
        columnset: [
296
 
            {key:"Company", label:"Column A", sortable:true},
297
 
            {key:"Phone", label:"Column B", sortable:true},
298
 
            {key:"Contact", label:"Column C", sortable:true}
299
 
        ],
300
 
        recordset: [
301
 
            {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
302
 
            {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
303
 
            {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
304
 
        ],
305
 
        caption: "Example table with sortable columns"
306
 
    }).plug(Y.Plugin.DataTableSort).render();
307
 
 
308
 
    // what if...
309
 
    // plug('sort').render(); 
310
 
 
311
 
 
312
 
    new Y.Calendar({
313
 
        render: "#demo-calendar"
314
 
    });
315
 
 
316
 
    new Y.Dial({
317
 
        render: "#demo-dial"
318
 
    });
319
 
 
320
 
    new Y.Slider({
321
 
        axis: 'y',
322
 
        render: '#demo-yslider'
323
 
    });
324
 
 
325
 
    new Y.Slider({
326
 
        render: '#demo-xslider'
327
 
    });
328
 
 
329
 
    new Y.ScrollView({
330
 
        height: '150px',
331
 
        contentBox: '#demo-scrollview'
332
 
    }).plug(Y.Plugin.ScrollViewList).render();
333
 
 
334
 
    // what if...
335
 
    // Y.Calendar('#demo-calendar');
336
 
    // Y.Dial('#demo-dial');
337
 
    // Y.Dial('#demo-dial');
338
 
 
339
 
    // new Y.Slider('#demo-yslider', {
340
 
    //    axis: 'y',
341
 
    // });
342
 
 
343
 
    Y.one('#demo-menunav').plug(Y.Plugin.NodeMenuNav);
344
 
 
345
 
    // what if...
346
 
    // Y.Menu('#demo-menu');
347
 
 
348
 
    // handle button groups
349
 
    Y.one('.button-group').delegate('click', buttonGroupHandler, 'button');
350
 
    
351
 
    /* what if...
352
 
     Y.RadioButtons('.button-group', {
353
 
         '#sam': buttonHandlers['sam'],
354
 
         '#night': buttonHandlers['night'],
355
 
         '#ltr': buttonHandlers['ltr'],
356
 
         '#rtl': buttonHandlers['rtl']
357
 
    });
358
 
    */
359
 
 
360
 
});
361
 
</script>
362
 
</body>
363
 
</html>