Skip to content

Commit

Permalink
add new buttons style
Browse files Browse the repository at this point in the history
  • Loading branch information
@bogdaniculae
bogdaniculae committed Oct 1, 2024
1 parent 127aac9 commit 176e391
Show file tree
Hide file tree
Showing 26 changed files with 504 additions and 95 deletions.
18 changes: 17 additions & 1 deletion src/Experience/Components/ConfirmationScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,23 @@ export default class ConfirmationScreen {
<h1 class="text-2xl tv:text-3xl font-bold text-center mb-4">${instance.stepData.details.title}</h1>
${instance.stepData.details.prompts ? `<p>${instance.stepData.details.prompts[0].prompt}</p>` : ''}
${instance.data.cs_image ? `<div class="aspect-video max-w-[600px] mt-8 mx-auto">${instance.getDomElement(instance.data.cs_image)}</div>` : ''}
${instance.data.cs_button !== '' ? `<div class="flex justify-center mt-8"><button class="button button-rectangle-wide">${instance.data.cs_button}</button></div>` : ''}
${
instance.data.cs_button !== ''
? `<div class="flex justify-center mt-8">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${instance.data.cs_button}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</div>`
: ''
}
</div>
</div>`
)
Expand Down
26 changes: 24 additions & 2 deletions src/Experience/Components/WaitingScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,30 @@ export default class WaitingScreen {
)
const form = _gl.elementFromHtml(
`<form id="childrenNames" class="absolute bottom-6 left-1/2 -translate-x-1/2">
<input placeholder="${_s.waitingScreen.inputPlaceholder}" />
<button type="submit" class="button button-rectangle-wide">${_s.waitingScreen.submit}</button>
<div class="input input-grid mr-2">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">
<input placeholder="${_s.waitingScreen.inputPlaceholder}" />
</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</div>
<button type="submit" class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${_s.waitingScreen.submit}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</form>`
)

Expand Down
14 changes: 12 additions & 2 deletions src/Experience/Utils/Notification.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,18 @@ export default class Notification {
<div class="fixed inset-0 -z-10 bg-bke-darkpurple/70"></div>
<div class="p-8 bg-white flex items-center">
<p class="text-xl text-bke-darkpurple w-[320px]">${text}</p>
<button class="button button-rectangle-wide" aria-label="close alert">
<svg class="cion"><use href="#xmark-large-solid" fill="currentColor"></use></svg>
<button class="button-grid" aria-label="close alert">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">
<svg class="cion"><use href="#xmark-large-solid" fill="currentColor"></use></svg>
</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</div>
`
Expand Down
69 changes: 60 additions & 9 deletions src/Experience/World/World.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,18 @@ export default class World {
setCategoryHtml(category) {
const categoryBtn = _gl.elementFromHtml(
`<li><button class="category button button-rectangle-wide uppercase" data-slug="${category.slug}">${category.name}</button></li>`
<button class="category button-grid uppercase" data-slug="${category.slug}">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${category.name}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</li>`
)
this.ageCategory.querySelector('ul').appendChild(categoryBtn)
}
Expand Down Expand Up @@ -192,11 +204,31 @@ export default class World {
</div>
<div class="chapter__offline">
<span class="chapter__downloaded-quota hidden"></span>
<button class="chapter__download button button-cube group-[.downloaded]:hidden">
<svg class="icon"><use href="#download-solid" fill="currentColor"></use></svg>
<button class="chapter__download button-grid group-[.downloaded]:hidden">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">
<svg class="icon"><use href="#download-solid" fill="currentColor"></use></svg>
</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
<button class="chapter__remove button button-cube !hidden">
<svg class="icon"><use href="#folder-xmark-solid" fill="currentColor"></use></svg>
<button class="chapter__remove button-grid !hidden">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">
<svg class="icon"><use href="#folder-xmark-solid" fill="currentColor"></use></svg>
</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</div>
<span class="chapter__loading"></span>
Expand Down Expand Up @@ -255,7 +287,17 @@ export default class World {
<h5 class="chapter-description-heading">${chapter.title}</h5>
<div class="chapter-description-text scroller"> ${chapter.content}</div>
</div>
<button class="button button-rectangle-wide" id="start-chapter"></button>
<button class="button-grid" id="start-chapter">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${_s.journey.start}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</div>`)

Expand All @@ -268,8 +310,18 @@ export default class World {
const pageSlug = linkParts[linkParts.length - 2]

const guide = _gl.elementFromHtml(`
<a class="button button-cube chapter-guide" href="https://biblekids.io/${localStorage.getItem('lang')}/${pageSlug}/" target="_blank">
<svg class="icon"><use href="#book-solid" fill="currentColor"></use></svg>
<a class="button-grid chapter-guide" href="https://biblekids.io/${localStorage.getItem('lang')}/${pageSlug}/" target="_blank">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">
<svg class="icon"><use href="#book-solid" fill="currentColor"></use></svg>
</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</a>`)

details.prepend(guide)
Expand Down Expand Up @@ -324,7 +376,6 @@ export default class World {
instance.experience.interface.chaptersList.classList.add('chapter-selected')

instance.buttons.startChapter = details.querySelector('#start-chapter')
instance.buttons.startChapter.innerHTML = `<span>${_s.journey.start}</span>`
instance.buttons.startChapter.addEventListener('click', instance.startChapter)

tippy('.chapter-guide', {
Expand Down Expand Up @@ -879,7 +930,7 @@ export default class World {
})

if (!document.fullscreenElement) {
document.documentElement.requestFullscreen()
// document.documentElement.requestFullscreen()
}
}

Expand Down
Loading

0 comments on commit 176e391

Please sign in to comment.