Skip to content
This repository was archived by the owner on Mar 26, 2022. It is now read-only.

Update featured story carousel #188

Merged
merged 5 commits into from
Nov 25, 2021
Merged

Update featured story carousel #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
03dd8d6
Update featured story carousel
ericpoirier Nov 18, 2021
abcb2f2
Improve mobile layout
ericpoirier Nov 18, 2021
221bbe4
Update styles version
ericpoirier Nov 18, 2021
c542d34
Add p tag for carousel text
ericpoirier Nov 18, 2021
4b9d735
Update button styles in carousel
ericpoirier Nov 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions config.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ pluralizeListTitles = false
seo_title_suffix = " | The Eclipse Foundation"
keywords = ["Cloud developer tools", "Cloud-based developer tools", "Cloud native applications","Open source", "Vendor-neutral", "Multi-language support", "Extensions", "Marketplaces", "Developer workspace", "In-browser IDE", "Building", "Testing", "Debugging", "Industry collaboration"]
logo = "images/ecdtools/ecdtools-logo.svg"
styles = "css/styles.css?v1.1"
styles = "css/styles.css?v1.2"
favicon = "images/ecdtools/favicon/favicon.ico"
share_img = "images/ecdtools/ecdtools-social-share.png"
gcse = ""
js = "js/solstice.js"
js = "js/solstice.js?v1.0"
header_wrapper_class = " featured-section-darken"
logo_width = "250"
header_left_classes = "col-sm-7"
Expand Down
9 changes: 8 additions & 1 deletion content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,14 @@ container: "container-fluid"
header_wrapper_class: "featured-jumbotron-home"
---
{{< home/powered-by >}}
{{< home/highlights >}}

