Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add bento grid cards #12

Merged
merged 2 commits into from
Dec 30, 2024
Merged

feat: add bento grid cards #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d31c296
feat: add bento grid cards
ya7on Dec 30, 2024
f48f3f1
fix: update navbar links
ya7on Dec 30, 2024
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
9 changes: 7 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/versions/bulma-no-dark-mode.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supa Dupa Jetton Minter</title>
<meta name="description" content="Jetton minter for The Open Network. Fully on-chain token metadata.">
</head>
<body>
<div id="app"></div>
<div class="section py-0">
<div class="container is-max-widescreen">
<div id="app"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
5 changes: 2 additions & 3 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ import { RouterView } from 'vue-router'
<div class="hero-head">
<NavbarBlock />
</div>
<div class="hero-body">
<div class="container is-fluid">
<h1 class="title">{{ $t(`message.pageTitles.${$route.name!!.toString()}`) }}</h1>
<div class="hero-body p-0">
<div class="container is-fluid p-3">
<RouterView />
</div>
</div>
Expand Down
13 changes: 5 additions & 8 deletions src/components/CardItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<template>
<article class="message" :class="bulmaColor">
<div class="message-body">
<h1 class="title">{{ emoji }} {{ title }}</h1>
<p>{{ description }}</p>
<a v-if="linkUrl" :href="linkUrl" target="_blank">{{ linkText }}</a>
</div>
</article>
<div class="content">
<h2 class="subtitle">{{ emoji }} {{ title }}</h2>
<p v-html="description"></p>
<a v-if="linkUrl" :href="linkUrl" target="_blank">{{ linkText }}</a>
</div>
</template>

<script lang="ts">
Expand All @@ -16,7 +14,6 @@ export default {
description: String,
linkText: String,
linkUrl: String,
bulmaColor: String,
}
}
</script>
29 changes: 29 additions & 0 deletions src/components/JettonExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<article class="media box is-shadowless has-background-light">
<figure class="media-left">
<p class="image is-64x64">
<img class="is-rounded" src="https://bulma.io/assets/images/placeholders/128x128.png" />
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>{{ jettonName }}</strong><br />
<small>{{ jettonMaxSupply }} {{ jettonSymbol }}</small><br />
<small>{{ jettonDescription }}</small>
</p>
</div>
</div>
</article>
</template>

<script lang="ts">
export default {
props: {
jettonName: String,
jettonDescription: String,
jettonSymbol: String,
jettonMaxSupply: Number,
}
}
</script>
4 changes: 2 additions & 2 deletions src/components/NavbarBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div id="navMenu" class="navbar-menu" v-bind:class="{ 'is-active': isBurgerActive }">
<div class="navbar-start">
<RouterLink to="/" class="navbar-item">
{{ $t('message.Navbar.Home') }}
{{ $t('message.pageTitles.NewJetton') }}
</RouterLink>

<div class="navbar-item has-dropdown is-hoverable">
Expand All @@ -27,7 +27,7 @@

