RanchiMall/dapps
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
sairaj mote 2023-12-01 02:35:28 +05:30
parent 1dd2e99bd3
commit 829fd9e3cd
4 changed files with 62 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
css/main.css
View File

@ -727,7 +727,7 @@ menu {
align-items: center;
grid-template-columns: 1fr auto;
gap: 1rem;
padding: max(1rem, 3vw);
padding: max(1rem, 2vw) max(1rem, 3vw);
grid-column: 1/-1;
view-transition-name: main-header;
}
@ -862,23 +862,32 @@ theme-toggle {
fill: rgba(var(--background-color), 1);
}
#dapps_menu {
view-transition-name: dapps-menu;
}
#hamburger_menu_trigger {
padding: 0.5rem;
margin-left: -0.5rem;
}
.hamburger-menu-wrapper {
position: -webkit-sticky;
position: sticky;
top: 0;
view-transition-name: dapps-menu;
}
.hamburger-menu {
overflow-y: auto;
}
.hamburger-menu__item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
padding: 0.6rem;
border-radius: 0.5rem;
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
margin-left: -0.6rem;
font-weight: 500;
}
.hamburger-menu__item:hover {
background-color: rgba(var(--text-color), 0.06);
@ -955,6 +964,14 @@ theme-toggle {
#dapp_search_input {
width: 20rem;
}
.hamburger-menu-wrapper {
border-right: solid thin rgba(var(--text-color), 0.5);
padding-right: 1rem;
}
.hamburger-menu {
padding-left: 1rem;
margin-left: -1rem;
}
}
@media only screen and (min-width: 1280px) {
.page {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
css/main.scss
View File

@ -672,7 +672,7 @@ menu {
align-items: center;
grid-template-columns: 1fr auto;
gap: 1rem;
padding: max(1rem, 3vw);
padding: max(1rem, 2vw) max(1rem, 3vw);
grid-column: 1/-1;
view-transition-name: main-header;
h4 {
@ -804,23 +804,28 @@ theme-toggle {
}
}
}
#dapps_menu {
view-transition-name: dapps-menu;
}
#hamburger_menu_trigger {
padding: 0.5rem;
margin-left: -0.5rem;
}
.hamburger-menu-wrapper {
position: sticky;
top: 0;
view-transition-name: dapps-menu;
}
.hamburger-menu {
overflow-y: auto;
}
.hamburger-menu__item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
padding: 0.6rem;
border-radius: 0.5rem;
font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
margin-left: -0.6rem;
font-weight: 500;
&:hover {
background-color: rgba(var(--text-color), 0.06);
text-decoration: none;
@ -901,6 +906,14 @@ theme-toggle {
#dapp_search_input {
width: 20rem;
}
.hamburger-menu-wrapper {
border-right: solid thin rgba(var(--text-color), 0.5);
padding-right: 1rem;
}
.hamburger-menu {
padding-left: 1rem;
margin-left: -1rem;
}
}
@media only screen and (min-width: 1280px) {
.page {

25
index.html
View File

@ -439,6 +439,15 @@
tags: ['news', 'articles', 'content'],
category: 'content'
},
{
name: 'Certify',
description: 'Create and distribute blockchain based certificates',
icon: ``,
appLink: 'https://ranchimall.github.io/certify',
moreLink: '#/dapps/certify',
tags: ['certificates', 'certify', 'certification'],
category: 'identity'
},
].sort((a, b) => a.name.localeCompare(b.name))
router.addRoute('home', renderHome)
router.addRoute('', renderHome)
@ -559,7 +568,7 @@
<ul class="flex flex-direction-column gap-0-3">
${dappsList.map(dapp => html`
<li>
<a class=${`hamburger-menu__item ${dapp.moreLink.includes(activePage) ? 'hamburger-menu__item--active' : ''}`} href=${dapp.moreLink}>${dapp.name}</a>
<a class=${`hamburger-menu__item interactive ${dapp.moreLink.includes(activePage) ? 'hamburger-menu__item--active' : ''}`} href=${dapp.moreLink}>${dapp.name}</a>
</li>
`)}
</ul>
@ -595,10 +604,16 @@
<h1>${name}</h1>
</div>
<p>${description}</p>
<a href=${appLink} class="button dapp-card__link dapp-card__link--primary margin-right-auto" target="_blank">
Try it
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>
</a>
<div class="flex align-center gap-0-5">
<a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link" title="Download dapp Zip">
Download
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
</a>
<a href=${appLink} class="button dapp-card__link dapp-card__link--primary margin-right-auto" target="_blank">
Try it
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>
</a>
</div>
</section>
`
]