← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/tests/slider/tests/manual/skins.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/slider/tests/manual/skins.html
1
 
<!doctype html>
2
 
<html>
3
 
<head>
4
 
    <title>Test Page</title>
5
 
    <!--link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/sam-dark/slider-base.css">
6
 
    <link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/round/slider-base.css">
7
 
    <link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/round-dark/slider-base.css">
8
 
    <link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/capsule/slider-base.css">
9
 
    <link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/capsule-dark/slider-base.css">
10
 
    <link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/audio/slider-base.css">
11
 
    <link rel="stylesheet" type="text/css" href="http://localhost/dev/yui/yui3/build/slider-base/assets/skins/audio-light/slider-base.css"-->
12
 
    <style type="text/css">
13
 
        div {
14
 
            margin-bottom: 1em;
15
 
            padding: 2em;
16
 
        }
17
 
 
18
 
        div:nth-of-type(even) {
19
 
            background: #000;
20
 
        }
21
 
 
22
 
        /* Alternate rails */
23
 
        .alt #sam .yui3-slider-x .yui3-slider-rail,
24
 
        .alt #sam .yui3-slider-x .yui3-slider-rail-cap-left,
25
 
        .alt #sam .yui3-slider-x .yui3-slider-rail-cap-right {
26
 
            background-image: url(../../../../build/slider-base/assets/skins/sam/rail-x-lines.png);
27
 
        }
28
 
        .alt #sam-dark .yui3-slider-x .yui3-slider-rail,
29
 
        .alt #sam-dark .yui3-slider-x .yui3-slider-rail-cap-left,
30
 
        .alt #sam-dark .yui3-slider-x .yui3-slider-rail-cap-right {
31
 
            background-image: url(../../../../build/slider-base/assets/skins/sam-dark/rail-x-lines.png);
32
 
        }
33
 
        .alt #sam .yui3-slider-y .yui3-slider-rail,
34
 
        .alt #sam .yui3-slider-y .yui3-slider-rail-cap-top,
35
 
        .alt #sam .yui3-slider-y .yui3-slider-rail-cap-bottom {
36
 
            background-image: url(../../../../build/slider-base/assets/skins/sam/rail-y-lines.png);
37
 
        }
38
 
        .alt #sam-dark .yui3-slider-y .yui3-slider-rail,
39
 
        .alt #sam-dark .yui3-slider-y .yui3-slider-rail-cap-top,
40
 
        .alt #sam-dark .yui3-slider-y .yui3-slider-rail-cap-bottom {
41
 
            background-image: url(../../../../build/slider-base/assets/skins/sam-dark/rail-y-lines.png);
42
 
        }
43
 
 
44
 
        .alt #capsule .yui3-slider-x .yui3-slider-rail,
45
 
        .alt #capsule .yui3-slider-x .yui3-slider-rail-cap-left,
46
 
        .alt #capsule .yui3-slider-x .yui3-slider-rail-cap-right {
47
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule/rail-x-dots.png);
48
 
        }
49
 
        .alt #capsule-dark .yui3-slider-x .yui3-slider-rail,
50
 
        .alt #capsule-dark .yui3-slider-x .yui3-slider-rail-cap-left,
51
 
        .alt #capsule-dark .yui3-slider-x .yui3-slider-rail-cap-right {
52
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule-dark/rail-x-dots.png);
53
 
        }
54
 
        .alt #capsule .yui3-slider-y .yui3-slider-rail,
55
 
        .alt #capsule .yui3-slider-y .yui3-slider-rail-cap-top,
56
 
        .alt #capsule .yui3-slider-y .yui3-slider-rail-cap-bottom {
57
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule/rail-y-dots.png);
58
 
        }
59
 
        .alt #capsule-dark .yui3-slider-y .yui3-slider-rail,
60
 
        .alt #capsule-dark .yui3-slider-y .yui3-slider-rail-cap-top,
61
 
        .alt #capsule-dark .yui3-slider-y .yui3-slider-rail-cap-bottom {
62
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule-dark/rail-y-dots.png);
63
 
        }
64
 
 
65
 
        .alt2 #capsule .yui3-slider-x .yui3-slider-rail,
66
 
        .alt2 #capsule .yui3-slider-x .yui3-slider-rail-cap-left,
67
 
        .alt2 #capsule .yui3-slider-x .yui3-slider-rail-cap-right {
68
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule/rail-x-lines.png);
69
 
        }
70
 
        .alt2 #capsule-dark .yui3-slider-x .yui3-slider-rail,
71
 
        .alt2 #capsule-dark .yui3-slider-x .yui3-slider-rail-cap-left,
72
 
        .alt2 #capsule-dark .yui3-slider-x .yui3-slider-rail-cap-right {
73
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule-dark/rail-x-lines.png);
74
 
        }
