-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #117 from Holo-Host/feature/happ-details
Feature/happ details
- Loading branch information
Showing
16 changed files
with
790 additions
and
473 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<template> | ||
<div class="category-chip" | ||
> | ||
<span class="category-chip__dot"></span> | ||
<span class="category-chip__label">{{ label }}</span> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
const props = defineProps({ | ||
label: { | ||
type: String, | ||
required: true | ||
} | ||
}) | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.category-chip { | ||
align-items: center; | ||
display: inline-flex; | ||
justify-content: start; | ||
border-radius: 9999px; | ||
padding: 4px 9px; | ||
font-size: 12px; | ||
font-weight: 700; | ||
text-transform: capitalize; | ||
background-color: #F3F5F8; | ||
color: var(--grey-dark-color); | ||
&__dot { | ||
height: 8px; | ||
width: 8px; | ||
background-color: #0870A3; | ||
border-radius: 50%; | ||
display: inline-block; | ||
} | ||
&__label { | ||
margin-left: 4px; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,223 @@ | ||
<script setup lang="ts"> | ||
import HAppImage from '@uicommon/components/HAppImage.vue' | ||
import { useI18n } from 'vue-i18n' | ||
import CategoryChip from '@/components/CategoryChip.vue' | ||
import HAppDetailsEarnings from '@/components/hAppDetails/HAppDetailsEarnings.vue' | ||
import HAppDetailsStopHosting from '@/components/hAppDetails/HAppDetailsStopHosting.vue' | ||
import HAppDetailsUsage from '@/components/hAppDetails/HAppDetailsUsage.vue' | ||
import LeftChevronIcon from '@/components/icons/LeftChevronIcon.vue' | ||
import type { HAppDetails } from '@/interfaces/HposInterface' | ||
const { t } = useI18n() | ||
const props = defineProps<{ | ||
hApp: HAppDetails | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<div class="happ-details"> | ||
<router-link | ||
class="happ-details__back-link" | ||
to="/happs" | ||
> | ||
<LeftChevronIcon /> | ||
{{ t('$.back') }} | ||
</router-link> | ||
<div class="happ-details__columns"> | ||
<div class="happ-details__left-column desktop"> | ||
<HAppImage | ||
:happ="props.hApp" | ||
size="178px" | ||
class="happ-details__left-column-happ-image" | ||
/> | ||
<div class="happ-details__left-column-description-label"> | ||
{{ t('$.description') }} | ||
</div> | ||
<div class="happ-details__left-column-description"> | ||
{{ props.hApp.description }} | ||
</div> | ||
|
||
<div class="happ-details__left-column-categories"> | ||
<CategoryChip | ||
v-for="category in props.hApp.categories" | ||
:key="category" | ||
:label="category" | ||
:custom-theme="{ | ||
fontColor: 'gray', | ||
backgroundColor: 'grey-light-color' | ||
}" | ||
class="happ-details__left-column-category" | ||
/> | ||
</div> | ||
</div> | ||
|
||
<div class="happ-details__main-column"> | ||
<!-- Mobile --> | ||
<div class="happ-details__main-column-mobile"> | ||
<HAppImage | ||
:happ="props.hApp" | ||
size="124px" | ||
class="happ-details__main-column-mobile-happ-image" | ||
/> | ||
<h2 class="happ-details__main-column-name"> | ||
{{ props.hApp.name }} | ||
</h2> | ||
<div class="happ-details__main-column-description"> | ||
{{ props.hApp.description }} | ||
</div> | ||
</div> | ||
|
||
<!-- Desktop --> | ||
<h2 class="happ-details__main-column-name desktop"> | ||
{{ props.hApp.name }} | ||
</h2> | ||
|
||
<HAppDetailsEarnings | ||
:h-app="props.hApp" | ||
class="happ-details__main-column-earnings" | ||
/> | ||
|
||
<HAppDetailsUsage | ||
:h-app="props.hApp" | ||
class="happ-details__main-column-usage" | ||
/> | ||
|
||
<!-- <HAppDetailsStopHosting--> | ||
<!-- :h-app="props.hApp"--> | ||
<!-- class="happ-details__main-column-stop-hosting"--> | ||
<!-- />--> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped lang="scss"> | ||
.happ-details { | ||
display: flex; | ||
flex-direction: column; | ||
background-color: var(--white-color); | ||
box-shadow: 0 4px 20px #eceef1; | ||
border-radius: 5px; | ||
margin: 0 10px 20px 0; | ||
padding: 30px; | ||
color: var(--grey-color); | ||
font-size: 14px; | ||
line-height: 19px; | ||
font-weight: 600; | ||
&__back-link { | ||
color: var(--grey-color); | ||
text-decoration: none; | ||
font-size: 14px; | ||
margin-bottom: 32px; | ||
} | ||
&__columns { | ||
display: flex; | ||
} | ||
&__left-column { | ||
display: flex; | ||
flex: 0; | ||
flex-direction: column; | ||
&-happ-image { | ||
margin-bottom: 38px; | ||
} | ||
&-description-label { | ||
margin-bottom: 4px; | ||
} | ||
&-description { | ||
font-weight: 700; | ||
color: var(--grey-dark-color); | ||
} | ||
&-categories { | ||
margin-top: 48px; | ||
} | ||
&-category { | ||
display: block; | ||
margin-top: 13px; | ||
width: fit-content; | ||
block-size: fit-content; | ||
} | ||
} | ||
&__main-column { | ||
display: flex; | ||
flex: 1; | ||
flex-direction: column; | ||
margin-left: 22px; | ||
&-mobile { | ||
display: none; | ||
align-items: center; | ||
flex-direction: column; | ||
} | ||
&-name { | ||
margin: 0 0 40px 0; | ||
color: var(--grey-dark-color); | ||
font-weight: bold; | ||
font-size: 22px; | ||
line-height: 22px; | ||
} | ||
&-description { | ||
font-weight: 700; | ||
color: var(--grey-dark-color); | ||
} | ||
&-earnings { | ||
margin-top: 2px; | ||
} | ||
&-usage { | ||
margin-top: 32px; | ||
} | ||
&-stop-hosting { | ||
margin-top: 32px; | ||
} | ||
} | ||
} | ||
@media screen and (max-width: 1050px) { | ||
.happ-details { | ||
margin: 0 0 20px 0; | ||
padding: 18px; | ||
&__main-column { | ||
margin: 0 4px; | ||
&-mobile { | ||
display: block; | ||
align-items: center; | ||
flex-direction: column; | ||
} | ||
&-name { | ||
margin-top: 12px; | ||
margin-bottom: 12px; | ||
} | ||
&-description { | ||
font-size: 11px; | ||
margin-bottom: 24px; | ||
} | ||
} | ||
} | ||
.mobile-column { | ||
display: flex; | ||
} | ||
.desktop { | ||
display: none; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<script setup lang="ts"> | ||
import { useI18n } from 'vue-i18n' | ||
import type { HAppDetails } from '@/interfaces/HposInterface' | ||
import { presentHolofuelAmount } from '@/utils' | ||
const { t } = useI18n() | ||
const props = defineProps<{ | ||
hApp: HAppDetails | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<div class="happ-details-earnings"> | ||
<div class="happ-details-earnings__info-row large-text"> | ||
{{ t('happ_details.earnings.total') }}:<span class="happ-details-earnings__info-row-value"> {{ presentHolofuelAmount(props.hApp.earnings.total) }} HF</span> | ||
</div> | ||
<div class="happ-details-earnings__info-row earnings-margin"> | ||
{{ t('happ_details.earnings.last_7_days') }}:<span class="happ-details-earnings__info-row-value"> {{ presentHolofuelAmount(props.hApp.earnings.last7Days) }} HF</span> | ||
</div> | ||
<div class="happ-details-earnings__info-row earnings-margin"> | ||
{{ t('happ_details.earnings.average_weekly') }}:<span class="happ-details-earnings__info-row-value"> {{ presentHolofuelAmount(props.hApp.earnings.averageWeekly) }} HF</span> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped lang="scss"> | ||
.happ-details-earnings { | ||
&__info-row { | ||
display: flex; | ||
align-items: center; | ||
color: var(--grey-color); | ||
margin-left: 4px; | ||
margin-bottom: 16px; | ||
font-size: 14px; | ||
&-value { | ||
font-weight: 700; | ||
color: var(--grey-dark-color); | ||
} | ||
} | ||
.large-text { | ||
font-size: 16px; | ||
} | ||
} | ||
@media screen and (max-width: 1050px) { | ||
.happ-details-earnings { | ||
&__info-row { | ||
font-size: 14px; | ||
} | ||
.mobile-margin { | ||
margin-bottom: 40px; | ||
} | ||
} | ||
} | ||
</style> |
Oops, something went wrong.