Commit 3dc8770d authored by yPhil's avatar yPhil

Feed: Icons (mobile) margins

parent be137f2e
......@@ -12,10 +12,10 @@
--var-header-height: 26px;
--var-controls-width: 150px;
--var-controls-font-size: 16pt;
--var-controls-toggle-size: 18px;
--var-controls-toggle-size: 22px;
--var-controls-flex-basis: 100px;
--dialog-flex-direction: row;
--var-controls-toggle-margin: -2px 0 0 -2px;
--handle-flex-shrink: 0;
--handle-visibility: visible;
......@@ -35,7 +35,8 @@
--var-header-height: 42px;
--var-controls-width: 75%;
--var-controls-font-size: 29pt;
--var-controls-toggle-size: 36px;
--var-controls-toggle-size: 42px;
--var-controls-toggle-margin: -2px 0 0 -2px;
--var-controls-flex-basis: 60px;
--dialog-flex-direction: column;
......@@ -217,7 +218,6 @@ li.feedItem.error > strong.key {
.rotate {
display:inline-block;
cursor:pointer;
transition: all .2s linear;
}
......@@ -399,7 +399,7 @@ div#sideMenu,
}
i.tabCloser {
cursor:pointer;
cursor: pointer;
display: none;
font-size: .7em;
position:absolute;
......@@ -858,35 +858,6 @@ li.feed {
transform: rotate(180deg);
}
.mobHeader > .feedToggle {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin: .2rem;
width : var(--var-controls-toggle-size);
}
/* .icon-down-dir { */
/* margin: 0; */
/* font-size:24pt; */
/* } */
.feedIcon {
/* font-size: 24pt; */
text-align: center;
width: var(--var-controls-toggle-size);
height: var(--var-controls-toggle-size);
background-size: var(--var-controls-toggle-size);
/* background-image: url("/static/images/feed-generic-rss.png"); */
background-repeat: no-repeat;
}
.icon-rss-squared {
color: var(--ui-color-rss);
}
.tabSort .ui-sortable-placeholder {
visibility: visible !important;
border: 3px dashed var(--ui-color-sec) !important;
......@@ -935,16 +906,44 @@ li.feed {
margin: 0 2px 0 0;
}
.mobHeader > .feedToggle,
.mobHeader .feedControls div {
text-align: center;
}
.mobHeader .feedControls div.collapsible {
display:none;
}
.feedControl {
cursor:pointer;
cursor: pointer;
font-size: var(--var-controls-font-size);
margin: 0 0 0 2px;
}
.mobHeader > .feedToggle {
margin: 2px;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
background-repeat: no-repeat;
/* background-size: var(--var-controls-toggle-size) var(--var-controls-toggle-size); */
background-size: cover;
/* height: var(--var-controls-toggle-size); */
/* width: var(--var-controls-toggle-size); */
/* height: var(--var-controls-toggle-size); */
min-width: var(--var-controls-toggle-size) !important;
}
.mobHeader > .feedToggle i {
margin: var(--var-controls-toggle-margin);
}
.icon-rss-squared {
color: var(--ui-color-rss);
}
#newTabButton {
background-color: var(--color-qua);
text-align: center;
......@@ -1018,10 +1017,6 @@ li.feed {
transition: all .1s ease;
}
.feedToggleArrow {
background-image: var(--icon-feed-toggle-arrow) !important;;
}
.mobHeader > .feedHandle:hover {
border-color: var(--ui-color-sec);
}
......@@ -1120,7 +1115,7 @@ div.introjs-helperLayer {
.topnav > div.menuBarItem {
color: var(--ui-color-pri);
cursor:pointer;
cursor: pointer;
float: left;
margin: 0;
min-width: 60px;
......
......@@ -11,5 +11,4 @@
--color-danger: #660000;
--color-link: #3C4440;
--color-link-visited: #B0C4DE;
--icon-feed-toggle-arrow: url("/static/images/feed-toggle-triangle-000.png");
}
......@@ -11,5 +11,4 @@
--color-qui: #B0C4DE; /* visited links */
--color-danger: #660000;
--color-link: #ffffff;
--icon-feed-toggle-arrow: url("/static/images/feed-toggle-triangle-fff.png");
}
......@@ -4,8 +4,8 @@ PTL.feed = {
var feedIndex = $('#tabs').find('.feed').length;
var $feedToggle = $('<i>')
.attr('class', 'feedIcon icon-rss-squared rotate translate')
var $feedIcon = $('<i>')
.attr('class', 'feedControl feedIcon icon-rss-squared rotate translate')
.data('title', 'Fold / unfold this source (%1)', url)
.attr('title', PTL.tr('Fold / unfold this source (%1)', url));
......@@ -36,7 +36,7 @@ PTL.feed = {
.data('type', type)
.data('limit', limit);
$feedToggle.click(function() {
$feedIcon.click(function() {
$(this).toggleClass('down');
$(this).parent().parent().parent().children('div.feedBody').slideToggle(200);
});
......@@ -79,7 +79,7 @@ PTL.feed = {
var $header = $('<div>')
.attr('class', 'mobHeader');
var $toggleDiv = $('<div>')
var $feedToggle = $('<div>')
.attr('class', 'feedToggle');
var $feedHandle = $('<div>')
......@@ -107,7 +107,7 @@ PTL.feed = {
var $reloadDiv = $('<div class="reload" title="Click to reload ' + url + '">');
$feedToggle.appendTo($toggleDiv);
$feedIcon.appendTo($feedToggle);
$feedControls.hover (
function() {
......@@ -124,24 +124,24 @@ PTL.feed = {
$feedToggle.css('background-image', 'none');
$feedToggle.addClass('icon-down-big');
$feedToggle.removeClass('icon-rss-squared');
$feedIcon.addClass('icon-down-big');
$feedIcon.removeClass('icon-rss-squared');
$(this).data('img', iconImg);
},
function() {
$feedToggle.removeClass('icon-down-big');
$feedIcon.removeClass('icon-down-big');
// $feedToggle.css('background-image', iconImg);
// $feedIcon.css('background-image', iconImg);
console.log('iconImg: ', $(this).data('img'));
if ($(this).data('img') !== 'none') {
$feedToggle.css('background-image', $(this).data('img'));
} else {
$feedToggle.addClass('icon-rss-squared');
$feedIcon.addClass('icon-rss-squared');
}
});
......@@ -161,7 +161,7 @@ PTL.feed = {
$feedPrefs.appendTo($prefsDiv);
$feedReload.appendTo($reloadDiv);
$toggleDiv.appendTo($header);
$feedToggle.appendTo($header);
$feedHandle.appendTo($header);
......@@ -199,6 +199,7 @@ PTL.feed = {
feedUrl = $dataStore.data('url'),
feedType = $dataStore.data('type'),
feedLimit = $dataStore.data('limit'),
$feedToggle = $feed.find('.feedToggle'),
$feedIcon = $feed.find('.feedToggle > i');
var l = PTL.utilities.getLocation(feedUrl),
......@@ -233,14 +234,9 @@ PTL.feed = {
timeout: 2000
}, function(icon) {
if ( !icon || icon.length === 0) {
console.log('generic! ', feedHost);
icon = '/static/images/feed-generic-rss.png';
}
}).done(function(icon) {
$feedIcon.css('background-image','url("' + icon + '")');
$feedToggle.css('background-image','url("' + icon + '")');
$feedIcon.removeClass('icon-rss-squared');
$header.data('img',icon);
......@@ -249,13 +245,13 @@ PTL.feed = {
img.src = icon;
img.onerror = function() {
console.log('onerror generic! ', feedHost);
$feedIcon.addClass('icon-rss-squared');
$feedIcon.css('background-image', 'none');
$feedToggle.css('background-image', 'none');
};
}).fail(function() {
$feedIcon.css('background-image','url("/static/images/feed-generic-rss.png")');
$feedIcon.addClass('icon-rss-squared');
$feedToggle.css('background-image', 'none');
});
$.get("/feed", {
......@@ -385,7 +381,7 @@ PTL.feed = {
imageUrl = item.image.url;
}
if (item.enclosures[0]) {
if (typeof item.enclosures[0] !== 'undefined' && item.enclosures[0].url) {
imageUrl = item.enclosures[0].url;
......
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