Skip to content

Commit

Permalink
Replace gif with carousel
Browse files Browse the repository at this point in the history 
Signed-off-by: Dušan Borovčanin <dusan.borovcanin@mainflux.com>
  • Loading branch information
@dborovcanin
dborovcanin committed Apr 4, 2019
1 parent 6930be5 commit f0bc118
Show file tree
Hide file tree
Showing 8 changed files with 231 additions and 1 deletion.
232 changes: 231 additions & 1 deletion docs/bootstrap.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,237 @@ Mainflux platform supports bootstrapping process, but some of the preconditions

> Bootstrapping and provisioning are two different procedures. Provisioning refers to entities management while bootstrapping is related to entity configuration.
![bootstrapping flow](img/bs_flow.gif)

<style>
.carousel {
margin-left: 15%;
margin-right: 15%;
}

ul.slides {
display: block;
position: relative;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

ul.slides input {
display: none;
}

.slide-container {
display: block;
}

.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}

.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}

.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #d2dade;
}

.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}

.slide-image:hover+.carousel-controls label {
opacity: 0.5;
}

.carousel-controls label:hover {
opacity: 1;
}

.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}

.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}

.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}

.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ecf0f2;
opacity: 0.5;
margin: 10px;
}

input:checked+.slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}

input:checked+.slide-container .carousel-controls label {
display: block;
}

input#img-1:checked~.carousel-dots label#img-dot-1,
input#img-2:checked~.carousel-dots label#img-dot-2,
input#img-3:checked~.carousel-dots label#img-dot-3,
input#img-4:checked~.carousel-dots label#img-dot-4,
input#img-5:checked~.carousel-dots label#img-dot-5,
input#img-6:checked~.carousel-dots label#img-dot-6 {
opacity: 1;
}

input:checked+.slide-container .nav label {
display: block;
}
</style>
<div>
<div class="carousel">
<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
<div class="slide-image">
<img src="img/bootstrap/1.png">
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">
<span>&lsaquo;</span>
</label>
<label for="img-2" class="next-slide">
<span>&rsaquo;</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">
<div class="slide-image">
<img src="img/bootstrap/2.png">
</div>
<div class="carousel-controls">
<label for="img-1" class="prev-slide">
<span>&lsaquo;</span>
</label>
<label for="img-3" class="next-slide">
<span>&rsaquo;</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">
<div class="slide-image">
<img src="img/bootstrap/3.png">
</div>
<div class="carousel-controls">
<label for="img-2" class="prev-slide">
<span>&lsaquo;</span>
</label>
<label for="img-4" class="next-slide">
<span>&rsaquo;</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-4" />
<li class="slide-container">
<div class="slide-image">
<img src="img/bootstrap/4.png">
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">
<span>&lsaquo;</span>
</label>
<label for="img-5" class="next-slide">
<span>&rsaquo;</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-5" />
<li class="slide-container">
<div class="slide-image">
<img src="img/bootstrap/5.png">
</div>
<div class="carousel-controls">
<label for="img-4" class="prev-slide">
<span>&lsaquo;</span>
</label>
<label for="img-6" class="next-slide">
<span>&rsaquo;</span>
</label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-6" />
<li class="slide-container">
<div class="slide-image">
<img src="img/bootstrap/6.png">
</div>
<div class="carousel-controls">
<label for="img-5" class="prev-slide">
<span>&lsaquo;</span>
</label>
<label for="img-1" class="next-slide">
<span>&rsaquo;</span>
</label>
</div>
</li>
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" id="img-dot-1"></label>
<label for="img-2" class="carousel-dot" id="img-dot-2"></label>
<label for="img-3" class="carousel-dot" id="img-dot-3"></label>
<label for="img-4" class="carousel-dot" id="img-dot-4"></label>
<label for="img-5" class="carousel-dot" id="img-dot-5"></label>
<label for="img-6" class="carousel-dot" id="img-dot-6"></label>
</div>
</ul>
</div>
</div>


### Configuration

Expand Down
Binary file added docs/img/bootstrap/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/bootstrap/2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/bootstrap/3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/bootstrap/4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/bootstrap/5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/bootstrap/6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/img/bs_flow.gif
View file
Binary file not shown.

0 comments on commit f0bc118

Please sign in to comment.