{{< home/highlights
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a component that we would want to re-use on other sites?
If so, we should contribute to the base theme as I did with the search page: https://gitlab.eclipse.org/eclipsefdn/it/webdev/hugo-solstice-theme/-/merge_requests/246

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I'll try to make that as generic as possible.

This is a featured story block that is pulling multiple items. I could create a shortcode called "featured-story-multiple" on hugo theme. I don't think we should modify the existing featured-story shortcode since the html is not the same in the 2 cases.

What do you think?

id="featured-story-container"
publishTarget="ecd_tools"
templateId="featured-story-custom"
count="5"
templatePath="/js/templates/featured-story-custom.mustache" >}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would try to stay consistent with your naming conversation. You are calling this home/highlights but the template is featured-story-custom.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree we need to be consistent. I'll rename the template based on what the shortcode will be named.


{{< home/projects highlight="ecd.openvsx:ecd.theia:ecd.jkube">}}
{{< home/whats-new >}}
{{< home/stats >}}
Expand Down
30 changes: 22 additions & 8 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,27 @@ import './src/eclipseApi'
import 'jquery-parallax.js/parallax.min.js'
import './src/parallax'

const solsticeSliderHome = () => {
var owl = $('.solstice-slider-home');
owl.owlCarousel({
items:1,
autoplay:true,
autoplayTimeout:6000,
autoplayHoverPause:true,
autoplaySpeed: 2000,
loop:true,
});
}

var owl = $('.solstice-slider-home');
owl.owlCarousel({
items:1,
autoplay:true,
autoplayTimeout:6000,
autoplayHoverPause:true,
autoplaySpeed: 2000,
loop:true,
$(window).on("load", function() {
solsticeSliderHome();
});



$("body").on("shown.ef.featured_story", function(e) {
var owl = $('.solstice-slider-home');
owl.trigger('destroy.owl.carousel');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you trigger a destroy and refresh event. I feel like we are doing something wrong here. I don't really understand.

Adding comments in your code would help us understand if this is really needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok i'll add some comments in there.

The destroy and refresh here helps because owl carousel needs to be updated after the items have been added to the container div with ajax.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about you try to load the data before initializing owl?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would make more sense, I'll try that.

solsticeSliderHome();
owl.trigger('refresh.owl.carousel');
});
3 changes: 3 additions & 0 deletions js/src/eclipseApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ const EclipseApi = (function($, document) {
$("#event-list-container").eclipseFdnApi({
type: "filteredEvents"
});
$("#featured-story-custom").eclipseFdnApi({
type: "featuredStory"
});
})(jQuery, document);

export default EclipseApi;
26 changes: 26 additions & 0 deletions js/templates/featured-story-custom.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{{#featuredStory}}
<div class="container">
<div class="item">
<div class="row">
{{ #image }}
<div class="col-sm-12 match-height-item-by-row vertical-align-container">
<div>
<img alt="{{ title }}" class="featured-section-webinar-series-1-img" src="{{ image }}">
</div>
</div>
{{ /image }}
<div class="col-sm-12{{^image}} col-sm-offset-6 text-center{{/image}} match-height-item-by-row vertical-align-container">
<div>
<h2 class="webinar-series-1-title">{{ title }}</h2>
<p>{{ body }}</p>
</div>
</div>
</div>
<ul class="list-inline text-center margin-top-20">
{{#links}}
<li><a class="btn btn-white" href="{{ url }}">{{ title }}</a></li>
{{/links}}
</ul>
</div>
</div>
{{/featuredStory}}
43 changes: 16 additions & 27 deletions layouts/shortcodes/home/highlights.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,22 @@

SPDX-License-Identifier: EPL-2.0
-->
{{ $id := .Get "id" | default "featured-story-container" }}
{{ $templateId := .Get "templateId" }}
{{ $templatePath := .Get "templatePath" }}
{{ $publishTarget := .Get "publishTarget" }}
{{ $count := .Get "count" }}
{{ if and $templateId $templatePath }}
{{ .Page.Scratch.SetInMap "mustache-templates" $templateId $templatePath }}
{{ end }}

<div id="webinar-series-1" class="row featured-section featured-section-webinar-series-1">
<div class="container">

<div class="owl-carousel owl-theme solstice-slider-home" data-slider-lg-count="1" data-slider-md-count="1" data-slider-sm-count="1">
{{ range $.Site.Data.highlights.items }}
<div class="item">
<div class="row">
<div class="col-sm-12 match-height-item-by-row vertical-align-container">
<div>
<img alt="{{.title}}" class="featured-section-webinar-series-1-img" src="{{.image}}">
</div>
</div>
<div class="col-sm-12 match-height-item-by-row vertical-align-container">
<div>
<h2 class="webinar-series-1-title">{{.title | safeHTML }}</h2>
{{ .body | safeHTML }}
</div>
</div>
</div>
<ul class="list-inline text-center margin-top-20">
{{ range .links }}
<li><a class="btn btn-white" href="{{ .url }}">{{ .text }}</a></li>
{{ end }}
</ul>
</div>
{{ end }}
<div class="row featured-section eclipsefdn-featured-story featured-story"
id="{{ $id }}"
data-template-id="{{ $templateId }}"
data-publish-target="{{ $publishTarget }}"
data-count="{{ $count }}">

<div class="featured-container owl-carousel owl-theme solstice-slider-home" data-slider-lg-count="1" data-slider-md-count="1" data-slider-sm-count="1">
</div>
</div>

</div>
13 changes: 9 additions & 4 deletions less/_components/homepage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,15 @@
padding:0!important;
}

.featured-section-webinar-series-1 {
.eclipsefdn-featured-story {
background-image:url(../images/webinar-series-1-bg.jpg);
background-size: cover;
color:@white;
.btn {
width:200px;
padding:8px 35px;
margin-top: 10px;
text-transform: uppercase;
}
h2{
font-size:28px;
Expand All @@ -93,9 +94,8 @@
h2, h3 {
color:@white;
font-weight:400;
text-align: center;
@media (min-width: @screen-xs-min) {
text-align: left;
@media (max-width: @screen-xs-max) {
text-align: center;
}
}
img.featured-section-webinar-series-1-img {
Expand All @@ -106,6 +106,11 @@
width: fit-content;
margin: 0 auto;
}
@media (max-width: @screen-xs-max) {
max-height: 200px;
width: inherit;
max-width: 90%;
}
}
p {
font-size:18px;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
},
"dependencies": {
"core-js": "^3.8.2",
"eclipsefdn-hugo-solstice-theme": "0.0.132",
"eclipsefdn-hugo-solstice-theme": "0.0.133",
"jquery-parallax.js": "^1.5.0",
"js-yaml": "^3.13.1",
"json-minify": "^1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion static/documents/ecdtools.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:planet="http://planet.intertwingly.net/" xmlns:indexing="urn:atom-extension:indexing" indexing:index="no"><access:restriction xmlns:access="http://www.bloglines.com/about/specs/fac-1.0" relationship="deny"/>
<title>Planet Eclipse</title>
<updated>2021-11-10T18:39:23Z</updated>
<updated>2021-11-18T16:24:46Z</updated>
<generator uri="http://intertwingly.net/code/venus/">Venus</generator>
<author>
<name>Planet Eclipse Admins</name>
Expand Down
Loading