SCSS refactor for shared sort list UI
Closes-bug: #1435910 Change-Id: I9fe73aa226bb6f253183ecdffa7d38e35c3664f3
This commit is contained in:
parent
3d24c0cef4
commit
cdad1b2ae7
@ -1,12 +1,12 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
<noscript><h3>{{ step }}</h3></noscript>
|
<noscript><h3>{{ step }}</h3></noscript>
|
||||||
<div id="routerListSortContainer">
|
<div id="routerListSortContainer" class="sort-container">
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<h4 id="selected_router_label">{% trans "Selected Routers" %}</h4>
|
<h4 id="selected_router_label">{% trans "Selected Routers" %}</h4>
|
||||||
<ul id="selected_router" class="routerlist"></ul>
|
<ul id="selected_router" class="routerlist box-list"></ul>
|
||||||
<h4>{% trans "Available Routers" %}</h4>
|
<h4>{% trans "Available Routers" %}</h4>
|
||||||
<ul id="available_router" class="routerlist"></ul>
|
<ul id="available_router" class="routerlist box-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
{% include "project/firewalls/_update_router_help.html" %}
|
{% include "project/firewalls/_update_router_help.html" %}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
<noscript><h3>{{ step }}</h3></noscript>
|
<noscript><h3>{{ step }}</h3></noscript>
|
||||||
<div id="ruleListSortContainer">
|
<div id="ruleListSortContainer" class="sort-container">
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<h4 id="selected_rule_label">{% trans "Selected Rules" %}</h4>
|
<h4 id="selected_rule_label">{% trans "Selected Rules" %}</h4>
|
||||||
<ul id="selected_rule" class="rulelist"></ul>
|
<ul id="selected_rule" class="rulelist box-list"></ul>
|
||||||
<h4>{% trans "Available Rules" %}</h4>
|
<h4>{% trans "Available Rules" %}</h4>
|
||||||
<ul id="available_rule" class="rulelist"></ul>
|
<ul id="available_rule" class="rulelist box-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
{% include "project/firewalls/_update_rule_help.html" %}
|
{% include "project/firewalls/_update_rule_help.html" %}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
<noscript><h3>{{ step }}</h3></noscript>
|
<noscript><h3>{{ step }}</h3></noscript>
|
||||||
<div id="networkListSortContainer">
|
<div id="networkListSortContainer" class="sort-container">
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<label id="selected_network_label">{% trans "Selected networks" %}</label>
|
<label id="selected_network_label">{% trans "Selected networks" %}</label>
|
||||||
<ul id="selected_network" class="networklist"></ul>
|
<ul id="selected_network" class="networklist box-list"></ul>
|
||||||
<label>{% trans "Available networks" %}</label>
|
<label>{% trans "Available networks" %}</label>
|
||||||
<ul id="available_network" class="networklist"></ul>
|
<ul id="available_network" class="networklist box-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
{% include "project/instances/_launch_network_help.html" %}
|
{% include "project/instances/_launch_network_help.html" %}
|
||||||
|
@ -21,111 +21,6 @@ ul {
|
|||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling for draged network object */
|
|
||||||
#networkListSortContainer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.networklist {
|
|
||||||
padding: 6px;
|
|
||||||
background: #eee;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
min-height: 2em;
|
|
||||||
width: auto !important;
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
li {
|
|
||||||
width: 80%;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 6px auto;
|
|
||||||
padding: 3px;
|
|
||||||
background: $body-bg;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
line-height: 18px;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: move;
|
|
||||||
padding-left: 23px;
|
|
||||||
background: $body-bg url(../img/drag.png) no-repeat 11px 50%;
|
|
||||||
em {
|
|
||||||
font-size: 0.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
color:#999;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 0.8em;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
margin-right: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
a.btn {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 12px;
|
|
||||||
padding: 2px 5px 3px;
|
|
||||||
margin-right: 1px;
|
|
||||||
width: 18px;
|
|
||||||
text-align: center;
|
|
||||||
right:5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
float: right;
|
|
||||||
&:before {
|
|
||||||
content: "+";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li.ui-sortable-helper {
|
|
||||||
background-color: #def;
|
|
||||||
}
|
|
||||||
li.ui-state-highlight {
|
|
||||||
border: 1px dotted $gray-light;
|
|
||||||
background: #efefef;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
|
||||||
li:after {
|
|
||||||
visibility: hidden;
|
|
||||||
display: block;
|
|
||||||
font-size: 0;
|
|
||||||
content: " ";
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#selected_network {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
counter-reset:v1 0;
|
|
||||||
background: #edf9ff;
|
|
||||||
border:1px solid #c0d9e4;
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
a.btn:before {
|
|
||||||
content: "-";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li:before {
|
|
||||||
content:"NIC:"counter(v1);
|
|
||||||
counter-increment:v1;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
background: $gray;
|
|
||||||
color: $body-bg;
|
|
||||||
font-size: 90%;
|
|
||||||
padding: 0px 4px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 2px;
|
|
||||||
position: absolute;
|
|
||||||
left: -2em;
|
|
||||||
}
|
|
||||||
&.dragging {
|
|
||||||
li:before {
|
|
||||||
content:"NIC:";
|
|
||||||
background-color:rgba(102,102,102,0.5);
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
li.ui-state-highlight:before {
|
|
||||||
content:"";
|
|
||||||
background:transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
@ -79,245 +79,136 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling for draged firewall rule object */
|
|
||||||
#ruleListSortContainer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rulelist {
|
/* Shared sort list UI in use by Instances and Firewall policies */
|
||||||
padding: 6px;
|
|
||||||
background: #eee;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
min-height: 2em;
|
|
||||||
width: auto !important;
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
|
|
||||||
li {
|
@mixin common_box_list_selected($text) {
|
||||||
width: 226px;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 6px auto;
|
|
||||||
padding: 3px;
|
|
||||||
background: $body-bg;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
line-height: 18px;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: move;
|
|
||||||
padding-left: 23px;
|
|
||||||
background: $body-bg url(../img/drag.png) no-repeat 11px 50%;
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-size: 0.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
color:#999;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.btn {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 12px;
|
|
||||||
padding: 2px 5px 3px;
|
|
||||||
margin-right: 1px;
|
|
||||||
width: 18px;
|
|
||||||
text-align: center;
|
|
||||||
//position: absolute;
|
|
||||||
right:5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
float: right;
|
|
||||||
&:before {
|
|
||||||
content: "+";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ui-sortable-helper {
|
|
||||||
background-color: #def;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ui-state-highlight {
|
|
||||||
border: 1px dotted $border-color;
|
|
||||||
background: #efefef;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:after {
|
|
||||||
visibility: hidden;
|
|
||||||
display: block;
|
|
||||||
font-size: 0;
|
|
||||||
content: " ";
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#selected_rule {
|
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
counter-reset:v1 0;
|
counter-reset:v1 0;
|
||||||
background: #edf9ff;
|
background: #edf9ff;
|
||||||
border:1px solid $border-color;
|
border:1px solid #c0d9e4;
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
a.btn {
|
|
||||||
&:before {
|
|
||||||
content: "-";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li:before {
|
|
||||||
content:"rule:"counter(v1);
|
|
||||||
counter-increment:v1;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
background: $gray;
|
|
||||||
color:$body-bg;
|
|
||||||
font-size: 90%;
|
|
||||||
padding: 0px 4px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 2px;
|
|
||||||
position: absolute;
|
|
||||||
left: -2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dragging {
|
|
||||||
li:before {
|
|
||||||
content:"rule:";
|
|
||||||
background-color:rgba(102,102,102,0.5);
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ui-state-highlight:before {
|
|
||||||
content:"";
|
|
||||||
background:transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Styling for draged firewall router object */
|
|
||||||
#routerListSortContainer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.routerlist {
|
|
||||||
padding: 6px;
|
|
||||||
background: #eee;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
min-height: 2em;
|
|
||||||
width: auto !important;
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: 226px;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 6px auto;
|
|
||||||
padding: 3px;
|
|
||||||
background: $body-bg;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
line-height: 18px;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: move;
|
|
||||||
padding-left: 23px;
|
|
||||||
background: $body-bg url(../img/drag.png) no-repeat 11px 50%;
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-size: 0.5em;
|
|
||||||
line-height: 1em;
|
|
||||||
color:#999;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.btn {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 12px;
|
|
||||||
padding: 2px 5px 3px;
|
|
||||||
margin-right: 1px;
|
|
||||||
width: 18px;
|
|
||||||
text-align: center;
|
|
||||||
//position: absolute;
|
|
||||||
right:5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
float: right;
|
|
||||||
&:before {
|
|
||||||
content: "+";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ui-sortable-helper {
|
|
||||||
background-color: #def;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ui-state-highlight {
|
|
||||||
border: 1px dotted $border-color;
|
|
||||||
background: #efefef;
|
|
||||||
height: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:after {
|
|
||||||
visibility: hidden;
|
|
||||||
display: block;
|
|
||||||
font-size: 0;
|
|
||||||
content: " ";
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#selected_router {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
counter-reset:v1 0;
|
|
||||||
background: #edf9ff;
|
|
||||||
border:1px solid $border-color;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
a.btn {
|
a.btn:before {
|
||||||
|
content: "-";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content:$text":"counter(v1);
|
||||||
|
counter-increment:v1;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
background: $gray;
|
||||||
|
color: $body-bg;
|
||||||
|
font-size: 90%;
|
||||||
|
padding: 0 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: absolute;
|
||||||
|
left: -2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dragging {
|
||||||
|
li {
|
||||||
&:before {
|
&:before {
|
||||||
content: "-";
|
content:$text":";
|
||||||
|
background-color:rgba(102,102,102,0.5);
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ui-state-highlight:before {
|
||||||
|
content:"";
|
||||||
|
background:transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-container {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
.box-list, .box-list-selected {
|
||||||
|
padding: 6px;
|
||||||
|
background: #eee;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
min-height: 2em;
|
||||||
|
width: auto !important;
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 226px;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 6px auto;
|
||||||
|
padding: 3px;
|
||||||
|
background: $body-bg;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
line-height: 18px;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: move;
|
||||||
|
padding-left: 23px;
|
||||||
|
background: $body-bg url("../img/drag.png") no-repeat 11px 50%;
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-size: 0.5em;
|
||||||
|
line-height: 1em;
|
||||||
|
color:#999;
|
||||||
|
font-style: normal;
|
||||||
|
margin-left: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 12px;
|
||||||
|
padding: 2px 5px 3px;
|
||||||
|
margin-right: 1px;
|
||||||
|
width: 18px;
|
||||||
|
text-align: center;
|
||||||
|
right:5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "+";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ui-sortable-helper {
|
||||||
|
background-color: #def;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ui-state-highlight {
|
||||||
|
border: 1px dotted $border-color;
|
||||||
|
background: #efefef;
|
||||||
|
height: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
content: " ";
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li:before {
|
#selected_network {
|
||||||
content:"router:"counter(v1);
|
@include common_box_list_selected("NIC");
|
||||||
counter-increment:v1;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
background: $gray;
|
|
||||||
color:$body-bg;
|
|
||||||
font-size: 90%;
|
|
||||||
padding: 0px 4px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 2px;
|
|
||||||
position: absolute;
|
|
||||||
left: -2em;
|
|
||||||
}
|
}
|
||||||
|
#selected_rule {
|
||||||
&.dragging {
|
@include common_box_list_selected("rule");
|
||||||
li:before {
|
}
|
||||||
content:"router:";
|
#selected_router {
|
||||||
background-color:rgba(102,102,102,0.5);
|
@include common_box_list_selected("router");
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ui-state-highlight:before {
|
|
||||||
content:"";
|
|
||||||
background:transparent;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user