Commit 0cdefa7a authored by yPhil's avatar yPhil
Browse files

UI: Yet another feedControls ergonomics paradigm: New FlexBox concept OK

parent 4fbd2246
......@@ -501,44 +501,59 @@ button > i {
max-height: var(--var-header-height);
display: flex;
align-content: stretch;
/* align-content: stretch; */
padding:0;
overflow: hidden;
}
.flexGrow {
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: 100px !important;
}
.open {
transform: rotate(180deg);
}
.mobHeader > div {
flex: 0 0 auto;
transition: all 700ms;
}
.mobHeader .feedToggle {
flex: 0 0 auto;
.mobHeader > .feedToggle {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin: .2rem;
}
.mobHeader .feedTitle {
width:100%;
flex: 3 3 auto;
margin: .2rem;
.mobHeader > .feedTitle {
flex-grow: 4;
flex-shrink: 1;
flex-basis: auto;
}
.mobHeader .feedControls {
position:relative;
width: 200px;
left:160px;
.mobHeader > .myControlsToggleDiv {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
cursor: pointer;
font-size: 18pt;
}
.mobHeader > .feedControls {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0px;
white-space: nowrap;
overflow: hidden;
cursor:pointer;
display: flex;
text-align:right;
background-color: var(--color-qua) !important;
/* padding:.2rem; */
/* min-width:80px; */
/* align-items:flex-start; */
/* align-content:flex-start; */
/* justify-content: flex-end; */
/* padding:0; */
transition: left 200ms ease 0ms;
}
.mobHeader .feedControls .controlsToggle:hover {
......
......@@ -355,9 +355,3 @@ div#container > div#test > div.controls {
overflow: hidden;
}
.flexGrow {
flex-grow: 4 !important;
flex-shrink: 1 !important;
flex-basis:200px !important;
}
......@@ -79,6 +79,8 @@ MOB.feed = {
var $header = $('<div class="mobHeader ui-widget-header">');
var $toggleDiv = $('<div class="feedToggle">');
var $controlsToggleDiv = $('<div class="controlsToggle">');
var $myControlsToggleDiv = $('<div class="myControlsToggleDiv">');
var $selectDiv = $('<div class="feedSelect">').button();
var $deleteDiv = $('<div class="feedDelete">').button();
var $titleDiv = $('<div class="feedTitle truncate" data-content="">');
......@@ -97,6 +99,18 @@ MOB.feed = {
$controls.toggleClass('openControls');
});
$myControlsToggleDiv.click(function() {
var $controls = $(this).next();
$('.feedControls').not($controls).removeClass('flexGrow');
$controls.toggleClass('flexGrow');
$(this).toggleClass('open');
});
$header.hover (
function() {
// $(this).find('.feedControls').slideDown('fast');
......@@ -132,8 +146,11 @@ MOB.feed = {
$toggleDiv.appendTo($header);
$titleDiv.appendTo($header);
$controlsToggle.appendTo($controlsToggleDiv);
$controlsToggleDiv.appendTo($feedControls);
$controlsToggle.appendTo($myControlsToggleDiv);
$myControlsToggleDiv.appendTo($header);
// $controlsToggleDiv.appendTo($feedControls);
$selectDiv.appendTo($feedControls);
$deleteDiv.appendTo($feedControls);
$prefsDiv.appendTo($feedControls);
......
......@@ -98,12 +98,6 @@
MOB.dialog.killTab($(this));
});
$('.toggler').click(function() {
var $controls = $(this).next();
console.log('yo! (%s)', $controls.text());
$controls.toggleClass('flexGrow')
});
// INIT
......@@ -158,14 +152,5 @@
<img src="/static/images/feed-toggle-triangle-000.png" width="1" height="1" alt="Image 02" />
</div>
<div id="container">
<div id="test">
<div class="icon">i</div>
<div class="title">title OMG this is a ducking looooong title</div>
<div class="toggler"><</div>
<div class="controls">controls</div>
</div>
</div>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment