mirror of
https://github.com/mainflux/mainflux.git
synced 2025-05-04 22:17:59 +08:00
Use images instead of carousel (#685)
Signed-off-by: Dušan Borovčanin <dusan.borovcanin@mainflux.com>
This commit is contained in:
Dušan Borovčanin
Drasko DRASKOVIC
parent
25d9783514
commit
06f4c6e059
@ -8,237 +8,25 @@ 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 and provisioning are two different procedures. Provisioning refers to entities management while bootstrapping is related to entity configuration.
|
||||||
|
|
||||||
|
Bootstrapping procedure is the following:
|
||||||
|
|
||||||
<style>
|
|
||||||
.carousel {
|
*1) Configure device with Bootstrap service URL, an external key and external ID*
|
||||||
margin-left: 15%;
|
|
||||||
margin-right: 15%;
|
> 
|
||||||
}
|
*Optionally create Mainflux channels if they don't exist*
|
||||||
|
|
||||||
ul.slides {
|
> 
|
||||||
display: block;
|
*Optionally create Mainflux thing if it doesn't exist*
|
||||||
position: relative;
|
|
||||||
height: 600px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slides * {
|
|
||||||
user-select: none;
|
*2) Upload configuration for the Mainflux thing*
|
||||||
-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;
|
*3) Bootstrap - send a request for the configuration*
|
||||||
}
|
|
||||||
|
|
||||||
.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>‹</span>
|
|
||||||
</label>
|
|
||||||
<label for="img-2" class="next-slide">
|
|
||||||
<span>›</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>‹</span>
|
|
||||||
</label>
|
|
||||||
<label for="img-3" class="next-slide">
|
|
||||||
<span>›</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>‹</span>
|
|
||||||
</label>
|
|
||||||
<label for="img-4" class="next-slide">
|
|
||||||
<span>›</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>‹</span>
|
|
||||||
</label>
|
|
||||||
<label for="img-5" class="next-slide">
|
|
||||||
<span>›</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>‹</span>
|
|
||||||
</label>
|
|
||||||
<label for="img-6" class="next-slide">
|
|
||||||
<span>›</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>‹</span>
|
|
||||||
</label>
|
|
||||||
<label for="img-1" class="next-slide">
|
|
||||||
<span>›</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>
|
|
||||||
|
|
||||||
|
|
||||||
|
*4) Connect/disconnect thing from channels, update or remove configuration*
|
||||||
|
|
||||||
### Configuration
|
### Configuration
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user