[PE] refactoring for page About

This commit is contained in:
Maxim Kadushkin 2020-12-27 13:20:30 +03:00
parent cfdba38ca6
commit 5e9ce16d8d
6 changed files with 49 additions and 143 deletions

View file

@ -0,0 +1,41 @@
@text-normal: #000;
.about {
.page-content {
text-align: center;
}
.content-block:first-child {
margin: 15px 0;
}
.content-block {
margin: 0 auto 15px;
a {
color: @text-normal;
}
}
h3 {
font-weight: normal;
margin: 0;
&.vendor {
color: @text-normal;
font-weight: bold;
margin-top: 15px;
}
}
p > label {
margin-right: 5px;
}
.logo {
display: inline-block;
width: 100%;
height: 55px;
background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center;
}
}

View file

@ -299,4 +299,10 @@
.dialog {
background-color: rgba(var(--f7-dialog-bg-color-rgb), 1);
}
.about {
.logo {
margin-top: 20px;
}
}
}

View file

@ -27,76 +27,3 @@
color: #212121;
}
}
// About
.content-block {
margin: 35px 0;
padding: 0 15px;
color: #6d6d72;
box-sizing: border-box;
}
.about .page-content {
text-align: center;
}
.about .content-block {
margin: 0 auto 15px;
}
.about .content-block:first-child {
margin: 15px 0;
}
.about .logo {
margin-top: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: 100%;
height: 55px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290 55"><defs><style>.cls-1,.cls-2,.cls-3{fill-rule:evenodd;}.cls-1{fill:url(#grad_173);}.cls-2{fill:url(#grad_168);}.cls-3{fill:url(#grad_91);}.cls-4{fill:#526484;}.cls-5{fill:#3a4968;}</style><linearGradient id="grad_173" x1="35" y1="63.54" x2="35" y2="24.24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d94315" stop-opacity="0.3"/><stop offset="0.88" stop-color="#d9420b"/></linearGradient><linearGradient id="grad_168" x1="35.03" y1="46.52" x2="35.03" y2="20.68" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8bba24" stop-opacity="0.3"/><stop offset="0.66" stop-color="#8bba25"/></linearGradient><linearGradient id="grad_91" x1="35" y1="35.95" x2="35" y2="1.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#28a8e0" stop-opacity="0.3"/><stop offset="1" stop-color="#26a8de"/></linearGradient></defs><path class="cls-1" d="M31.36,53.32L7.5,42.58c-2-.9-2-2.38,0-3.28l8.36-3.77,15.49,7a10.15,10.15,0,0,0,7.28,0l15.49-7L62.5,39.3c2,0.9,2,2.38,0,3.28L38.64,53.32a10.14,10.14,0,0,1-7.28,0h0Z"/><path class="cls-2" d="M31.39,40.14L7.56,29.39c-2-.9-2-2.38,0-3.28l8.1-3.65,15.73,7.09a10.12,10.12,0,0,0,7.28,0L54.4,22.46l8.1,3.65c2,0.9,2,2.38,0,3.28L38.67,40.14a10.12,10.12,0,0,1-7.28,0h0Z"/><path class="cls-3" d="M31.36,27.19L7.5,16.58c-2-.89-2-2.35,0-3.24L31.36,2.74a10.27,10.27,0,0,1,7.28,0L62.5,13.34c2,0.89,2,2.35,0,3.24L38.64,27.19a10.26,10.26,0,0,1-7.28,0h0Z"/><path class="cls-4" d="M72.06,27.86q0-6.86,4-10.31a14.37,14.37,0,0,1,18.68,0q4,3.45,4,10.35t-4,10.31a14.37,14.37,0,0,1-18.68,0q-4-3.45-4-10.31v0h0Zm5.78,0q0,4.74,1.8,7a7.77,7.77,0,0,0,3.9,2.79q0.51,0.12,1,.17a7.12,7.12,0,0,0,.92.06,7.59,7.59,0,0,0,.94-0.06,5.83,5.83,0,0,0,1-.21,7.58,7.58,0,0,0,3.87-2.79Q93,32.56,93,27.89T91.2,21a7.58,7.58,0,0,0-3.87-2.79,5.83,5.83,0,0,0-1-.21,7.76,7.76,0,0,0-.94-0.06,7.27,7.27,0,0,0-.92.06q-0.45.06-1,.17A7.77,7.77,0,0,0,79.64,21q-1.8,2.22-1.8,6.92v0h0Z"/><polygon class="cls-4" points="102 15 109 15 119.89 35 120 35 120 15 125 15 125 41 118 41 107.13 20.96 107.01 20.96 107 41 102 41 102 15 102 15"/><polygon class="cls-4" points="130 15 135 15 135 37 147 37 147 41 130 41 130 15 130 15"/><polygon class="cls-4" points="148 15 155.47 25.98 155.59 25.98 163 15 168.5 15 158 31 158 41 153 41 153 31 142.5 15 148 15"/><path class="cls-5" d="M168,27.94q0-6.77,3.9-10.18a13.88,13.88,0,0,1,18.22,0Q194,21.17,194,28t-3.88,10.18a13.88,13.88,0,0,1-18.22,0Q168,34.75,168,28v0h0Zm5.63,0q0,4.68,1.75,6.87a7.57,7.57,0,0,0,3.81,2.76q0.49,0.11.93,0.17a6.85,6.85,0,0,0,.89.06,7.31,7.31,0,0,0,.91-0.06,5.6,5.6,0,0,0,1-.21,7.39,7.39,0,0,0,3.77-2.76q1.71-2.19,1.71-6.79t-1.71-6.79a7.39,7.39,0,0,0-3.77-2.76,5.61,5.61,0,0,0-1-.21,7.48,7.48,0,0,0-.91-0.06,7,7,0,0,0-.89.06q-0.44.06-.93,0.17a7.57,7.57,0,0,0-3.81,2.76q-1.75,2.19-1.75,6.83v0h0Z"/><polygon class="cls-5" points="197 15 212 15 212 19 202 19 202 26 211 26 211 30 202 30 202 41 197 41 197 15 197 15"/><polygon class="cls-5" points="216 15 231 15 231 19 221 19 221 26 230 26 230 30 221 30 221 41 216 41 216 15 216 15"/><polygon class="cls-5" points="234 41 234 15 239 15 239 41 234 41 234 41"/><path class="cls-5" d="M262,19.88a18.8,18.8,0,0,0-6.3-1c-7,0-8.28,5.64-8.28,9.13,0,2.54.84,9.19,7.67,9.19a17,17,0,0,0,6.57-1.24L262,40.42a42.48,42.48,0,0,1-7.46.81c-5.08,0-12.54-3.1-12.54-13.36,0-9.28,7-13,13-13a24.56,24.56,0,0,1,7,.8v4.25Z"/><polygon class="cls-5" points="266 15 282 15 282 19 271 19 271 26 281 26 281 30 271 30 271 37 282 37 282 41 266 41 266 15 266 15"/></svg>');
}
.settings-about-logo {
margin-top: 20px;
img {
max-width: 216px;
max-height: 35px;
}
}
.about h3 {
font-weight: 400;
margin: 0;
}
.about h3.vendor {
color: #000;
font-weight: 700;
margin-top: 15px;
}
.about p > label {
margin-right: 5px;
}
.about .content-block a {
color: #000;
}
.content-block-inner {
background: #fff;
padding: 10px 15px;
margin-left: -15px;
width: 100%;
position: relative;
color: #000;
}

