Revision 3fc38171
Von Andreas Rudin vor etwa 6 Jahren hinzugefügt
| SL/Layout/Split.pm | ||
|---|---|---|
| 18 | 18 |
my $left = join '', map { $_->pre_content } @{ $_[0]->left || [] };
|
| 19 | 19 |
my $right = join '', map { $_->pre_content } @{ $_[0]->right || [] };
|
| 20 | 20 |
|
| 21 |
html_tag('div', $left, class => 'layout-split-left')
|
|
| 22 |
.'<div class="layout-split-right">' . $right;
|
|
| 21 |
html_tag('div', $left, id => 'layout-split-left')
|
|
| 22 |
.'<div id="layout-split-right">' . $right;
|
|
| 23 | 23 |
} |
| 24 | 24 |
|
| 25 | 25 |
sub post_content {
|
| 26 | 26 |
my $left = join '', map { $_->post_content } @{ $_[0]->left || [] };
|
| 27 | 27 |
my $right = join '', map { $_->post_content } @{ $_[0]->right || [] };
|
| 28 | 28 |
|
| 29 |
$right . '</div>' |
|
| 29 |
$right . '</div><!-- /#layout-split-right -->'
|
|
| 30 | 30 |
. html_tag('div', $left, class => 't-layout-left');
|
| 31 | 31 |
} |
| 32 | 32 |
|
| SL/Presenter/Tag.pm | ||
|---|---|---|
| 239 | 239 |
|
| 240 | 240 |
_set_id_attribute(\%attributes, $attributes{name}) if $attributes{name};
|
| 241 | 241 |
$attributes{type} ||= 'button';
|
| 242 |
$attributes{tag} ||= 'input';
|
|
| 242 | 243 |
|
| 243 | 244 |
$onclick = 'if (!confirm("'. _J(delete($attributes{confirm})) .'")) return false; ' . $onclick if $attributes{confirm};
|
| 244 | 245 |
|
| 245 |
html_tag('input', undef, %attributes, value => $value, onclick => $onclick);
|
|
| 246 |
if ( $attributes{tag} == 'input' ) {
|
|
| 247 |
html_tag('input', undef, %attributes, value => $value, onclick => $onclick);
|
|
| 248 |
} |
|
| 249 |
elsif ( $attributes{tag} == 'button' ) {
|
|
| 250 |
html_tag('button', undef, %attributes, value => $value, onclick => $onclick);
|
|
| 251 |
} |
|
| 246 | 252 |
} |
| 247 | 253 |
|
| 248 | 254 |
sub submit_tag {
|
| SL/Template/Plugin/L.pm | ||
|---|---|---|
| 262 | 262 |
# PENDENT: ID gugusli aus button entfernen, wird nicht angezeigt im browser (war nur Test) |
| 263 | 263 |
return '<span class="switch-form-element">' |
| 264 | 264 |
. $self->input_tag($name, $value, %attributes, size => $cols) |
| 265 |
. "<button class=\"wi-tiny icon\"><img src=\"image/edit-entry.png\" onclick=\"kivi.switch_areainput_to_textarea('${id}','".$class."')\"></button>"
|
|
| 265 |
. "<button class=\"wi-tiny icon\"><img src=\"image/pencil.png\" onclick=\"kivi.switch_areainput_to_textarea('${id}','".$class."')\"></button>"
|
|
| 266 | 266 |
. '</span>'; |
| 267 | 267 |
} |
| 268 | 268 |
|
| bin/mozilla/io.pl | ||
|---|---|---|
| 303 | 303 |
my $rows = $form->numtextrows($form->{"description_$i"}, 30, 6);
|
| 304 | 304 |
|
| 305 | 305 |
# quick delete single row |
| 306 |
$column_data{runningnumber} = q|<a onclick= "$('#partnumber_| . $i . q|').val(''); $('#update_button').click();" class="row-position">| .
|
|
| 307 |
q|<img height="10px" width="10px" src="image/cross.png" alt="| . $locale->text('Remove') . q|"></a> |;
|
|
| 306 |
$column_data{runningnumber} = q|<a onclick="$('#partnumber_| . $i . q|').val(''); $('#update_button').click();" class="row-position">| .
|
|
| 307 |
q|<img src="image/cross.png" alt="| . $locale->text('Remove') . q|"></a> |;
|
|
| 308 | 308 |
$column_data{runningnumber} .= $cgi->textfield(-name => "runningnumber_$i", -id => "runningnumber_$i", -size => 2, -value => $i, -class => "row-position wi-smallest"); # HuT
|
| 309 | 309 |
|
| 310 | 310 |
|
| ... | ... | |
| 313 | 313 |
SL::Presenter::Part::classification_abbreviation($form->{"classification_id_$i"}) if $form->{"id_$i"};
|
| 314 | 314 |
$column_data{description} = (($rows > 1) # if description is too large, use a textbox instead
|
| 315 | 315 |
? $cgi->textarea( -name => "description_$i", -id => "description_$i", -default => $form->{"description_$i"}, -rows => $rows, -class => "wi-lightwide")
|
| 316 |
: $cgi->textfield(-name => "description_$i", -id => "description_$i", -value => $form->{"description_$i"}, -class => "wi-lightwide"))
|
|
| 317 |
. $cgi->button(-value => $locale->text('L'), -onClick => "kivi.SalesPurchase.edit_longdescription($i)", -class => "wi-tiny");
|
|
| 316 |
: $cgi->textfield(-name => "description_$i", -id => "description_$i", -value => $form->{"description_$i"}, -class => "wi-lightwide") )
|
|
| 317 |
# . $cgi->button(-value => $locale->text('L'), -onClick => "kivi.SalesPurchase.edit_longdescription($i)", -class => "wi-tiny neutral");
|
|
| 318 |
. q|<a href="javascript:kivi.SalesPurchase.edit_longdescription(| . $i . q|);" class="button-image edit" title="| . t8('Edit long description') . q|"><img src="image/pencil.png"></a>|;
|
|
| 318 | 319 |
|
| 319 | 320 |
my $qty_dec = ($form->{"qty_$i"} =~ /\.(\d+)/) ? length $1 : 2;
|
| 320 | 321 |
|
| ... | ... | |
| 433 | 434 |
|
| 434 | 435 |
map { $form->{"${_}_$i"} = $form->format_amount(\%myconfig, $form->{"${_}_$i"}, 2) } qw(marge_absolut marge_percent);
|
| 435 | 436 |
|
| 436 |
$column_data{marge} = sprintf qq|<span class=\"data\" %s>%s %s%%</data>|,
|
|
| 437 |
$column_data{marge} = sprintf qq|<span class=\"data\" %s>%s %s%%</span>|,
|
|
| 437 | 438 |
$marge_color, $form->{"marge_absolut_$i"}, $form->{"marge_percent_$i"};
|
| 438 | 439 |
$column_data{listprice} = "<span class=\"data\">" . $form->format_amount(\%myconfig, $form->{"listprice_$i"}, 2) . "</span>";
|
| 439 | 440 |
$column_data{lastcost} = sprintf qq|<input class="wi-normal" name="lastcost_$i" value="%s" type="text">|, $form->format_amount(\%myconfig, $form->{"lastcost_$i"}, $decimalplaces);
|
| bin/mozilla/oe.pl | ||
|---|---|---|
| 506 | 506 |
$form->{"delivered"} ? "checked" : "", $locale->text('Delivery Order(s) for full qty created') if $form->{"type"} =~ /_order$/;
|
| 507 | 507 |
push @tmp, sprintf qq|<input name="closed" id="closed" type="checkbox" class="checkbox" value="1" %s><label for="closed">%s</label>|, |
| 508 | 508 |
$form->{"closed"} ? "checked" : "", $locale->text('Closed') if $form->{id};
|
| 509 |
$TMPL_VAR->{openclosed} = sprintf qq|<tr><td colspan=%d align=center>%s</td></tr>\n|, 2 * scalar @tmp, join "\n", @tmp if @tmp;
|
|
| 509 |
$TMPL_VAR->{openclosed} = sprintf qq|<tr><th colspan=%d><div class="list">%s</div></th></tr>\n|, 2 * scalar @tmp, join "\n", @tmp if @tmp;
|
|
| 510 | 510 |
|
| 511 | 511 |
my $vc = $form->{vc} eq "customer" ? "customers" : "vendors";
|
| 512 | 512 |
|
| ... | ... | |
| 1187 | 1187 |
}; |
| 1188 | 1188 |
push @options, $locale->text('Open') if $form->{open};
|
| 1189 | 1189 |
push @options, $locale->text('Closed') if $form->{closed};
|
| 1190 |
push @options, $locale->text('Delivery Order created') if $form->{delivered};
|
|
| 1190 |
push @options, $locale->text('Delivery Order created') if $form->{delivered};
|
|
| 1191 | 1191 |
push @options, $locale->text('Not delivered') if $form->{notdelivered};
|
| 1192 | 1192 |
push @options, $locale->text('Periodic invoices active') if $form->{periodic_invoices_active};
|
| 1193 | 1193 |
push @options, $locale->text('Reqdate not set or before current month') if $form->{reqdate_unset_or_old};
|
| bin/mozilla/rp.pl | ||
|---|---|---|
| 153 | 153 |
$::form->all_departments(\%::myconfig); |
| 154 | 154 |
if (@{ $::form->{all_departments} || [] }) {
|
| 155 | 155 |
$::form->{selectdepartment} = "<option>\n";
|
| 156 |
map { $::form->{selectdepartment} .= "<option>$_->{description}--$_->{id}\n" } @{ $::form->{all_departments} || [] };
|
|
| 156 |
map { $::form->{selectdepartment} .= "<option>$_->{id} $_->{description} \n" } @{ $::form->{all_departments} || [] };
|
|
| 157 | 157 |
} |
| 158 | 158 |
|
| 159 | 159 |
$::form->get_lists("projects" => { "key" => "ALL_PROJECTS", "all" => 1 });
|
| css/developement/farben#OnDisk.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
<title>Kommunikation mit Farben in Kivitendo</title> |
|
| 7 |
|
|
| 8 |
<script type="text/javascript" src="/js/jquery.js"></script> |
|
| 9 |
<script type="text/javascript" src="/js/common.js"></script> |
|
| 10 |
<script type="text/javascript" src="/js/namespace.js"></script> |
|
| 11 |
<script type="text/javascript" src="/js/kivi.js"></script> |
|
| 12 |
<script type="text/javascript" src="/js/locale/de.js"></script> |
|
| 13 |
<script type="text/javascript" src="/js/jquery-ui.js"></script> |
|
| 14 |
<script type="text/javascript" src="/js/kivi.QuickSearch.js"></script> |
|
| 15 |
<script type="text/javascript" src="/js/kivi.ActionBar.js"></script> |
|
| 16 |
<script type="text/javascript" src="/js/kivi.Draft.js"></script> |
|
| 17 |
<script type="text/javascript" src="/js/kivi.File.js"></script> |
|
| 18 |
<script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script> |
|
| 19 |
<script type="text/javascript" src="/js/kivi.Part.js"></script> |
|
| 20 |
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script> |
|
| 21 |
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script> |
|
| 22 |
<script type="text/javascript" src="/js/kivi.io.js"></script> |
|
| 23 |
<script type="text/javascript" src="/js/autocomplete_customer.js"></script> |
|
| 24 |
<script type="text/javascript" src="/js/client_js.js"></script> |
|
| 25 |
<script type="text/javascript" src="/js/jquery.cookie.js"></script> |
|
| 26 |
<script type="text/javascript" src="/js/jquery.checkall.js"></script> |
|
| 27 |
<script type="text/javascript" src="/js/jquery.download.js"></script> |
|
| 28 |
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> |
|
| 29 |
<script type="text/javascript" src="/js/jquery/fixes.js"></script> |
|
| 30 |
<script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script> |
|
| 31 |
<script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
| 32 |
|
|
| 33 |
</head> |
|
| 34 |
<body class="developing"> |
|
| 35 |
<div class="wrapper"> |
|
| 36 |
|
|
| 37 |
<h1>Bedeutung & Anwendung von Farben in Kivitendo</h1> |
|
| 38 |
|
|
| 39 |
<h2>Buttons</h2> |
|
| 40 |
<form action="#"> |
|
| 41 |
<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3> |
|
| 42 |
<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p> |
|
| 43 |
<div class="buttons"> |
|
| 44 |
<input type="submit" value="Absenden"> |
|
| 45 |
<input type="submit" value="Absenden" class="hover"> |
|
| 46 |
<input type="submit" value="Absenden" class="active"> (INPUT[submit]-Tag) <br> |
|
| 47 |
<button type="button">Speichern</button> |
|
| 48 |
<button type="button" class="hover">Speichern</button> |
|
| 49 |
<button type="button" class="active">Speichern</button> (BUTTON-Tag)<br> |
|
| 50 |
<a href="#" class="button"> |
|
| 51 |
<a href="#" class="button hover"> |
|
| 52 |
<a href="#" class="button active">Absenden</a> (A.button-Tag)<br> |
|
| 53 |
</div><!-- ./buttons --> |
|
| 54 |
|
|
| 55 |
<h3>Navigation & User Interface</h3> |
|
| 56 |
<p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p> |
|
| 57 |
<div class="buttons"> |
|
| 58 |
<input type="reset" value="Zurücksetzen" class="neutral wi-normal"> (INPUT[submit].neutral-Tag) <br> |
|
| 59 |
<button class="neutral wi-normal">Details anzeigen</button> (BUTTON.neutral-Tag)<br> |
|
| 60 |
<a href="#" class="button neutral wi-normal">Filter anzeigen</a> (A.button.neutral-Tag)<br> |
|
| 61 |
</div><!-- ./buttons --> |
|
| 62 |
</form> |
|
| 63 |
|
|
| 64 |
<h2>Nachrichten (Messages)</h2> |
|
| 65 |
<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:<br><i>Flash_Messages und Old_Style</i>.<br>Dann gibt es mind. 4 <b>Message-Arten</b>:<br><i>Error, Info, Hint, Warning</i><br>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p> |
|
| 66 |
|
|
| 67 |
|
|
| 68 |
<h3>Error</h3> |
|
| 69 |
|
|
| 70 |
<p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p> |
|
| 71 |
<div id="flash_error" class="flash_message flash_message_error"> |
|
| 72 |
<a href="#flash_error" style="float:right" class="icon-close">✕</a> |
|
| 73 |
<span class="flash_title" style="float:left;">Fehler:</span> |
|
| 74 |
<div class="flash_notification" style="float:left;"> |
|
| 75 |
<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span> |
|
| 76 |
<span id="flash_error_disp" class="display" style="float:left;"> |
|
| 77 |
<a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();"> [Details] </a>
|
|
| 78 |
</span> |
|
| 79 |
<div id="flash_detail_error" class="detail" style="display:none;"> |
|
| 80 |
<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span> |
|
| 81 |
<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close">✕</a>
|
|
| 82 |
</div> |
|
| 83 |
</div> |
|
| 84 |
</div> |
|
| 85 |
<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p> |
|
| 86 |
<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div> |
|
| 87 |
|
|
| 88 |
|
|
| 89 |
<h3>Info / Hint</h3> |
|
| 90 |
|
|
| 91 |
<p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p> |
|
| 92 |
<div id="flash_info" class="flash_message flash_message_info"> |
|
| 93 |
<a href="#flash_info" style="float:right" class="icon-close">✕</a> |
|
| 94 |
<span class="flash_title" style="float:left;">Information:</span> |
|
| 95 |
<div class="flash_notification" style="float:left;"> |
|
| 96 |
<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span> |
|
| 97 |
<span id="flash_info_disp" class="display" style="float:left;"> |
|
| 98 |
<a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();"> [Details] </a>
|
|
| 99 |
</span> |
|
| 100 |
<div id="flash_detail_info" class="detail" style="display:none;"> |
|
| 101 |
<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span> |
|
| 102 |
<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close">✕</a>
|
|
| 103 |
</div> |
|
| 104 |
</div> |
|
| 105 |
</div> |
|
| 106 |
<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p> |
|
| 107 |
<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div> |
|
| 108 |
|
|
| 109 |
|
|
| 110 |
<h3>Warning</h3> |
|
| 111 |
|
|
| 112 |
<p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p> |
|
| 113 |
<div id="flash_warning" class="flash_message flash_message_warning"> |
|
| 114 |
<a href="#flash_warning" style="float:right" class="icon-close">✕</a> |
|
| 115 |
<span class="flash_title" style="float:left;">Warnung:</span> |
|
| 116 |
<div class="flash_notification" style="float:left;"> |
|
| 117 |
<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span> |
|
| 118 |
<span id="flash_warning_disp" class="display" style="float:left;"> |
|
| 119 |
<a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();"> [Details] </a>
|
|
| 120 |
</span> |
|
| 121 |
<div id="flash_detail_warning" class="detail" style="display:none;"> |
|
| 122 |
<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span> |
|
| 123 |
<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close">✕</a>
|
|
| 124 |
</div> |
|
| 125 |
</div> |
|
| 126 |
</div> |
|
| 127 |
<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p> |
|
| 128 |
<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div> |
|
| 129 |
|
|
| 130 |
|
|
| 131 |
<h3>OK</h3> |
|
| 132 |
|
|
| 133 |
<p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p> |
|
| 134 |
<div id="flash_ok" class="flash_message flash_message_ok"> |
|
| 135 |
<a href="#flash_ok" style="float:right" class="icon-close">✕</a> |
|
| 136 |
<span |
|
| css/developement/farben.html | ||
|---|---|---|
| 42 | 42 |
<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3> |
| 43 | 43 |
<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p> |
| 44 | 44 |
<div class="buttons"> |
| 45 |
<input type="submit" value="Absenden" class="wi-small"> |
|
| 46 |
<input type="submit" value="Absenden" class="hover wi-small"> |
|
| 47 |
<input type="submit" value="Absenden" class="active wi-small"> (INPUT[submit]-Tag) <br> |
|
| 48 |
<button type="button" class=" wi-small">Speichern</button> |
|
| 49 |
<button type="button" class="hover wi-small">Speichern</button> |
|
| 50 |
<button type="button" class="active wi-small">Speichern</button> (BUTTON-Tag)<br> |
|
| 51 |
<a href="#" class="button wi-small">Absenden</a> |
|
| 52 |
<a href="#" class="button hover wi-small">Absenden</a> |
|
| 53 |
<a href="#" class="button active wi-small">Absenden</a> (A.button-Tag)<br> |
|
| 45 |
<table> |
|
| 46 |
<tbody> |
|
| 47 |
<tr> |
|
| 48 |
<td><input type="submit" value="Absenden" class="wi-small"></td> |
|
| 49 |
<td><input type="submit" value="Absenden" class="hover wi-small"></td> |
|
| 50 |
<td><input type="submit" value="Absenden" class="active wi-small"></td> |
|
| 51 |
<td>(INPUT[type=submit])</td> |
|
| 52 |
</tr> |
|
| 53 |
<tr> |
|
| 54 |
<td><input type="button" value="Absenden" class="wi-small"></td> |
|
| 55 |
<td><input type="button" value="Absenden" class="hover wi-small"></td> |
|
| 56 |
<td><input type="button" value="Absenden" class="active wi-small"></td> |
|
| 57 |
<td>(INPUT[type=button])</td> |
|
| 58 |
</tr> |
|
| 59 |
<tr> |
|
| 60 |
<td><button type="button" class=" wi-small">Speichern</button></td> |
|
| 61 |
<td><button type="button" class="hover wi-small">Speichern</button></td> |
|
| 62 |
<td><button type="button" class="active wi-small">Speichern</button></td> |
|
| 63 |
<td>(BUTTON)</td> |
|
| 64 |
</tr> |
|
| 65 |
<tr> |
|
| 66 |
<td><a href="#" class="button wi-small">Absenden</a></td> |
|
| 67 |
<td><a href="#" class="button hover wi-small">Absenden</a></td> |
|
| 68 |
<td><a href="#" class="button active wi-small">Absenden</a></td> |
|
| 69 |
<td>(A.button-Tag)</td> |
|
| 70 |
</tr> |
|
| 71 |
</tbody> |
|
| 72 |
</table> |
|
| 54 | 73 |
</div><!-- ./buttons --> |
| 55 | 74 |
|
| 56 | 75 |
<h3>Navigation & User Interface</h3> |
| 57 | 76 |
<p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p> |
| 58 | 77 |
<div class="buttons"> |
| 59 |
<input type="reset" value="Zurücksetzen" class="neutral wi-normal"> |
|
| 60 |
<input type="reset" value="Zurücksetzen" class="neutral-hover wi-normal"> |
|
| 61 |
<input type="reset" value="Zurücksetzen" class="neutral-active wi-normal"> (INPUT[submit].neutral-Tag) <br> |
|
| 62 |
<button class="neutral wi-normal">Details anzeigen</button> |
|
| 63 |
<button class="neutral-hover wi-normal">Details anzeigen</button> |
|
| 64 |
<button class="neutral-active wi-normal">Details anzeigen</button> (BUTTON.neutral-Tag)<br> |
|
| 65 |
<a href="#" class="button neutral wi-normal">Filter anzeigen</a> |
|
| 66 |
<a href="#" class="button neutral-hover wi-normal">Filter anzeigen</a> |
|
| 67 |
<a href="#" class="button neutral-active wi-normal">Filter anzeigen</a> (A.button.neutral-Tag)<br> |
|
| 78 |
<table> |
|
| 79 |
<tbody> |
|
| 80 |
<tr> |
|
| 81 |
<td><input type="reset" value="Zurücksetzen" class="neutral wi-normal"></td> |
|
| 82 |
<td><input type="reset" value="Zurücksetzen" class="neutral-hover wi-normal"></td> |
|
| 83 |
<td><input type="reset" value="Zurücksetzen" class="neutral-active wi-normal"></td> |
|
| 84 |
<td>(INPUT[submit].neutral-Tag)</td> |
|
| 85 |
</tr> |
|
| 86 |
<tr> |
|
| 87 |
<td><button class="neutral wi-normal">Details anzeigen</button></td> |
|
| 88 |
<td><button class="neutral-hover wi-normal">Details anzeigen</button></td> |
|
| 89 |
<td><button class="neutral-active wi-normal">Details anzeigen</button></td> |
|
| 90 |
<td>(BUTTON.neutral-Tag)</td> |
|
| 91 |
</tr> |
|
| 92 |
<tr> |
|
| 93 |
<td><a href="#" class="button neutral wi-normal">Filter anzeigen</a></td> |
|
| 94 |
<td><a href="#" class="button neutral-hover wi-normal">Filter anzeigen</a></td> |
|
| 95 |
<td><a href="#" class="button neutral-active wi-normal">Filter anzeigen</a></td> |
|
| 96 |
<td>(A.button.neutral-Tag)</td> |
|
| 97 |
</tr> |
|
| 98 |
</tbody> |
|
| 99 |
</table> |
|
| 68 | 100 |
</div><!-- ./buttons --> |
| 69 | 101 |
</form> |
| 70 | 102 |
|
| ... | ... | |
| 89 | 121 |
<p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p> |
| 90 | 122 |
<div id="flash_error" class="flash_message flash_message_error"> |
| 91 | 123 |
<div class="button-container"> |
| 92 |
<a href="#flash_error" style="float:right" class="icon-close button wi-tiny">✕</a>
|
|
| 93 |
<span id="flash_error_disp" class="display" style="float:left;">
|
|
| 94 |
<a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();" class="button wi-tiny">Details</a>
|
|
| 95 |
</span>
|
|
| 124 |
<a href="#flash_error" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 125 |
<span id="flash_error_disp" class="display" style="float:left;"> |
|
| 126 |
<a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();" class="button wi-tiny">Details</a>
|
|
| 127 |
</span> |
|
| 96 | 128 |
</div> |
| 97 | 129 |
<div class="message-container"> |
| 98 |
<span class="flash_title" style="float:left;">Fehler:</span>
|
|
| 130 |
<span class="flash_title" style="float:left;">Fehler:</span> |
|
| 99 | 131 |
<div class="flash_notification" style="float:left;"> |
| 100 |
<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span>
|
|
| 132 |
<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span> |
|
| 101 | 133 |
<div id="flash_detail_error" class="detail" style="display:none;"> |
| 102 |
<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span>
|
|
| 103 |
<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 134 |
<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span> |
|
| 135 |
<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 104 | 136 |
</div> |
| 105 | 137 |
</div> |
| 106 | 138 |
</div> |
| ... | ... | |
| 114 | 146 |
<p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p> |
| 115 | 147 |
<div id="flash_warning" class="flash_message flash_message_warning"> |
| 116 | 148 |
<div class="button-container"> |
| 117 |
<a href="#flash_warning" style="float:right" class="icon-close button wi-tiny">✕</a>
|
|
| 118 |
<span id="flash_warning_disp" class="display" style="float:left;">
|
|
| 119 |
<a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();" class="button wi-tiny">Details</a>
|
|
| 120 |
</span>
|
|
| 149 |
<a href="#flash_warning" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 150 |
<span id="flash_warning_disp" class="display" style="float:left;"> |
|
| 151 |
<a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();" class="button wi-tiny">Details</a>
|
|
| 152 |
</span> |
|
| 121 | 153 |
</div> |
| 122 | 154 |
<div class="message-container"> |
| 123 |
<span class="flash_title" style="float:left;">Warnung:</span>
|
|
| 155 |
<span class="flash_title" style="float:left;">Warnung:</span> |
|
| 124 | 156 |
<div class="flash_notification" style="float:left;"> |
| 125 |
<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span>
|
|
| 157 |
<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span> |
|
| 126 | 158 |
<div id="flash_detail_warning" class="detail" style="display:none;"> |
| 127 |
<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span>
|
|
| 128 |
<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 159 |
<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span> |
|
| 160 |
<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 129 | 161 |
</div> |
| 130 | 162 |
</div> |
| 131 | 163 |
</div> |
| ... | ... | |
| 139 | 171 |
<p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p> |
| 140 | 172 |
<div id="flash_info" class="flash_message flash_message_info"> |
| 141 | 173 |
<div class="button-container"> |
| 142 |
<a href="#flash_info" style="float:right" class="icon-close button wi-tiny">✕</a>
|
|
| 143 |
<span id="flash_info_disp" class="display" style="float:left;">
|
|
| 144 |
<a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();" class="button wi-tiny"> Details </a>
|
|
| 145 |
</span>
|
|
| 174 |
<a href="#flash_info" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 175 |
<span id="flash_info_disp" class="display" style="float:left;"> |
|
| 176 |
<a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();" class="button wi-tiny"> Details </a>
|
|
| 177 |
</span> |
|
| 146 | 178 |
</div> |
| 147 | 179 |
<div class="message-container"> |
| 148 |
<span class="flash_title" style="float:left;">Information:</span>
|
|
| 180 |
<span class="flash_title" style="float:left;">Information:</span> |
|
| 149 | 181 |
<div class="flash_notification" style="float:left;"> |
| 150 |
<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span>
|
|
| 182 |
<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span> |
|
| 151 | 183 |
<div id="flash_detail_info" class="detail" style="display:none;"> |
| 152 |
<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span>
|
|
| 153 |
<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 184 |
<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span> |
|
| 185 |
<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 154 | 186 |
</div> |
| 155 | 187 |
</div> |
| 156 | 188 |
</div> |
| ... | ... | |
| 164 | 196 |
<p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p> |
| 165 | 197 |
<div id="flash_ok" class="flash_message flash_message_ok"> |
| 166 | 198 |
<div class="button-container"> |
| 167 |
<a href="#flash_ok" style="float:right" class="icon-close button wi-tiny">✕</a>
|
|
| 168 |
<span id="flash_ok_disp" class="display" style="float:left;">
|
|
| 169 |
<a href="#flash_ok" style="float:left;" onclick="$('#flash_detail_ok').toggle();" class="button wi-tiny">Details</a>
|
|
| 170 |
</span>
|
|
| 199 |
<a href="#flash_ok" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 200 |
<span id="flash_ok_disp" class="display" style="float:left;"> |
|
| 201 |
<a href="#flash_ok" style="float:left;" onclick="$('#flash_detail_ok').toggle();" class="button wi-tiny">Details</a>
|
|
| 202 |
</span> |
|
| 171 | 203 |
</div> |
| 172 | 204 |
<div class="message-container"> |
| 173 |
<span class="flash_title" style="float:left;">OK:</span>
|
|
| 205 |
<span class="flash_title" style="float:left;">OK:</span> |
|
| 174 | 206 |
<div class="flash_notification" style="float:left;"> |
| 175 |
<span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span>
|
|
| 207 |
<span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span> |
|
| 176 | 208 |
<div id="flash_detail_ok" class="detail" style="display:none;"> |
| 177 |
<span id="flash_ok_detail">Das ist aber noch kein Grund zur Freude. Lesen Sie doch bitte hier, was es im weiteren zu beachten gibt.</span>
|
|
| 178 |
<a href="#flash_ok" style="float:left" onclick="$('#flash_detail_ok').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 209 |
<span id="flash_ok_detail">Das ist aber noch kein Grund zur Freude. Lesen Sie doch bitte hier, was es im weiteren zu beachten gibt.</span> |
|
| 210 |
<a href="#flash_ok" style="float:left" onclick="$('#flash_detail_ok').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 179 | 211 |
</div> |
| 180 | 212 |
</div> |
| 181 | 213 |
</div> |
| ... | ... | |
| 186 | 218 |
|
| 187 | 219 |
</div> |
| 188 | 220 |
</body> |
| 189 |
</html> |
|
| 221 |
</html> |
|
| css/developement/form-elements.html | ||
|---|---|---|
| 22 | 22 |
<h2>Formular-Elemente mit Standard-Einstellungen</h2> |
| 23 | 23 |
|
| 24 | 24 |
|
| 25 |
<table class="tbl-horizontal col test">
|
|
| 25 |
<table class="tbl-horizontal"> |
|
| 26 | 26 |
<caption>Klassische Input-Elemente</caption> |
| 27 | 27 |
<colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup> |
| 28 | 28 |
<tbody> |
| css/developement/index.html | ||
|---|---|---|
| 19 | 19 |
<li><a href="tables.html" title="Tabellen in Kivitendo">Tabellen</a></li> |
| 20 | 20 |
<li><a href="table-dimensions.html" title="Tabellen-Abmessungen in Kivitendo">Tabellen-Abmessungen</a></li> |
| 21 | 21 |
<li><a href="farben.html" title="Details zum Einsatz von Farben in Kivitendo">Einsatz von Farben</a></li> |
| 22 |
<li><a href="farben-demo.html" title="Anzeige aller Farben in Kivitendo">Alle Farben in Kivitendo</a></li> |
|
| 23 |
<li><a href="anleitung.html" title="Anzeige aller Farben in Kivitendo">Anleitung & Grundregeln</a></li> |
|
| 22 | 24 |
</ul> |
| 23 | 25 |
|
| 24 | 26 |
</div> |
| 25 | 27 |
</body> |
| 26 |
</html> |
|
| 28 |
</html> |
|
| css/developement/tables.html | ||
|---|---|---|
| 4 | 4 |
<meta charset="utf-8" /> |
| 5 | 5 |
<link href="../style.css" rel="stylesheet"> |
| 6 | 6 |
<title>Tabellen in Kivitendo</title> |
| 7 |
<style type="text/css"> |
|
| 8 |
p.p1 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px monospace; color: #d02226; -webkit-text-stroke: #d02226;font-family: monospace;}
|
|
| 9 |
p.p2 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #374ef5; -webkit-text-stroke: #374ef5;font-family: monospace;}
|
|
| 10 |
p.p3 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #141414; -webkit-text-stroke: #141414;font-family: monospace;}
|
|
| 11 |
p.p4 {padding:0;margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Times; color: #c83a82; -webkit-text-stroke: #c83a82;font-family: monospace;}
|
|
| 12 |
p.p5 {padding:0;margin: 0.0px 0.0px 12.0px 0.0px; font: 19.0px Times; color: #374ef5; -webkit-text-stroke: #374ef5;font-family: monospace;}
|
|
| 13 |
span.s1 {font-kerning: none}
|
|
| 14 |
span.s2 {font-kerning: none; color: #000000; -webkit-text-stroke: 0px #000000}
|
|
| 15 |
span.s3 {font-kerning: none; color: #bb5f0a; -webkit-text-stroke: 0px #bb5f0a}
|
|
| 16 |
span.s4 {font-kerning: none; color: #c83a82; -webkit-text-stroke: 0px #c83a82}
|
|
| 17 |
span.s5 {font-kerning: none; color: #374ef5; -webkit-text-stroke: 0px #374ef5}
|
|
| 18 |
span.s6 {font-kerning: none; color: #141414; -webkit-text-stroke: 0px #141414}
|
|
| 19 |
p.p1 , p.p2 , p.p3 , p.p4 , p.p5 , span.s1 , span.s2 , span.s3 , span.s4 , span.s5 , span.s6 {font-size: 90% ;}
|
|
| 20 |
.picture{ background-color: #fff; padding: 0.8em ; border: 1px #aaa solid ; }
|
|
| 21 |
</style> |
|
| 22 |
|
|
| 23 |
|
|
| 7 | 24 |
</head> |
| 8 | 25 |
<body class="developing"> |
| 9 | 26 |
<header> |
| ... | ... | |
| 11 | 28 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
| 12 | 29 |
</header> |
| 13 | 30 |
<div class="wrapper"> |
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
<h2>Horizontale Tabelle</h2> |
|
| 18 |
|
|
| 19 |
<p>Befinden sich Horizontale Tabellen in einer <b>.wrapper-Box</b>, werden diese links ausgerichtet (float:left;) bzw. rechts angefügt. Soll zwingend ein Umbruch (clear) stattfinden, nächste Tabelle einfach in eine weitere, anschliessende .wrapper-Box setzen.</p> |
|
| 20 |
|
|
| 21 |
</div><!-- /.wrapper --> |
|
| 22 |
|
|
| 23 |
<div class="wrapper"> |
|
| 24 |
<pre><code> |
|
| 25 |
<table class="tbl-horizontal"> |
|
| 31 |
<h2>Horizontale Tabelle (Klasse «tbl-horizontal»)</h2> |
|
| 32 |
<h3>Einleitung & grundlegender Code</h3> |
|
| 33 |
<p> |
|
| 34 |
Die horizontalen Tabellen dienen als Standard-Container für die Plazierung und Anzeige von Daten und Eingabe-Elementen. Die Struktur dieser Tabellen-Klasse ist ziemlich starr, was darin begründet wird, dass diese dynamisch rechts umfliesst, Gruppierung ermöglicht und sich einfach erweitern lässt, indem man eine einfache Zeile einfügt. Die erste Spalte enthält ausschliesslich Titel-Tabellen-Zellen (TH), die weiteren bestehen aus Daten-Tabellen-Zellen (TD). Weitere Klassen und Style in den enthaltenen Elementen sind nur in Ausnahmefällen nötig. Die grundlegende Aufbau dieser Tabellenklasse sieht wie folgt aus. |
|
| 35 |
</p> |
|
| 36 |
<pre><code><table class="tbl-horizontal"> |
|
| 26 | 37 |
<caption>Tabllentitel (Caption)</caption> |
| 27 |
<colgroup>
|
|
| 38 |
<colgroup> |
|
| 28 | 39 |
<col class="wi-small"> |
| 29 |
<col class="wi-lightwide">
|
|
| 30 |
</colgroup>
|
|
| 40 |
<col class="wi-lightwide"> |
|
| 41 |
</colgroup> |
|
| 31 | 42 |
<tbody> |
| 32 | 43 |
<tr> |
| 33 | 44 |
<th>Feldbezeichnung</th> |
| ... | ... | |
| 36 | 47 |
</tbody> |
| 37 | 48 |
</table> |
| 38 | 49 |
</code></pre> |
| 39 |
</div> |
|
| 40 | 50 |
|
| 51 |
<table class="tbl-horizontal" style="float: none;"> |
|
| 52 |
<caption>Elemente Horizontale Tabelle</caption> |
|
| 53 |
<colgroup> |
|
| 54 |
<col class="wi-normal"> |
|
| 55 |
<col class="wi-verywide"> |
|
| 56 |
</colgroup> |
|
| 57 |
<tbody> |
|
| 58 |
<tr> |
|
| 59 |
<th>CAPTION</th> |
|
| 60 |
<td>Überschrift der Tabelle, die in die Tabelle selber eingekapselt wird. Das erleichtert nicht nur das Verschieben der Tabelle.</td> |
|
| 61 |
</tr> |
|
| 62 |
<tr> |
|
| 63 |
<th>COLGROUP > COL</th> |
|
| 64 |
<td>Spaltendefinitionen mit begrenzter Funktionalität, wobei hier im wesentlichen Spaltenbreiten-Angaben zur Geltung kommen, leider keine Ausrichtung also kein rechtsbündiges Ausrichten. Beachten Sie, dass COL ein leeres Element ist, das kein abschliessendes Tag benötigt. Zudem muss es in der COLGROUP untergebracht sein.</td> |
|
| 65 |
</tr> |
|
| 66 |
<tr> |
|
| 67 |
<th>TBODY</th> |
|
| 68 |
<td>Datenkörper der Tabelle, zwingend anzuwenden, auch wenn optional einsetzbar. Ermöglicht auch ein effizientes Code-Falten der Tabelle, sodass der Titel (Caption) im Text-Editor sichtbar bleibt.</td> |
|
| 69 |
</tr> |
|
| 70 |
<tr> |
|
| 71 |
<th>TH</th> |
|
| 72 |
<td>Label bzw. Feldbezeichnung</td> |
|
| 73 |
</tr> |
|
| 74 |
<tr> |
|
| 75 |
<th>TD</th> |
|
| 76 |
<td>Feldwerte oder Eingabe-Felder aller Art inkl. nebenstehendem Icon oder Kurztext.</td> |
|
| 77 |
</tr> |
|
| 78 |
<tr> |
|
| 79 |
<th>Feldbezeichnung</th> |
|
| 80 |
<td>Wert</td> |
|
| 81 |
</tr> |
|
| 82 |
</tbody> |
|
| 83 |
</table> |
|
| 41 | 84 |
|
| 42 | 85 |
|
| 86 |
<h3>Plazierung horizontaler Tabellen in einem .WRAPPER-Block</h3> |
|
| 87 |
<p>Befinden sich Horizontale Tabellen in einem <b>.WRAPPER-Block</b>, werden diese links ausgerichtet (float:left;) bzw. rechts angefügt. Soll zwingend ein Zeilen-Umbruch (clear) stattfinden, nächste Tabelle einfach in eine weitere, anschliessende .WRAPPER-Box setzen. Der Wrapper erzeugt einen Abstand zum Fensterrand und einen abschliessenden Zeilenumbruch. Standardmässig sind maximal drei Tabellen in einer .WRAPPER-Zeile vorgesehen (Standard-Bildschirmauflösung)</p> |
|
| 88 |
</div><!-- /.wrapper --> |
|
| 89 |
<p class="picture"><img src="images/Tabellen_in_Wrapper-Bloecken.png" width="800" height="556" alt="Tabellen_in_Wrapper-Bloecken"></p> |
|
| 90 |
<h4>Beispiel:</h4> |
|
| 43 | 91 |
<div class="wrapper"> |
| 44 | 92 |
|
| 45 | 93 |
<table class="tbl-horizontal"> |
| 46 | 94 |
<caption>Caption horizontale Tabelle</caption> |
| 47 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
|
|
| 95 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup> |
|
| 48 | 96 |
<tbody> |
| 49 | 97 |
<tr> |
| 50 | 98 |
<th>Label 1</th> |
| ... | ... | |
| 54 | 102 |
<th>Label 2</th> |
| 55 | 103 |
<td>Wert 2</td> |
| 56 | 104 |
</tr> |
| 57 |
<tr> |
|
| 58 |
<th class="caption" colspan="2">Caption Zeile</th> |
|
| 59 |
</tr> |
|
| 60 | 105 |
<tr> |
| 61 | 106 |
<th>Label 3</th> |
| 62 | 107 |
<td>Wert 3</td> |
| ... | ... | |
| 65 | 110 |
<th>Label 4</th> |
| 66 | 111 |
<td>Wert 4</td> |
| 67 | 112 |
</tr> |
| 113 |
<tr> |
|
| 114 |
<th>Label 5</th> |
|
| 115 |
<td>Wert 6</td> |
|
| 116 |
</tr> |
|
| 68 | 117 |
</tbody> |
| 69 | 118 |
</table> |
| 70 | 119 |
|
| 71 |
<table class="tbl-horizontal test">
|
|
| 72 |
<caption>Horizontale Tabelle mit Zusatz-Klasse «test»</caption>
|
|
| 73 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup>
|
|
| 120 |
<table class="tbl-horizontal"> |
|
| 121 |
<caption>Tabelle mit COL .wi-verysmall & .wi-wide</caption>
|
|
| 122 |
<colgroup> <col class="wi-verysmall"><col class="wi-wide"> </colgroup>
|
|
| 74 | 123 |
<tbody> |
| 75 | 124 |
<tr> |
| 76 | 125 |
<th>Label 1</th> |
| ... | ... | |
| 94 | 143 |
</tbody> |
| 95 | 144 |
</table> |
| 96 | 145 |
|
| 97 |
</div><!-- /.wrapper --> |
|
| 146 |
<div class="col" style="background-color:#FFC0D6;padding: 0 0.2em 1.2em 0.2em"> |
|
| 147 |
<table class="tbl-horizontal"> |
|
| 148 |
<caption>Tabelle 1 IN SPALTE</caption> |
|
| 149 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup> |
|
| 150 |
<tbody> |
|
| 151 |
<tr> |
|
| 152 |
<th>Label 1</th> |
|
| 153 |
<td>Wert 1</td> |
|
| 154 |
</tr> |
|
| 155 |
<tr> |
|
| 156 |
<th>Label 2</th> |
|
| 157 |
<td>Wert 2</td> |
|
| 158 |
</tr> |
|
| 159 |
</tbody> |
|
| 160 |
</table> |
|
| 161 |
<table class="tbl-horizontal"> |
|
| 162 |
<caption>Tabelle 2 IN SPALTE</caption> |
|
| 163 |
<colgroup> <col class="wi-verysmall"><col class="wi-normal"> </colgroup> |
|
| 164 |
<tbody> |
|
| 165 |
<tr> |
|
| 166 |
<th>Label 1</th> |
|
| 167 |
<td>Wert 1</td> |
|
| 168 |
</tr> |
|
| 169 |
<tr> |
|
| 170 |
<th>Label 2</th> |
|
| 171 |
<td>Wert 2</td> |
|
| 172 |
</tr> |
|
| 173 |
</tbody> |
|
| 174 |
</table> |
|
| 175 |
</div> |
|
| 98 | 176 |
|
| 177 |
</div><!-- /.wrapper --> |
|
| 99 | 178 |
<div class="wrapper"> |
| 100 | 179 |
|
| 101 | 180 |
<table class="tbl-horizontal"> |
| 102 | 181 |
<caption>Caption horizontale Tabelle</caption> |
| 103 |
<colgroup> |
|
| 104 |
<col class="wi-verysmall"><col class="wi-normal"> |
|
| 105 |
</colgroup> |
|
| 182 |
<colgroup> |
|
| 183 |
<col class="wi-verysmall"><col class="wi-normal"> |
|
| 184 |
</colgroup> |
|
| 185 |
<tbody> |
|
| 186 |
<tr> |
|
| 187 |
<th>Label 1</th> |
|
| 188 |
<td>Wert 1</td> |
|
| 189 |
</tr> |
|
| 190 |
<tr> |
|
| 191 |
<th>Label 2</th> |
|
| 192 |
<td>Wert 2</td> |
|
| 193 |
</tr> |
|
| 194 |
<tr> |
|
| 195 |
<th class="caption" colspan="2">Caption Zeile</th> |
|
| 196 |
</tr> |
|
| 197 |
<tr> |
|
| 198 |
<th>Label 3</th> |
|
| 199 |
<td>Wert 3</td> |
|
| 200 |
</tr> |
|
| 201 |
<tr> |
|
| 202 |
<th>Label 4</th> |
|
| 203 |
<td>Wert 4</td> |
|
| 204 |
</tr> |
|
| 205 |
</tbody> |
|
| 206 |
</table> |
|
| 207 |
|
|
| 208 |
<table class="tbl-horizontal"> |
|
| 209 |
<caption>Tabelle mit COL .wi-verysmall & .wi-wide</caption> |
|
| 210 |
<colgroup> |
|
| 211 |
<col class="wi-verysmall"><col class="wi-wide"> |
|
| 212 |
</colgroup> |
|
| 106 | 213 |
<tbody> |
| 107 | 214 |
<tr> |
| 108 | 215 |
<th>Label 1</th> |
| ... | ... | |
| 126 | 233 |
</tbody> |
| 127 | 234 |
</table> |
| 128 | 235 |
|
| 129 |
</div><!-- /.wrapper --> |
|
| 130 | 236 |
|
| 237 |
</div><!-- /.wrapper --> |
|
| 131 | 238 |
|
| 132 | 239 |
<div class="wrapper"> |
| 133 |
<h2>Listen-Tabelle mit Header</h2> |
|
| 240 |
<p><b>Mehrere horizontale Tabellen</b> können in einem Spalten-Block (<code>DIV.COL</code>) untergebracht werden (siehe Beispiel oben <span style="background-color:#FFC0D6;">Block mit roter Hintergrundfarbe</span>). Das könnte vor allem bei kleinen Tabellen Sinn machen.<br>Ein <b>Caption</b> kann auch <b>innerhalb eines TBODY</b> angebracht werden<br><TR><TH.CAPTION COLSPAN="2">caption<CAPTION><TR><br>Siehe letzte Tabelle im vorherigen Beispiel.</p> |
|
| 241 |
|
|
| 242 |
<h3>Ausrichtung und Breite der Spalten</h3> |
|
| 243 |
<p>Um ein ausgewogenes, ruhiges Erscheinungsbild der Benutzeroberfläche zu erhalten, ist es nicht unwichtig, dass die Tabellen-Spalten und Formular-Elemente vertikal bündig ausgerichtet sind. Auch wenn es manche Programmierer nicht als nötig erachten, muss doch der tägliche Einsatz durch den einfachen Benutzer dabei im Vordergrund stehen. Aber diese Angelegenheit ist einfacher zu bewältigen, als es zuerst klingt, denn es gibt da den bereits erwähnte Zauber-Code COLGROUP > COL und die zur Verfügung gestellten assoziativen Abmessungsklassen.</p> |
|
| 244 |
<p class="picture"><img src="images/Tabelle_Horizontal_mit_Elementen.svg" width="800" height="532" alt="Tabelle_Horizontal_mit_Elementen"></p> |
|
| 245 |
<h4>Beispiel:</h4> |
|
| 246 |
<form action="#"> |
|
| 247 |
<table class="tbl-horizontal"> |
|
| 248 |
<caption>Tabelle mit Elementen</caption> |
|
| 249 |
<colgroup> |
|
| 250 |
<col class="wi-small"> |
|
| 251 |
<col class="wi-lightwide"> |
|
| 252 |
</colgroup> |
|
| 253 |
<tbody> |
|
| 254 |
<tr> |
|
| 255 |
<th>Feldbezeichnung</th> |
|
| 256 |
<td><input type="text" value="" size="10" class="wi-lightwide" name="npt1"></td> |
|
| 257 |
</tr> |
|
| 258 |
<tr> |
|
| 259 |
<th>Feldbezeichnung</th> |
|
| 260 |
<td><input type="text" value="" size="10" class="wi-lightwide" name="npt2">kg</td> |
|
| 261 |
</tr> |
|
| 262 |
<tr> |
|
| 263 |
<th>Feldbezeichnung</th> |
|
| 264 |
<td><select id="slct1" name="slct1" class="wi-lightwide"><option value="Halli">Halli</option><option value="Hallo">Hallo</option></select></td> |
|
| 265 |
</tr> |
|
| 266 |
<tr> |
|
| 267 |
<th colspan="2"><span class="label above">Feldbezeichnung</span><textarea name="txtarea1" class="wi-small-lightwide" cols="10" rows="4"></textarea></th> |
|
| 268 |
</tr> |
|
| 269 |
</tbody> |
|
| 270 |
</table> |
|
| 271 |
</form> |
|
| 272 |
|
|
| 273 |
|
|
| 274 |
|
|
| 275 |
|
|
| 276 |
|
|
| 277 |
|
|
| 278 |
|
|
| 279 |
|
|
| 280 |
|
|
| 281 |
<h2>Listen-Tabelle mit Kopfzeile (tbl-list)</h2> |
|
| 282 |
<p>Diese komplexen Tabellen benötigen ein zwingend korrektes Konstrukt, um eine optimale Darstellungsqualität zu erreichen, die genug Freiraum für nachträgliche Gestaltung via CSS erlaubt. THEAD- und TBODY-Container müssen zwingend gesetzt sein, optional auch der TFOOT-Container für Summenangaben. Listen-Tabellen, die sich über die ganze Seite erstrecken, müssen nicht zwingend in einem .WRAPPER-Block liegen. Schmale Listen-Tabellen in einem .WRAPPER-Block erhalten automatisch links und rechts einen abschliessenden Rand. Grundlegendes Code-Beispiel:</p> |
|
| 283 |
|
|
| 284 |
<!-- |
|
| 285 |
<pre><code><table class="tbl-list"> |
|
| 286 |
<caption>Caption der Listen-Tabelle</caption> |
|
| 287 |
<colgroup> |
|
| 288 |
<col class="wi-mediumsmall"><col class="wi-small"><col class="wi-small"> |
|
| 289 |
</colgroup> |
|
| 290 |
<thead> |
|
| 291 |
<tr> |
|
| 292 |
<th>Column Header 1</th> |
|
| 293 |
<th>Column Header 2</th> |
|
| 294 |
<th class="right">Total Header 3</th> |
|
| 295 |
</tr> |
|
| 296 |
</thead> |
|
| 297 |
<tbody> |
|
| 298 |
<tr> |
|
| 299 |
<th>R1C1</th> |
|
| 300 |
<td>R1C2</td> |
|
| 301 |
<td class="numeric">100</td> |
|
| 302 |
</tr> |
|
| 303 |
<tr> |
|
| 304 |
<td>R2C1</td> |
|
| 305 |
<td>R2C2</td> |
|
| 306 |
<td class="numeric">200</td> |
|
| 307 |
</tr> |
|
| 308 |
</tbody> |
|
| 309 |
<tfoot> |
|
| 310 |
<th colspan="2">Summe</th> |
|
| 311 |
<th class="numeric">300</th> |
|
| 312 |
</tfoot> |
|
| 313 |
</table> |
|
| 314 |
</code></pre> |
|
| 315 |
--> |
|
| 316 |
|
|
| 317 |
<div class="code-highlighted"> |
|
| 318 |
<p class="p4"><span class="s5"><span class="indent"> </span><table </span><span class="s3"> class=</span><span class="s1">"tbl-list"</span><span class="s5">></span></p><p class="p3"><span class="s5"><span class="indent"> </span><caption></span><span class="s1">Caption der Listen-Tabelle</span><span class="s5"></caption></span></p><p class="p2"><span class="s1"><span class="indent"> </span><colgroup></span></p><p class="p4"><span class="indent"> </span><col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">></span></p><p class="p4"><span class="indent"> </span><col </span><span class="s3"> class=</span><span class="s1">"wi-mediumsmall"</span><span class="s5">></span></p><p class="p4"><span class="indent"> </span><col </span><span class="s3"> class=</span><span class="s1">"wi-small"</span><span class="s5">></span></p><p class="p2"><span class="s1"><span class="indent"> </span></colgroup></span></p><p class="p2"><span class="s1"><span class="indent"> </span><thead></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tr></span></p><p class="p3"><span class="s5"><span class="indent"> </span><th></span><span class="s1">Column Header 1</span><span class="s5"></th></span></p><p class="p3"><span class="s5"><span class="indent"> </span><th></span><span class="s1">Column Header 2</span><span class="s5"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th </span><span class="s3"> class=</span><span class="s4">"right"</span><span class="s1">></span><span class="s6">Total Header 3</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span></thead></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tbody></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th></span><span class="s6">R1C1</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td></span><span class="s6">R1C2</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">></span><span class="s6">100</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td></span><span class="s6">R2C1</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td></span><span class="s6">R2C2</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span><td </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">></span><span class="s6">200</span><span class="s1"></td></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tr></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tbody></span></p><p class="p2"><span class="s1"><span class="indent"> </span><tfoot></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th </span><span class="s3"> colspan=</span><span class="s4">"2"</span><span class="s1">></span><span class="s6">Summe</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span><th </span><span class="s3"> class=</span><span class="s4">"numeric"</span><span class="s1">></span><span class="s6">300</span><span class="s1"></th></span></p><p class="p2"><span class="s1"><span class="indent"> </span></tfoot></span></p><p class="p2"><span class="s1"><span class="indent"> </span></table></span></p></div> |
|
| 319 |
|
|
| 320 |
|
|
| 321 |
<table class="tbl-list"> |
|
| 322 |
<caption>Caption der Listen-Tabelle</caption> |
|
| 323 |
<colgroup> |
|
| 324 |
<col class="wi-mediumsmall"><col class="wi-small"><col class="wi-small"> |
|
| 325 |
</colgroup> |
|
| 326 |
<thead> |
|
| 327 |
<tr> |
|
| 328 |
<th>Column Header 1</th> |
|
| 329 |
<th>Column Header 2</th> |
|
| 330 |
<th class="right">Total Header 3</th> |
|
| 331 |
</tr> |
|
| 332 |
</thead> |
|
| 333 |
<tbody> |
|
| 334 |
<tr> |
|
| 335 |
<th>R1C1</th> |
|
| 336 |
<td>R1C2</td> |
|
| 337 |
<td class="numeric">100</td> |
|
| 338 |
</tr> |
|
| 339 |
<tr> |
|
| 340 |
<td>R2C1</td> |
|
| 341 |
<td>R2C2</td> |
|
| 342 |
<td class="numeric">200</td> |
|
| 343 |
</tr> |
|
| 344 |
</tbody> |
|
| 345 |
<tfoot> |
|
| 346 |
<th colspan="2">Summe</th> |
|
| 347 |
<th class="numeric">300</th> |
|
| 348 |
</tfoot> |
|
| 349 |
</table> |
|
| 350 |
|
|
| 134 | 351 |
<p> |
| 135 |
Diese komplexen Tabellen benötigen ein zwingend korrektes Konstrukt, um eine optimale Darstellungsqualität zu erreichen, die genug Freiraum für nachträgliche Gestaltung via CSS erlaubt. THEAD- und TBODY-Container müssen zwingend gesetzt sein, optional auch der TFOOT-Container für Summenangaben. Listen-Tabellen, die sich über die ganze Seite erstrecken, müssen nicht zwingend in einer .wrapper-Box liegen. Schmale Listen-Tabellen in einer .wrapper-Box erhalten automatisch links und rechts einen abschliessenden Rand, der in CSS auch deaktiviert werden kann.
|
|
| 352 |
Die durchaus optionalen «<code>COLGROUP > COL</code>»-Angaben können nur in Bezug auf Spaltenbreiten angewendet werden, nicht aber auf Ausrichtung oder Schriftgrösse innerhalb der Zellen der Spalte. Vielleicht ändert sich das mit zukünftigen Browser-Versionen.
|
|
| 136 | 353 |
</p> |
| 137 | 354 |
<p> |
| 138 |
«COLGROUP > COL»-Angaben können nur in Bezug auf Breiten angewendet werden, nicht aber auf Ausrichtung oder Schriftgrösse innerhalb der Zellen der Spalte.
|
|
| 355 |
<b>Empfehlung:</b> Vermeiden Sie bitte bei Tabellen mit begrenzter Kardinalität die Stil-Anweisung <b><code>WIDTH="100%"</code></b>. Bei breiten Bildschirmen erschwert diese Ausbreitung die Übersicht über die Daten in den Zeilen. Mit der Klasse <code>.WI-MODERATE</code> werden niedrig-kardinale Tabellen ein wenig verbreitert.
|
|
| 139 | 356 |
</p> |
| 140 | 357 |
|
| 141 | 358 |
</div> |
| 142 | 359 |
|
| 143 | 360 |
<table class="tbl-list"> |
| 144 |
<caption>Caption der Listen-Tabelle</caption>
|
|
| 361 |
<caption>Listen-Tabelle nicht im .WRAPPER-Block und mit 100% Breite</caption>
|
|
| 145 | 362 |
<colgroup> |
| 146 | 363 |
<col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"> |
| 147 | 364 |
<col class="wi-wide"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal"><col class="wi-normal right"> |
| ... | ... | |
| 191 | 408 |
<td>R3C2</td> |
| 192 | 409 |
<td>R3C3</td> |
| 193 | 410 |
<td>R3C4</td> |
| 194 |
<td>R3C5R3C5R3C5R3C5R3C5R3C5R3C5R3C5R3C5R3C5</td>
|
|
| 411 |
<td>R3C5R3C5R3</td> |
|
| 195 | 412 |
<td>R3C6</td> |
| 196 | 413 |
<td class="right">R3C7</td> |
| 197 | 414 |
<td class="right">R3C8</td> |
| ... | ... | |
| 214 | 431 |
<th colspan="7">Summen</th> |
| 215 | 432 |
<th class="numeric">Summe C7</th> |
| 216 | 433 |
<th class="numeric">Summe C8</th> |
| 217 |
<th class="numeric">Summe C9</th>
|
|
| 434 |
<th class="numeric">Summe C9</th> |
|
| 218 | 435 |
</tfoot> |
| 219 | 436 |
</table> |
| 220 | 437 |
|
| 221 | 438 |
|
| 222 | 439 |
</body> |
| 223 |
</html> |
|
| 440 |
</html> |
|
| css/kivitendo/main.css | ||
|---|---|---|
| 363 | 363 |
vertical-align: top; |
| 364 | 364 |
} |
| 365 | 365 |
.unbalanced_ledger {
|
| 366 |
background-color: #ffa0a0;
|
|
| 366 |
background-color: @brand_warning;
|
|
| 367 | 367 |
} |
| 368 | 368 |
.flash_message_error {
|
| 369 | 369 |
background-color: #FFD6D6; |
| css/less/admin.less | ||
|---|---|---|
| 33 | 33 |
|
| 34 | 34 |
// Admin section: the menu itself doesn't occupy space. So make room |
| 35 | 35 |
// at the top of the div covering the whole admin area. |
| 36 |
body div.admin {
|
|
| 37 |
margin: 0 ; |
|
| 38 |
|
|
| 39 |
h1 {
|
|
| 40 |
background-color: #fe5f14 !important; |
|
| 41 |
color: #ffffff; |
|
| 42 |
top: 0px ; |
|
| 43 |
position: fixed; |
|
| 44 |
width: 100% ; |
|
| 45 |
padding: 0.1em 0.5em 0.3em 0.6em ; |
|
| 36 |
body {
|
|
| 37 |
|
|
| 38 |
& + #menuv3 {
|
|
| 39 |
top: 0 important; |
|
| 46 | 40 |
} |
| 47 | 41 |
|
| 48 |
.tabwidget {
|
|
| 49 |
top: 35px ; |
|
| 50 |
padding: 1.8em 0 0 0 !important; |
|
| 51 |
.ui-tabs-panel {
|
|
| 52 |
padding: 2.0em 1.0em 1.0em 1.0em ; |
|
| 42 |
|
|
| 43 |
|
|
| 44 |
div.admin {
|
|
| 45 |
margin: 60px 0 0 0 ; |
|
| 46 |
//top: 60px; |
|
| 47 |
|
|
| 48 |
h1 {
|
|
| 49 |
background-color: #fe5f14 !important; |
|
| 50 |
color: #ffffff; |
|
| 51 |
top: 30px ; |
|
| 52 |
position: fixed; |
|
| 53 |
width: 100% ; |
|
| 54 |
padding: 0.6em 0.5em 0.5em 0.6em; |
|
| 55 |
z-index: 1000; |
|
| 56 |
|
|
| 57 |
& + .wrapper {
|
|
| 58 |
padding-top: 1.2em; |
|
| 59 |
//margin-top: 1.0em ; |
|
| 60 |
//top: 1.0em; |
|
| 61 |
//&:first-child{
|
|
| 62 |
//padding-top: 2.0em; |
|
| 63 |
//} |
|
| 64 |
} |
|
| 53 | 65 |
} |
| 54 |
} |
|
| 55 |
form{
|
|
| 56 |
display: block ; |
|
| 57 |
margin-top: 1px ; |
|
| 58 |
} |
|
| 59 |
&> form {
|
|
| 60 |
padding-top: 3.8em ; |
|
| 61 |
} |
|
| 62 |
.wrapper {
|
|
| 63 |
margin-top: 4.0em ; |
|
| 64 |
} |
|
| 65 |
|
|
| 66 |
.message{
|
|
| 67 |
&_error, |
|
| 68 |
&_hint, |
|
| 69 |
&_info, |
|
| 70 |
&_warning, |
|
| 71 |
&_ok{
|
|
| 72 |
margin-top: 70px ; |
|
| 73 |
|
|
| 66 |
|
|
| 67 |
.tabwidget {
|
|
| 68 |
//top: 35px ; |
|
| 69 |
padding: 2.4em 0 0 0 !important; |
|
| 70 |
.ui-tabs-nav{
|
|
| 71 |
top: 66px; |
|
| 72 |
} |
|
| 73 |
.ui-tabs-panel {
|
|
| 74 |
padding: 2.0em 1.0em 1.0em 1.0em ; |
|
| 75 |
overflow: hidden; |
|
| 76 |
height: auto; |
|
| 77 |
min-height: 300px ; |
|
| 78 |
} |
|
| 79 |
} |
|
| 80 |
& > form{
|
|
| 81 |
display: block ; |
|
| 82 |
margin-top: 1px ; |
|
| 83 |
padding-top: 1.2em ; |
|
| 84 |
} |
|
| 85 |
&> form {
|
|
| 86 |
//padding-top: 3.8em ; |
|
| 74 | 87 |
} |
| 88 |
|
|
| 89 |
|
|
| 90 |
|
|
| 91 |
.message{
|
|
| 92 |
&_error, |
|
| 93 |
&_hint, |
|
| 94 |
&_info, |
|
| 95 |
&_warning, |
|
| 96 |
&_ok{
|
|
| 97 |
//margin-top: 70px ; |
|
| 98 |
|
|
| 99 |
} |
|
| 100 |
} |
|
| 101 |
|
|
| 102 |
|
|
| 103 |
|
|
| 75 | 104 |
} |
| 76 |
|
|
| 77 |
|
|
| 78 |
|
|
| 105 |
|
|
| 106 |
|
|
| 79 | 107 |
} |
| 80 | 108 |
|
| 81 | 109 |
|
| css/less/common-OUT.less | ||
|---|---|---|
| 1 |
// This file is not effacious. It is intended to delete it in the end. |
|
| 1 | 2 |
|
| 2 | 3 |
|
| 3 | 4 |
|
| css/less/common.less | ||
|---|---|---|
| 104 | 104 |
// -------------------------------------- |
| 105 | 105 |
|
| 106 | 106 |
a.cti_call_action {
|
| 107 |
display: inline-block; |
|
| 107 |
//display: inline-block; |
|
| 108 |
display: block; |
|
| 108 | 109 |
padding-left: 18px; |
| 109 |
height: 16px; |
|
| 110 |
position: relative; |
|
| 111 | 110 |
top: 2px; |
| 112 | 111 |
vertical-align: middle; |
| 113 |
text-align: center; |
|
| 114 | 112 |
background-image: url(../image/icons/16x16/phone.png); |
| 115 | 113 |
background-repeat: no-repeat; |
| 116 | 114 |
} |
| css/less/developing.less | ||
|---|---|---|
| 20 | 20 |
body.developing{
|
| 21 | 21 |
|
| 22 | 22 |
&>header{
|
| 23 |
background-color: @h1-bg-color;
|
|
| 23 |
background-color: @h1-bg;
|
|
| 24 | 24 |
display: block; |
| 25 | 25 |
overflow: hidden; |
| 26 | 26 |
h1{
|
| 27 | 27 |
float: left; |
| 28 |
color: @h1-text-color ;
|
|
| 28 |
color: @h1-color ; |
|
| 29 | 29 |
padding: 1.0em; |
| 30 | 30 |
} |
| 31 | 31 |
nav{
|
| ... | ... | |
| 37 | 37 |
} |
| 38 | 38 |
} |
| 39 | 39 |
} |
| 40 |
|
|
| 41 |
p{
|
|
| 42 |
width: 40.0em ; |
|
| 40 |
.wrapper{
|
|
| 41 |
p, |
|
| 42 |
ul, |
|
| 43 |
ol, |
|
| 44 |
li, |
|
| 45 |
h2, |
|
| 46 |
h3, |
|
| 47 |
h4{
|
|
| 48 |
clear: both; |
|
| 49 |
width: 60.0em; |
|
| 50 |
max-width: 60em; |
|
| 51 |
} |
|
| 52 |
} |
|
| 53 |
& > p, |
|
| 54 |
& > h2, |
|
| 55 |
& > h3, |
|
| 56 |
& > h4 {
|
|
| 57 |
margin-left: 0.8em ; |
|
| 58 |
} |
|
| 59 |
h2, h3, h4 { font-weight: bold ; color: #000 !important; clear: left; padding-left: 0 !important; }
|
|
| 60 |
h2{ font-size: 130%; }
|
|
| 61 |
h3{ font-size: 120%; }
|
|
| 62 |
h4{ font-size: 110%; }
|
|
| 63 |
pre {
|
|
| 64 |
margin: 0 0 1.0em 0 ; |
|
| 65 |
padding: 0.6em ; |
|
| 66 |
border: 1px #000 solid ; |
|
| 67 |
background-color: #ddd ; |
|
| 68 |
display: inline-block; |
|
| 69 |
clear: both; |
|
| 70 |
code{ padding: 0 ; }
|
|
| 71 |
} |
|
| 72 |
div.code-highlighted{
|
|
| 73 |
margin: 0 0 1.0em 0 ; |
|
| 74 |
padding: 0.6em ; |
|
| 75 |
border: 1px #000 solid ; |
|
| 76 |
background-color: #ddd ; |
|
| 77 |
display: inline-block; |
|
| 43 | 78 |
} |
| 44 | 79 |
|
| 45 |
|
|
| 46 |
|
|
| 80 |
p.picture{
|
|
| 81 |
background-color: #fff; |
|
| 82 |
padding: 0.8em; |
|
| 83 |
border: 1px @gray-medium solid; |
|
| 84 |
display: inline-block; |
|
| 85 |
width: auto; |
|
| 86 |
} |
|
| 47 | 87 |
.wrapper{
|
| 48 |
|
|
| 88 |
|
|
| 49 | 89 |
.tbl-horizontal{
|
| 50 | 90 |
border: 1px black solid !important; |
| 51 |
border-collapse: collapse; |
|
| 52 |
|
|
| 53 |
caption,th { padding-left: 0.6em ; }
|
|
| 91 |
border-collapse: collapse; |
|
| 92 |
tbody {
|
|
| 93 |
border-top: none; |
|
| 94 |
} |
|
| 95 |
caption,th { padding-left: 0.6em ; }
|
|
| 96 |
|
|
| 97 |
th.caption {
|
|
| 98 |
border-top: none; |
|
| 99 |
border-bottom: none; |
|
| 100 |
|
|
| 101 |
} |
|
| 102 |
|
|
| 103 |
|
|
| 54 | 104 |
&.test, |
| 55 |
&.test-plain{
|
|
| 105 |
&.test-plain{
|
|
| 56 | 106 |
th{
|
| 57 | 107 |
//border: 1px black solid !important; |
| 58 | 108 |
padding-left: 0.3em; |
| ... | ... | |
| 61 | 111 |
//border: 1px black solid ; |
| 62 | 112 |
display: block; |
| 63 | 113 |
overflow: visible; |
| 64 |
border-bottom: 1px #666 solid ;
|
|
| 114 |
border-bottom: 1px @gray-mediumdark solid ;
|
|
| 65 | 115 |
} |
| 66 | 116 |
tr:last-child td { border: none ;}
|
| 67 |
|
|
| 117 |
|
|
| 68 | 118 |
} |
| 69 |
}
|
|
| 70 |
|
|
| 119 |
} |
|
| 120 |
|
|
| 71 | 121 |
&.clear{
|
| 72 | 122 |
.tbl-horizontal{
|
| 73 | 123 |
clear: both ; |
| 74 | 124 |
} |
| 75 | 125 |
} |
| 76 |
|
|
| 126 |
|
|
| 127 |
table.tbl-list > thead > tr th:first-child, table.tbl-list > tbody > tr td:first-child {
|
|
| 128 |
padding-left: 0 !important; |
|
| 129 |
} |
|
| 130 |
|
|
| 77 | 131 |
div.test-box{
|
| 78 | 132 |
font-size: 80% ; |
| 79 | 133 |
overflow: visible; |
| ... | ... | |
| 82 | 136 |
float: left; |
| 83 | 137 |
border: 1px #000 dotted ; |
| 84 | 138 |
} |
| 85 |
|
|
| 86 |
|
|
| 87 |
} // /.wrapper |
|
| 88 | 139 |
|
| 140 |
} // /.wrapper |
|
| 89 | 141 |
|
| 90 |
} // /body.developing |
|
| 142 |
} // /body.developing |
|
| css/less/forms.less | ||
|---|---|---|
| 9 | 9 |
// |
| 10 | 10 |
// CONTENTS: |
| 11 | 11 |
// - FORM |
| 12 |
// -- .box |
|
| 12 | 13 |
// - FORM ELEMENTS |
| 14 |
// -- input, textarea, select |
|
| 15 |
// -- focused elements |
|
| 13 | 16 |
// - BUTTONS |
| 14 | 17 |
// - LABELS |
| 15 | 18 |
// - FIELDSET |
| ... | ... | |
| 30 | 33 |
// -------------------------------------- |
| 31 | 34 |
// FORM |
| 32 | 35 |
// -------------------------------------- |
| 33 |
|
|
| 36 |
// At first we tried to nest all form elements within the form tag |
|
| 37 |
// but it is not possible because some forms (print dialog etc.) do not have |
|
| 38 |
// a surrounding form element |
|
| 34 | 39 |
form {
|
| 35 | 40 |
display: table; |
| 36 | 41 |
width: 100%; |
| ... | ... | |
| 39 | 44 |
|
| 40 | 45 |
|
| 41 | 46 |
// If Form must be a block container |
| 47 |
// PENDENT: anschauen |
|
| 42 | 48 |
&.box {
|
| 43 | 49 |
display: block; |
| 44 | 50 |
overflow: hidden ; |
| 45 | 51 |
padding: 0 0 1.6em 0 ; |
| 46 |
|
|
| 47 | 52 |
} |
| 48 | 53 |
|
| 54 |
} |
|
| 55 |
// /form |
|
| 56 |
|
|
| 57 |
|
|
| 49 | 58 |
// -------------------------------------- |
| 50 | 59 |
// FORM-ELEMENTS |
| 51 | 60 |
// -------------------------------------- |
| 52 |
|
|
| 61 |
// |
|
| 53 | 62 |
input, |
| 54 | 63 |
textarea, |
| 55 | 64 |
select {
|
| 56 | 65 |
font-family: @font-family-sans-serif ; |
| 57 | 66 |
font-size: @font-size-smaller ; |
| 58 |
padding: 0.2em 0.28em;
|
|
| 67 |
padding: 0.2em 0.2em 0.2em 0.2em ;
|
|
| 59 | 68 |
border: 1px; |
| 60 | 69 |
border-color: darkgray lightgray lightgray; |
| 61 | 70 |
border-style: solid; |
| ... | ... | |
| 64 | 73 |
|
| 65 | 74 |
&[type="text"], |
| 66 | 75 |
&[type="password"] {
|
| 67 |
|
|
| 68 |
} |
|
| 69 | 76 |
|
| 77 |
} |
|
| 78 |
// PENDENT: data type |
|
| 70 | 79 |
&[type="text"] {
|
| 71 | 80 |
&.accent{
|
| 72 | 81 |
font-weight: bold ; |
| ... | ... | |
| 99 | 108 |
select {
|
| 100 | 109 |
// background: white url('../image/select-down.png') no-repeat scroll right center;
|
| 101 | 110 |
padding-right: 1.0em; |
| 102 |
|
|
| 103 | 111 |
&.helper {
|
| 104 |
background-color: #efefef;
|
|
| 112 |
background-color: @gray-superlight;
|
|
| 105 | 113 |
} |
| 106 | 114 |
} |
| 107 | 115 |
|
| ... | ... | |
| 113 | 121 |
input {
|
| 114 | 122 |
&[type="file"]{
|
| 115 | 123 |
padding: 0.8em; |
| 116 |
background-color: #dedede;
|
|
| 117 |
color: #666666 ;
|
|
| 118 |
border: 1px #666 solid ;
|
|
| 124 |
background-color: @gray-lighter;
|
|
| 125 |
color: @gray-mediumdark ;
|
|
| 126 |
border: 1px @gray-mediumdark solid ;
|
|
| 119 | 127 |
// PENDENT: geht wahrscheinlich nicht, oder muss anders geloest werden |
| 120 | 128 |
// Hier handelt es sich um den "Select File"-Button |
| 121 | 129 |
button, |
| ... | ... | |
| 129 | 137 |
|
| 130 | 138 |
|
| 131 | 139 |
|
| 132 |
// -------------------------------------- |
|
| 133 |
// BUTTONS |
|
| 134 |
// -------------------------------------- |
|
| 135 |
|
|
| 136 |
// General |
|
| 137 |
input[type="button"], |
|
| 138 |
input[type="submit"], |
|
| 139 |
input[type="reset"], |
|
| 140 |
button, |
|
| 141 |
a.button /* PENDENT: A.button verlagern */ {
|
|
| 142 |
.mx-button ; // Mixin |
|
| 143 |
|
|
| 144 |
&.clear {
|
|
| 145 |
clear: left; |
|
| 146 |
} |
|
| 147 |
// DIMENSIONS |
|
| 148 |
&.wi-verysmall { min-width: @input-wi-verysmall ; }
|
|
| 149 |
&.wi-small { min-width: @input-wi-small ; }
|
|
| 150 |
&.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }
|
|
| 151 |
&.wi-normal { min-width: @input-wi-normal ; }
|
|
| 152 |
&.wi-lightwide { width: @input-wi-lightwide ; }
|
|
| 153 |
&.wi-wide { width: @input-wi-wide ; }
|
|
| 154 |
&.wi-wider { width: @input-wi-wider ; }
|
|
| 155 |
&.wi-verywide { width: @input-wi-verywide ; }
|
|
| 156 |
&.wi-tiny {
|
|
| 157 |
width: auto ; |
|
| 158 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 159 |
margin: -0.3em 0 0 0.2em; |
|
| 160 |
//float: right; |
|
| 161 |
display: inline-block; |
|
| 162 |
font-size: 84% ; |
|
| 163 |
|
|
| 164 |
&.icon{
|
|
| 165 |
padding: 0 !important ; |
|
| 166 |
} |
|
| 167 |
} |
|
| 168 |
|
|
| 169 |
|
|
| 170 |
} |
|
| 171 |
|
|
| 172 |
input[type="button"], |
|
| 173 |
input[type="submit"], |
|
| 174 |
input[type="reset"], |
|
| 175 |
button {
|
|
| 176 |
cursor: pointer ; |
|
| 177 |
} |
|
| 178 | 140 |
|
| 179 | 141 |
|
| 180 | 142 |
|
| 181 |
// ------------------- |
|
| 182 |
// Action (submission to server page) |
|
| 183 |
input[type="submit"], |
|
| 184 |
input[type="button"], |
|
| 185 |
button[type="submit"], |
|
| 186 |
button[type="button"] {
|
|
| 187 |
color: @btn-default-color ; |
|
| 188 |
background-color: @btn-default-bg; |
|
| 189 |
border-color: @btn-default-border ; |
|
| 190 |
|
|
| 191 |
&:hover, |
|
| 192 |
&.hover{
|
|
| 193 |
color: @btn-default-hover-color ; |
|
| 194 |
background-color: @btn-default-hover-bg; |
|
| 195 |
border-color: @btn-default-hover-border ; |
|
| 196 |
} |
|
| 197 |
&:active, |
|
| 198 |
&.active{
|
|
| 199 |
color: @btn-default-active-color ; |
|
| 200 |
background-color: @btn-default-active-bg; |
|
| 201 |
border-color: @btn-default-active-border ; |
|
| 202 |
} |
|
| 203 |
|
|
| 204 |
} |
|
| 205 |
|
|
| 206 |
// ------------------- |
|
| 207 |
// Neutral (no submission to server page) |
|
| 208 |
/* a.button.neutral, */ |
|
| 209 |
input[type="button"].neutral, |
|
| 210 |
input[type="submit"].neutral, |
|
| 211 |
input[type="reset"], |
|
| 212 |
input[type="reset"].neutral, |
|
| 213 |
button.neutral, |
|
| 214 |
button[type="reset"] {
|
|
| 215 |
color: @btn-neutral-color ; |
|
| 216 |
background-color: @btn-neutral-bg; |
|
| 217 |
border-color: @btn-neutral-border ; |
|
| 218 |
|
|
| 219 |
&:hover {
|
|
| 220 |
color: @btn-neutral-hover-color ; |
|
| 221 |
background-color: @btn-neutral-hover-bg; |
|
| 222 |
border-color: @btn-neutral-hover-border ; |
|
| 223 |
} |
|
| 224 |
|
|
| 225 |
&:active {
|
|
| 226 |
color: @btn-neutral-active-color; |
|
| 227 |
background-color: @btn-neutral-active-bg; |
|
| 228 |
border-color: @btn-neutral-active-border ; |
|
| 229 |
} |
|
| 230 |
} |
|
| 231 |
// just for testing and documentation |
|
| 232 |
input[type="reset"].neutral-hover, |
|
| 233 |
button.neutral-hover {
|
|
| 234 |
color: @btn-neutral-hover-color ; |
|
| 235 |
background-color: @btn-neutral-hover-bg; |
|
| 236 |
border-color: @btn-neutral-hover-border ; |
|
| 237 |
} |
|
| 238 |
// just for testing and documentation |
|
| 239 |
input[type="reset"].neutral-active, |
|
| 240 |
button.neutral-active {
|
|
| 241 |
color: @btn-neutral-active-color; |
|
| 242 |
background-color: @btn-neutral-active-bg; |
|
| 243 |
border-color: @btn-neutral-active-border ; |
|
| 244 |
} |
|
| 245 |
|
|
| 246 |
|
|
| 247 |
|
|
| 248 |
|
|
| 249 |
|
|
| 250 |
// PENDENT: Neu |
|
| 251 |
input[type="button"]{
|
|
| 252 |
&.inline{}
|
|
| 253 |
&.below{
|
|
| 254 |
clear: both !important; |
|
| 255 |
float: none; |
|
| 256 |
margin-top: 0.3em; |
|
| 257 |
overflow: hidden ; |
|
| 258 |
} |
|
| 259 |
|
|
| 260 |
} |
|
| 261 | 143 |
|
| 262 |
input[type="button"]:focus, |
|
| 263 |
input[type="submit"]:focus, |
|
| 264 |
button:focus {
|
|
| 265 |
background-color: #FFFFA0; |
|
| 266 |
border-color: #fe5f14; |
|
| 267 |
} |
|
| 268 | 144 |
|
| 269 |
// PENDENT: anschauen |
|
| 270 |
// button:hover:enabled, |
|
| 271 |
// input[type="button"]:hover:enabled, |
|
| 272 |
// input[type="submit"]:hover:enabled {
|
|
| 273 |
// color: #fff ; |
|
| 274 |
// } |
|
| 275 | 145 |
|
| 276 | 146 |
|
| 277 |
// Container fuer Buttons |
|
| 278 |
div.buttons{
|
|
| 279 |
padding: 1.0em ; |
|
| 280 |
clear: left ; |
|
| 281 |
display: block; |
|
| 282 |
// PENDENT: anschauen, ist fuer Anzeige von Positionsdetails |
|
| 283 |
&.positions{
|
|
| 284 |
margin: 0 0 -2.0em 20.0em; |
|
| 285 |
padding: 0 ; |
|
| 286 |
} |
|
| 287 |
&.below{
|
|
| 288 |
padding: 0 ; |
|
| 289 |
margin: 0 ; |
|
| 290 |
} |
|
| 291 |
} |
|
| 292 |
.col .buttons{
|
|
| 293 |
padding: 1.0em 1.0em 1.0em 0 !important; |
|
| 294 |
//border: #ff00ff 1px solid // TEST |
|
| 295 |
} |
|
| 296 | 147 |
|
| 297 | 148 |
|
| 298 | 149 |
|
| ... | ... | |
| 302 | 153 |
// -------------------------------------- |
| 303 | 154 |
|
| 304 | 155 |
label {
|
| 305 |
cursor: pointer;
|
|
| 156 |
cursor: text;
|
|
| 306 | 157 |
vertical-align: top; |
| 307 | 158 |
display: inline-block; |
| 308 |
width: 92% ; |
|
| 309 |
|
|
| 310 |
// PENDENT: MIXIN-anlegen fuer .Buttons |
|
| 311 |
&.button{
|
|
| 312 |
background-color: #99CCFF; |
|
| 313 |
border: 1px #53619B solid; |
|
| 314 |
border-radius: 3px; |
|
| 315 |
color: #06C; |
|
| 316 |
padding: 0px 4px; |
|
| 317 |
} |
|
| 159 |
width: 88% ; |
|
| 160 |
color: @brand-data-label-color ; |
|
| 318 | 161 |
&:hover {
|
| 319 | 162 |
color: #000 ; |
| 320 | 163 |
text-decoration: underline ; |
| ... | ... | |
| 340 | 183 |
|
| 341 | 184 |
// Heading within FIELDSET */ |
| 342 | 185 |
h4 {
|
| 343 |
font-weight: normal ; |
|
| 344 |
font-size: @font-size-h4 ;
|
|
| 345 |
margin: 0;
|
|
| 346 |
padding: 0 0 0.2em 0;
|
|
| 186 |
font-weight: normal ;
|
|
| 187 |
font-size: @h4-size ;
|
|
| 188 |
margin: 0;
|
|
| 189 |
padding: 0 0 0.2em 0;
|
|
| 347 | 190 |
} |
| 348 | 191 |
} |
| 349 | 192 |
|
Auch abrufbar als: Unified diff
HP Aenderungen bis Oktober 2018