75
 
        .alt2 #capsule .yui3-slider-y .yui3-slider-rail,
76
 
        .alt2 #capsule .yui3-slider-y .yui3-slider-rail-cap-top,
77
 
        .alt2 #capsule .yui3-slider-y .yui3-slider-rail-cap-bottom {
78
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule/rail-y-lines.png);
79
 
        }
80
 
        .alt2 #capsule-dark .yui3-slider-y .yui3-slider-rail,
81
 
        .alt2 #capsule-dark .yui3-slider-y .yui3-slider-rail-cap-top,
82
 
        .alt2 #capsule-dark .yui3-slider-y .yui3-slider-rail-cap-bottom {
83
 
            background-image: url(../../../../build/slider-base/assets/skins/capsule-dark/rail-y-lines.png);
84
 
        }
85
 
    </style>
86
 
</head>
87
 
<body>
88
 
<form id="controls" action="">
89
 
    <fieldset>
90
 
        <label>Rails</label>
91
 
        <input type="radio" name="alt_rail" value="" id="orig" checked="checked">
92
 
            <label for="orig"> Original</label>
93
 
        <input type="radio" name="alt_rail" value="alt" id="alt">
94
 
            <label for="alt"> Alternate (#1)</label>
95
 
        <input type="radio" name="alt_rail" value="alt2" id="alt2">
96
 
            <label for="alt2"> Alternate (#2)</label>
97
 
    </fieldset>
98
 
</form>
99
 
 
100
 
<div id="sam"          class="yui3-skin-sam"></div>
101
 
<div id="sam-dark"     class="yui3-skin-sam-dark"></div>
102
 
<div id="round"        class="yui3-skin-round"></div>
103
 
<div id="round-dark"   class="yui3-skin-round-dark"></div>
104
 
<div id="capsule"      class="yui3-skin-capsule"></div>
105
 
<div id="capsule-dark" class="yui3-skin-capsule-dark"></div>
106
 
<div id="audio-light"  class="yui3-skin-audio-light"></div>
107
 
<div id="audio"        class="yui3-skin-audio"></div>
108
 
 
109
 
<script src="../../../../build/yui/yui.js"></script>
110
 
<!--script src="../../../../build/slider/slider.js"></script-->
111
 
<script>
112
 
YUI( {
113
 
    filter: 'raw',
114
 
    skin: {
115
 
        overrides: {
116
 
            slider: [
117
 
                'sam',
118
 
                'sam-dark',
119
 
                'round',
120
 
                'round-dark',
121
 
                'capsule',
122
 
                'capsule-dark',
123
 
                'audio',
124
 
                'audio-light'
125
 
            ]
126
 
        }
127
 
    }
128
 
} ).use( 'slider', function ( Y ) {
129
 
 
130
 
var base = Y.config.base + 'slider/assets/skins',
131
 
    alts = {
132
 
        roundx : base + 'round/thumb-x-grip.png',
133
 
        roundy : base + 'round/thumb-y-grip.png',
134
 
        rounddx: base + 'round-dark/thumb-x-grip.png',
135
 
        rounddy: base + 'round-dark/thumb-y-grip.png',
136
 
 
137
 
        capx  : base + 'capsule/thumb-x-line.png',
138
 
        capy  : base + 'capsule/thumb-y-line.png',
139
 
        capdx  : base + 'capsule-dark/thumb-x-line.png',
140
 
        capdy  : base + 'capsule-dark/thumb-y-line.png'
141
 
    };
142
 
 
143
 
function report( e ) {
144
 
    Y.one( '#val' ).set( 'value', e.newVal );
145
 
}
146
 
 
147
 
new Y.Slider({ axis: 'x' }).render( '#sam' );
148
 
new Y.Slider({ axis: 'x' }).render( '#sam-dark' );
149
 
new Y.Slider({ axis: 'x'/*, thumbUrl: alts.roundy*/ }).render( '#round' );
150
 
new Y.Slider({ axis: 'x'/*, thumbUrl: alts.rounddy*/ }).render( '#round-dark' );
151
 
new Y.Slider({ axis: 'x'/*, thumbUrl: alts.capy*/ }).render( '#capsule' );
152
 
new Y.Slider({ axis: 'x'/*, thumbUrl: alts.capdy*/ }).render( '#capsule-dark' );
153
 
new Y.Slider({ axis: 'x' }).render( '#audio' );
154
 
new Y.Slider({ axis: 'x' }).render( '#audio-light' );
155
 
 
156
 
Y.one( '#controls' ).delegate( 'click', function ( e ) {
157
 
    Y.one( 'body' ).set( 'className', this.get( 'value' ) );
158
 
}, 'input[name=alt_rail]' );
159
 
 
160
 
});
161
 
</script>
162
 
</body>
163
 
</html>