Skip to content
This repository has been archived by the owner on Oct 26, 2024. It is now read-only.

Commit

Permalink
feat: add sponsors and cfp button on jumbotron (#181)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaloPolese
MaloPolese authored Dec 7, 2023
1 parent 87b16f0 commit 935c9f9
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 29 deletions.
18 changes: 14 additions & 4 deletions public/data/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,18 @@
},
"fontColor": "#FFF",
"callToAction": {
"label": "Photos 2023",
"link": "https://photos.app.goo.gl/sfoA93RB1SBML6CY7"
"photos": {
"label": "Photos 2023",
"link": "https://photos.app.goo.gl/sfoA93RB1SBML6CY7"
},
"cfp": {
"label": "CFP 2024",
"link": "https://conference-hall.io/public/event/32IQQ5wYijdJdXrqtYsx"
},
"sponsors": {
"label": "Sponsors",
"anchor": "#partners-block"
}
}
},
"blog": {
Expand Down Expand Up @@ -168,8 +178,8 @@
},
{
"name": "linkedin",
"nickname":"Sunny Tech Event",
"url":"https://www.linkedin.com/company/sunny-tech-event/"
"nickname": "Sunny Tech Event",
"url": "https://www.linkedin.com/company/sunny-tech-event/"
}
],
"share": [
Expand Down
2 changes: 1 addition & 1 deletion src/elements/partners-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export class PartnersBlock extends ReduxMixin(PolymerElement) {
.logo-item {
padding: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
Expand Down
92 changes: 68 additions & 24 deletions src/pages/home-page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
import '../utils/icons';
import { INCLUDE_SITE_TITLE, updateMetadata } from '../utils/metadata';
import { POSITION, scrollToElement } from '../utils/scrolling';
import { PartnersBlock } from '../elements/partners-block';

@customElement('home-page')
export class HomePage extends ReduxMixin(PolymerElement) {
Expand All @@ -44,6 +45,21 @@ export class HomePage extends ReduxMixin(PolymerElement) {
height: 100%;
}
.call-to-action {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
}
.call-to-action a {
flex: 1 0 auto;
}
.call-to-action a paper-button {
min-width: 110px;
width: 100%;
margin: 0;
}
hero-block {
font-size: 24px;
text-align: center;
Expand Down Expand Up @@ -170,20 +186,41 @@ export class HomePage extends ReduxMixin(PolymerElement) {
</div>
<div class="action-buttons" layout horizontal center-justified wrap>
<!-- <a-->
<!-- href="https://www.youtube.com/c/SunnyTechMtp"-->
<!-- target="_blank"-->
<!-- >-->
<!-- <paper-button class="watch-video" on-click="playVideo" primary>-->
<!-- <iron-icon icon="hoverboard:movie"></iron-icon>-->
<!-- [[viewHighlights]]-->
<!-- </paper-button>-->
<!-- </a>-->
<a href$="[[heroSettings.callToAction.link]]" target="_blank" rel="noopener noreferrer">
<paper-button class="buy-button" primary>[[heroSettings.callToAction.label]]</paper-button>
</a>
<!-- <a-->
<!-- href="https://www.youtube.com/c/SunnyTechMtp"-->
<!-- target="_blank"-->
<!-- >-->
<!-- <paper-button class="watch-video" on-click="playVideo" primary>-->
<!-- <iron-icon icon="hoverboard:movie"></iron-icon>-->
<!-- [[viewHighlights]]-->
<!-- </paper-button>-->
<!-- </a>-->
<div class="call-to-action">
<a
href$="[[heroSettings.callToAction.photos.link]]"
target="_blank"
rel="noopener noreferrer"
>
<paper-button class="buy-button" primary
>[[heroSettings.callToAction.photos.label]]</paper-button
>
</a>
<a
href$="[[heroSettings.callToAction.cfp.link]]"
target="_blank"
rel="noopener noreferrer"
>
<paper-button class="buy-button" primary
>[[heroSettings.callToAction.cfp.label]]</paper-button
>
</a>
<a href$="[[heroSettings.callToAction.sponsors.anchor]]">
<paper-button class="buy-button" primary on-click="scrollToSponsors"
>[[heroSettings.callToAction.sponsors.label]]</paper-button
>
</a>
</div>
<!-- <a
href="/schedule"
Expand All @@ -193,10 +230,10 @@ export class HomePage extends ReduxMixin(PolymerElement) {
</paper-button>
</a>
-->
<!-- <paper-button on-click="scrollToTickets" primary invert>-->
<!-- <iron-icon icon="hoverboard:ticket"></iron-icon>-->
<!-- [[buyTicket]]-->
<!-- </paper-button>-->
<!-- <paper-button on-click="scrollToTickets" primary invert>-->
<!-- <iron-icon icon="hoverboard:ticket"></iron-icon>-->
<!-- [[buyTicket]]-->
<!-- </paper-button>-->
</div>
<div class="scroll-down" on-click="scrollNextBlock">
Expand Down Expand Up @@ -267,15 +304,15 @@ export class HomePage extends ReduxMixin(PolymerElement) {
<fork-me-block></fork-me-block>
</template>
<about-block></about-block>
<!-- <about-conference-block></about-conference-block>-->
<!-- <speakers-block></speakers-block>-->
<!-- <about-conference-block></about-conference-block>-->
<!-- <speakers-block></speakers-block>-->
<subscribe-block></subscribe-block>
<!-- <tickets-block id="tickets"></tickets-block>-->
<!-- <tickets-block id="tickets"></tickets-block>-->
<gallery-block></gallery-block>
<about-organizer-block></about-organizer-block>
<!-- <featured-videos></featured-videos>-->
<!-- <latest-posts-block></latest-posts-block>-->
<partners-block></partners-block>
<!-- <featured-videos></featured-videos>-->
<!-- <latest-posts-block></latest-posts-block>-->
<partners-block id="partners-block"></partners-block>
<map-block></map-block>
<footer-block></footer-block>
`;
Expand All @@ -292,6 +329,9 @@ export class HomePage extends ReduxMixin(PolymerElement) {
@query('#hero')
hero!: HeroBlock;

@query('#partners-block')
partnersBlock!: PartnersBlock;

@property({ type: Boolean })
private showForkMeBlock: boolean = false;

Expand All @@ -302,6 +342,10 @@ export class HomePage extends ReduxMixin(PolymerElement) {
});
}

private scrollToSponsors() {
scrollToElement(this.partnersBlock, POSITION.TOP);
}

private scrollToTickets() {
const element = this.$['tickets-block'];
if (element) {
Expand Down

0 comments on commit 935c9f9

Please sign in to comment.