/* ========== */
/* = Panels = */
/* ========== */
+.panel-wrap {
+ position: relative;
+ overflow: hidden;
+}
+
#left-panel-wrap {
float: left;
width: 8px;
+}
+
+
+/* Toolbars with select box to change panel contents*/
+.panel-toolbar {
+ height: 20px;
+ padding: 0 0 2px 0;
+ border-top: 1px solid #AAA;
+ border-bottom: 1px solid #AAA;
+ font-size: 12px;
+ line-height: 20px;
+ background-color: #DDD;
+ white-space: nowrap;
overflow: hidden;
}
-#right-panel-wrap {
-
+.panel-toolbar label {
+ display: block;
+ float: left;
+ margin: 0 10px 0 2px;
}
/* Slider between panels */
// ========================
function resizePanels() {
$('.panel').height($(window).height() - $('.panel').position().top);
- $('#right-panel-wrap').width($(window).width() - $('#right-panel-wrap').position().left);
+ $('#right-panel-wrap').width($(window).width() - $('#left-panel-wrap').outerWidth());
}
$(window).resize(function() {
<div id="left-panel-wrap" class="panel-wrap">
<div id="left-panel" class="panel">
<div id="slider" style="float: right"></div>
+ <div id="left-panel-toolbar" class="panel-toolbar">
+ <label for="select-left-panel">Lewy panel:</label>
+ <select name="select-left-panel" id="select-left-panel">
+ <option value="panel1">Panel 1</option>
+ <option value="panel2">Panel 2</option>
+ </select>
+ </div>
</div>
</div>
<div id="right-panel-wrap" class="panel-wrap">
<div id="right-panel" class="panel">
+ <div id="right-panel-toolbar" class="panel-toolbar">
+ <label for="select-right-panel">Prawy panel:</label>
+ <select name="select-right-panel" id="select-right-panel">
+ <option value="panel1">Panel 1</option>
+ <option value="panel2">Panel 2</option>
+ </select>
+ </div>
{# <textarea id="id_text" name="text" width="480px">{{ form.text.field.initial }}</textarea> #}
</div>
</div>