mirror of
https://github.com/digitalocean/nginxconfig.io.git
synced 2025-08-24 19:23:45 +08:00
demo
This commit is contained in:
Bálint Szekeres
@@ -370,6 +370,7 @@
|
||||
$scope.site = 0;
|
||||
$scope.tab_site = 0;
|
||||
$scope.tab_common = 0;
|
||||
$scope.step = 0;
|
||||
|
||||
$scope.tabs_site = [
|
||||
{
|
||||
@@ -445,26 +446,36 @@
|
||||
{
|
||||
name: 'Download',
|
||||
slug: 'download',
|
||||
active: function() {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'SSL init',
|
||||
slug: 'ssl',
|
||||
active: function() {
|
||||
return $scope.isHTTPS() && ($scope.isSSLDHRequired() || $scope.isCertLetsEncrypt());
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Cerbot',
|
||||
slug: 'certbot',
|
||||
active: function() {
|
||||
return $scope.isHTTPS() && $scope.isCertLetsEncrypt();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Go Live!',
|
||||
slug: 'live',
|
||||
active: function() {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
$scope.siteChanges = {};
|
||||
$scope.commonChanges = {};
|
||||
|
||||
$scope.activeStep = 'download';
|
||||
|
||||
$scope.base64 = '';
|
||||
|
||||
$scope.gzipTypes = 'text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml';
|
||||
@@ -711,9 +722,21 @@
|
||||
};
|
||||
|
||||
$scope.setActiveStep = function(step) {
|
||||
$scope.activeStep = step;
|
||||
$scope.step = step;
|
||||
};
|
||||
|
||||
$scope.setStepBack = function() {
|
||||
if ($scope.step > 0) {
|
||||
$scope.step--;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.setStepNext = function() {
|
||||
if ($scope.step < $scope.steps.length - 1) {
|
||||
$scope.step++;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.getSiteChanges = function(site) {
|
||||
if ($scope.siteChanges[site] === undefined) {
|
||||
return undefined;
|
||||
|
||||
22
resources/scss/_codes.scss
Normal file
22
resources/scss/_codes.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
main .file .code,
|
||||
section.steps .commands {
|
||||
overflow-x: auto;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
padding: 8px 8px 12px;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -257,29 +257,6 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
.commands {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.35;
|
||||
|
||||
.step {
|
||||
counter-reset: step-command-counter;
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
&::before {
|
||||
counter-increment: step-command-counter;
|
||||
content: counter(step-command-counter);
|
||||
}
|
||||
}
|
||||
|
||||
& > span:first-of-type .counter {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
@@ -301,27 +278,4 @@ main {
|
||||
left: -9999px;
|
||||
}
|
||||
}
|
||||
|
||||
.commands,
|
||||
.file .code {
|
||||
overflow-x: auto;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
padding: 8px 8px 12px;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
section.steps {
|
||||
ol {
|
||||
ol.step-icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
@@ -165,4 +165,27 @@ section.steps {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commands {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.35;
|
||||
|
||||
.step {
|
||||
counter-reset: step-command-counter;
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
&::before {
|
||||
counter-increment: step-command-counter;
|
||||
content: counter(step-command-counter);
|
||||
}
|
||||
}
|
||||
|
||||
& > span:first-of-type .counter {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
@import 'header';
|
||||
@import 'steps';
|
||||
@import 'main';
|
||||
@import 'codes';
|
||||
@import 'sidebar';
|
||||
@import 'footer';
|
||||
|
||||
|
||||
@@ -56,6 +56,62 @@
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
margin: 25px 0;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dde1e8;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-right: 1px solid #dde1e8;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
background-color: #0069ff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&.visited {
|
||||
background-color: #dfeeff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-navigation-buttons {
|
||||
margin: 20px 0 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 0;
|
||||
background-color: #031b4e;
|
||||
@@ -220,73 +276,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
margin: 25px 0;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dde1e8;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
.nav-pills .nav-item .nav-link {
|
||||
&.changed {
|
||||
font-weight: 700;
|
||||
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
small {
|
||||
display: inline;
|
||||
color: #ccc;
|
||||
top: 52.5%;
|
||||
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
small {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
color: #999;
|
||||
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-right: 1px solid #dde1e8;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
background-color: #0069ff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&.changed {
|
||||
font-weight: 700;
|
||||
|
||||
small {
|
||||
display: inline;
|
||||
color: #ccc;
|
||||
top: 52.5%;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visited {
|
||||
background-color: #dfeeff;
|
||||
}
|
||||
|
||||
small {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
color: #999;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
right: 0.25rem;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -324,11 +337,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tab-navigation-buttons {
|
||||
margin: 20px 0 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
box-shadow: none !important;
|
||||
color: #666;
|
||||
@@ -354,4 +362,44 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.steps {
|
||||
margin-top: 53px;
|
||||
margin-bottom: 37px;
|
||||
|
||||
.card {
|
||||
border: 1px solid #dee2e6;
|
||||
background-color: #fafafa;
|
||||
padding: 0.5rem 40px 0.25rem;
|
||||
}
|
||||
|
||||
.commands-do {
|
||||
ol {
|
||||
li + li{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
code {
|
||||
background-color: #e5e8ed;
|
||||
color: #3b4e76;
|
||||
border: 1px solid #cbcdd3;
|
||||
border-radius: 3px;
|
||||
font-style: italic;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main .buttons {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.btn {
|
||||
margin: 0 10px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user