Commit 4fbd2246 authored by yPhil's avatar yPhil
Browse files

UI: Yet another feedControls ergonomics paradigm: New FlexBox WIP

parent 8796f522
......@@ -290,7 +290,7 @@ i.feedIcon {
position:fixed;
right:3vw;
bottom:5vh;
opacity:0.8;
opacity:0.8 ;
}
......@@ -298,3 +298,66 @@ i.feedIcon {
#loadRadial .bar {
border-color: var(--color-qua) !important;
}
div#container {
width: 300px;
height: 50px;
min-width: 250px;
background-color: #aabb00;
margin:50px;
}
div#container > div#test {
height: 100%;
display: flex;
flex-direction: row;
}
div#container > div#test > div {
border: 1px solid red;
background-color: #aaff00;
transition: all 2s;
}
div#container > div#test > div.icon {
flex-grow:0;
flex-shrink:1;
flex-basis:auto;
}
div#container > div#test > div.title {
flex-grow:4;
flex-shrink:1;
flex-basis:auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div#container > div#test > div.toggler {
flex-grow:0;
flex-shrink:0;
flex-basis:auto;
cursor:pointer;
}
div#container > div#test > div.controls {
flex-grow:0;
flex-shrink:0;
flex-basis:0px;
white-space: nowrap;
overflow: hidden;
}
.flexGrow {
flex-grow: 4 !important;
flex-shrink: 1 !important;
flex-basis:200px !important;
}
......@@ -301,7 +301,7 @@ MOB.dialog = {
MOB.dialog.kill($dialog);
});
$dialog.children('p').append(MOB.tr('Really delete this tab? (%1, %2 sources)', $a.text(), $selectedPanel.find('li.feed').length));
$dialog.children('p').append(MOB.tr('Really delete this group? (%1, %2 sources)', $a.text(), $selectedPanel.find('li.feed').length));
}
});
......
......@@ -23,7 +23,7 @@
<link rel="stylesheet" href="/static/css/circle.css">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/grobe-deutschmeister" type="text/css"/>
<!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/grobe-deutschmeister" type="text/css"/> -->
<link rel="stylesheet" href="/bower/fancybox/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="/bower/intro.js/minified/introjs.min.css" />
<!-- <link href="/bower/intro.js/themes/introjs-nassim.css" rel="stylesheet">
......@@ -98,6 +98,13 @@
MOB.dialog.killTab($(this));
});
$('.toggler').click(function() {
var $controls = $(this).next();
console.log('yo! (%s)', $controls.text());
$controls.toggleClass('flexGrow')
});
// INIT
MOB.tab.populate(JSON.parse(MOB.prefs.readConfig('tabs')));
......@@ -151,5 +158,14 @@
<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