Skip to content

Commit

Permalink
blockscout#23 UI: adapt for multi mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jaycelv
Jaycelv committed Dec 12, 2022
1 parent 5193638 commit 7d02fe6
Show file tree
Hide file tree
Showing 10 changed files with 398 additions and 120 deletions.
56 changes: 54 additions & 2 deletions apps/block_scout_web/assets/css/components/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ $card-tab-icon-color-active: #fff !default;

.card-body {
padding: $card-horizontal-padding;
overflow-x: auto;
.recent-tx-list-page{
.recent-preview-item-content{
display:none;
Expand All @@ -176,6 +177,10 @@ $card-tab-icon-color-active: #fff !default;
border-top:1px solid #cccccc;
border-bottom:2px solid #cccccc;
color:#6c757e;
min-width: 1130px;
}
.recent-tx-list-page{
min-width: 1130px;
}
.txn-list-table-item{
width:100%;
Expand Down Expand Up @@ -277,8 +282,56 @@ $card-tab-icon-color-active: #fff !default;
line-height:44px;
margin-right:10px;
}
.recent-preview-item-content-batch{
margin-bottom:5px;
display:flex;
flex-direction:column;
flex:0 0 120px;
@media (max-width: 368px) {
flex:0 0 95px;
}
}
.recent-preview-item-content-l1-2-l2{
.recent-preview-item-content-l1-2-l2-link{
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
@media (max-width: 368px) {
width: 65px;
}
@media (max-width: 500px) {
width: 90px;
}
}

}
.recent-preview-item-content-latest-txs{
flex:1;
.recent-preview-item-content-latest-txs-hash{
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin-left:5px;
@media (max-width: 500px) {
width:160px;
}

@media (max-width: 368px) {
width:140px;
}
}
.recent-preview-item-content-latest-txs-from{
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin-left:5px;
@media (max-width: 500px) {
width:80px;
}
}
.recent-preview-item-content-latest-txs-tag-wrap{
margin-left:5px;
font-size:12px;position:relative;
Expand Down Expand Up @@ -313,8 +366,7 @@ $card-tab-icon-color-active: #fff !default;
.recent-preview-item-center{
margin: 0 10px;
@media (max-width: 1254px) {
margin-left:0px;
margin-right:0px;
margin: 10px 0;
}
}

Expand Down
65 changes: 56 additions & 9 deletions apps/block_scout_web/assets/css/components/_dashboard-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,34 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
}

}

.dashboard-banner-network-plain-container {
.dashboard-banner-daily-tx-title-empty {
@media (max-width: 768px) {
display: none;
}
}
}
.dashboard-banner-network-graph {
flex-grow: 1;
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;

@media (max-width:767px) {
width: 100%;
}

.dashboard-banner-daily-tx-title{
font-family: 'Prompt';
font-weight: 700;
font-size: 30px;
line-height: 30px;
font-size: 26px;
line-height: 26px;
text-transform: capitalize;
color: #12201F;
margin-bottom: 16px;
}

.dashbord-banner-chart-container{
display:flex;
align-items: center;
Expand All @@ -87,6 +98,20 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
padding-right: 10px;
box-sizing: border-box;
background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 95.24%);

@media (max-width: 1200px) {
padding-right: 0;
}


@media (max-width: 767px) {
flex-direction: column;
background: none;
height: auto;
width:100%;
}


.dashboard-banner-chart{
@include media-breakpoint-up(md) {
min-width: 500px;
Expand All @@ -97,7 +122,9 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
@include media-breakpoint-down(md) {
display: flex;
flex-direction: column;
width: 100%;
}

}
}

Expand All @@ -108,7 +135,7 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
flex-grow: 1;
min-height: 100px;
height: 100%;
min-width: 500px;
//min-width: 500px;
background: rgba(255, 255, 255, 0.5);
border-radius: 20px;
@include media-breakpoint-down(md) {
Expand All @@ -126,6 +153,7 @@ $dashboard-banner-chart-axis-font-color-alt: #333;

@include media-breakpoint-down(sm) {
height: 150px !important;
margin-bottom: 10px;
}
}

Expand All @@ -137,28 +165,44 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
grid-template-columns: 1fr 1fr;
}

@media (max-width: 767px) {
flex-direction: row;
margin-left: 0;
}

.dashboard-banner-chart-legend-item {
height: 36px;
display:flex;
flex-direction: row;
align-items: center;
&:first-child{
margin-bottom: 30px;
@media (max-width: 767px) {
margin-bottom: 0;
}
}
@media (max-width: 767px) {
width: 200px;
}

@media (max-width: 500px) {
width: 165px;
}

@include media-breakpoint-down(md) {
display: flex;
flex-direction: row;
}

@include media-breakpoint-down(sm) {
/* @include media-breakpoint-down(sm) {
margin-top: 10px;
}
} */

@media (max-width: 599px) {
/* @media (max-width: 599px) {
padding-top: 0;
padding-bottom: 0;
flex-direction: column;
}
} */
.dashboard-banner-chart-legend-item-line{
height: 32px;
width: 5px;
Expand Down Expand Up @@ -269,6 +313,9 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
align-items: flex-start;
width: 200px;
flex-direction: column;
@media (max-width: 500px) {
width: 165px;
}
.dashboard-banner-network-stats-label{
font-family: 'Prompt';
font-style: normal;
Expand All @@ -282,7 +329,7 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 24px;
font-size: 20px;
line-height: 36px;
color: #152928;
}
Expand Down
15 changes: 15 additions & 0 deletions apps/block_scout_web/assets/css/components/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,21 @@ $footer-logo-width: auto !default;
@media (max-width: $breakpoint-md) {
width: 100%;
}
.foot-left-description-container{
display:flex;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
padding:18px;
width:480px;
margin-right:80px;
@media (max-width: 992px) {
margin-right: 0;
margin-bottom: 20px;
}
}
.row {
margin: 0;
}
}

.footer-logo-row {
Expand Down
8 changes: 4 additions & 4 deletions apps/block_scout_web/assets/css/components/_search.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.mobile-search-show {
@media screen and (max-width: 1200px) {
@media screen and (max-width: 992px) {
width: 100%;
}
@media screen and (min-width: 1200px) {
@media screen and (min-width: 992px) {
display: none !important;
}
}

.mobile-search-hide {
@media screen and (max-width: 1200px) {
@media screen and (max-width: 992px) {
display: none !important;
}
}
Expand All @@ -28,7 +28,7 @@
border: none !important;
border-radius: 0 !important;
background-color: #f5f6fa !important;
/* @media screen and (max-width: 1200px) {
/* @media screen and (max-width: 992px) {
height: auto !important;
} */
}
Expand Down

0 comments on commit 7d02fe6

Please sign in to comment.