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

site group, preset group

pull/85/head
Bálint Szekeres 2019-05-19 11:45:48 +02:00
parent 4daf054da4
commit f54d4bd6cb
2 changed files with 106 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
public/index.html
View File

@ -36,87 +36,91 @@
<div class="sites"> <div class="sites">
<div class="title">Sites:</div> <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> <div class="group">
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small> <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>
<span class="close" ng-if="key > 0" ng-click="removeSite(key)">&times;</span> {{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
</button> <span class="close" ng-if="key > 0" ng-click="removeSite(key)">&times;</span>
<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button> </button>
<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
</div>
</div> </div>
<div class="presets"> <div class="presets">
<div class="title">Presets:</div> <div class="title">Presets:</div>
<button <div class="group">
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-click="setPreset('frontend')" class="btn btn-sm btn-outline-light"
ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }" ng-click="setPreset('frontend')"
tooltips ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
tooltip-template="• disabled PHP<br>• index.html fallback routing" tooltips
tooltip-side="bottom" tooltip-template="• disabled PHP<br>• index.html fallback routing"
>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button> tooltip-side="bottom"
<button >Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-click="setPreset('backend')" class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }" ng-click="setPreset('backend')"
tooltips ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
tooltip-template="• enabled PHP<br>• index.php fallback routing" tooltips
tooltip-side="bottom" tooltip-template="• enabled PHP<br>• index.php fallback routing"
>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button> tooltip-side="bottom"
<button >PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-click="setPreset('django')" class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isPython() && isDjango() && !isRoot() }" ng-click="setPreset('django')"
tooltips ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled" tooltips
tooltip-side="bottom" tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button> tooltip-side="bottom"
<button >Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-class="{ 'active': isProxy() && !isRoot() }" class="btn btn-sm btn-outline-light"
ng-click="setPreset('nodejs')" ng-class="{ 'active': isProxy() && !isRoot() }"
tooltips ng-click="setPreset('nodejs')"
tooltip-template="• enabled reverse proxy" tooltips
tooltip-side="bottom" tooltip-template="• enabled reverse proxy"
>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button> tooltip-side="bottom"
<button >Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }" class="btn btn-sm btn-outline-light"
ng-click="setPreset('spa')" ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
tooltips ng-click="setPreset('spa')"
tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing" tooltips
tooltip-side="bottom" tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing"
>Single-page application</button> tooltip-side="bottom"
<button >Single-page application</button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-click="setPreset('wordpress')" class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }" ng-click="setPreset('wordpress')"
tooltips ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules" tooltips
tooltip-side="bottom" tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button> tooltip-side="bottom"
<button ><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-click="setPreset('drupal')" class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }" ng-click="setPreset('drupal')"
tooltips ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules" tooltips
tooltip-side="bottom" tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button> tooltip-side="bottom"
<button ><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
type="button" <button
class="btn btn-sm btn-outline-light" type="button"
ng-click="setPreset('magento')" class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }" ng-click="setPreset('magento')"
tooltips ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules" tooltips
tooltip-side="bottom" tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button> tooltip-side="bottom"
><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
</div>
</div> </div>
</div> </div>
</header> </header>

28
resources/scss/_header.scss
View File

@ -49,7 +49,7 @@ header {
.github { .github {
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
position: absolute; position: absolute;
right: 0; right: 15px;
top: 10px; top: 10px;
} }
@ -106,11 +106,13 @@ header {
} }
} }
.title { .sites .title,
.presets .title {
color: #eee; color: #eee;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.9rem;
font-style: italic; font-style: italic;
vertical-align: -5px; vertical-align: top;
margin-right: 4px; margin-right: 4px;
text-align: center; text-align: center;
@ -120,6 +122,26 @@ header {
} }
} }
.sites .group,
.presets .group {
@include media-breakpoint-up(lg) {
display: inline-block;
vertical-align: top;
}
}
.sites .group {
@include media-breakpoint-up(lg) {
width: calc(100% - 290px);
}
}
.presets .group {
@include media-breakpoint-up(lg) {
width: calc(100% - 64px);
}
}
.btn-outline-light { .btn-outline-light {
box-shadow: none !important; box-shadow: none !important;
border-color: #999; border-color: #999;