Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete GUI redesign #221

Merged
merged 5 commits into from
May 18, 2020
Merged

Complete GUI redesign #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c477fce
gui: Fix padding between pool-stats labels/values
jholdstock May 13, 2020
f5e433a
gui: Remove unused css
jholdstock May 13, 2020
90862f9
gui: Dont use abs position for carousel-nav
jholdstock May 13, 2020
8dc66d1
gui: Remove hard-coded heights from carousel
jholdstock May 13, 2020
598a3cb
Make carousel images full height
jholdstock May 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 37 additions & 97 deletions gui/assets/public/css/dcrpool.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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