View file

@ -46,72 +46,3 @@
color: #212121;
}
}
// About
.content-block {
margin: 35px 0;
padding: 0 15px;
color: #6d6d72;
box-sizing: border-box;
}
.about .page-content {
text-align: center;
}
.about .content-block {
margin: 0 auto 15px;
}
.about .content-block:first-child {
margin: 15px 0;
}
.about .logo {
margin-top: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: 100%;
height: 55px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290 55"><defs><style>.cls-1,.cls-2,.cls-3{fill-rule:evenodd;}.cls-1{fill:url(#grad_173);}.cls-2{fill:url(#grad_168);}.cls-3{fill:url(#grad_91);}.cls-4{fill:#526484;}.cls-5{fill:#3a4968;}</style><linearGradient id="grad_173" x1="35" y1="63.54" x2="35" y2="24.24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d94315" stop-opacity="0.3"/><stop offset="0.88" stop-color="#d9420b"/></linearGradient><linearGradient id="grad_168" x1="35.03" y1="46.52" x2="35.03" y2="20.68" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8bba24" stop-opacity="0.3"/><stop offset="0.66" stop-color="#8bba25"/></linearGradient><linearGradient id="grad_91" x1="35" y1="35.95" x2="35" y2="1.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#28a8e0" stop-opacity="0.3"/><stop offset="1" stop-color="#26a8de"/></linearGradient></defs><path class="cls-1" d="M31.36,53.32L7.5,42.58c-2-.9-2-2.38,0-3.28l8.36-3.77,15.49,7a10.15,10.15,0,0,0,7.28,0l15.49-7L62.5,39.3c2,0.9,2,2.38,0,3.28L38.64,53.32a10.14,10.14,0,0,1-7.28,0h0Z"/><path class="cls-2" d="M31.39,40.14L7.56,29.39c-2-.9-2-2.38,0-3.28l8.1-3.65,15.73,7.09a10.12,10.12,0,0,0,7.28,0L54.4,22.46l8.1,3.65c2,0.9,2,2.38,0,3.28L38.67,40.14a10.12,10.12,0,0,1-7.28,0h0Z"/><path class="cls-3" d="M31.36,27.19L7.5,16.58c-2-.89-2-2.35,0-3.24L31.36,2.74a10.27,10.27,0,0,1,7.28,0L62.5,13.34c2,0.89,2,2.35,0,3.24L38.64,27.19a10.26,10.26,0,0,1-7.28,0h0Z"/><path class="cls-4" d="M72.06,27.86q0-6.86,4-10.31a14.37,14.37,0,0,1,18.68,0q4,3.45,4,10.35t-4,10.31a14.37,14.37,0,0,1-18.68,0q-4-3.45-4-10.31v0h0Zm5.78,0q0,4.74,1.8,7a7.77,7.77,0,0,0,3.9,2.79q0.51,0.12,1,.17a7.12,7.12,0,0,0,.92.06,7.59,7.59,0,0,0,.94-0.06,5.83,5.83,0,0,0,1-.21,7.58,7.58,0,0,0,3.87-2.79Q93,32.56,93,27.89T91.2,21a7.58,7.58,0,0,0-3.87-2.79,5.83,5.83,0,0,0-1-.21,7.76,7.76,0,0,0-.94-0.06,7.27,7.27,0,0,0-.92.06q-0.45.06-1,.17A7.77,7.77,0,0,0,79.64,21q-1.8,2.22-1.8,6.92v0h0Z"/><polygon class="cls-4" points="102 15 109 15 119.89 35 120 35 120 15 125 15 125 41 118 41 107.13 20.96 107.01 20.96 107 41 102 41 102 15 102 15"/><polygon class="cls-4" points="130 15 135 15 135 37 147 37 147 41 130 41 130 15 130 15"/><polygon class="cls-4" points="148 15 155.47 25.98 155.59 25.98 163 15 168.5 15 158 31 158 41 153 41 153 31 142.5 15 148 15"/><path class="cls-5" d="M168,27.94q0-6.77,3.9-10.18a13.88,13.88,0,0,1,18.22,0Q194,21.17,194,28t-3.88,10.18a13.88,13.88,0,0,1-18.22,0Q168,34.75,168,28v0h0Zm5.63,0q0,4.68,1.75,6.87a7.57,7.57,0,0,0,3.81,2.76q0.49,0.11.93,0.17a6.85,6.85,0,0,0,.89.06,7.31,7.31,0,0,0,.91-0.06,5.6,5.6,0,0,0,1-.21,7.39,7.39,0,0,0,3.77-2.76q1.71-2.19,1.71-6.79t-1.71-6.79a7.39,7.39,0,0,0-3.77-2.76,5.61,5.61,0,0,0-1-.21,7.48,7.48,0,0,0-.91-0.06,7,7,0,0,0-.89.06q-0.44.06-.93,0.17a7.57,7.57,0,0,0-3.81,2.76q-1.75,2.19-1.75,6.83v0h0Z"/><polygon class="cls-5" points="197 15 212 15 212 19 202 19 202 26 211 26 211 30 202 30 202 41 197 41 197 15 197 15"/><polygon class="cls-5" points="216 15 231 15 231 19 221 19 221 26 230 26 230 30 221 30 221 41 216 41 216 15 216 15"/><polygon class="cls-5" points="234 41 234 15 239 15 239 41 234 41 234 41"/><path class="cls-5" d="M262,19.88a18.8,18.8,0,0,0-6.3-1c-7,0-8.28,5.64-8.28,9.13,0,2.54.84,9.19,7.67,9.19a17,17,0,0,0,6.57-1.24L262,40.42a42.48,42.48,0,0,1-7.46.81c-5.08,0-12.54-3.1-12.54-13.36,0-9.28,7-13,13-13a24.56,24.56,0,0,1,7,.8v4.25Z"/><polygon class="cls-5" points="266 15 282 15 282 19 271 19 271 26 281 26 281 30 271 30 271 37 282 37 282 41 266 41 266 15 266 15"/></svg>');
}
.settings-about-logo {
margin-top: 20px;
img {
max-width: 216px;
max-height: 35px;
}
}
.about h3 {
font-weight: 400;
margin: 0;
}
.about h3.vendor {
color: #000;
font-weight: 700;
margin-top: 15px;
}
.about p > label {
margin-right: 5px;
}
.about .content-block a {
color: #000;
}
.content-block-inner {
background: #fff;
padding: 10px 15px;
margin-left: -15px;
width: 100%;
position: relative;
color: #000;
}

View file

@ -5,6 +5,7 @@
@import '../../../../common/mobile/resources/less/common.less';
@import '../../../../common/mobile/resources/less/common-ios.less';
@import '../../../../common/mobile/resources/less/common-material.less';
@import '../../../../common/mobile/resources/less/about.less';
@import './app-material.less';
@import './app-ios.less';
@import './icons-ios.less';

View file

@ -25,7 +25,7 @@ const PagePresentationAbout = props => {
<Navbar title={_t.textAbout} backLink={_t.textBack} />
<div className="content-block">
{licInfo && typeof licInfo == 'object' && typeof(customer)=='object' ? null : (
<div className="logo"></div>
<i className="logo"></i>
)}
{logoCustomer && logoCustomer.length ? (
<div id="settings-about-logo" className="settings-about-logo">