← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to www/media/browser/browser.css

  • Committer: mattgiuca
  • Date: 2008-02-03 04:06:38 UTC
  • Revision ID: svn-v3-trunk0:2b9c9e99-6f39-0410-b283-7f802c844ae2:trunk:381
media/browser/listing.js: Replaced table-based layout in file listing with
    div-based. (This was previously more convenient, but a div-based layout
    now makes sense for the fixed page size, and of course is much better
    suited to CSS manipulation).
media/browser/browser.css: Fixed up the inner divs of the file listing. Now
    there is a "middle" div which has a full canvas height (except the top
    headers and status bar). The contents of the file table are now
    overflow-scrolled. This means the outer page will never scroll, only the
    inner file table. Tested and works on both tables that are too small and
    tables that are too big for the canvas. Nice :)

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/media/browser/browser.css
26
26
/* Note: Top-level things are layed out with position: absolute in order to
27
27
 * make sure they fill up the whole canvas. */
28
28
 
29
 
#middle, #middle tbody {
30
 
    width: 100%;
31
 
    vertical-align: top;
32
 
    border-collapse: collapse;
33
 
}
34
 
 
35
 
#sidepanel {
36
 
    width: 300px;
 
29
#middle {
 
30
    /* Fill containing box, but reserve space for status bar */
 
31
    position: absolute;
 
32
    top: 0;
 
33
    /* bottom == #statusbar_outer.height + #statusbar_outer.padding * 2 */
 
34
    bottom: 1.4em;
 
35
    left: 0;
 
36
    right: 0;
37
37
}
38
38
 
39
39
/* TOP BAR */
69
69
/* FILE LISTINGS TABLE */
70
70
 
71
71
#filetable {
 
72
    /* Position to fill its containing box, except the right 300px, for
 
73
     * sidepanel. */
 
74
    position: absolute;
 
75
    left: 0;
 
76
    top: 0;
 
77
    bottom: 0;
 
78
    right: 300px;
72
79
    border-collapse: collapse;
73
80
    border-right: 1px solid #888;
74
81
    padding: 0;
 
82
    /* Present a vertical scroll bar in case there are too many files.
 
83
     * This ensures the overall page will never scroll (which causes huge
 
84
     * problems for everything being absolutely positioned). */
 
85
    overflow: scroll;
 
86
    /* Some browsers support overflow-x and overflow-y. In this case, use
 
87
     * overflow-x: auto to disable the horizontal scroll bar.
 
88
     * (If unsupported this will simply fall back to a harmless but annoying
 
89
     * horizontal scroll bar).
 
90
     */
 
91
    overflow-x: auto;
75
92
}
76
93
 
77
94
th {
154
171
 
155
172
/* SIDE PANEL */
156
173
 
157
 
#sidepanel {
 
174
#sidepanel_outer {
 
175
    /* Position this full canvas height, page right */
 
176
    position: absolute;
 
177
    top: 0;
 
178
    bottom: 0;
 
179
    right: 0;
 
180
    width: 300px;
158
181
    border-left: 1px solid #888;
159
182
    border-top: 1px solid #888;
160
183
    background-color: #ccc;
161
184
    font-size: 0.8em;
 
185
    text-align: center;
 
186
    /* Cut off the bottom if it doesn't fit on the page for some reason.
 
187
     * This ensures the overall page will never scroll (which causes huge
 
188
     * problems for everything being absolutely positioned). */
 
189
    overflow: hidden;
 
190
}
 
191
#sidepanel {
162
192
    padding: 8px;
163
 
    text-align: center;
164
193
}
165
194
 
166
195
#sidepanel p, #sidepanel h2, #sidepanel h3 {
178
207
 
179
208
/* STATUS BAR */
180
209
 
181
 
#statusbar {
 
210
#statusbar_outer {
182
211
    /* Get this to the bottom of the screen */
183
212
    position: absolute;
184
213
    left: 0;
186
215
    bottom: 0;
187
216
    background-color: #aaa;
188
217
    border-top: 1px solid #888;
 
218
    padding: 0.2em;
 
219
    height: 1em;        /* Mandate an exact height */
 
220
}
 
221
/* Nested div so the font size doesn't affect our outer calculations */
 
222
#statusbar {
189
223
    font-size: 0.8em;
190
 
    padding: 2px;
191
224
}
192
225
 
193
226
/* TEXT EDITOR */