presets moved to header

pull/66/head
Szekeres Bálint 6 years ago
parent d4c6d6b3f5
commit 00893b2aad

@ -17,21 +17,20 @@
</head>
<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController">
<header>
<div class="container">
<div class="container-fluid">
<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
<div class="presets">
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('frontend')" tooltips tooltip-template="• disabled PHP<br>• index.html fallback routing" tooltip-side="bottom">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>
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('backend')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing" tooltip-side="bottom">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>
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('nodejs')" tooltips tooltip-template="• enabled reverse proxy" tooltip-side="bottom">Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('spa')" tooltips tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing" tooltip-side="bottom">Single-page application</button>
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('wordpress')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules" tooltip-side="bottom"><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('drupal')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules" tooltip-side="bottom"><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
<button type="button" class="btn btn-sm btn-outline-light" ng-click="setPreset('magento')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules" tooltip-side="bottom"><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
</div>
</header>
<section class="presets">
<div class="container">
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('frontend')" tooltips tooltip-template="• disabled PHP<br>• index.html fallback routing" tooltip-side="bottom">Frontend <img src="assets/img/brands/angular.svg" alt="Angular"> <img src="assets/img/brands/react.svg" alt="React"> <img src="assets/img/brands/vuejs.svg" alt="Vue.js"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('backend')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing" tooltip-side="bottom">Backend <img src="assets/img/brands/php.svg" alt="PHP"> <img src="assets/img/brands/laravel.svg" alt="Laravel"> <img src="assets/img/brands/symfony.svg" alt="Symfony"> <img src="assets/img/brands/codeigniter.svg" alt="CodeIgniter"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('nodejs')" tooltips tooltip-template="• enabled reverse proxy<br>• disabled PHP" tooltip-side="bottom">Node.js <img src="assets/img/brands/nodejs.svg" alt="Node.js"></button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('spa')" tooltips tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing" tooltip-side="bottom">Single-page application</button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('wordpress')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules" tooltip-side="bottom"><img src="assets/img/brands/wordpress.svg" alt="WordPress"> WordPress</button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('drupal')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules" tooltip-side="bottom"><img src="assets/img/brands/drupal.svg" alt="Drupal"> Drupal</button>
<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('magento')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules" tooltip-side="bottom"><img src="assets/img/brands/magento.svg" alt="Magento"> Magento</button>
</div>
</section>
</header>
<section class="tabs">
<div class="container">
<div class="row">

@ -10,4 +10,34 @@ header {
height: 3rem;
margin: 0.5rem 0 0.3rem;
}
.presets {
margin-bottom: 0.3rem;
line-height: 1.8rem;
.btn-outline-light {
border-color: #999;
&:hover {
background-color: #fff;
border-color: #fff;
svg {
path {
fill: #000;
}
}
}
svg {
height: 1.1rem;
vertical-align: text-bottom;
path {
fill: #ddd;
transition: fill 0.15s ease-in-out;
}
}
}
}
}

@ -1,27 +1,3 @@
section.presets {
margin-top: 0.5rem;
margin-bottom: 1rem;
@include media-breakpoint-down(md) {
text-align: center;
}
.btn {
margin-bottom: 0.25rem;
&.btn-outline-dark{
&:hover {
background-color: #666;
}
}
img {
height: 1.1rem;
vertical-align: text-bottom;
}
}
}
section.tabs {
margin-bottom: 1rem;

@ -2,11 +2,7 @@ aside.sidebar {
margin-top: 1rem;
@include media-breakpoint-up(lg) {
margin-top: -0.5rem;
}
@include media-breakpoint-up(xl) {
margin-top: -2.5rem;
margin-top: 0;
}
.github-link {

Loading…
Cancel
Save