frontend bug fixes (#2127)
* frontend bug fixes * removed redundant styles * removed redundant media styles
This commit is contained in:
VitaliiShpital
Yingrong Zhao
parent
51db703b2b
commit
f69f7b2d58
@ -288,12 +288,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 850px) {
|
||||
@media screen and (max-height: 825px) {
|
||||
.profile-container {
|
||||
height: 650px;
|
||||
overflow-y: scroll;
|
||||
margin-top: 70px;
|
||||
|
||||
&__secondary-container {
|
||||
margin-top: 20px;
|
||||
|
||||
@ -305,6 +301,43 @@
|
||||
&__button-area {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 790px) {
|
||||
.profile-container {
|
||||
height: 535px;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar, &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 770px) {
|
||||
.profile-container {
|
||||
height: 515px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
.profile-container {
|
||||
height: 495px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 730px) {
|
||||
.profile-container {
|
||||
height: 475px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 710px) {
|
||||
.profile-container {
|
||||
height: 455px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,10 +5,12 @@
|
||||
<div>
|
||||
<div v-if="billing > 0" class="billing-overflow">
|
||||
<div class="billing-container">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
<div class="billing-container__table-holder">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
</div>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
@ -59,38 +61,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 860px) {
|
||||
.billing-overflow {
|
||||
@media screen and (max-height: 900px) {
|
||||
.billing-container__table-holder {
|
||||
overflow-y: scroll;
|
||||
height: 700px;
|
||||
height: 555px;
|
||||
|
||||
&::-webkit-scrollbar, &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 860px) {
|
||||
.billing-container__table-holder {
|
||||
height: 535px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 835px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 660px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 815px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 660px;
|
||||
.billing-container__table-holder {
|
||||
height: 495px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 795px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 780px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 620px;
|
||||
.billing-container__table-holder {
|
||||
height: 475px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,11 +30,11 @@
|
||||
.tab-navigation-container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #AFB7C1;
|
||||
|
||||
&__item {
|
||||
width: 150px;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #AFB7C1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -50,7 +50,7 @@
|
||||
&:hover {
|
||||
border-bottom: 3px solid #2683FF;
|
||||
|
||||
p {
|
||||
p {
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,7 +54,6 @@ export default class ProjectDetailsArea extends Vue {
|
||||
.project-overview {
|
||||
padding: 44px 55px 55px 55px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
height: 85vh;
|
||||
|
||||
&__navigation {
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
<div class="usage-report-container__main-area__footer__report-area">
|
||||
<p>Download Advanced Report</p>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent="onReportClick">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
<rect class="background" width="40" height="40" rx="4"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1"/>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="22" height="22" fill="white" transform="translate(10 10)"/>
|
||||
@ -380,6 +380,24 @@ import { toUnixTimestamp } from '@/utils/time';
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
|
||||
.background {
|
||||
fill: #E2ECF7;
|
||||
}
|
||||
|
||||
.blue {
|
||||
fill: #2683FF;
|
||||
}
|
||||
}
|
||||
|
||||
svg:hover {
|
||||
.background {
|
||||
fill: #2683FF;
|
||||
}
|
||||
|
||||
.blue {
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,12 @@
|
||||
<p>Billing</p>
|
||||
</div>
|
||||
<div class="billing-container">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
<div class="billing-container__table-holder">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BillingItem />
|
||||
</table>
|
||||
</div>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
@ -59,6 +61,10 @@
|
||||
}
|
||||
|
||||
.billing-container {
|
||||
&__table-holder {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__table {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
@ -76,16 +82,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 880px) {
|
||||
.billing-overflow {
|
||||
@media screen and (max-height: 900px) {
|
||||
.billing-container__table-holder {
|
||||
overflow-y: scroll;
|
||||
height: 600px;
|
||||
height: 555px;
|
||||
|
||||
&::-webkit-scrollbar,
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
.billing-overflow {
|
||||
height: 570px;
|
||||
@media screen and (max-height: 860px) {
|
||||
.billing-container__table-holder {
|
||||
height: 535px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 835px) {
|
||||
.billing-container__table-holder {
|
||||
height: 495px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 795px) {
|
||||
.billing-container__table-holder {
|
||||
height: 475px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user