Made the hostnames clickable and open new tabs (yay)

This commit is contained in:
Jamie Curnow 2018-10-19 16:51:31 +10:00
parent eb391959aa
commit eaebc48f66
7 changed files with 89 additions and 15 deletions

View File

@ -6,9 +6,15 @@
<td>
<div>
<% domain_names.map(function(host) {
%>
<span class="tag"><%- host %></span>
<%
if (host.indexOf('*') === -1) {
%>
<span class="tag host-link hover-red" rel="http<%- certificate_id ? 's' : '' %>://<%- host %>"><%- host %></span>
<%
} else {
%>
<span class="tag"><%- host %></span>
<%
}
});
%>
</div>

View File

@ -9,8 +9,9 @@ module.exports = Mn.View.extend({
tagName: 'tr',
ui: {
edit: 'a.edit',
delete: 'a.delete'
edit: 'a.edit',
delete: 'a.delete',
host_link: '.host-link'
},
events: {
@ -22,6 +23,12 @@ module.exports = Mn.View.extend({
'click @ui.delete': function (e) {
e.preventDefault();
App.Controller.showNginxDeadDeleteConfirm(this.model);
},
'click @ui.host_link': function (e) {
e.preventDefault();
let win = window.open($(e.currentTarget).attr('rel'), '_blank');
win.focus();
}
},

View File

@ -6,9 +6,15 @@
<td>
<div>
<% domain_names.map(function(host) {
%>
<span class="tag"><%- host %></span>
<%
if (host.indexOf('*') === -1) {
%>
<span class="tag host-link hover-green" rel="http<%- certificate_id ? 's' : '' %>://<%- host %>"><%- host %></span>
<%
} else {
%>
<span class="tag"><%- host %></span>
<%
}
});
%>
</div>

View File

@ -9,8 +9,9 @@ module.exports = Mn.View.extend({
tagName: 'tr',
ui: {
edit: 'a.edit',
delete: 'a.delete'
edit: 'a.edit',
delete: 'a.delete',
host_link: '.host-link'
},
events: {
@ -22,6 +23,12 @@ module.exports = Mn.View.extend({
'click @ui.delete': function (e) {
e.preventDefault();
App.Controller.showNginxProxyDeleteConfirm(this.model);
},
'click @ui.host_link': function (e) {
e.preventDefault();
let win = window.open($(e.currentTarget).attr('rel'), '_blank');
win.focus();
}
},

View File

@ -6,9 +6,15 @@
<td>
<div>
<% domain_names.map(function(host) {
%>
<span class="tag"><%- host %></span>
<%
if (host.indexOf('*') === -1) {
%>
<span class="tag host-link hover-yellow" rel="http<%- certificate_id ? 's' : '' %>://<%- host %>"><%- host %></span>
<%
} else {
%>
<span class="tag"><%- host %></span>
<%
}
});
%>
</div>

View File

@ -9,8 +9,9 @@ module.exports = Mn.View.extend({
tagName: 'tr',
ui: {
edit: 'a.edit',
delete: 'a.delete'
edit: 'a.edit',
delete: 'a.delete',
host_link: '.host-link'
},
events: {
@ -22,6 +23,12 @@ module.exports = Mn.View.extend({
'click @ui.delete': function (e) {
e.preventDefault();
App.Controller.showNginxRedirectionDeleteConfirm(this.model);
},
'click @ui.host_link': function (e) {
e.preventDefault();
let win = window.open($(e.currentTarget).attr('rel'), '_blank');
win.focus();
}
},

View File

@ -3,6 +3,18 @@ $yellow: #f1c40f;
$blue: #467fcf;
$pink: #f66d9b;
.tag.hover-green:hover, .tag.hover-green:active, .tag.hover-green:focus {
background-color: #5eba00;
cursor: pointer;
color: #fff;
}
.tag.hover-red:hover, .tag.hover-red:active, .tag.hover-red:focus {
background-color: #cd201f;
cursor: pointer;
color: #fff;
}
/* For Card bodies where I don't want padding */
.card-body.no-padding {
padding: 0;
@ -28,6 +40,12 @@ $pink: #f66d9b;
border-color: $teal;
}
.tag.hover-teal:hover, .tag.hover-teal:active, .tag.hover-teal:focus {
background-color: $teal;
color: #fff;
cursor: pointer;
}
/* Yellow Outline Buttons */
.btn-outline-yellow {
color: $yellow;
@ -48,6 +66,12 @@ $pink: #f66d9b;
border-color: $yellow;
}
.tag.hover-yellow:hover, .tag.hover-yellow:active, .tag.hover-yellow:focus {
background-color: $yellow;
cursor: pointer;
color: #fff;
}
/* Blue Outline Buttons */
.btn-outline-blue {
color: $blue;
@ -68,6 +92,12 @@ $pink: #f66d9b;
border-color: $blue;
}
.tag.hover-blue:hover, .tag.hover-blue:active, .tag.hover-blue:focus {
background-color: $blue;
cursor: pointer;
color: #fff;
}
/* Pink Outline Buttons */
.btn-outline-pink {
color: $pink;
@ -88,6 +118,11 @@ $pink: #f66d9b;
border-color: $pink;
}
.tag.hover-pink:hover, .tag.hover-pink:active, .tag.hover-pink:focus {
background-color: $pink;
cursor: pointer;
}
/* dimmer */
.dimmer .loader {