ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-29 08:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Consensus diagram cleanup

Browse Source 
- Remove unused HTML tx queue diagram and associated images
- Add white (not transparent) background to some diagrams
- Fix line breaks on a couple images
- Change a couple other concept pages to use the new diagrams
- Remove some newly unused old diagrams
This commit is contained in:
mDuo13
2018-09-27 18:21:23 -07:00
parent 26db69fc41
commit 81d970893a
31 changed files with 26 additions and 6383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
content/_snippets/consensus-q-diagram.html
View File

@@ -1,204 +0,0 @@
<!--
NOTE: THIS HTML-BASED DIAGRAM IS EXPERIMENTAL AND UNUSED.
The document as published uses a single image diagram instead,
consensus-with-queue.png.
-->
<div id="consensus-q-diagram-wrapper">
<div id="consensus-q-diagram-steps">
<div class="steps-col" id="left-steps">
<div class="card">
<div class="card-header bg-dark">
<h4>Consensus Round 1</h4>
</div><!-- /.card-header -->
<div class="card-body">
<img src="img/consensus-w-q-1.png" alt="Consensus round 1" width="188" height="135" />
<div class="description">
<p>Each validator proposes a set of transactions to be included in the next ledger version.</p>
<p>Each also keeps a queue of candidate transactions not currently proposed.</p>
</div>
</div>
</div><!-- /.card -->
<div class="next-step">↓</div>
<div class="card">
<div class="card-header bg-dark">
<h4>Consensus Round 2</h4>
</div><!-- /.card-header -->
<div class="card-body">
<img src="img/consensus-w-q-2.png" alt="Consensus round 2" width="188" height="135" />
<div class="description">
<p>If a validator removes a transaction from its proposal in later rounds, it adds that transaction to its queue.</p>
</div>
</div>
</div><!-- /.card -->
<div class="next-step">↓</div>
<div class="card">
<div class="card-header bg-dark">
<h4>Consensus Ends</h4>
</div><!-- /.card-header -->
<div class="card-body">
<img src="img/consensus-w-q-3.png" alt="Consensus Ends" width="188" height="135" />
<div class="description">
<p>The consensus process continues until enough servers agree on a transaction set.</p>
</div>
</div>
</div><!-- /.card -->
<div class="next-step down-right">→</div>
</div><!-- /#left-steps -->
<div class="steps-col" id="right-steps">
<div class="card">
<div class="card-header bg-dark">
<h4>Validation</h4>
</div><!-- /.card-header -->
<div class="card-body">
<img src="img/consensus-w-q-4.png" alt="Validation" width="188" height="135" />
<div class="description">
<p>Servers confirm that they built the same resulting ledger and declare it validated.</p>
</div>
</div>
</div><!-- /.card -->
<div class="next-step up">up</div>
<div class="card">
<div class="card-header bg-dark">
<h4>Building the Next Proposal</h4>
</div><!-- /.card-header -->
<div class="card-body">
<img src="img/consensus-w-q-5.png" alt="Building the Next Proposal" width="188" height="135" />
<div class="description">
<p>Each validator prepares its proposal for the next ledger version, starting with queued transactions.</p>
</div>
</div>
</div><!-- /.card -->
<div class="next-step up">up</div>
<div class="card">
<div class="card-header bg-dark">
<h4>Adding to the Queue</h4>
</div><!-- /.card-header -->
<div class="card-body">
<img src="img/consensus-w-q-6.png" alt="Adding to the Queue" width="188" height="135" />
<div class="description">
<p>If the next proposed ledger is already full, incoming transactions are queued for a later ledger version.</p>
</div>
</div>
</div><!-- /.card -->
<div class="next-step up-left">(back to start)</div>
</div><!-- /#right-steps -->
</div><!-- /#consensus-q-diagram-steps -->
</div><!-- /#consensus-q-diagram-wrapper -->
<style tyle="text/css">
#consensus-q-diagram-wrapper {
display: flex;
flex-direction: row;
margin: 1rem 0;
}
#consensus-q-diagram-wrapper .card-header {
padding: 0.25rem 1rem;
}
#consensus-q-diagram-wrapper .card-body {
padding: 0.5rem;
}
#consensus-q-diagram-wrapper .next-step {
height: 50px;
background-image: url("img/down-arrow.png");
background-position: center;
background-repeat: no-repeat;
font-size: 0;
color: rgba(255,255,255,0);
margin: 0.25rem;
background-position: top 0 right 45px;
}
#consensus-q-diagram-wrapper .next-step.up {
transform: rotate(180deg);
}
#consensus-q-diagram-wrapper .next-step.up-left {
background-image: url("img/up-left-angle-arrow.png");
height: 75px;
background-position: left;
}
#consensus-q-diagram-wrapper .next-step.down-right {
background-image: url("img/up-left-angle-arrow.png");
background-position: right;
transform: rotate(180deg);
height: 75px;
background-position: left;
}
#consensus-q-diagram-repeat,
.return-arrow,
.right-bar,
.bottom-right-angle {
font-size: 0;
color: rgba(255,255,255,0);
padding: 0;
}
#consensus-q-diagram-steps {
display: flex;
flex-direction: row;
}
#consensus-q-diagram-steps #right-steps {
display: flex;
flex-direction: column-reverse;
}
#consensus-q-diagram-wrapper #left-steps .card {
margin-right: 1rem;
}
#consensus-q-diagram-wrapper #right-steps .card {
margin-left: 1rem;
}
#consensus-q-diagram-wrapper .card h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.2;
}
#consensus-q-diagram-wrapper .card-body {
display: flex;
flex-direction: row
}
@media (max-width: 992px) {
#consensus-q-diagram-wrapper .card-body {
display: block;
}
}
#consensus-q-diagram-wrapper .card-body img {
flex: 0 1 188px;
}
#consensus-q-diagram-wrapper .description {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>