(Add) mobile menu background styles - header styles - general layout - refactored some elements
This commit is contained in:
Gabriel Rodriguez Alsina
parent
e06650d6cb
commit
fa23bfe4bb
16
src/App.js
16
src/App.js
|
|
@ -140,22 +140,21 @@ class App extends Component {
|
|||
</div>
|
||||
) : null
|
||||
|
||||
const isTestnet = contractsStore.netId in constants.NETWORKS && constants.NETWORKS[contractsStore.netId].TESTNET
|
||||
|
||||
return networkBranch ? (
|
||||
<section className={`content ${this.state.showMobileMenu ? 'content-menu-open' : ''}`}>
|
||||
<div className={`lo-App ${this.state.showMobileMenu ? 'lo-App-menu-open' : ''}`}>
|
||||
{commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
|
||||
<Header
|
||||
baseRootPath={commonStore.rootPath}
|
||||
navigationData={this.state.navigationData}
|
||||
netId={contractsStore.netId}
|
||||
networkBranch={networkBranch}
|
||||
onMenuToggle={this.toggleMobileMenu}
|
||||
showMobileMenu={this.state.showMobileMenu}
|
||||
/>
|
||||
{search}
|
||||
<div
|
||||
className={`app-container ${this.state.showMobileMenu ? 'app-container-open-mobile-menu' : ''} ${
|
||||
isTestnet ? 'sokol' : ''
|
||||
<section
|
||||
className={`lo-App_Content lo-App_Content-${networkBranch} ${
|
||||
this.state.showMobileMenu ? 'lo-App_Content-mobile-menu-open' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="container">
|
||||
|
|
@ -168,10 +167,9 @@ class App extends Component {
|
|||
<Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />
|
||||
<Route exact path={`${commonStore.rootPath}/tofinalize`} render={this.onToFinalizeBallotsRender} />
|
||||
<Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
|
||||
{/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
|
||||
</div>
|
||||
</section>
|
||||
<Footer networkBranch={networkBranch} />
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<BaseLoader />
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 214.64 31" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(0 -10)"><path d="m123.06 33.95a1 1 0 0 1 -.31-.74v-17a1.14 1.14 0 0 1 .29-.82 1.2 1.2 0 0 1 1.61 0 1.15 1.15 0 0 1 .29.82v16.1h8.65a1.07 1.07 0 0 1 .75.24 1 1 0 0 1 0 1.4 1.08 1.08 0 0 1 -.75.24h-9.78a1.09 1.09 0 0 1 -.75-.24z"/><path d="m139 33.58a5.55 5.55 0 0 1 -2.17-2.38 8 8 0 0 1 -.76-3.59 8 8 0 0 1 .76-3.59 5.54 5.54 0 0 1 2.17-2.39 6.25 6.25 0 0 1 3.25-.83 6.34 6.34 0 0 1 3.27.83 5.53 5.53 0 0 1 2.22 2.37 8 8 0 0 1 .76 3.59 8 8 0 0 1 -.76 3.59 5.54 5.54 0 0 1 -2.18 2.38 6.34 6.34 0 0 1 -3.27.83 6.26 6.26 0 0 1 -3.29-.81zm6.21-2.25a5.83 5.83 0 0 0 1-3.73 5.79 5.79 0 0 0 -1-3.7 4 4 0 0 0 -5.89 0 5.8 5.8 0 0 0 -1 3.7 5.84 5.84 0 0 0 1 3.72 4.05 4.05 0 0 0 5.93.02z"/><path d="m162 26v7.32a1.09 1.09 0 0 1 -.28.78 1 1 0 0 1 -.76.3 1 1 0 0 1 -1.07-1.08v-1.32a3.85 3.85 0 0 1 -1.55 1.79 4.56 4.56 0 0 1 -2.41.63 5.26 5.26 0 0 1 -2.32-.51 4.14 4.14 0 0 1 -1.67-1.43 3.54 3.54 0 0 1 -.62-2 3.29 3.29 0 0 1 .75-2.3 4.54 4.54 0 0 1 2.43-1.18 24.24 24.24 0 0 1 4.77-.36h.59v-.92a3.55 3.55 0 0 0 -.66-2.37 2.69 2.69 0 0 0 -2.13-.75 7.84 7.84 0 0 0 -3.7 1 2.44 2.44 0 0 1 -1 .46.69.69 0 0 1 -.54-.24.9.9 0 0 1 -.21-.62 1 1 0 0 1 .23-.66 2.67 2.67 0 0 1 .74-.58 8.61 8.61 0 0 1 2.13-.85 9.4 9.4 0 0 1 2.37-.31q4.91-.01 4.91 5.2zm-3.15 5.64a3.93 3.93 0 0 0 1-2.81v-.83h-.48a23.82 23.82 0 0 0 -3.59.2 3.47 3.47 0 0 0 -1.75.67 1.77 1.77 0 0 0 -.52 1.39 2.23 2.23 0 0 0 .76 1.74 2.76 2.76 0 0 0 1.92.69 3.47 3.47 0 0 0 2.64-1.09z"/><path d="m177.22 15.41a1 1 0 0 1 .29.75v17.13a1.06 1.06 0 0 1 -.29.78 1.08 1.08 0 0 1 -.8.3 1 1 0 0 1 -.79-.3 1.09 1.09 0 0 1 -.28-.78v-1.46a4.32 4.32 0 0 1 -1.73 1.91 5.14 5.14 0 0 1 -2.67.67 5.39 5.39 0 0 1 -3-.86 5.67 5.67 0 0 1 -2-2.41 8.41 8.41 0 0 1 -.72-3.59 8.26 8.26 0 0 1 .72-3.55 5.37 5.37 0 0 1 5.06-3.2 5.14 5.14 0 0 1 2.67.67 4.32 4.32 0 0 1 1.73 1.91v-7.22a1 1 0 0 1 .28-.77 1.07 1.07 0 0 1 .79-.28 1.08 1.08 0 0 1 .74.3zm-2.91 15.9a5.85 5.85 0 0 0 1-3.7 5.79 5.79 0 0 0 -1-3.69 3.54 3.54 0 0 0 -2.93-1.29 3.61 3.61 0 0 0 -3 1.29 5.59 5.59 0 0 0 -1.06 3.63 5.85 5.85 0 0 0 1.06 3.73 3.57 3.57 0 0 0 3 1.33 3.52 3.52 0 0 0 2.93-1.3z"/><path d="m181.59 17.65a1.3 1.3 0 0 1 -.4-1 1.27 1.27 0 0 1 .4-1 1.64 1.64 0 0 1 2.09 0 1.27 1.27 0 0 1 .4 1 1.3 1.3 0 0 1 -.4 1 1.64 1.64 0 0 1 -2.09 0zm.25 16.44a1 1 0 0 1 -.31-.79v-11.37a1 1 0 0 1 .31-.79 1.12 1.12 0 0 1 .79-.28 1.08 1.08 0 0 1 .78.28 1.05 1.05 0 0 1 .29.79v11.36a1 1 0 0 1 -.29.81 1.11 1.11 0 0 1 -.78.27 1.13 1.13 0 0 1 -.79-.29z"/><path d="m199 26v7.3a1 1 0 0 1 -1.07 1.08 1.12 1.12 0 0 1 -.8-.28 1.05 1.05 0 0 1 -.29-.79v-7.18a4.08 4.08 0 0 0 -.71-2.66 2.82 2.82 0 0 0 -2.26-.83 3.81 3.81 0 0 0 -2.87 1.1 4.11 4.11 0 0 0 -1.07 3v6.57a1 1 0 0 1 -1.07 1.08 1.12 1.12 0 0 1 -.8-.28 1.05 1.05 0 0 1 -.29-.79v-11.39a1.06 1.06 0 0 1 .29-.78 1.08 1.08 0 0 1 .8-.3 1 1 0 0 1 .76.3 1.05 1.05 0 0 1 .28.75v1.37a4.41 4.41 0 0 1 1.79-1.84 5.36 5.36 0 0 1 2.63-.63q4.68-.01 4.68 5.2z"/><path d="m214.35 21.15a1.06 1.06 0 0 1 .29.78v11.41a6 6 0 0 1 -1.5 4.43 6 6 0 0 1 -4.45 1.49 9.2 9.2 0 0 1 -4.77-1.13 1.51 1.51 0 0 1 -1-1.24.94.94 0 0 1 .2-.62.65.65 0 0 1 .52-.24 2.58 2.58 0 0 1 1 .38 12.4 12.4 0 0 0 1.85.78 7.06 7.06 0 0 0 2.17.3 3.79 3.79 0 0 0 2.87-1 4.11 4.11 0 0 0 1-2.95v-2.33a4.09 4.09 0 0 1 -1.73 1.94 5.39 5.39 0 0 1 -2.75.67 5.73 5.73 0 0 1 -3-.81 5.46 5.46 0 0 1 -2.06-2.29 7.58 7.58 0 0 1 -.74-3.42 7.58 7.58 0 0 1 .74-3.42 5.46 5.46 0 0 1 2.01-2.28 5.73 5.73 0 0 1 3-.81 5.27 5.27 0 0 1 2.71.67 4.3 4.3 0 0 1 1.74 1.91v-1.44a1.09 1.09 0 0 1 .28-.78 1 1 0 0 1 .79-.3 1.08 1.08 0 0 1 .83.3zm-2.95 9.62a5.15 5.15 0 0 0 1.07-3.46 5.15 5.15 0 0 0 -1.06-3.43 3.66 3.66 0 0 0 -3-1.25 3.75 3.75 0 0 0 -3 1.25 5.07 5.07 0 0 0 -1.08 3.43 5.11 5.11 0 0 0 1.08 3.46 3.74 3.74 0 0 0 3 1.25 3.67 3.67 0 0 0 2.99-1.25z"/><path d="m17.38 34.81h-1.57v4.63a1.57 1.57 0 0 1 -1.59 1.56h-12.63a1.57 1.57 0 0 1 -1.59-1.55v-27.89a1.57 1.57 0 0 1 1.59-1.56h15.79a12.52 12.52 0 0 1 12.62 12.41 12.52 12.52 0 0 1 -12.62 12.4zm31.12-24.81a15.5 15.5 0 1 1 -15.5 15.5 15.5 15.5 0 0 1 15.5-15.5zm50.5 30a1 1 0 0 1 -1 1h-35.06a.94.94 0 0 1 -.74-1.51l17.34-28.72a.93.93 0 0 1 1.83 0l17.63 28.88-.06.08a.93.93 0 0 1 .06.27z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 339 B |
Binary file not shown.
|
Before Width: | Height: | Size: 637 B |
Binary file not shown.
|
Before Width: | Height: | Size: 340 B |
Binary file not shown.
|
Before Width: | Height: | Size: 632 B |
Binary file not shown.
|
Before Width: | Height: | Size: 214 B |
Binary file not shown.
|
Before Width: | Height: | Size: 341 B |
Binary file not shown.
|
Before Width: | Height: | Size: 214 B |
Binary file not shown.
|
Before Width: | Height: | Size: 341 B |
Binary file not shown.
|
Before Width: | Height: | Size: 277 B |
Binary file not shown.
|
Before Width: | Height: | Size: 505 B |
Binary file not shown.
|
Before Width: | Height: | Size: 277 B |
Binary file not shown.
|
Before Width: | Height: | Size: 505 B |
Binary file not shown.
|
Before Width: | Height: | Size: 241 B |
Binary file not shown.
|
Before Width: | Height: | Size: 424 B |
Binary file not shown.
|
Before Width: | Height: | Size: 240 B |
Binary file not shown.
|
Before Width: | Height: | Size: 426 B |
|
|
@ -1,62 +0,0 @@
|
|||
.footer {
|
||||
@extend %full-width;
|
||||
|
||||
background-color: $poa-purple;
|
||||
bottom: 0;
|
||||
padding: 18px 0;
|
||||
position: absolute;
|
||||
|
||||
&.sokol {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
order: 2;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
margin-top: 15px;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
background-image: url('#{ $base-images-path}/logos/logo-poa.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
order: 0;
|
||||
width: 139px;
|
||||
|
||||
&.sokol {
|
||||
background-image: url('#{ $base-images-path}/logos/logo-sokol.svg');
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
&-rights {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
order: 1;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
line-height: normal;
|
||||
margin-top: 15px;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
.header {
|
||||
background-color: $poa-purple;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 124;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
width: 93%;
|
||||
padding: 22px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
|
||||
// logos
|
||||
&-logo {
|
||||
display: block;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
// header links
|
||||
.links-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $header-links-container-height;
|
||||
margin-left: auto;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
justify-content: flex-end;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.links-container-mobile {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
margin-left: 34px;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
transition: opacity linear 0.1s;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// header link items
|
||||
.link-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.link-icon {
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active-sokol.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize-sokol.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.mobile-menu-open-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-mobile-menu-container {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
background-color: $poa-purple-darker;
|
||||
height: $header-mobile-menu-container-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.header-mobile-menu-container {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
background-color: $sokol-cyan-sarker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Select {
|
||||
$select-mobile-width: 125px;
|
||||
|
||||
margin-left: 25px;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
max-width: $select-mobile-width;
|
||||
order: 2;
|
||||
.Select-control {
|
||||
max-width: $select-mobile-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-new-ballot {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
opacity: 1;
|
||||
.link-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.btn.btn-new-ballot {
|
||||
background-color: #fff;
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg');
|
||||
color: $sokol-cyan;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.select-network-id {
|
||||
background: #fff;
|
||||
width: 40px;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.app-container {
|
||||
padding-bottom: 30px;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
&.app-container-open-mobile-menu {
|
||||
&:before {
|
||||
background-color: rgba(78, 44, 137, .8);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
z-index: 1234;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.app-container-open-mobile-menu.sokol {
|
||||
&:before {
|
||||
background-color: rgba(106, 201, 185, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
#root,
|
||||
.app-container {
|
||||
height: 100%;
|
||||
}
|
||||
.app-container {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-top: $header-height_mobile + $search-container-height;
|
||||
}
|
||||
&.content-menu-open {
|
||||
padding-top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: .2;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: .2;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 50%;
|
||||
margin: -30px 0 0 -111.5px;
|
||||
padding-top: 50px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 206px;
|
||||
|
||||
&:before {
|
||||
background-image: url("#{ $base-images-path }/logos/logo_loader.svg");
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100px;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
&-i {
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: fadeOut;
|
||||
animation-timing-function: linear;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
height: 9px;
|
||||
opacity:.2;
|
||||
width: 9px;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .1s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
animation-delay: .5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
.search-container {
|
||||
background-color: #502d8d;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
height: $search-container-height;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
.socials {
|
||||
&-item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-i {
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
transition: 0.3s background-color;
|
||||
vertical-align: top;
|
||||
width: 30px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&_github {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/git@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/git.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_telegram {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/telegram@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/telegram.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_twitter {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/tw@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/tw.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_poa {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/poa@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/poa.png');
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sokol {
|
||||
.socials {
|
||||
|
||||
.socials-i_github {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/git-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/git-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_telegram {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/telegram-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/telegram-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_twitter {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/tw-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/tw-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_poa {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/poa-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/poa-sokol.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
.lo-App {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-top: $header-height + $search-container-height;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&#{ & }-menu-open {
|
||||
padding-top: $header-mobile-menu-container-height + $header-height;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lo-App_Content {
|
||||
flex-grow: 1;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background-color: rgba($poa-purple, 0.5);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: $header-mobile-menu-container-height + $header-height;
|
||||
z-index: 1234;
|
||||
}
|
||||
|
||||
&#{ & }-core {
|
||||
&:before {
|
||||
background-color: rgba($poa-purple, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
&:before {
|
||||
background-color: rgba($sokol-cyan, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
&:before {
|
||||
background-color: rgba($xdai-orange, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-mobile-menu-open {
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-width: $mobile-width) {
|
||||
// #root,
|
||||
// .app-container {
|
||||
// height: 100%;
|
||||
// }
|
||||
// .app-container {
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
background-color: $poa-purple;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
min-height: 60px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
.sw-Header {
|
||||
align-items: center;
|
||||
background-color: $poa-purple;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: $header-height;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: background-color 0.25s ease-out;
|
||||
width: 100%;
|
||||
z-index: 124;
|
||||
|
||||
@media (min-width: $mobile-width) {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&#{ & }-menu-open {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&#{ & }-core {
|
||||
background-color: $poa-purple;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
background-color: $xdai-gray;
|
||||
}
|
||||
|
||||
|
||||
//// TODO: crap below, fix
|
||||
&-logo {
|
||||
display: block;
|
||||
height: 26px;
|
||||
} // header links
|
||||
|
||||
.links-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $header-links-container-height;
|
||||
margin-left: auto;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
justify-content: flex-end;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
margin-left: 34px;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
transition: opacity linear 0.1s;
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
.mobile-menu-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
.mobile-menu-open-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.Select {
|
||||
$select-mobile-width: 125px;
|
||||
margin-left: 25px;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
max-width: $select-mobile-width;
|
||||
order: 2;
|
||||
.Select-control {
|
||||
max-width: $select-mobile-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.btn-new-ballot {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
opacity: 1;
|
||||
.link-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.sokol {
|
||||
.btn.btn-new-ballot {
|
||||
background-color: #fff;
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg');
|
||||
color: $sokol-cyan;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sw-Header_Content {
|
||||
@include content-layout-width();
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
min-height: $header-height;
|
||||
}
|
||||
|
||||
.select-network-id {
|
||||
background: #fff;
|
||||
width: 40px;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
.hd-MobileMenuLinks {
|
||||
background-color: $poa-purple-darker;
|
||||
height: $header-mobile-menu-container-height;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
.sokol & { // TODO: Fix
|
||||
background-color: $sokol-cyan-sarker;
|
||||
}
|
||||
}
|
||||
|
||||
.hd-MobileMenuLinks_ItemsContainer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hd-MobileMenuLinks_Item {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
margin-left: 0;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
transition: opacity linear 0.1s;
|
||||
|
||||
&:hover,
|
||||
&#{ & }-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Fix this mess
|
||||
.hd-MobileMenuLinks_Icon {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
float: left;
|
||||
height: 18px;
|
||||
margin-right: 10px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
// @import "App";
|
||||
@import "App";
|
||||
@import "BaseLoader";
|
||||
// @import "ButtonDownload";
|
||||
// @import "ButtonGenerate";
|
||||
@import "Footer";
|
||||
// @import "Header";
|
||||
// @import "Home";
|
||||
@import "Header";
|
||||
@import "IconGithub";
|
||||
@import "IconPOA";
|
||||
@import "IconTelegram";
|
||||
@import "IconTwitter";
|
||||
// @import "Keys";
|
||||
@import "Loading";
|
||||
@import "LogoDai";
|
||||
@import "LogoPOA";
|
||||
@import "LogoSokol";
|
||||
// @import "MainImage";
|
||||
@import "SocialIcons";
|
||||
@import "MobileMenuLinks";
|
||||
@import "SocialIcons";
|
||||
|
||||
// delete
|
||||
@import "link-icons";
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// TODO: Temporary, fix this
|
||||
|
||||
.link-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize.svg');
|
||||
}
|
||||
|
||||
.sokol & {
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active-sokol.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize-sokol.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ $breakpoint-xxxl: 1366px;
|
|||
|
||||
// header
|
||||
$header-links-container-height: 70px;
|
||||
$header-height_mobile: 70px;
|
||||
$header-height: 70px;
|
||||
|
||||
// search
|
||||
$search-container-height: 50px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8,24 +8,13 @@
|
|||
@import 'application/base';
|
||||
@import 'application/buttons';
|
||||
@import 'application/controls';
|
||||
@import 'application/footer';
|
||||
@import 'application/header';
|
||||
@import 'application/info';
|
||||
@import 'application/layout';
|
||||
@import 'application/loading';
|
||||
@import 'application/main-title';
|
||||
@import 'application/new';
|
||||
@import 'application/search';
|
||||
@import 'application/settings';
|
||||
@import 'application/socials';
|
||||
@import 'application/vote-scale';
|
||||
|
||||
@import 'application/select/select';
|
||||
@import 'application/select/control';
|
||||
@import 'application/select/menu';
|
||||
@import 'application/select/multi';
|
||||
@import 'application/select/spinner';
|
||||
|
||||
@import 'application/ballot-types';
|
||||
@import 'application/ballots/placeholders';
|
||||
@import 'application/ballots/base';
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
// html,
|
||||
// body,
|
||||
// #root,
|
||||
// html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
|
||||
// body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||
// // swal2-shown above are for when sweet alert is showing
|
||||
// height: 100%;
|
||||
// }
|
||||
html,
|
||||
body,
|
||||
#root,
|
||||
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
|
||||
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||
// swal2-shown above are for when sweet alert is showing
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// #root {
|
||||
// display: flex;
|
||||
// overflow: auto;
|
||||
// }
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'select/index';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import 'select';
|
||||
@import 'control';
|
||||
@import 'menu';
|
||||
@import 'multi';
|
||||
@import 'spinner';
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react'
|
||||
import logoBase from '../assets/images/logos/logo-poa.svg'
|
||||
import logoSokol from '../assets/images/logos/logo-sokol.svg'
|
||||
import menuIconBase from '../assets/images/icons/icon-menu.svg'
|
||||
import menuIconSokol from '../assets/images/icons/icon-menu-sokol.svg'
|
||||
import menuOpenIconBase from '../assets/images/icons/icon-close.svg'
|
||||
import menuOpenIconSokol from '../assets/images/icons/icon-close-sokol.svg'
|
||||
import NavigationLinks from './NavigationLinks.jsx'
|
||||
import MobileMenuLinks from './MobileMenuLinks.jsx'
|
||||
import { constants } from '../utils/constants'
|
||||
|
||||
export const Header = ({ netId, baseRootPath, navigationData, showMobileMenu, onMenuToggle }) => {
|
||||
const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
|
||||
const headerClassName = thisIsTestnet ? 'sokol' : ''
|
||||
const logoImageName = thisIsTestnet ? logoSokol : logoBase
|
||||
const menuIcon = thisIsTestnet ? menuIconSokol : menuIconBase
|
||||
const menuOpenIcon = thisIsTestnet ? menuOpenIconSokol : menuOpenIconBase
|
||||
|
||||
return (
|
||||
<header className={`header ${headerClassName}`}>
|
||||
{showMobileMenu && (
|
||||
<div className="header-mobile-menu-container">
|
||||
{<MobileMenuLinks onMenuToggle={onMenuToggle} navigationData={navigationData} />}
|
||||
</div>
|
||||
)}
|
||||
<div className="container">
|
||||
<a className="header-logo-a" href={baseRootPath}>
|
||||
<img className="header-logo" src={logoImageName} alt="" />
|
||||
</a>
|
||||
<div className="links-container">
|
||||
<NavigationLinks navigationData={navigationData} />
|
||||
</div>
|
||||
<div className="mobile-menu">
|
||||
<img
|
||||
alt=""
|
||||
className={showMobileMenu ? 'mobile-menu-open-icon' : 'mobile-menu-icon'}
|
||||
onClick={onMenuToggle}
|
||||
src={showMobileMenu ? menuOpenIcon : menuIcon}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import NavigationLinks from '../NavigationLinks.jsx'
|
||||
import React from 'react'
|
||||
import menuIconBase from '../../assets/images/icons/icon-menu.svg'
|
||||
import menuIconSokol from '../../assets/images/icons/icon-menu-sokol.svg'
|
||||
import menuOpenIconBase from '../../assets/images/icons/icon-close.svg'
|
||||
import menuOpenIconSokol from '../../assets/images/icons/icon-close-sokol.svg'
|
||||
import { Logo } from '../Logo'
|
||||
import { MobileMenuLinks } from '../MobileMenuLinks'
|
||||
import { constants } from '../../utils/constants'
|
||||
|
||||
export const Header = ({
|
||||
baseRootPath,
|
||||
navigationData,
|
||||
netId,
|
||||
networkBranch = undefined,
|
||||
onMenuToggle,
|
||||
showMobileMenu = false
|
||||
}) => {
|
||||
const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
|
||||
const menuIcon = thisIsTestnet ? menuIconSokol : menuIconBase
|
||||
const menuOpenIcon = thisIsTestnet ? menuOpenIconSokol : menuOpenIconBase
|
||||
|
||||
return (
|
||||
<header className={`sw-Header sw-Header-${networkBranch} ${showMobileMenu ? 'sw-Header-menu-open' : ''}`}>
|
||||
{showMobileMenu ? <MobileMenuLinks onMenuToggle={onMenuToggle} navigationData={navigationData} /> : null}
|
||||
<div className="sw-Header_Content">
|
||||
<Logo networkBranch={networkBranch} href={baseRootPath} />
|
||||
<div className="links-container">
|
||||
<NavigationLinks navigationData={navigationData} />
|
||||
</div>
|
||||
<div className="mobile-menu">
|
||||
<img
|
||||
alt=""
|
||||
className={showMobileMenu ? 'mobile-menu-open-icon' : 'mobile-menu-icon'}
|
||||
onClick={onMenuToggle}
|
||||
src={showMobileMenu ? menuOpenIcon : menuIcon}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
|
||||
const MobileMenuLinks = ({ onMenuToggle, navigationData }) => {
|
||||
return (
|
||||
<div className="links-container-mobile" onClick={onMenuToggle}>
|
||||
{navigationData.map(item => (
|
||||
<NavLink activeClassName="active" className={`link ${item.class}`} exact to={item.url}>
|
||||
<i className={`link-icon ${item.icon}`} />
|
||||
<span className="link-text">{item.title}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MobileMenuLinks
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
|
||||
export const MobileMenuLinks = ({ onMenuToggle, navigationData }) => {
|
||||
return (
|
||||
<div className="hd-MobileMenuLinks">
|
||||
<div className="hd-MobileMenuLinks_ItemsContainer" onClick={onMenuToggle}>
|
||||
{navigationData.map(item => (
|
||||
<NavLink
|
||||
activeClassName="hd-MobileMenuLinks_Item-active"
|
||||
className={`hd-MobileMenuLinks_Item ${item.class}`}
|
||||
exact
|
||||
to={item.url}
|
||||
>
|
||||
<i className={`link-icon ${item.icon}`} />
|
||||
<span className="hd-MobileMenuLinks_Text">{item.title}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
|
||||
@inject('contractsStore')
|
||||
@observer
|
||||
export class Settings extends React.Component {
|
||||
render() {
|
||||
const { contractsStore } = this.props
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="settings">
|
||||
<p className="settings-title">Select Voting Key</p>
|
||||
<div className="form-el">
|
||||
<select id="state">
|
||||
<option value="" default>
|
||||
{contractsStore.votingKey}
|
||||
</option>
|
||||
</select>
|
||||
<div className="hint">
|
||||
Please select your voting key from the list. You will be able to change it later in Settings menu.
|
||||
</div>
|
||||
</div>
|
||||
<div className="center">
|
||||
<button type="button">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
export { Ballots } from './Ballots.jsx'
|
||||
export { BaseLoader } from './BaseLoader/'
|
||||
export { Footer } from './Footer/'
|
||||
export { Header } from './Header.jsx'
|
||||
export { Loading } from './Loading/'
|
||||
export { BaseLoader } from './BaseLoader'
|
||||
export { Footer } from './Footer'
|
||||
export { Header } from './Header'
|
||||
export { Loading } from './Loading'
|
||||
export { NewBallot } from './NewBallot.jsx'
|
||||
export { Settings } from './Settings.jsx'
|
||||
|
|
|
|||
Loading…
Reference in New Issue