Skip to content

Commit

Permalink
Complete GUI redesign (#221)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jholdstock
jholdstock authored May 18, 2020
1 parent f57e8f1 commit 3778970
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 119 deletions.
134 changes: 37 additions & 97 deletions gui/assets/public/css/dcrpool.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7565,38 +7565,42 @@ h2 {
width: 1em;
margin-left: -1em;
}
.carousel-image {
background-repeat:no-repeat;
background-position: center;
margin-left: 10px;
height: 100%;
width: 100%;
.carousel-image {
background-repeat:no-repeat;
background-position: center;
margin-left: 10px;
height: 100%;
width: 100%;

}
}

.main-carousel__image-container {
background-color: #091440;
height: 170px;
}

@media (min-width: 768px) {
.main-carousel__image-container {
background-color: #091440;
min-height: 170px; }
@media (min-width: 768px) {
.main-carousel__image-container {
min-height: 190px; } }
@media (min-width: 992px) {
.main-carousel__image-container {
min-height: 300px; } }
height: 190px; }
}

@media (min-width: 992px) {
.main-carousel__image-container {
height: 300px; }
}

.main-carousel__image-container img {
-o-object-fit: cover;
object-fit: cover; }
.main-carousel .carousel-cell {
width: 100%;
height: 300px;
margin-right: 20px; }
@media (max-width: 991.98px) {
.main-carousel .carousel-cell {
height: 520px;
background-color: #fff;
} }
@media (max-width: 767.98px) {
.main-carousel .carousel-cell {
height: 600px;
font-size: 15px; } }
.main-carousel .flickity-page-dots {
left: 22%;
Expand Down Expand Up @@ -7653,25 +7657,31 @@ h2 {
.tooltip .arrow {
display: none !important; }

.carousel-text {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 991.98px) {
.carousel-text {
padding-bottom: 45px;
padding-top: 1rem;
} }

.carousel-nav {
position: absolute;
bottom: 20px;
right: 0;
bottom: 10px;
text-align: center;
list-style: none;
margin: 0;
/* white circles */ }
@media (max-width: 991.98px) {
.carousel-nav {
bottom: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
@media (min-width: 992px) {
.carousel-nav {
height: 30px; } }
-ms-flex-align: center;
align-items: center; } }
.carousel-nav li {
display: inline-block;
cursor: pointer;
Expand Down Expand Up @@ -7913,76 +7923,6 @@ h2 {
.circle.color6 {
background-color: #2ed8a3; }

.ticket_accordion input[type='checkbox']:checked + label + .accordion__contents {
max-height: 300px;
overflow-y: auto; }

.ticket_accordion .accordion__contents {
margin-top: -3px; }
.ticket_accordion .accordion__empty {
color: #c4cbd2; }
.ticket_accordion .accordion__contents div {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 65px;
padding-right: 65px;
border-bottom: 1px solid #edeff1;
background-color: #fff; }
@media screen and (min-width: 576px) {
.ticket_accordion .accordion__contents div {
padding-top: calc(20px + -5 * (100vw - 576px) / 864);
padding-bottom: calc(20px + -5 * (100vw - 576px) / 864); } }
@media screen and (min-width: 1440px) {
.ticket_accordion .accordion__contents div {
padding-top: 15px;
padding-bottom: 15px; } }
@media screen and (min-width: 576px) {
.ticket_accordion .accordion__contents div {
padding-left: calc(65px + 35 * (100vw - 576px) / 864);
padding-right: calc(65px + 35 * (100vw - 576px) / 864); } }
@media screen and (min-width: 1440px) {
.ticket_accordion .accordion__contents div {
padding-left: 100px;
padding-right: 100px; } }
.ticket_accordion .accordion__contents div img {
margin-right: 15px; }
@media screen and (min-width: 576px) {
.ticket_accordion .accordion__contents div img {
margin-right: calc(15px + 35 * (100vw - 576px) / 864); } }
@media screen and (min-width: 1440px) {
.ticket_accordion .accordion__contents div img {
margin-right: 50px; } }

.ticket_accordion .accordion__toggle {
background: #fff;
border-bottom: 5px solid #f3f5f6; }
.ticket_accordion .accordion__toggle div:not(.arrow-down) {
padding: 15px 30px; }
.ticket_accordion .accordion__toggle div:not(.arrow-down):hover {
cursor: pointer; }
.ticket_accordion .accordion__toggle div:not(.arrow-down) .arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #596D81;
-webkit-transition: all .5s;
transition: all .5s; }
.ticket_accordion .accordion__toggle div:not(.arrow-down)[aria-expanded="true"] .arrow-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-top: 5px solid #2970FF; }
.ticket_accordion .accordion__toggle div:not(.arrow-down) span img {
margin-right: 15px;
max-width: 17px;
height: auto; }
@media screen and (min-width: 576px) {
.ticket_accordion .accordion__toggle div:not(.arrow-down) span img {
margin-right: calc(15px + 35 * (100vw - 576px) / 864); } }
@media screen and (min-width: 1440px) {
.ticket_accordion .accordion__toggle div:not(.arrow-down) span img {
margin-right: 50px; } }

.icon--info {
-webkit-transition: 0.25s;
transition: 0.25s; }
Expand Down Expand Up @@ -8826,7 +8766,7 @@ table td {

.pool-overview-stat-title {
font-size: 14px;
padding-bottom: 10px;
padding-bottom: 6px;
color: #596D81;
}

Expand Down
21 changes: 11 additions & 10 deletions gui/assets/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,15 @@ <h1>Mining Pool Overview</h1>

<div class="row">

<div class="col-12 p-3">
<div class="col-12">
<div class="main-carousel">
<div class="carousel-cell">
<div class="row m-0">
<div class="row m-0 h-100">
<div class="col-lg-4 col-12 main-carousel__image-container text-center">
<div class="carousel-image" style="background-image:url('/assets/images/carousel_1.svg');">
</div>
</div>
<div class="col-lg-8 col-12 py-3 px-4">
<div class="carousel-text col-lg-8 col-12 px-4">
<h2>Identify the Miner</h2>
<p>{{.HeaderData.Designation}} pool currently supports:</p>
<div class="d-flex flex-row">
Expand All @@ -78,12 +78,12 @@ <h2>Identify the Miner</h2>
</div>
</div>
<div class="carousel-cell">
<div class="row m-0">
<div class="row m-0 h-100">
<div class="col-lg-4 col-12 main-carousel__image-container text-center">
<div class="carousel-image" style="background-image:url('/assets/images/carousel_2.svg');">
</div>
</div>
<div class="col-lg-8 col-12 py-3 px-4">
<div class="carousel-text col-lg-8 col-12 px-4">
<h2>Connect the Miner</h2>
<p>To connect, set the pool URL to <span class="config">'localhost'</span>, and the miner port to:</p>
<div class="d-flex flex-row">
Expand Down Expand Up @@ -112,21 +112,22 @@ <h2>Connect the Miner</h2>
</div>
</div>
<div class="carousel-cell">
<div class="row m-0">
<div class="row m-0 h-100">
<div class="col-lg-4 col-12 main-carousel__image-container text-center">
<div class="carousel-image" style="background-image:url('/assets/images/carousel_3.svg');">
</div>
</div>
<div class="col-lg-8 col-12 py-3 px-4">
<div class="carousel-text col-lg-8 col-12 px-4">
<h2>Confirm Miner Connection</h2>
<p>To confirm a miner connection, look up its account information with
its associated miner address. It should be listed as a connected miner with its
curent hash rate in the 'Connected Clients' section if connected.</p>
its associated miner address.</p>
<p>The miner should be listed as a connected miner with its
curent hash rate in the 'Connected Clients' section.</p>
</div>
</div>
</div>
</div>
<ul class="carousel-nav col-12 m-0">
<ul class="carousel-nav col-12">
</ul>


Expand Down
24 changes: 12 additions & 12 deletions gui/assets/templates/pool-stats.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,35 @@
<div class="row">

<div class="col-6 col-sm-4 col-lg-2 py-3">
<span class="pool-overview-stat-title">Pool Hash Rate</span>
<div><span class="pool-overview-stat-value" id="pool-hash-rate">{{ .PoolHashRate }}</span></div>
<div class="pool-overview-stat-title">Pool Hash Rate</div>
<div class="pool-overview-stat-value" id="pool-hash-rate">{{ .PoolHashRate }}</div>
</div>

<div class="col-6 col-sm-4 col-lg-2 py-3">
<span class="pool-overview-stat-title">Last Work Height</span>
<div><span class="pool-overview-stat-value" id="last-work-height">{{ .LastWorkHeight }}</span></div>
<div class="pool-overview-stat-title">Last Work Height</div>
<div class="pool-overview-stat-value" id="last-work-height">{{ .LastWorkHeight }}</div>
</div>

<div class="col-6 col-sm-4 col-lg-2 py-3">
<span class="pool-overview-stat-title">Network</span>
<div><span class="pool-overview-stat-value">{{.Network}}</span></div>
<div class="pool-overview-stat-title">Network</div>
<div class="pool-overview-stat-value">{{.Network}}</div>
</div>

<div class="col-6 col-sm-4 col-lg-2 py-3">
<span class="pool-overview-stat-title">Pool Fee</span>
<div><span class="pool-overview-stat-value">{{floatToPercent .PoolFee }}</span></div>
<div class="pool-overview-stat-title">Pool Fee</div>
<div class="pool-overview-stat-value">{{floatToPercent .PoolFee }}</div>
</div>

{{ if not .SoloPool }}

<div class="col-6 col-sm-4 col-lg-2 py-3">
<span class="pool-overview-stat-title">Payment Method</span>
<div><span class="pool-overview-stat-value">{{ upper .PaymentMethod }}</span></div>
<div class="pool-overview-stat-title">Payment Method</div>
<div class="pool-overview-stat-value">{{ upper .PaymentMethod }}</div>
</div>

<div class="col-6 col-sm-4 col-lg-2 py-3">
<span class="pool-overview-stat-title">Last Payment Height</span>
<div><span class="pool-overview-stat-value" id="last-payment-height">{{ .LastPaymentHeight }}</span></div>
<div class="pool-overview-stat-title">Last Payment Height</div>
<div class="pool-overview-stat-value" id="last-payment-height">{{ .LastPaymentHeight }}</div>
</div>

{{end}}
Expand Down

0 comments on commit 3778970

Please sign in to comment.