<div class="navbar-dropdown">
<RouterLink to="/about" class="navbar-item">
{{ $t('message.Navbar.About') }}
{{ $t('message.pageTitles.About') }}
</RouterLink>
</div>
</div>
Expand Down
21 changes: 16 additions & 5 deletions src/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
"About": "About"
},
"Navbar": {
"Home": "Home",
"More": "More",
"About": "About us",
"ConnectWallet": "Connect wallet",
"Disconnect": "Disconnect"
},
Expand All @@ -33,18 +31,31 @@
"DeployJetton": "Deploy 🚀"
},
"NewJettonCards":{
"WorkInProgress": {
"Title": "Work in progress!",
"Description": "Be careful! This application uses <b>Testnet</b> version of TON Blockchain. Because it's not 100% ready yet.",
"LinkText": "If you found bug or typo please open an issue in Github"
},
"WhatIsIt": {
"Title": "What is it?",
"Description": "This is tool that helps to deploy your own token (Jetton) in The Open Network blockchain."
"Description": "Using this tool you can create your own token in The Open Network blockchain.<h3>How?</h3><ul><li>At first you need to connect your TON wallet.</li><li>Come up with name and description for your future token, fill in the fields in form and press \"Deploy\" button</li><li>You will need to pay a small network fee, after which your token will be created</li></ul>"
},
"Decentralized": {
"Title": "100% On-Chain",
"Description": "Jetton is designed to store <b>full</b> metadata in blockchain.<br />It means that your jetton is not depends from hostings status.<br />Metadata stores directly in TON storage. So your jetton will depend only from TON blockchain."
},
"Managable": {
"Title": "Easy manageable",
"Description": "It is good for DAO because this smart contract have flexible API for jetton management"
},
"OpenSource": {
"Title": "Open Source",
"Description": "Both of jetton and website source codes are free and open!",
"Description": "Both of jetton and website source codes are free and open and published in our Github repos! If you want, you can help to improve this application",
"LinkText": "View source codes"
}
},
"AboutPage": {
"AboutText": "us..."
"AboutText": "WORK IN PROGRESS"
}
}
}
21 changes: 16 additions & 5 deletions src/i18n/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
"About": "О нас"
},
"Navbar": {
"Home": "Главная",
"More": "Еще",
"About": "О нас",
"ConnectWallet": "Подключить кошелек",
"Disconnect": "Выход"
},
Expand All @@ -33,9 +31,22 @@
"DeployJetton": "Деплой 🚀"
},
"NewJettonCards":{
"WorkInProgress": {
"Title": "Ведутся работы!",
"Description": "Осторожно! Приложение использует <b>Testnet</b> сеть TON, потому что еще не готово на 100%. Мы активно работаем над этим.",
"LinkText": "Если вы нашли баг или опечатку, создайте пожалуйста issue на Github"
},
"WhatIsIt": {
"Title": "Зачем это нужно?",
"Description": "С помощью этого вебсайта вы можете запустить собственный токен в сети TON"
"Title": "Что это?",
"Description": "С помощью этого вебсайта вы можете запустить собственный токен в сети TON.<h3>Как?</h3><ul><li>Для начала вам необходимо подключить ваш TON кошелек.</li><li>После этого придумайте название и описание вашего будущего токена и заполните поля в форме.</li><li>Нажмите кнопку \"Деплой\", оплатите небольшую комиссию сети и все готово</li></ul>"
},
"Decentralized": {
"Title": "100% он-чейн",
"Description": "Жеттон спроектирован так, что хранит всю метадату напрямую он-чейн.<br />Это означает, что информация о вашем жетоне не зависит от статуса хостингов и доступна пока доступен TON."
},
"Managable": {
"Title": "Легко управлять",
"Description": "Этот токен идеально подходит для DAO так как имеет гибкий API"
},
"OpenSource": {
"Title": "Открытый исходный код",
Expand All @@ -44,7 +55,7 @@
}
},
"AboutPage": {
"AboutText": "..."
"AboutText": "В РАЗРАБОТКЕ"
}
}
}
58 changes: 49 additions & 9 deletions src/views/NewJetton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,65 @@
<template>
<div
class="fixed-grid has-1-cols-mobile has-1-cols-tablet has-4-cols-desktop has-4-cols-widescreen has-4-cols-fullhd">
<div class="grid is-gap-3">
<div class="grid is-gap-1">
<div class="cell is-col-span-3-desktop is-row-span-4-desktop">
<div class="box container is-fliud is-shadowless has-background-light">
<h1 class="title">{{ $t('message.pageTitles.NewJetton') }}</h1>
<JettonForm />
</div>
</div>
<div class="cell">
<div class="">
<JettonExample jetton-name="Example name" jetton-description="An example of jetton description"
:jetton-max-supply=1337 jetton-symbol="SMBL" />
</div>
</div>
<div class="cell">
<JettonForm />
<div class="box is-shadowless has-background-danger-light">
<CardItem emoji="⚠️" :title="$t('message.NewJettonCards.WorkInProgress.Title')"
:description="$t('message.NewJettonCards.WorkInProgress.Description')"
:link-text="$t('message.NewJettonCards.WorkInProgress.LinkText')"
link-url="https://github.com/supadupadao/minter/issues" />
</div>
</div>
<div class="cell is-row-span-2-desktop">
<div class="box is-shadowless has-background-primary-light">
<CardItem emoji="🤔" :title="$t('message.NewJettonCards.WhatIsIt.Title')"
:description="$t('message.NewJettonCards.WhatIsIt.Description')" />
</div>
</div>
<div class="cell is-col-span-2">
<CardItem emoji="🤔" :title="$t('message.NewJettonCards.WhatIsIt.Title')"
:description="$t('message.NewJettonCards.WhatIsIt.Description')" bulma-color="is-info" />
<div class="cell is-col-span-2-desktop">
<div class="box is-shadowless has-background-info-light">
<CardItem emoji="⛓️" :title="$t('message.NewJettonCards.Decentralized.Title')"
:description="$t('message.NewJettonCards.Decentralized.Description')" />
</div>
</div>
<div class="cell">
<CardItem emoji="👨‍💻" :title="$t('message.NewJettonCards.OpenSource.Title')"
:description="$t('message.NewJettonCards.OpenSource.Description')"
:link-text="$t('message.NewJettonCards.OpenSource.LinkText')" link-url="https://github.com/supadupadao/jetton"
bulma-color="is-link" />
<div class="box is-shadowless has-background-light">
<CardItem emoji="🛠️" :title="$t('message.NewJettonCards.Managable.Title')"
:description="$t('message.NewJettonCards.Managable.Description')" />
</div>
</div>
<div class="cell">
<div class="box is-shadowless has-background-link-light">
<CardItem emoji="👨‍💻" :title="$t('message.NewJettonCards.OpenSource.Title')"
:description="$t('message.NewJettonCards.OpenSource.Description')"
:link-text="$t('message.NewJettonCards.OpenSource.LinkText')"
link-url="https://github.com/supadupadao/jetton" />
</div>
</div>
</div>
</div>
</template>

<style scoped>
.cell {
display: flex;
}
</style>

<script setup lang="ts">
import CardItem from '@/components/CardItem.vue';
import JettonExample from '@/components/JettonExample.vue';
import JettonForm from '@/components/JettonForm.vue';
</script>
Loading