Commit dcbe65ad authored by yPhil's avatar yPhil
Browse files

UI: Yet another feedControls ergonomics paradigm

parent e9a88e8c
{
"name": "petrolette",
"version": "0.4.8",
"version": "0.8.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
......@@ -3,6 +3,20 @@
--ui-color-pri: #BFD8D1;
--ui-color-sec: #FFDC00;
--ui-color-ter: #6E7A94;
--var-header-height: 26px;
--var-controls-width: 150px;
--var-controls-font-size: 18pt;
}
@media screen and (max-width: 700px) {
:root {
--var-header-height: 42px;
--var-controls-width: 75%;
--var-controls-font-size: 26pt;
--var-width: red;
}
}
body {
......@@ -481,9 +495,9 @@ button > i {
.mobHeader {
cursor:grab;
/* min-height:20px; */
height:26px;
height: var(--var-header-height);
max-height:26px;
max-height: var(--var-header-height);
display: flex;
padding:0;
overflow: hidden;
......@@ -505,7 +519,8 @@ button > i {
.mobHeader .feedControls {
position:relative;
left:100px;
width: 200px;
left:160px;
cursor:pointer;
......@@ -526,26 +541,23 @@ button > i {
left:0 !important;
}
.openControls i {
transform: rotate(180deg);
}
.mobHeader .feedControls .controlsToggle {
position:relative;
display: inline-block;
width:24px;
height:26px;
height:var(--var-header-height);
background-color: var(--color-qua) !important;
margin:0;
font-size: var(--var-controls-font-size);
text-align: center;
}
.mobHeader .feedControls .controlsToggle:hover {
background-color: var(--color-qua) !important;
}
.mobHeader .feedControls .controlsToggle:before {
content: '';
position: absolute;
width: 0;
top: 0;
left: 0;
border-bottom: 52px solid var(--bg-color-pri);
border-right: 24px solid var(--color-qua);
background-color: var(--bg-color-pri);
}
.mobHeader .feedControls div {
......
......@@ -81,6 +81,10 @@ li.mobTab,
transform: rotate(-90deg);
}
.rotate.right {
transform: rotate(180deg);
}
.rotate.close {
transform: rotate(-180deg);
}
......
......@@ -9,6 +9,11 @@ MOB.feed = {
.data('title', 'Fold / unfold')
.attr('title', MOB.tr('Fold / unfold'));
var $controlsToggle = $('<i>')
.attr('class', 'icon-left-open rotate')
.data('title', 'Fold / unfold')
.attr('title', MOB.tr('Fold / unfold'));
var $feedSelect = $('<i>')
.attr('class', 'feedControl translate icon-check-empty-1 feedSelect')
.data('title', 'Select this source')
......@@ -84,6 +89,10 @@ MOB.feed = {
$controlsToggleDiv.click(function() {
var $controls = $(this).parent();
var $controlsIcon = $(this).find('i');
// $controlsIcon.removeClass('icon-left-open').addClass('icon-right-open');
// $controlsIcon.toggleClass('right');
$('.feedControls').not($controls).removeClass('openControls');
$controls.toggleClass('openControls');
});
......@@ -123,6 +132,7 @@ MOB.feed = {
$toggleDiv.appendTo($header);
$titleDiv.appendTo($header);
$controlsToggle.appendTo($controlsToggleDiv);
$controlsToggleDiv.appendTo($feedControls);
$selectDiv.appendTo($feedControls);
$deleteDiv.appendTo($feedControls);
......
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