Skip to content
This repository has been archived by the owner on Sep 16, 2022. It is now read-only.

New design for Nodes Modal #705

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

New design for Nodes Modal #705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ddb5184
Align nodes (list-items) with the top part of the item
Feb 16, 2020
5b204b5
Refactor(modal): make scroll visible, add cards to organize nodes ite…
Feb 18, 2020
da5545c
Merge branch 'master' into 703-bullets-all-nodes
vpetersson Mar 4, 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
47 changes: 40 additions & 7 deletions backend/device_registry/templates/actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,14 +190,32 @@ <h1 class="mb-0" id="wott-popover-title">All Nodes</h1>
</div>
<hr class="popover-title-line">
</div>
<div class="wott-popover-body w-100">
<div class="wott-popover-body d-flex flex-wrap w-100">
</div>
</div>
</div>


<style>

.popover-box::-webkit-scrollbar {
-webkit-appearance: none;
}

.popover-box::-webkit-scrollbar:vertical {
width: 10px;
}

.popover-box::-webkit-scrollbar:horizontal {
height: 50px;
}

.popover-box::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: #dde4f9;
}

.btn-img-text {
font-size: .6rem !important;
}
Expand Down Expand Up @@ -260,6 +278,7 @@ <h1 class="mb-0" id="wott-popover-title">All Nodes</h1>

.wott-node-list {
color: #2460c8 !important;
word-break: break-all;
}

/* MODAL */
Expand Down Expand Up @@ -300,7 +319,7 @@ <h1 class="mb-0" id="wott-popover-title">All Nodes</h1>
}

#all-nodes .wott-popover-body {
padding: 2.5rem 0rem 2rem 4rem;
padding: 3.1rem 0rem 2rem 3.7rem;
word-wrap: break-word;
}

Expand All @@ -317,6 +336,7 @@ <h1 class="mb-0" id="wott-popover-title">All Nodes</h1>
margin-bottom: 0 !important;
display: flex;
justify-content: space-between;
align-items: center;
}

#all-nodes .wott-scroll-y {
Expand All @@ -327,17 +347,30 @@ <h1 class="mb-0" id="wott-popover-title">All Nodes</h1>
overflow-x: scroll;
}


#all-nodes .wott-node-list {
display: inline-block;
width: 100px;
white-space: normal;
margin: 0;
margin-bottom: 2rem;
margin-right: 7%;
min-width: 17%;
max-width: 17%;
margin-bottom: .7rem;
margin-right: .7rem;
width: 10.1rem;
height: 5.3rem;
font-size: .9rem;
font-weight: 600;
padding: 12px;
background-color: #f7f9ff;
border-radius: 4px;
overflow: hidden;
}

#all-nodes .wott-node-list:hover {
overflow: visible;
min-width: 10.1rem;
min-height: 5.3rem;
height: auto;
background-color: #e9edf8;
}

#all-nodes .popover-title {
Expand All @@ -355,7 +388,7 @@ <h1 class="mb-0" id="wott-popover-title">All Nodes</h1>

#all-nodes .popover-title-line {
width: 100%;
margin-left: 0;
margin: 0;
}

</style>
Expand Down
4 changes: 2 additions & 2 deletions backend/device_registry/templates/cve.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ <h1 class="mb-0" id="wott-popover-title">TEXT GO HERE</h1>
</div>
<hr class="popover-title-line">
</div>
<div class="wott-popover-body"><!--nodeList include w-100 | instructions include w-auto-->
<div class="wott-popover-body"><!--nodeList include w-100, d-flex and flex-wrap| instructions include w-auto-->
</div>
</div>

Expand Down Expand Up @@ -219,7 +219,7 @@ <h1 class="mb-0" id="wott-popover-title">TEXT GO HERE</h1>
if(!show)
return;
$('.popover-box').toggleClass('wott-scroll-x', box_scroll_x).toggleClass('wott-scroll-y', box_scroll_y);
$('.wott-popover-body').html(html).toggleClass('w-100', body_w100).toggleClass('w-auto', !body_w100);
$('.wott-popover-body').html(html).toggleClass('w-100 d-flex flex-wrap', body_w100).toggleClass('w-auto', !body_w100);
$('#wott-popover-title').text(title);
}

Expand Down