github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

site selector refactor

pull/85/head
Bálint Szekeres 2019-05-15 23:30:11 +02:00
parent e5cb86edc0
commit 178d640647
4 changed files with 480 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/js/app.js
View File

@ -205,7 +205,7 @@
} }
for (var i in siteTabs) { for (var i in siteTabs) {
$scope.siteChanges[$scope.site][siteTabs[i]] = $window.document.querySelectorAll('section.tabs .tab-content.site-tab-content .tab-' + siteTabs[i] + ' .form-group:not(.disabled) .input-changed').length; $scope.siteChanges[$scope.site][siteTabs[i]] = $window.document.querySelectorAll('section.tabs .tab-content.site-content .tab-' + siteTabs[i] + ' .form-group:not(.disabled) .input-changed').length;
} }
for (var j in commonTabs) { for (var j in commonTabs) {
@ -1004,6 +1004,7 @@
// www // www
$scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(/^https?:\/\//, ''); $scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(/^https?:\/\//, '');
$scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(/\/.*$/, ''); $scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(/\/.*$/, '');
$scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(' ', '');
if ($scope.data.sites[site].domain.match(/^www\./)) { if ($scope.data.sites[site].domain.match(/^www\./)) {
$scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(/^www./, ''); $scope.data.sites[site].domain = $scope.data.sites[site].domain.replace(/^www./, '');

37
public/index.html
View File

@ -17,10 +17,20 @@
</head> </head>
<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController"> <body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController">
<header> <header>
<div class="container-fluid"> <div class="container">
<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io"> <img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
<div class="sites">
<div class="title">Sites:</div>
<button class="btn btn-sm btn-outline-light" ng-repeat="(key, value) in data.sites" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
<span class="close" ng-if="key > 0" ng-click="removeSite(key)">&times;</span>
</button>
<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
</div>
<div class="presets"> <div class="presets">
<div class="title">Presets:</div>
<button <button
type="button" type="button"
class="btn btn-sm btn-outline-light" class="btn btn-sm btn-outline-light"
@ -101,24 +111,6 @@
<div class="row"> <div class="row">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="sites"> <div class="sites">
<ul class="nav nav-tabs nav-site" role="tablist">
<li class="nav-item disabled">
<a class="nav-link">Sites:</a>
</li>
<li class="nav-item" ng-repeat="(key, value) in data.sites">
<a class="nav-link" ng-click="setSite(key)" ng-class="{ 'active': site === key, 'changed': getSiteChanges(key) !== 0 }" ng-cloak>
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
<button type="button" class="close" ng-if="key > 0" ng-click="removeSite(key)">
<span>&times;</span>
</button>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted small" ng-click="addSite()">﹢ Add site</a>
</li>
</ul>
<div class="tab-content site-content">
<div class="tab-pane active">
<ul class="nav nav-tabs nav-site-tab" role="tablist"> <ul class="nav nav-tabs nav-site-tab" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" ng-click="setTabSite('server')" ng-class="{ 'active': tab_site === 'server', 'changed': getSiteTabChanges('server') }">Server<small ng-cloak>({{ getSiteTabChanges('server') }})</small></a> <a class="nav-link" ng-click="setTabSite('server')" ng-class="{ 'active': tab_site === 'server', 'changed': getSiteTabChanges('server') }">Server<small ng-cloak>({{ getSiteTabChanges('server') }})</small></a>
@ -142,7 +134,7 @@
<a class="nav-link" ng-click="setTabSite('logging')" ng-class="{ 'active': tab_site === 'logging', 'changed': getSiteTabChanges('logging') }">Logging<small ng-cloak>({{ getSiteTabChanges('logging') }})</small></a> <a class="nav-link" ng-click="setTabSite('logging')" ng-class="{ 'active': tab_site === 'logging', 'changed': getSiteTabChanges('logging') }">Logging<small ng-cloak>({{ getSiteTabChanges('logging') }})</small></a>
</li> </li>
</ul> </ul>
<div class="tab-content site-tab-content"> <div class="tab-content site-content">
<div class="tab-pane tab-server" ng-class="{ 'active': tab_site === 'server' }"> <div class="tab-pane tab-server" ng-class="{ 'active': tab_site === 'server' }">
<div class="row mb-2"> <div class="row mb-2">
<div class="col-sm-4"> <div class="col-sm-4">
@ -557,13 +549,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="common"> <div class="common">
<ul class="nav nav-tabs nav-common" role="tablist"> <ul class="nav nav-tabs nav-common" role="tablist">
<li class="nav-item disabled"> <li class="nav-item disabled">
<a class="nav-link">Common:</a> <a class="nav-link">Global:</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('https')" ng-class="{ 'active': tab_common === 'https', 'changed': commonChanges['https'] }">HTTPS<small ng-cloak>({{ commonChanges['https'] }})</small></a> <a class="nav-link" ng-click="setTabCommon('https')" ng-class="{ 'active': tab_common === 'https', 'changed': commonChanges['https'] }">HTTPS<small ng-cloak>({{ commonChanges['https'] }})</small></a>

50
resources/scss/_header.scss
View File

@ -1,6 +1,6 @@
header { header {
background-color: #000; background-color: #000;
padding: 0.5rem 0 0.25rem; padding: 0.5rem 0;
text-align: center; text-align: center;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #fff; color: #fff;
@ -8,15 +8,43 @@ header {
.logo { .logo {
height: 3rem; height: 3rem;
margin: 0.5rem 0 0.3rem; margin-bottom: 0.5rem;
} }
.sites {
@include media-breakpoint-up(lg) {
margin-top: -1rem;
}
}
.sites,
.presets { .presets {
margin-bottom: 0.3rem; font-size: 0;
line-height: 1.8rem; text-align: center;
@include media-breakpoint-up(lg) {
text-align: left;
}
}
.title {
color: #eee;
font-size: 0.9rem;
font-style: italic;
vertical-align: -5px;
margin-right: 4px;
text-align: center;
@include media-breakpoint-up(lg) {
display: inline-block;
width: 60px;
}
}
.btn-outline-light { .btn-outline-light {
box-shadow: none !important;
border-color: #999; border-color: #999;
margin: 0 3px 4px;
&.active, &.active,
&:hover { &:hover {
@ -39,6 +67,20 @@ header {
transition: fill 0.15s ease-in-out; transition: fill 0.15s ease-in-out;
} }
} }
small {
margin-left: 0.2rem;
font-weight: 700;
vertical-align: 1px;
}
.close {
float: none;
vertical-align: -2px;
color: #666;
line-height: 0;
margin-right: -0.3rem;
font-size: 1.3rem;
} }
} }
} }

23
resources/scss/_main.scss
View File

@ -10,6 +10,7 @@ section.tabs {
margin-bottom: 1rem; margin-bottom: 1rem;
.sites { .sites {
position: relative;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -35,26 +36,14 @@ section.tabs {
} }
} }
&.nav-site {
.nav-item {
.nav-link {
&.changed {
font-weight: normal;
}
&.active {
font-weight: 700;
}
}
}
}
&.nav-site-tab { &.nav-site-tab {
.nav-item { .nav-item {
.nav-link { .nav-link {
&:hover { &:hover {
@include media-breakpoint-up(xl) {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
}
&.active { &.active {
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
@ -149,7 +138,7 @@ section.tabs {
} }
} }
.tab-content { .tab-content {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem 0.25rem;
border-left: 1px solid #dee2e6; border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
@ -157,10 +146,6 @@ section.tabs {
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
&.site-content { &.site-content {
padding-bottom: 0.75rem;
}
&.site-tab-content {
background-color: #f8f8f8; background-color: #f8f8f8;
.form-group { .form-group {