Skip to content

Commit

Permalink
Merge pull request #420 from consensusnetworks/enhancement/app-fe-tweaks
Browse files Browse the repository at this point in the history 
Fix app bugs on Safari browser and Brave
  • Loading branch information
@DemogorGod
DemogorGod authored Sep 15, 2023
2 parents ad8b17a + b71fef3 commit 36535a7
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 67 deletions.
20 changes: 12 additions & 8 deletions apps/web/src/layouts/default-layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ const handleOutsideClick = (event: any) => {
}
}
const doesScrollBarExist = ref(true)
onMounted(() => {
doesScrollBarExist.value = document.documentElement.scrollHeight > document.documentElement.clientHeight
window.addEventListener('click', handleOutsideClick)
})
Expand All @@ -75,7 +79,7 @@ onUnmounted(() =>{
<div :class="openWalletsModal? 'flex flex-col h-screen' : ''">
<div
class="px-[60px] 800s:px-[5%] pt-[17px] pb-[19px] flex flex-wrap gap-[20px] justify-between items-center bg-black relative"
:class="openWalletsModal? 'pr-[75px]' : ''"
:class="openWalletsModal && doesScrollBarExist? 'pr-[75px]' : ''"
>
<img
src="/casimir.svg"
Expand All @@ -85,7 +89,7 @@ onUnmounted(() =>{

<div
v-if="screenWidth >= 450"
class="flex flex-wrap items-center gap-50 h-full"
class="flex flex-wrap items-center gap-50 h-full "
>
<router-link
to="/"
Expand All @@ -105,7 +109,7 @@ onUnmounted(() =>{

<div
v-else
class="nav_items nav_items_active relative"
class="nav_items nav_items_active relative "
>
<button
class="flex items-center gap-[10px]"
Expand Down Expand Up @@ -163,7 +167,7 @@ onUnmounted(() =>{
</div>
</div>

<div class="flex items-center justify-between gap-[45px] 600s:gap-[10px] text-white">
<div class="flex items-center justify-between gap-[45px] 600s:gap-[10px] text-white h-[76px]">
<button
id="setting_modal_button"
>
Expand All @@ -189,7 +193,7 @@ onUnmounted(() =>{
id="setting_modal"
class="absolute right-[60px] 800s:right-[5%] bg-white top-[80%] w-[200px] setting_modal"
>
<button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full h-[41px]">
<vue-feather
type="user"
size="36"
Expand Down Expand Up @@ -231,7 +235,7 @@ onUnmounted(() =>{
</span>
</button> -->
<button
class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full"
class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full h-[41px]"
:disabled="!user"
@click="logout"
>
Expand All @@ -249,7 +253,7 @@ onUnmounted(() =>{

<div
class="relative text-black"
:class="openWalletsModal? 'overflow-hidden pr-[15px]' : ''"
:class="openWalletsModal && doesScrollBarExist? 'overflow-hidden pr-[15px]' : ''"
>
<slot />
<div
Expand Down Expand Up @@ -308,7 +312,7 @@ onUnmounted(() =>{
v-show="currentSlide === 2"
class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]"
>
<h6 class="nav_items flex items-center mb-[20px]">
<h6 class="nav_items flex items-center mb-[20px] h-[29px]">
<button @click="authFlowCardNumber = 1, selectedProvider = null">
<vue-feather
type="chevron-left"
Expand Down
22 changes: 10 additions & 12 deletions apps/web/src/pages/operators/Operator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,9 @@ watch(selectedWallet, async () =>{
selectedPublicNodeURL.value = ''
selectedCollateral.value = ''
await getUserOperators()
// TODO: @Chris change this back to the composable please!
// maybe have Operators as an object for each account that they have connected? since it depends on the selected wallet.
// await getUserOperators()
if (selectedWallet.value.address === '') {
availableOperatorIDs.value = []
Expand Down Expand Up @@ -245,7 +247,7 @@ async function submitRegisterOperatorForm() {
</h6>

<button
class="flex items-center gap-[8px] export_button hover:text-blue_3 hover:border-blue_3"
class="flex items-center gap-[8px] export_button hover:text-blue_3 hover:border-blue_3 h-[38px]"
:disabled="!user?.accounts"
@click="openAddOperatorModal = true"
>
Expand Down Expand Up @@ -329,7 +331,7 @@ async function submitRegisterOperatorForm() {
</button>
<div
v-show="openSelectWalletOptions"
class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white"
class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white max-h-[200px] overflow-auto"
>
<h6 class="text-[12px]">
Your Connected Wallets
Expand All @@ -340,17 +342,11 @@ async function submitRegisterOperatorForm() {
type="button"
class="border-y border-y-grey_1 hover:border-y-grey_3
text-grey_4 my-[10px] w-full flex justify-between truncate"
@click="selectedWallet = {address: act.address, wallet_provider: act.walletProvider}"
@click="selectedWallet = {address: act.address, wallet_provider: act.walletProvider}, openSelectWalletOptions = false"
>
<span>{{ act.walletProvider }}</span>
<span>{{ convertString(act.address) }}</span>
</button>
<button
class="text-primary underline"
@click="openWalletsModal = true"
>
Connect Wallet
</button>
</div>
</div>
<div class="text-[12px] mt-[4px] text-grey_4 pl-[5px] whitespace-normal">
Expand Down Expand Up @@ -387,7 +383,7 @@ async function submitRegisterOperatorForm() {
</button> -->
<div
v-show="openSelectOperatorID"
class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white"
class="z-[3] absolute top-[110%] left-0 w-full border rounded-[8px] border-[#D0D5DD] p-[15px] bg-white max-h-[200px] overflow-auto"
>
<h6 class="text-[12px]">
Avaliable Operators
Expand Down Expand Up @@ -490,6 +486,7 @@ async function submitRegisterOperatorForm() {
<button
type="submit"
class="export_button"
@click="submitRegisterOperatorForm"
>
<span v-if="loadingRegisteredOperators">Submitting</span>
<span v-else>Submit</span>
Expand All @@ -513,7 +510,7 @@ async function submitRegisterOperatorForm() {
</div>
<div class="flex items-start gap-[12px]">
<button
class="flex items-center gap-[8px] export_button"
class="flex items-center gap-[8px] export_button h-[38px]"
@click="exportFile(checkedItems, filteredData)"
>
<vue-feather
Expand Down Expand Up @@ -683,6 +680,7 @@ async function submitRegisterOperatorForm() {
letter-spacing: -0.01em;
color: #101828;
margin-bottom: 6px;
height: 34px;
}
.dynamic_padding{
padding: 12px 24px;
Expand Down
49 changes: 38 additions & 11 deletions apps/web/src/pages/overview/components/BreakdownTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,17 @@ const setTableData = () =>{
}
const checkAll = ref(false)
watch(checkAll, () =>{
filteredData.value.map(item =>{
if(checkAll.value && !checkedItems.value.includes(item)){
checkedItems.value.push(item)
}else if(!checkAll && checkedItems.value.includes(item)){
removeItemFromCheckedList(item)
}
})
})
watch(rawUserAnalytics, () =>{
setTableData()
filterData()
Expand All @@ -323,7 +334,7 @@ onMounted(() =>{
</script>

<template>
<div class="card_container pt-[42px] pb-[34px] text-black">
<div class="card_container pt-[42px] pb-[34px] text-black flex flex-col">
<div class="px-[32px]">
<div class="flex flex-wrap gap-[20px] justify-between items-start pb-[20px] border-b border-b-[#EAECF0] ">
<div>
Expand All @@ -338,7 +349,7 @@ onMounted(() =>{
</div>
<div class="flex items-start gap-[12px]">
<button
class="flex items-center gap-[8px] export_button"
class="flex items-center gap-[8px] export_button h-[38px]"
@click="exportFile()"
>
<vue-feather
Expand Down Expand Up @@ -406,8 +417,8 @@ onMounted(() =>{
</div>
</div>
</div>
<div class="w-full overflow-x-scroll">
<table class="w-full">
<div class="w-full overflow-x-scroll h-full min-h-[200px]">
<table class="w-full min-h-[200px] ">
<thead>
<tr class="bg-[#FCFCFD] border-b border-b-[#EAECF0] whitespace-nowrap">
<th
Expand All @@ -416,6 +427,22 @@ onMounted(() =>{
class="table_header "
>
<div class="flex items-center gap-[5px]">
<div
v-if="header.value === 'blank_column'"
class="flex items-center"
>
<button
class="checkbox_button"
@click="checkAll = !checkAll"
>
<vue-feather
v-show="checkAll"
type="check"
size="20"
class="icon w-[14px] h-min"
/>
</button>
</div>
<div
v-if="header.value === 'bal'"
class="flex items-center tooltip_container"
Expand Down Expand Up @@ -469,20 +496,21 @@ onMounted(() =>{
{{ header.title }}
</div>
<button
class="ml-[4px] flex flex-col items-center justify-between"
:class="selectedHeader === header.value? 'opacity-100' : 'opacity-25'"
class="ml-[4px] h-min"
:class="selectedHeader === header.value? 'opacity-100 text-primary' : 'opacity-90 text-grey_4'"
@click="selectedHeader = header.value, selectedOrientation === 'ascending'? selectedOrientation = 'descending' : selectedOrientation = 'ascending'"
>
<vue-feather
type="arrow-up"
size="20"
class="icon h-min "
class="icon h-[8px]"
:class="selectedOrientation === 'ascending'? 'w-[10px]' : 'w-[8px] opacity-50'"
/>
/>
<br>
<vue-feather
type="arrow-down"
size="20"
class="icon h-min"
class="icon h-[8px]"
:class="selectedOrientation === 'descending'? 'w-[10px]' : 'w-[8px] opacity-50'"
/>
</button>
Expand Down Expand Up @@ -608,7 +636,7 @@ onMounted(() =>{
</div>
<div class="flex justify-between items-center mt-[12px]">
<div class="page_number ml-[56px]">
Page {{ currentPage }} of {{ totalPages }}
Page {{ totalPages === 0? 0 : currentPage }} of {{ totalPages }}
</div>
<div class="flex items-center gap-[12px]">
<button
Expand Down Expand Up @@ -840,7 +868,6 @@ onMounted(() =>{
}
.card_container{
width: 100%;
height: 100%;
box-sizing: border-box;
background: #FFFFFF;
border: 1px solid #D0D5DD;
Expand Down
Loading

0 comments on commit 36535a7

Please sign in to comment.