Skip to content

Commit

Permalink
Merge pull request #12 from data-preservation-programs/feat-card-deck…
Browse files Browse the repository at this point in the history 
…-polish

feat: card deck polish
  • Loading branch information
@orvn
orvn authored Jul 12, 2023
2 parents 00fe792 + 3e53a0b commit feb0857
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 87 deletions.
2 changes: 1 addition & 1 deletion components/blocks/card-list-block.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default {
computed: {
cards () {
const sortKey = this.block.sortKey
const sortKey = this.block.sort_key
if (this.block.alphabetize && sortKey) {
return [...this.block.cards].sort((a, b) => {
if (a[sortKey].toLowerCase() < b[sortKey].toLowerCase()) { return -1 }
Expand Down
16 changes: 12 additions & 4 deletions components/deck-of-cards.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
<CircularSlider
:grid-cols="columns"
:reverse-grid="true"
:collection="cards"
:collection="cardList"
:display-options="{ default: 5 }">

<template
v-for="(card, i) in cards"
v-for="(card, i) in cardList"
#[getSlotName(i)]="{ classlist, ctaTabIndex }">
<div
:key="`slide-${i}`"
Expand Down Expand Up @@ -87,6 +87,14 @@ export default {
}
},
computed: {
cardList () {
const cards = this.cards
if (cards.length < 7) { return [...cards, ...cards] }
return cards
}
},
methods: {
getSlotName (index) {
return `column-${index}`
Expand All @@ -105,13 +113,13 @@ export default {
height: toRem(565);
opacity: 1;
transform: translateX(-50%);
transition: transform 250ms ease, opacity 250ms ease;
transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
@include small {
width: toRem(280);
height: toRem(358);
}
&.delay {
transition: transform 250ms ease 250ms, opacity 250ms ease;
transition: transform 500ms ease-in-out 40ms, opacity 500ms ease-in-out;
}
&.animation-slot-3 {
transform: translateX(-50%) translateY(45px) rotate(-4deg);
Expand Down
8 changes: 4 additions & 4 deletions components/section-collaborators.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@
<div class="cta-block">

<div class="text-marquee">
<span class="typeface" v-html="ctatext.marquee_text" />
<span class="typeface" v-html="ctablock.marquee_text" />
</div>

<div class="cta">

<span class="text regular" v-html="ctatext.text" />
<span class="text regular" v-html="ctablock.text" />

<div class="button-wrapper">
<Button :button="{ url: 'https://boards.greenhouse.io/protocollabs/jobs/4864599004' }">
<Button :button="{ url: ctablock.url }">
<ArrowUpRight />
</Button>
</div>
Expand Down Expand Up @@ -96,7 +96,7 @@ export default {
required: false,
default: () => []
},
ctatext: {
ctablock: {
type: Object,
required: false,
default: () => ({})
Expand Down
6 changes: 4 additions & 2 deletions components/site-footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,8 @@ export default {
@include fontWeight_Medium;
line-height: leading(36, 16);
}
&:hover {
&:hover,
&:focus-visible {
scale: 1.125;
}
}
Expand All @@ -229,7 +230,8 @@ export default {
stroke: transparent;
stroke-width: 1px;
}
&:hover {
&:hover,
&:focus-visible {
:deep(path) {
fill: transparent;
stroke: black;
Expand Down
8 changes: 4 additions & 4 deletions components/sliders/circular-slider-a.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,23 +394,23 @@ img {
&.left {
&.position-2,
&.position-3 {
transition: transform 250ms ease, z-index 250ms ease;
transition: transform 500ms ease-in-out 40ms, z-index 500ms ease-in-out 40ms;
}
&.position-4,
&.position-5,
&.position-6 {
transition: transform 250ms ease 250ms, z-index 250ms ease 250ms;
transition: transform 500ms ease-in-out 150ms, z-index 500ms ease-in-out 250ms;
}
}
&.right {
&.position-2,
&.position-3,
&.position-4 {
transition: transform 250ms ease 250ms, z-index 250ms ease 250ms;
transition: transform 500ms ease-in-out 100ms, z-index 500ms ease-in-out 100ms;
}
&.position-5,
&.position-6 {
transition: transform 250ms ease, z-index 250ms ease;
transition: transform 500ms ease-in-out, z-index 500ms ease-in-out;
}
}
}
Expand Down
75 changes: 3 additions & 72 deletions content/core/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,76 +299,6 @@
"name": "DeckOfCards",
"props": {
"cards": [
{
"type": "slider",
"img": "/images/surface-of-the-moon.jpg",
"title": "Implementation of a Third Party KYC (ID Check) for Fil+ Applicants",
"description": "In the Fil+ application process, all application information is public in a GitHub issue in the Fil+ repo. Because all information is public, applicants are only required to use GitHub IDs as a personal identifier in an effort to keep personal information (name, email) from public view (and from potential abuse from scammers who scrape for ID info).",
"ctas": [
{
"type": "text-only",
"text": "READ MORE",
"url": "https://medium.com/filecoin-plus/implementation-of-a-third-party-kyc-id-check-for-fil-applicants-e5e825b1484e",
"theme": "strong"
}
]
},
{
"type": "slider",
"img": "/images/surface-of-the-moon.jpg",
"title": "Retrieval Bot is Live!",
"description": "We are thrilled to announce the launch of our Retrieval Bot on DataCap applications which provides insight into historic retrievability of datasets stored by Fil+ clients.",
"ctas": [
{
"type": "text-only",
"text": "READ MORE",
"url": "https://medium.com/filecoin-plus/retrieval-bot-is-live-ea577b61f7d3",
"theme": "strong"
}
]
},
{
"type": "slider",
"img": "/images/surface-of-the-moon.jpg",
"title": "LDN Label Update — Part 1: Label Consolidation",
"description": "GitHub issue labels have played an essential role in tracking and facilitating the distribution of DataCap for LDN applications in the Fil+ program.",
"ctas": [
{
"type": "text-only",
"text": "READ MORE",
"url": "https://medium.com/filecoin-plus/ldn-label-update-part-1-label-consolidation-ae2691c78702",
"theme": "strong"
}
]
},
{
"type": "slider",
"img": "/images/surface-of-the-moon.jpg",
"title": "Announcing the Quality Phase for Filecoin Plus",
"description": "The Filecoin Plus program has been in operation for over 2 years now, and has recently crossed over 700PiB of data onboarded through verified deals, constituting approximately 5% of total network capacity!",
"ctas": [
{
"type": "text-only",
"text": "READ MORE",
"url": "https://medium.com/filecoin-plus/announcing-the-quality-phase-for-filecoin-plus-2890a9797456",
"theme": "strong"
}
]
},
{
"type": "slider",
"img": "/images/surface-of-the-moon.jpg",
"title": "Fil+ Notary App and GitHub Tooling Metrics Dashboard V0.1",
"description": "I am thrilled to introduce the inaugural version of the Fil+ tooling metrics dashboard.",
"ctas": [
{
"type": "text-only",
"text": "READ MORE",
"url": "https://medium.com/filecoin-plus/fil-notary-app-and-github-tooling-metrics-dashboard-v0-1-2012a9ed961f",
"theme": "strong"
}
]
},
{
"type": "slider",
"img": "/images/surface-of-the-moon.jpg",
Expand Down Expand Up @@ -655,9 +585,10 @@
"/images/eqtylab-logo.svg",
"/images/laudspeaker-logo.svg"
],
"ctatext": {
"ctablock": {
"marquee_text": "WORK WITH US WORK WITH US WORK WITH US WORK WITH US",
"text": "Check out the latest project progress here."
"text": "Check out the latest project progress here.",
"url": "https://github.com/data-preservation-programs"
},
"imageblock": {
"src": "/images/warped-cube.svg"
Expand Down

0 comments on commit feb0857

Please sign in to comment.