[enh] Use semantic headings.

This commit is contained in:
opi 2014-05-07 16:24:17 +02:00
parent 1bac39ac3c
commit 8daeb5ed62
19 changed files with 44 additions and 28 deletions

View file

@ -1,5 +1,14 @@
@import "../bootstrap/less/bootstrap.less"; @import "../bootstrap/less/bootstrap.less";
// Variables override
@font-size-h1: floor((@font-size-base * 2.15)); // ~30px
@font-size-h2: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h3: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h4: @font-size-base;
@font-size-h5: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h6: ceil((@font-size-base * 0.7)); // ~10px
/* Comments: /* Comments:
* *
* 1. we need to rationalise the use of width and max widths. they seem to be * 1. we need to rationalise the use of width and max widths. they seem to be
@ -181,10 +190,17 @@ body .form-control {
.view-title { .view-title {
text-align: center; text-align: center;
font-size: 25px;
margin: -35px 120px 0 120px; margin: -35px 120px 0 120px;
} }
// Preserve font-size in panel titles.
h1.panel-title {font-size: @font-size-h1;}
h2.panel-title {font-size: @font-size-h2;}
h3.panel-title {font-size: @font-size-h3;}
h4.panel-title {font-size: @font-size-h4;}
h5.panel-title {font-size: @font-size-h5;}
h6.panel-title {font-size: @font-size-h6;}
div.br { div.br {
height: 30px; height: 30px;
} }

2
css/style.min.css vendored

File diff suppressed because one or more lines are too long

View file

@ -6,7 +6,7 @@
<div class="pull-right"> <div class="pull-right">
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">{{settings.label}} access</div> <h1 class="view-title">{{settings.label}} access</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -9,7 +9,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">{{settings.label}}</div> <h1 class="view-title">{{settings.label}}</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Install {{manifest.name}}</div> <h1 class="view-title">Install {{manifest.name}}</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -10,7 +10,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Installed apps</div> <h1 class="view-title">Installed apps</h1>
{{/Installed}} {{/Installed}}
@ -26,7 +26,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Available apps</div> <h1 class="view-title">Available apps</h1>
{{/Installed}} {{/Installed}}
<div class="br"></div> <div class="br"></div>
@ -35,7 +35,7 @@
{{#Apps}} {{#Apps}}
<a href="#/apps/{{^Installed}}install/{{/Installed}}{{ID}}" class="list-group-item slide"> <a href="#/apps/{{^Installed}}install/{{/Installed}}{{ID}}" class="list-group-item slide">
<span class="fa-chevron-right pull-right"></span> <span class="fa-chevron-right pull-right"></span>
<h4 class="list-group-item-heading">{{Name}} <small>{{ID}}</small></h4> <h2 class="list-group-item-heading">{{Name}} <small>{{ID}}</small></h2>
<p class="list-group-item-text">{{Description.en}}</p> <p class="list-group-item-text">{{Description.en}}</p>
</a> </a>
{{/Apps}} {{/Apps}}

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Add domain</div> <h1 class="view-title">Add domain</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -9,7 +9,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Domains</div> <h1 class="view-title">Domains</h1>
<div class="br"></div> <div class="br"></div>
<div class="list-group"> <div class="list-group">

View file

@ -6,8 +6,8 @@
<div class="list-group"> <div class="list-group">
{{#links}} {{#links}}
<a href="{{path}}" class="list-group-item slide clearfix"> <a href="{{path}}" class="list-group-item slide clearfix">
<h4 class="pull-left list-group-item-heading">{{name}}</h4>
<span class="pull-right fa-chevron-right"></span> <span class="pull-right fa-chevron-right"></span>
<h2 class="list-group-item-heading">{{name}}</h2>
</a> </a>
{{/links}} {{/links}}
</div> </div>

View file

@ -4,13 +4,13 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Monitoring</div> <h1 class="view-title">Monitoring</h1>
<div class="br"></div> <div class="br"></div>
{{#if status}} {{#if status}}
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h2 class="panel-title"><span class="fa-info-circle"></span> Infos</h2> <h2 class="panel-title"><span class="fa-fw fa-info-circle"></span> Infos</h2>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -26,7 +26,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h2 class="panel-title"> <h2 class="panel-title">
<span class="fa-cog"></span> <span class="fa-fw fa-cog"></span>
<a data-toggle="collapse" data-parent="#accordion" href="#system">System</a> <a data-toggle="collapse" data-parent="#accordion" href="#system">System</a>
</h2> </h2>
</div> </div>
@ -110,7 +110,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h2 class="panel-title"> <h2 class="panel-title">
<span class="fa-cloud"></span> <span class="fa-fw fa-cloud"></span>
<a data-toggle="collapse" data-parent="#accordion" href="#network">Network</a> <a data-toggle="collapse" data-parent="#accordion" href="#network">Network</a>
</h2> </h2>
</div> </div>
@ -178,7 +178,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h2 class="panel-title"> <h2 class="panel-title">
<span class="fa-hdd-o"></span> <span class="fa-fw fa-hdd-o"></span>
<a data-toggle="collapse" data-parent="#accordion" href="#disk">Disk</a> <a data-toggle="collapse" data-parent="#accordion" href="#disk">Disk</a>
</h2> </h2>
</div> </div>

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">{{service.name}}</div> <h1 class="view-title">{{service.name}}</h1>
<div class="br"></div> <div class="br"></div>
<div class="container"> <div class="container">

View file

@ -4,14 +4,14 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Services</div> <h1 class="view-title">Services</h1>
<div class="br"></div> <div class="br"></div>
<div class="list-group"> <div class="list-group">
{{#services}} {{#services}}
<a href="#/services/{{name}}" class="list-group-item slide service-{{name}}"> <a href="#/services/{{name}}" class="list-group-item slide service-{{name}}">
<span class="fa-chevron-right pull-right"></span> <span class="fa-chevron-right pull-right"></span>
<h3 class="list-group-item-heading">{{name}}</h3> <h2 class="list-group-item-heading">{{name}}</h2>
<div class="list-group-item-text"> <div class="list-group-item-text">
Status: Status:
<span class="text-{{#is_running}}success{{/is_running}}{{^is_running}}danger{{/is_running}}"> <span class="text-{{#is_running}}success{{/is_running}}{{^is_running}}danger{{/is_running}}">

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">{{name}} log</div> <h1 class="view-title">{{name}} log</h1>
<div class="br"></div> <div class="br"></div>
<div class="container"> <div class="container">

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Change administration password</div> <h1 class="view-title">Change administration password</h1>
<div class="br"></div> <div class="br"></div>
<form action="#/tools/adminpw" method="PUT" class="form-horizontal"> <form action="#/tools/adminpw" method="PUT" class="form-horizontal">

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Tools</div> <h1 class="view-title">Tools</h1>
<div class="br"></div> <div class="br"></div>
@ -12,7 +12,7 @@
{{#links}} {{#links}}
<a href="{{path}}" class="list-group-item slide"> <a href="{{path}}" class="list-group-item slide">
<span class="fa-chevron-right pull-right"></span> <span class="fa-chevron-right pull-right"></span>
<h4 class="list-group-item-heading">{{name}}</h4> <h2 class="list-group-item-heading">{{name}}</h2>
</a> </a>
{{/links}} {{/links}}
</div> </div>

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">New user</div> <h1 class="view-title">New user</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -4,7 +4,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">Edit {{Username}}</div> <h1 class="view-title">Edit {{Username}}</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -9,7 +9,7 @@
</a> </a>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="view-title">{{Username}}</div> <h1 class="view-title">{{Username}}</h1>
<div class="br"></div> <div class="br"></div>

View file

@ -16,7 +16,7 @@
{{#Users}} {{#Users}}
<a href="#/users/{{Username}}" class="list-group-item slide clearfix"> <a href="#/users/{{Username}}" class="list-group-item slide clearfix">
<span class="pull-right fa-chevron-right"></span> <span class="pull-right fa-chevron-right"></span>
<h4 class="list-group-item-heading">{{Username}} <small>{{Fullname}}</small></h4> <h2 class="list-group-item-heading">{{Username}} <small>{{Fullname}}</small></h2>
<p class="list-group-item-text">{{Mail}}</p> <p class="list-group-item-text">{{Mail}}</p>
</a> </a>
{{/Users}} {{/Users}}