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

tooltips

pull/2/head
Szekeres Bálint 2018-01-09 09:01:00 +01:00
parent e39c5bf4f7
commit ccdd4ec318
5 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/assets/css/angular-tooltips.min.css vendored Normal file
View File

@ -0,0 +1,11 @@
/*
* angular-tooltips
* 1.2.2
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Tue Jun 20 2017
*/
tooltip._bottom:not(._left):not(._right) tip tip-arrow,tooltip._top:not(._left):not(._right) tip tip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;left:50%;margin-left:-6px;content:'';height:0}@-webkit-keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}@-moz-keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}@-ms-keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}@keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}._exradicated-tooltip{display:block;opacity:1;position:absolute;z-index:999}tooltip{display:inline-block;position:relative}tooltip._multiline{display:block}tooltip._slow._ready tip{animation:animate-tooltip .65s}tooltip._fast._ready tip{animation:animate-tooltip .15s}tooltip._steady._ready tip{animation:animate-tooltip .35s}tooltip tip{border-radius:3px;background:rgba(0,0,0,.85);color:#fff;display:none;line-height:normal;max-width:500px;min-width:100px;opacity:0;padding:8px 16px;position:absolute;text-align:center;width:auto;will-change:top,left,bottom,right}tooltip tip._hidden{display:block;visibility:hidden}tooltip.active:not(._force-hidden) tip{display:block;opacity:1;z-index:999}tooltip tip-tip{font-size:.95em}tooltip tip-tip._large{font-size:1.1em}tooltip tip-tip._small{font-size:.8em}tooltip._top:not(._left):not(._right) tip{left:50%;top:-9px;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}tooltip._top:not(._left):not(._right) tip tip-arrow{border-top:6px solid rgba(0,0,0,.85);position:absolute;top:100%;width:0}tooltip._bottom:not(._left):not(._right) tip{right:50%;top:100%;-webkit-transform:translateX(50%) translateY(9px);transform:translateX(50%) translateY(9px)}tooltip._bottom:not(._left):not(._right) tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);bottom:100%;position:absolute;width:0}tooltip._right:not(._top):not(._bottom) tip{left:100%;top:50%;-webkit-transform:translateX(9px) translateY(-50%);transform:translateX(9px) translateY(-50%)}tooltip._right:not(._top):not(._bottom) tip tip-arrow{border-bottom:6px solid transparent;border-right:6px solid rgba(0,0,0,.85);border-top:6px solid transparent;content:'';height:0;margin-top:-6px;position:absolute;right:100%;top:50%;width:0}tooltip._left:not(._top):not(._bottom) tip{left:-9px;top:50%;-webkit-transform:translateX(-100%) translateY(-50%);transform:translateX(-100%) translateY(-50%)}tooltip._left:not(._top):not(._bottom) tip tip-arrow{border-bottom:6px solid transparent;border-left:6px solid rgba(0,0,0,.85);border-top:6px solid transparent;content:'';height:0;left:100%;margin-top:-6px;position:absolute;top:50%;width:0}tooltip._top._left tip tip-arrow,tooltip._top._right tip tip-arrow{border-top:6px solid rgba(0,0,0,.85);border-left:6px solid transparent;border-right:6px solid transparent;content:'';height:0;margin-left:-6px;position:absolute;width:0}tooltip._top._left tip{left:-9px;top:-9px;-webkit-transform:translateX(-100%) translateY(-100%);transform:translateX(-100%) translateY(-100%)}tooltip._top._left tip tip-arrow{left:90%;top:100%}tooltip._top._right tip{left:100%;top:-9px;-webkit-transform:translateX(9px) translateY(-100%);transform:translateX(9px) translateY(-100%)}tooltip._top._right tip tip-arrow{left:10%;top:100%}tooltip._bottom._left tip{left:-9px;top:100%;-webkit-transform:translateX(-100%) translateY(9px);transform:translateX(-100%) translateY(9px)}tooltip._bottom._left tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);border-left:6px solid transparent;border-right:6px solid transparent;bottom:100%;content:'';height:0;left:90%;margin-left:-6px;position:absolute;width:0}tooltip._bottom._right tip{left:100%;top:100%;-webkit-transform:translateX(9px) translateY(9px);transform:translateX(9px) translateY(9px)}tooltip._bottom._right tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);border-left:6px solid transparent;border-right:6px solid transparent;bottom:100%;content:'';height:0;left:10%;margin-left:-6px;position:absolute;width:0}tip-tip .close-button{cursor:pointer;float:right;left:8%;margin-top:-7%;padding:3px;position:relative}

9
public/assets/css/app.css
View File

@ -146,3 +146,12 @@ footer .crypto {
color: #444;
font-size: 0.6rem;
}
tooltip tip {
padding: 4px 12px;
}
tooltip tip-tip {
line-height: 1.1;
display: block;
}

11
public/assets/js/angular-tooltips.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -1,7 +1,7 @@
(function() {
angular
.module('NginxConfigIoApp', ['ngclipboard'])
.module('NginxConfigIoApp', ['ngclipboard', '720kb.tooltips'])
.controller('NginxConfigIoController', function NginxConfigIoController($scope, $location, $timeout) {
///////////////////////
// PRIVATE VARIABLES //
@ -149,6 +149,12 @@
//////////
$scope.setDataFromHash();
})
.config(['tooltipsConfProvider', function (tooltipsConfProvider) {
tooltipsConfProvider.configure({
side: 'right',
size: 'small',
});
}])
.directive('ngIncludeTabs', function () {
return {
require: 'ngInclude',

56
public/index.html
View File

@ -6,7 +6,8 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:400,700">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/bootstrap.min.css?v=4.0.0-beta.3">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/highlight-github.min.css?v=9.12.0">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/angular-tooltips.min.css?v=1.2.2">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/app.css">
<link rel="icon" type="image/png" href="https://cdn.nginxconfig.io/assets/img/favicon.png">
<title>nginxconfig.io</title>
<meta name="description" content="nginx config generator">
@ -42,49 +43,49 @@
<div class="card">
<div class="card-body">
<div class="form-group">
<label class="form-label"><span class="info">Domain</span></label>
<label class="form-label">Domain</label>
<input type="text" class="form-control form-control-sm" ng-model="data.domain">
</div>
<div class="form-group">
<label class="form-label"><span class="info">Path</span></label>
<label class="form-label"><span tooltips tooltip-template="path to project">Path</span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.path">
</div>
<div class="form-group">
<label class="form-label"><span class="info">Document root</span></label>
<label class="form-label"><span tooltips tooltip-template="public path in project">Document root</span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.document_root">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="https" ng-model="data.https">
<label class="form-check-label" for="https">
<span class="info">HTTPS</span>
<span tooltips tooltip-template="SSL config (using Let's Encrypt and Mozilla SSL config)">HTTPS</span>
</label>
</div>
<div class="form-check" ng-if="data.https">
<input class="form-check-input" type="checkbox" id="http2" ng-model="data.http2">
<label class="form-check-label" for="http2">
<span class="info">HTTP2</span>
HTTP2
</label>
</div>
<div class="form-group" ng-if="data.https">
<label class="form-label">E-mail</label>
<label class="form-label"><span tooltips tooltip-template="used for Let's Encrypt command">E-mail</span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.email">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cdn" ng-model="data.cdn">
<label class="form-check-label" for="cdn">
<span class="info">CDN</span>
<span tooltips tooltip-template="cookie-free CDN subdomain">CDN</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="non_www" ng-model="data.non_www">
<label class="form-check-label" for="non_www">
<span class="info">non-www</span>
<span tooltips tooltip-template="disable www subdomain">non-www</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="index_html" ng-model="data.index_html">
<label class="form-check-label" for="index_html">
<span class="info">index.html</span>
<span tooltips tooltip-template="pass requests to index.html">index.html</span>
</label>
</div>
</div>
@ -105,13 +106,13 @@
<div class="form-check" ng-if="data.php !== 'off'">
<input class="form-check-input" type="checkbox" id="index_php" ng-model="data.index_php">
<label class="form-check-label" for="index_php">
<span class="info">index.php</span>
<span tooltips tooltip-template="pass requests to index.php">index.php</span>
</label>
</div>
<div class="form-check" ng-if="data.php !== 'off'">
<input class="form-check-input" type="checkbox" id="wordpress" ng-model="data.wordpress">
<label class="form-check-label" for="wordpress">
<span class="info">WordPress</span>
<span tooltips tooltip-template="WordPress security rules">WordPress</span>
</label>
</div>
</div>
@ -122,13 +123,13 @@
<div class="form-check">
<input class="form-check-input" type="radio" id="unified" ng-model="data.file_structure" value="unified">
<label class="form-check-label" for="unified">
<span class="info">unified</span>
<span tooltips tooltip-template="combine config to single file (if possible)">unified</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="separated" ng-model="data.file_structure" value="separated">
<label class="form-check-label" for="separated">
<span class="info">separated</span>
<span tooltips tooltip-template="multiple config files (ideal for multi-domain environment)">separated</span>
</label>
</div>
</div>
@ -158,43 +159,43 @@
</select>
</div>
<div class="form-group">
<label class="form-label"><code class="info">user</code></label>
<label class="form-label"><code>user</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.user">
</div>
<div class="form-group">
<label class="form-label"><code class="info">pid</code></label>
<label class="form-label"><code>pid</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.pid">
</div>
<div class="form-group">
<label class="form-label"><code class="info">access_log</code></label>
<label class="form-label"><code>access_log</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.access_log">
</div>
<div class="form-group">
<label class="form-label"><code class="info">error_log</code></label>
<label class="form-label"><code>error_log</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.error_log">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gzip" ng-model="data.gzip">
<label class="form-check-label" for="gzip">
<span class="info"><code>gzip</code></span>
<code>gzip</code>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="server_tokens" ng-model="data.server_tokens">
<label class="form-check-label" for="server_tokens">
<span class="info"><code>server_tokens</code></span>
<code>server_tokens</code>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="log_not_found" ng-model="data.log_not_found">
<label class="form-check-label" for="log_not_found">
<span class="info"><code>log_not_found</code></span>
<code>log_not_found</code>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="limit_req" ng-model="data.limit_req">
<label class="form-check-label" for="limit_req">
<span class="info"><code>limit_req</code></span>
<span tooltips tooltip-template="requests throttle"><code>limit_req</code></span>
</label>
</div>
</div>
@ -202,19 +203,19 @@
<div class="card">
<div class="card-body">
<div class="form-group">
<label class="form-label"><span class="info">assets <code>expires</code></span></label>
<label class="form-label"><span tooltips tooltip-template="{{ extensions.assets }}">assets <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_assets">
</div>
<div class="form-group">
<label class="form-label"><span class="info">media <code>expires</code></span></label>
<label class="form-label"><span tooltips tooltip-template="{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }}">media <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_media">
</div>
<div class="form-group">
<label class="form-label"><span class="info">svg <code>expires</code></span></label>
<label class="form-label"><span tooltips tooltip-template="{{ extensions.svg }}">svg <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_svg">
</div>
<div class="form-group">
<label class="form-label"><span class="info">fonts <code>expires</code></span></label>
<label class="form-label"><span tooltips tooltip-template="{{ extensions.fonts }}">fonts <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_fonts">
</div>
</div>
@ -335,6 +336,7 @@
<script src="https://cdn.nginxconfig.io/assets/js/clipboard.min.js?v=1.7.1"></script>
<script src="https://cdn.nginxconfig.io/assets/js/angular.min.js?v=1.6.8"></script>
<script src="https://cdn.nginxconfig.io/assets/js/ngclipboard.min.js?v=1.1.3"></script>
<script src="assets/js/app.js"></script>
<script src="https://cdn.nginxconfig.io/assets/js/angular-tooltips.min.js?v=1.2.2"></script>
<script src="https://cdn.nginxconfig.io/assets/js/app.js"></script>
</body>
</html>