Skip to content

Commit

Permalink
fix: country header styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@kreafox
kreafox committed Jan 30, 2024
1 parent 7ff2970 commit c122ba6
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 202 deletions.
90 changes: 44 additions & 46 deletions src/components/Blocks/CountryHeaderDataBlock/View.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,56 +96,54 @@ const View = (props) => {
''
)}
<div className="country-data-wrapper">
<div className="uww-country-wrapper">
{hide_data_section ||
(provider_url && (
<div className="uww-country-block">
<div className={'uww-left ' + getClassName(column_value)}>
<div className="uww-data">
<div>
{column_value[0] === 0 ? (
<span>0%</span>
) : (
<>
<DataConnectedValue
url={provider_url}
column={column_data}
placeholder={placeholder}
/>
%
</>
)}
</div>
{hide_data_section ||
(provider_url && (
<div className="uww-country-block">
<div className={'uww-left ' + getClassName(column_value)}>
<div className="uww-data">
<div>
{column_value[0] === 0 ? (
<span>0%</span>
) : (
<>
<DataConnectedValue
url={provider_url}
column={column_data}
placeholder={placeholder}
/>
%
</>
)}
</div>
{description && (
<span className="uww-text">{description}</span>
)}
</div>
<div className="uww-country-legend">
<div className="legend-wrapper">
<span className="legend-box blue-bg"></span>
<span className="legend-text">97.1 - 100%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box green-bg"></span>
<span className="legend-text">95.1 - 97%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box yellow-bg"></span>
<span className="legend-text">85.1 - 95%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box orange-bg"></span>
<span className="legend-text">70.1 - 85%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box red-bg"></span>
<span className="legend-text">0 - 70%</span>
</div>
{description && (
<span className="uww-text">{description}</span>
)}
</div>
<div className="uww-country-legend">
<div className="legend-wrapper">
<span className="legend-box blue-bg"></span>
<span className="legend-text">97.1 - 100%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box green-bg"></span>
<span className="legend-text">95.1 - 97%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box yellow-bg"></span>
<span className="legend-text">85.1 - 95%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box orange-bg"></span>
<span className="legend-text">70.1 - 85%</span>
</div>
<div className="legend-wrapper">
<span className="legend-box red-bg"></span>
<span className="legend-text">0 - 70%</span>
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
Expand Down
194 changes: 43 additions & 151 deletions src/components/Blocks/CountryHeaderDataBlock/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,56 +10,29 @@

.country-data-wrapper {
display: flex;
align-items: center;
flex-flow: row-reverse;
}

.country-profile-wrapper {
display: flex;
align-items: center;
}

.uww-country-wrapper {
display: flex;
min-height: 60px;
flex-direction: column;
justify-content: center;

.blue-bg {
background-color: @blue-bg;
}

.green-bg {
background-color: @green-bg;
}

.yellow-bg {
background-color: @yellow-bg;
}

.orange-bg {
background-color: @orange-bg;
}

.red-bg {
background-color: @red-bg;
}
}

.uww-left {
display: flex;
width: 200px;
height: 158px;
height: 150px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1em;
color: @white;
}

.uww-country-block {
display: flex;
flex-direction: row;
align-items: center;
gap: 4em;
gap: 1em;

.uww-data {
font-family: @headerFont;
Expand All @@ -74,14 +47,33 @@
line-height: 16px;
text-align: center;
}

.blue-bg {
background-color: @blue-bg;
}

.green-bg {
background-color: @green-bg;
}

.yellow-bg {
background-color: @yellow-bg;
}

.orange-bg {
background-color: @orange-bg;
}

.red-bg {
background-color: @red-bg;
}
}

.uww-country-legend {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
// padding-left: 25px;

.legend-wrapper {
display: flex;
Expand All @@ -92,50 +84,17 @@
.legend-box {
width: 44px;
height: 22px;
// margin-right: 14px;
}

.legend-text {
// color: #3d5265;
font-family: @headerFont;
font-size: 14px;
// font-weight: 500;
// line-height: 26px;
}
}

.blue-bg {
background-color: @blue-bg;
}

.green-bg {
background-color: @green-bg;
}

.yellow-bg {
background-color: @yellow-bg;
}

.orange-bg {
background-color: @orange-bg;
}

.red-bg {
background-color: @red-bg;
}
}

.country-header-block {
position: relative;
// color: darken(#3d5265, 15%);

.country-header-wrapper {
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
// justify-content: center;
}

.country-profile-flag {
line-height: 12px !important;
Expand Down Expand Up @@ -196,106 +155,39 @@
}
}

@media only screen and (min-width: 795px) and (max-width: 945px) {
.country-header-block .country-header-wrapper {
flex-direction: column;
align-items: flex-end;
}

.uww-country-block {
position: relative;
flex-direction: column;
}

.uww-country-legend {
position: absolute;
right: 0;
bottom: -60px;
min-width: 650px;
flex-direction: row;
}
}

@media only screen and (max-width: 794px) {
.country-header-block .country-header-wrapper {
flex-direction: column;
align-items: flex-start;
}

.uww-country-block {
position: relative;
flex-direction: row;
}

.country-data-wrapper {
padding-top: 1em;
}

#view .country-header-block {
position: relative;
height: 300px;
}
}

@media only screen and (max-width: 790px) and (min-width: 650px) {
@media only screen and (max-width: 767px) {
.country-data-wrapper {
align-self: flex-end;
flex-direction: row;
}
}

@media only screen and (max-width: @tabletBreakpoint) {
.contenttype-country_profile {
.content-area {
padding-top: 0 !important;
margin-top: 0 !important;
}
}

.country-header-block {
&:before {
top: -1px !important;
height: 131px !important;
border-top: 1px solid #d8d8d8;
}
@media only screen and (max-width: 480px) {
.uww-left {
width: 100%;
}
}

@media only screen and (max-width: @mobileLandscapeBreakpoint) {
.country-header-block {
.country-profile-flag img {
height: 90px;
}

&:before {
height: 92px !important;
}

.ui.selection.dropdown.countries-dd > .text,
.ui.selection.dropdown.countries-dd i.icon {
font-size: 24px;
}
.uww-country-block .uww-data {
font-size: 2.8em;
}
}

@media only screen and (max-width: 360px) {
.uww-country-block {
flex-direction: column;
align-items: flex-start;
width: 100%;
}

.uww-country-legend {
flex-direction: row;
padding: 0;
margin-top: 1rem;
column-count: 2;
column-gap: 2em;
display: block;
}

.legend-wrapper .legend-box {
width: 15px;
height: 15px;
}
.uww-country-legend .legend-wrapper {
break-inside: avoid-column;
padding: 4px 0;
gap: 0.5em;
}

.legend-wrapper .legend-text {
font-size: 11px;
line-height: 13px;
}
.uww-country-legend .legend-wrapper .legend-box {
width: 30px;
}
}
Loading

0 comments on commit c122ba6

Please sign in to comment.