Using this comment as a way to keep track of the things I have been able to fix and how and the things that need to be addressed. It will be edited as needed.
- The timeline showing up at all can be fixed just by changing the selector to
.dashboard__contentfrom.progress-and-forecastin the functionplace_timeline - There are a number of CSS issues that need to be addressed after the timeline is back. Screenshot of current state included for reference.
margin-bottom: var(--spacing-xloose, 32px);should be set instead ofmargin-bottom: 0;at the very least, and perhaps the thin border is no longer needed. I am actually at a loss for why the x- and y-labels are being cut off, no tinkering I do with the CSS seems to be affecting that. There’s also alignment issues in the top bar. - Any icons still using font-awesome and
<i>elements should be replaced with SVGs. For ease this can be accomplished using the Custom Icons library script developed by Hubbit.
Code using the Custom Icons library to replace font awesome icons
There is one downside with the current version of the library and one downside to using SVGs. First, the library currently only allows for easily adding custom icons that consist of only a single <path>. To address this I will make a merge request for an additional function or overload that allows the end user to supply the entire SVG content. Second, SVGElement does not have a title attribute. You need to use the <title> element in the SVG. This doesn’t work for the Custom Icons library script as it needs to be generic, that is, it should not inject SVGs, which can be used by any script, that have a title specific to one script. This means that our script should not also go and modify the <symbol> with a title specific to the script. As far as I can tell the easiest approach is a wrapper element on the SVG icon with a title attribute, but this introduces more complications. For now, I am leaving the titles off in my fix.
Icons require:
// @require https://greasyfork.org/scripts/489759-wk-custom-icons/code/CustomIcons.js?version=1417568
The following code is just hotfix quality. A better written solution should be sought.
I put this right after the Open Framework check and before the Open Framework includes:
//===================================================================
// Set up the Custom Icons needed for the script.
//-------------------------------------------------------------------
// Get the current version of the Custom Icons library that is assigned to the window
const Icons = window.unsafeWindow?.Icons ?? window.Icons;
if (!Icons.isNewerThan('0.4.4')) {
console.warn('Ultimate Timeline requires Custom Icons library newer than 0.4.4, currently retrieved version is: ' + Icons.scriptVersion);
return;
}
// Add a custom icon that does not use only a single <path> element in the svg
let customSVGSprites = document.getElementById("customSVGSprites__" + Icons.iconsVersion);
if (!customSVGSprites) {
console.error("There was an issue retrieving the Custom Icons script's SVG element.");
return;
}
// UIcons by Flaticon - https://www.flaticon.com/uicons
let idBase = "custom-icon-v" + Icons.iconsVersion + "__";
let svgContent = `
<g xmlns="http://www.w3.org/2000/svg">
<path d="M66.074,228.731C81.577,123.379,179.549,50.542,284.901,66.045c35.944,5.289,69.662,20.626,97.27,44.244l-24.853,24.853 c-8.33,8.332-8.328,21.84,0.005,30.17c3.999,3.998,9.423,6.245,15.078,6.246h97.835c11.782,0,21.333-9.551,21.333-21.333V52.39 c-0.003-11.782-9.556-21.331-21.338-21.329c-5.655,0.001-11.079,2.248-15.078,6.246L427.418,65.04 C321.658-29.235,159.497-19.925,65.222,85.835c-33.399,37.467-55.073,83.909-62.337,133.573 c-2.864,17.607,9.087,34.202,26.693,37.066c1.586,0.258,3.188,0.397,4.795,0.417C50.481,256.717,64.002,244.706,66.074,228.731z"/>
<path d="M479.429,256.891c-16.108,0.174-29.629,12.185-31.701,28.16C432.225,390.403,334.253,463.24,228.901,447.738 c-35.944-5.289-69.662-20.626-97.27-44.244l24.853-24.853c8.33-8.332,8.328-21.84-0.005-30.17 c-3.999-3.998-9.423-6.245-15.078-6.246H43.568c-11.782,0-21.333,9.551-21.333,21.333v97.835 c0.003,11.782,9.556,21.331,21.338,21.329c5.655-0.001,11.079-2.248,15.078-6.246l27.733-27.733 c105.735,94.285,267.884,85.004,362.17-20.732c33.417-37.475,55.101-83.933,62.363-133.615 c2.876-17.605-9.064-34.208-26.668-37.084C482.655,257.051,481.044,256.91,479.429,256.891z"/>
</g>`;
customSVGSprites.innerHTML += `<symbol id="${idBase}refresh" viewbox="0 0 513.806 513.806">${svgContent}</symbol>`;
Then later on:
//===================================================================
// Top-level HTML for the script.
//-------------------------------------------------------------------
let iconObject = {
chevronUp: Icons.customIcon('chevron-up'),
chevronDown: Icons.customIcon('chevron-down'),
refresh: Icons.customIcon('refresh'),
gear: Icons.customIcon('settings'),
};
iconObject.chevronUp.classList.add('link', 'open', 'noselect');
iconObject.chevronDown.classList.add('link', 'minimize', 'noselect');
iconObject.refresh.classList.add('link', 'refresh', 'noselect');
iconObject.gear.classList.add('link', 'settings', 'noselect');
// If only the following worked...
// iconObject.chevronUp.title = 'Open the timeline';
// iconObject.chevronDown.title = 'Minimize the timeline';
// iconObject.refresh.title = 'Refresh';
// iconObject.gear.title = 'Change timeline settings';
var timeline_html =
'<section id="timeline">'+
' <h4 class="no_min">Reviews Timeline</h4>'+
` ${iconObject.chevronUp.outerHTML}`+
` ${iconObject.chevronDown.outerHTML}`+
` ${iconObject.refresh.outerHTML}`+
` ${iconObject.gear.outerHTML}`+
' <span class="bar_style hidden"><label>Bar Style: </label><select>'+
' <option name="count">Review Count</option>'+
' <option name="item_type">Item Type</option>'+
' <option name="srs_stage">SRS Level</option>'+
' <option name="level">Level</option>'+
' </select></span>'+
' <form class="range_form" class="hidden"><label><span class="range_reviews">0</span> reviews in <span class="range_days">3 days</span> <input class="range_input" type="range" min="0.25" max="7" value="3" step="0.25" name="range_input"></label></form><br clear="all" class="no_min">'+
' <div class="graph_wrap">'+
' <div class="review_info hidden"><div class="inner"></div></div>'+
' <div class="graph_panel"></div>'+
' </div>'+
'</section>';