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/ui changes #65

Merged
merged 7 commits into from
Dec 1, 2020
Merged

Feat/ui changes #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bd90373
Add minor changes to home & cards
ragonzal Nov 30, 2020
00598a3
Remove web3 modal error
ragonzal Nov 30, 2020
2549785
Remove brand label
ragonzal Nov 30, 2020
aa63ab6
Add hover to footer
ragonzal Nov 30, 2020
846215c
Fix on site pills
ragonzal Nov 30, 2020
b701571
Add chevron to load more button & chage time display
ragonzal Dec 1, 2020
d6de5a5
Fix mobile ui issues & new POAP header
ragonzal Dec 1, 2020
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
1,029 changes: 642 additions & 387 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
},
"dependencies": {
"@quasar/extras": "^1.0.0",
"@walletconnect/web3-provider": "^1.0.0-beta.47",
"@walletconnect/web3-provider": "^1.3.1",
"axios": "^0.19.2",
"ethereum-blockies-png": "^0.1.3",
"ethers": "^4.0.46",
Expand All @@ -27,7 +27,7 @@
"vue-popperjs": "^2.3.0",
"vue-property-decorator": "^9.0.2",
"vue-slick-carousel": "^1.0.6",
"web3modal": "^1.6.1"
"web3modal": "^1.9.2"
},
"devDependencies": {
"@quasar/app": "^1.0.0",
Expand Down
1 change: 1 addition & 0 deletions frontend/src/assets/icons/discord-logo-hover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend/src/assets/icons/down-chevron.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/icons/github-logo-hover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/icons/reddit-logo-hover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/icons/telegram-logo-hover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/icons/twitter-logo-hover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion frontend/src/components/BackButton/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,8 @@
display: none;
}
}
&:focus {
outline:0;
}
}
}
}
5 changes: 5 additions & 0 deletions frontend/src/components/ConnectWallet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ export default {

await this.$store.dispatch('user/setEthereumData', provider);
} catch (err) {
if (typeof err === 'string') {
if (err.toLowerCase().indexOf('modal closed by user') > -1) {
return;
}
}
this.showError(err, 'Unable to connect wallet. Please try again.');
} finally {
this.isLoading = false;
Expand Down
11 changes: 0 additions & 11 deletions frontend/src/components/LayoutFooter/LayoutFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,6 @@
src="../../assets/icons/poap-logo.svg"
>
</div>
<div class="made-by-xivis text-subtitle2">
<span>Made by
<a
href="https://www.xivis.com/"
target="_blank"
>
Xivis
</a>
</span>
<span class="heart-icon" />
</div>
</div>
<div class="about-container">
<p class="title text-subtitle1 primary text-bold">
Expand Down
77 changes: 42 additions & 35 deletions frontend/src/components/LayoutFooter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@
}
@media (max-width: 767.98px) {
padding: 30px 24px 0;
grid-template-columns: auto 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
row-gap: 52px;
column-gap: 10px;
}
.logo-container {
grid-area: 1 / 1 / 2 / 2;
@media (max-width: 767.98px) {
grid-area: 2 / 1 / 3 / 3;
grid-area: 3 / 1 / 3 / 1;
align-items: center;
display: flex;
flex-direction: column;
Expand All @@ -49,68 +49,58 @@
height: 65px;
}
}
.made-by-xivis {
display: flex;
align-items: center;
color: $dark-grey-text-2;
margin-top: 10px;
@media (max-width: 767.98px) {
margin-top: 47px;
}
a {
color: $dark-grey-text-2;
text-decoration: none;
font-weight: 700;
transition: all 0.2s linear;
&:hover {
color: $primary;
}
}
.heart-icon {
background: url('../../assets/icons/heart-icon.svg') center / contain no-repeat;
height: 14px;
width: 14px;
margin-left: 6px;
}
}
}
.about-container {
grid-area: 1 / 1 / 2 / 2;
.title {
@media (max-width: 768px) {
text-align: center;
margin-bottom: 20px;
}
}
grid-area: 1 / 1 / 1 / 1;
@media (min-width: 768px) {
grid-area: 1 / 2 / 2 / 3;
}
.about-list {
padding: 0;
max-width: 400px;
list-style: none;
margin: 0;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
@media (min-width: 768px) {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, 1fr);
column-gap: 48px;
row-gap: 5px;
padding: 0;
max-width: none;
}
li {
width: max-content;
@media (max-width: 767.98px) {
padding: 0 20px;
&:not(:last-child) {
margin-bottom: 10px;
}
}
}
a {
text-decoration: none;
color: $dark-grey-text-2;
text-decoration: none;
color: $dark-grey-text-2;
&:hover {
color: $primary;
}
}
}
}
.join-container {
grid-area: 1 / 2 / 2 / 3;
grid-area: 2 / 1 / 2 / 1;
display: flex;
flex-direction: column;
align-items: flex-end;
align-items: center;
@media (min-width: 768px) {
grid-area: 1 / 3 / 2 / 4;
align-items: flex-end;
}
min-width: 160px;
.social-container {
Expand All @@ -121,13 +111,15 @@
height: 28px;
width: 28px;
display: inline-flex;
margin: 8px;
&:not(:last-child) {
margin-right: 4px;
@media (min-width: 768px) {
margin-right: 8px;
}
}
@media (min-width: 768px) {
margin: 0px;
height: 24px;
width: 24px;
}
Expand All @@ -137,18 +129,33 @@
width: 100%;
&.twitter {
background: url("../../assets/icons/twitter-logo.svg") center / contain no-repeat;
&:hover{
background: url("../../assets/icons/twitter-logo-hover.svg") center / contain no-repeat;
}
}
&.github {
background: url("../../assets/icons/github-logo.svg") center / contain no-repeat;
&:hover{
background: url("../../assets/icons/github-logo-hover.svg") center / contain no-repeat;
}
}
&.telegram {
background: url("../../assets/icons/telegram-logo.svg") center / contain no-repeat;
&:hover{
background: url("../../assets/icons/telegram-logo-hover.svg") center / contain no-repeat;
}
}
&.reddit {
background: url("../../assets/icons/reddit-logo.svg") center / contain no-repeat;
&:hover{
background: url("../../assets/icons/reddit-logo-hover.svg") center / contain no-repeat;
}
}
&.discord {
background: url("../../assets/icons/discord-logo.svg") center / contain no-repeat;
&:hover{
background: url("../../assets/icons/discord-logo-hover.svg") center / contain no-repeat;
}
}
}
}
Expand All @@ -175,4 +182,4 @@
height: 350px;
}
}
}
}
31 changes: 18 additions & 13 deletions frontend/src/components/LayoutHeader/LayoutHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@
}}
</span>
<poap-event-group
v-if="!isMobile"
v-if="!isMobile &&
$store.state.user.tokens && $store.state.user.tokens.length > 0"
:site-header="true"
:without-tooltip="true"
:event-group="$store.state.user.tokens && $store.state.user.tokens.length
? $store.state.user.tokens : []"
Expand All @@ -58,20 +60,23 @@
</div>
<div
v-else
class="tokens-card-container"
class="tokens-scroller"
>
<a
v-for="item in $store.state.user.tokens"
:key="item.tokenId"
:href="'https://app.poap.xyz/token/'+item.tokenId"
class="image-container"
target="_blank"
>
<img
:src="item.event.image_url"
alt=""
<div class="tokens-card-container">
<a
v-for="item in $store.state.user.tokens"
:key="item.tokenId"
:href="'https://app.poap.xyz/token/'+item.tokenId"
class="image-container"
target="_blank"
>
</a>
<img
:src="item.event.image_url"
alt=""
>
</a>
</div>
<div class="spacer" />
</div>
</div>
<base-button
Expand Down
Loading