diff --git a/docs/projects-item-alternate.html b/docs/projects-item-alternate.html new file mode 100644 index 0000000000000000000000000000000000000000..df2848541336c3e6f45e08fce8f9690e1af2988f --- /dev/null +++ b/docs/projects-item-alternate.html @@ -0,0 +1,327 @@ + + + + + + + + + + + + + Eclipse - The Eclipse Foundation open source community website | The Eclipse Foundation + + + + + + + + + + + + + + + + + + + Skip to main content +
+
+ +
+
+
+
+
+
+ +
+
+ +
+ + +
+
+
+

Sample code used for this page:

+
 <ul class="featured-projects list-inline list" 
+            id="featured-projects"
+            data-template-id="tpl-projects-item-alternate"
+            data-is-static-source="true"
+            data-url="https://eclipse.org/research/project/index.json"></ul>
+          
+ +

Note that you will need to import eclipsefdn.projects.js as follow: + + import 'eclipsefdn-solstice-assets/js/solstice/eclipsefdn.projects.js'

+ + +
+ +
+
+
+
+ +

+ Back to the top +

+ +
+ + + + + + \ No newline at end of file diff --git a/js/solstice/eclipsefdn.projects.js b/js/solstice/eclipsefdn.projects.js index ce8de73e2b9ec70007f0ed3db02b1554f760ffde..a73de38ff8bab1492b026fbe06937a68a59cced2 100644 --- a/js/solstice/eclipsefdn.projects.js +++ b/js/solstice/eclipsefdn.projects.js @@ -14,13 +14,18 @@ import $, { type } from 'jquery'; import Mustache from 'mustache'; import 'jquery-match-height'; -import template from './templates/tpl-projects-item.mustache'; +import defaultTemplate from './templates/tpl-projects-item.mustache'; +import altTemplate from './templates/tpl-projects-item-alternate.mustache'; import "numeral"; import List from 'list.js'; import getProjectsData from "../api/eclipsefdn.projects" -const EclipseFdnProjects = (async () => { +const templates = { + 'tpl-projects-item': defaultTemplate, + 'tpl-projects-item-alternate': altTemplate +} +const EclipseFdnProjects = (async () => { const element = document.querySelector('.featured-projects'); if (!element) { return; @@ -35,6 +40,8 @@ const EclipseFdnProjects = (async () => { ...$(element).data(), }; + const template = templates[options.templateId]; + function fetchCategories() { let elem = document.getElementById('projects-categories'); if (elem !== null) { @@ -76,6 +83,16 @@ const EclipseFdnProjects = (async () => { resultsProjects[key].category = category.toString(); }); + // If alternate template + if (options.templateId === "tpl-projects-item-alternate") { + resultsProjects.forEach((project) => { + project.mainCategory = project.tags[0] || "Other Tools" + + if (project.fundingBodies.length !== 0) + project.fundingBodies = project.fundingBodies.join(', ') + }); + } + const data = { items: resultsProjects, }; diff --git a/js/solstice/templates/tpl-projects-item-alternate.mustache b/js/solstice/templates/tpl-projects-item-alternate.mustache new file mode 100644 index 0000000000000000000000000000000000000000..4bffdac29254fe11751bd71a297067f09374a7b4 --- /dev/null +++ b/js/solstice/templates/tpl-projects-item-alternate.mustache @@ -0,0 +1,20 @@ +{{#items}} +
  • + +
  • +{{/items}} \ No newline at end of file diff --git a/less/_components/quicksilver/featured-projects.less b/less/_components/quicksilver/featured-projects.less index b86db4e8d5b76fbe2a78713fba17143a75e6ff31..9fe029f53ebe07e49b607493cc55417a96612664 100644 --- a/less/_components/quicksilver/featured-projects.less +++ b/less/_components/quicksilver/featured-projects.less @@ -55,3 +55,18 @@ color: #333; } } + +.tpl-projects-alternate { + display: flex; + flex-direction: column; + + .featured-projects-item-content { + padding-top: 0; + } + + .details { + flex-grow: 1; + display: flex; + align-items: flex-end; + } +}