Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision d25334c6

Von Hans Peter Schlaepfer vor mehr als 6 Jahren hinzugefügt

  • ID d25334c6f26a49abac9707a54e5b987bd587d96e
  • Vorgänger e7c11f83
  • Nachfolger 3740d9a0

Aenderungen hpschlaepfer

Unterschiede anzeigen:

SL/Controller/FinancialControllingReport.pm
49 49
  my $report      = SL::ReportGenerator->new(\%::myconfig, $::form);
50 50
  $self->{report} = $report;
51 51

  
52
  my @columns     = qw(customer globalprojectnumber globalproject_type transaction_description ordnumber net_amount delivered_amount delivered_amount_p billed_amount billed_amount_p paid_amount paid_amount_p
53
                       billable_amount billable_amount_p other_amount);
52
  my @columns     = qw(customer globalprojectnumber globalproject_type transaction_description ordnumber net_amount delivered_amount delivered_amount_p billed_amount billed_amount_p paid_amount paid_amount_p billable_amount billable_amount_p other_amount);
54 53
  my @sortable    = qw(ordnumber transdate customer globalprojectnumber globalproject_type transaction_description );
55 54
  $self->{number_columns} = [ qw(net_amount billed_amount billed_amount_p delivered_amount delivered_amount_p paid_amount paid_amount_p other_amount billable_amount billable_amount_p) ];
56 55

  
SL/Form.pm
508 508

  
509 509
  # output
510 510
  print $self->create_http_response(content_type => 'text/html', charset => 'UTF-8');
511
  print $doctypes{$params{doctype} || 'transitional'}, $/;
511
  print $doctypes{$params{doctype} || 'html5'}, $/;
512 512
  print <<EOT;
513 513
<html>
514 514
 <head>
SL/Layout/MenuLeft.pm
8 8
use List::MoreUtils qw(apply);
9 9

  
10 10
sub stylesheets {
11
  qw(icons16.css icons24.css menu.css)
11
  #qw(icons16.css icons24.css menu.css) # no need for that with new design
12 12
}
13 13

  
14 14
sub javascripts_inline {
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
  SL::Presenter->get->html_tag('div', $left, class => 'layout-split-left')
22
  .'<div class="layout-split-right">' . $right;
21
  SL::Presenter->get->html_tag('div', $left, id => 'layout-split-left')
22
  .'<div id="layout-split-right">' . $right;
23 23
}
24 24

  
25 25
sub post_content {
bin/mozilla/do.pl
469 469

  
470 470
  setup_do_action_bar();
471 471

  
472
  $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # aus sub form_footer
473

  
472 474
  $form->header();
475

  
473 476
  # Fix für Bug 1082 Erwartet wird: 'abteilungsNAME--abteilungsID'
474 477
  # und Erweiterung für Bug 1760:
475 478
  # Das war leider nur ein Teil-Fix, da das Verhalten den 'Erneuern'-Knopf
......
495 498
  my $form     = $main::form;
496 499

  
497 500
  $form->{PRINT_OPTIONS}      = setup_sales_purchase_print_options();
498
  $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted();
501
  # $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # verlagert in sub form_header
499 502

  
500 503
  print $form->parse_html_template('do/form_footer',
501 504
    {transfer_default         => ($::instance_conf->get_transfer_default)});
bin/mozilla/ir.pl
390 390

  
391 391
  setup_ir_action_bar();
392 392

  
393
  $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # moved to here from sub form_footer
394

  
393 395
  $form->header();
394 396

  
395 397
  print $form->parse_html_template("ir/form_header", \%TMPL_VAR);
......
441 443
  foreach my $item (@{ $form->{taxaccounts_array} }) {
442 444
    if ($form->{"${item}_base"}) {
443 445
      if ($form->{taxincluded}) {
444
        $form->{"${item}_total"} = $form->round_amount( ($form->{"${item}_base"} * $form->{"${item}_rate"}
445
                                                                                 / (1 + $form->{"${item}_rate"})), 2);
446
        $form->{"${item}_total"} = $form->round_amount( ($form->{"${item}_base"} * $form->{"${item}_rate"} / (1 + $form->{"${item}_rate"})), 2);
446 447
        $form->{"${item}_netto"} = $form->round_amount( ($form->{"${item}_base"} - $form->{"${item}_total"}), 2);
447
      } else {
448
      } 
449
      else {
448 450
        $form->{"${item}_total"} = $form->round_amount( $form->{"${item}_base"} * $form->{"${item}_rate"}, 2);
449 451
        $form->{invtotal} += $form->{"${item}_total"};
450 452
      }
......
496 498
    $totalpaid += $form->{"paid_$i"};
497 499
  }
498 500

  
499
  $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted();
501
  # $form->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # moved to sub form_header
500 502

  
501 503
  print $form->parse_html_template('ir/form_footer', {
502 504
    is_type_credit_note => ($form->{type} eq "credit_note"),
bin/mozilla/oe.pl
649 649
  $TMPL_VAR->{notes}    = qq|<textarea name="notes" class="texteditor" wrap="soft" style="width: 300px; height: 150px">| . H($form->{notes}) . qq|</textarea>|;
650 650
  $TMPL_VAR->{intnotes} = qq|<textarea name=intnotes rows="$introws" cols="35">| . H($form->{intnotes}) . qq|</textarea>|;
651 651

  
652
  $TMPL_VAR->{ALL_DELIVERY_TERMS} = SL::DB::Manager::DeliveryTerm->get_all_sorted(); # moved from sub form_footer
652 653

  
653 654

  
654 655

  
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 &amp; 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 &amp; 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
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
<header>
36
	<h1>Bedeutung &amp; Anwendung von Farben in Kivitendo</h1>
37
	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
38
</header>
39
<div class="wrapper">
40
<h2>Buttons</h2>
41
<form action="#">
42
<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3>
43
<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p>
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>
54
</div><!-- ./buttons -->
55

  
56
<h3>Navigation &amp; User Interface</h3>
57
<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
<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>
68
</div><!-- ./buttons -->
69
</form>
70

  
71
<h2>Nachrichten (Messages)</h2>
72
<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:</p>
73
<ul>
74
	<li>Flash_Messages</li>
75
	<li>Old_Style</li>
76
</ul>
77
<p>Dann gibt es mind. 4 <b>Message-Arten</b>:</p>
78
<ul>
79
	<li>Error</li>
80
	<li>Warning</li>
81
	<li>Info oder Hint</li>
82
	<li>OK</li>
83
</ul>
84
<p>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p>
85

  
86

  
87
<h3>Error</h3>
88

  
89
<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
<div id="flash_error" class="flash_message flash_message_error">
91
<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> 
96
</div>
97
<div class="message-container">
98
	<span class="flash_title" style="float:left;">Fehler:</span> 
99
	<div class="flash_notification" style="float:left;">
100
		<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span> 
101
		<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> 
104
    </div>
105
	</div>
106
</div>
107
</div>
108
<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p>
109
<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div>
110

  
111

  
112
<h3>Warning</h3>
113

  
114
<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
<div id="flash_warning" class="flash_message flash_message_warning">
116
<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> 
121
</div>
122
<div class="message-container">
123
	<span class="flash_title" style="float:left;">Warnung:</span> 
124
	<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> 
126
		<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> 
129
    </div>
130
	</div>
131
</div>
132
</div>
133
<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p>
134
<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div>
135

  
136

  
137
<h3>Info / Hint</h3>
138

  
139
<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
<div id="flash_info" class="flash_message flash_message_info">
141
<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> 
146
</div>
147
<div class="message-container">
148
	<span class="flash_title" style="float:left;">Information:</span> 
149
	<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> 
151
		<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> 
154
    </div>
155
	</div>
156
</div>
157
</div>
158
<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p>
159
<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div>
160

  
161

  
162
<h3>OK</h3>
163

  
164
<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
<div id="flash_ok" class="flash_message flash_message_ok">
166
<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> 
171
</div>
172
<div class="message-container">
173
	<span class="flash_title" style="float:left;">OK:</span> 
174
	<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> 
176
		<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> 
179
    </div>
180
	</div>
181
</div>
182
</div>
183
<p class="message message_ok">Achtung, wichtiger Hinweis! (P.message_ok)</p>
184
<div class="message message_ok">Achtung, wichtiger Hinweis! (DIV.message_ok)</div>
185

  
186

  
187
</div>
188
</body>
189
</html>
css/developement/form-elements-special.html
1
<!DOCTYPE html>
2
<html lang="de">
3
<head>
4
  <meta charset="utf-8" />
5
  <link href="../style.css" rel="stylesheet">
6

  
7
  <script type="text/javascript" src="/js/jquery.js"></script>
8
  <script type="text/javascript" src="/js/common.js"></script>
9
  <script type="text/javascript" src="/js/namespace.js"></script>
10
  <script type="text/javascript" src="/js/kivi.js"></script>
11
  <script type="text/javascript" src="/js/locale/de.js"></script>
12
  <script type="text/javascript" src="/js/jquery-ui.js"></script>
13
  <script type="text/javascript" src="/js/kivi.QuickSearch.js"></script>
14
  <script type="text/javascript" src="/js/kivi.ActionBar.js"></script>
15
  <script type="text/javascript" src="/js/kivi.Draft.js"></script>
16
  <script type="text/javascript" src="/js/kivi.File.js"></script>
17
  <script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script>
18
  <script type="text/javascript" src="/js/kivi.Part.js"></script>
19
  <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
20
  <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
21
  <script type="text/javascript" src="/js/kivi.io.js"></script>
22
  <script type="text/javascript" src="/js/autocomplete_customer.js"></script>
23
  <script type="text/javascript" src="/js/client_js.js"></script>
24
  <script type="text/javascript" src="/js/jquery.cookie.js"></script>
25
  <script type="text/javascript" src="/js/jquery.checkall.js"></script>
26
  <script type="text/javascript" src="/js/jquery.download.js"></script>
27
  <script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
28
  <script type="text/javascript" src="/js/jquery/fixes.js"></script>
29
  <script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script>
30
  <script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
31
  <script type="text/javascript" src="/js/jquery.multiselect2side.js"></script>
32
  <script type="text/javascript" src="/js/jquery.selectboxes.js">
33
 
34
 </script>
35
 
36
  <title>Spezielle Formular-Elemente</title>
37
</head>
38
<body class="developing">
39
<header>
40
  <h1>Spezielle Formular-Elemente</h1>
41
	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
42
</header>
43
<form action="#">
44

  
45
<div class="wrapper">
46

  
47

  
48
<div class="col">
49
<h2>ms2side (.ms2side / MultiSelect2Side)</h2>
50

  
51
<div class="ms2side">
52
  <p>Folgende Elemente können einer Gruppe zugeordnet werden:</p>
53
  <!-- vormals:.clearfix -->
54
  <select name="group_usersms2side__orig" multiple="" id="group_users" style="display: none;">
55
    <option value="2">Element 2</option>
56
    <option value="1">Element 1</option>
57
  </select>
58
  <script type="text/javascript">
59
    $().ready(function() {
60
      $('#group_users').multiselect2side({ moveOptions: false, labeldx: "Gruppenmitglieder", labelsx: "Alle BenutzerInnen" });
61
    });
62
  </script>
63
  <div class="ms2side__div">
64
    <div class="ms2side__select">
65
      <div class="ms2side__header">
66
        Alle verfügbaren Elemente
67
      </div>
68
      <select title="Alle BenutzerInnen" name="group_usersms2side__sx" id="group_usersms2side__sx" size="undefined" multiple="multiple">
69
        <option value="2">Element 2</option>
70
        <option value="1">Element 1</option>
71
      </select>
72
    </div>
73
    <div class="ms2side__options" style="padding-top: 7.333333492279053px;">
74
      <p class="AddOne ms2side__hide" title="Add Selected">›</p>
75
      <p class="AddAll" title="Add All">»</p>
76
      <p class="RemoveOne ms2side__hide" title="Remove Selected">‹</p>
77
      <p class="RemoveAll ms2side__hide" title="Remove All">«</p>
78
    </div>
79
    <div class="ms2side__select">
80
      <div class="ms2side__header">
81
        Zugeordnete Elemente
82
      </div>
83
      <select title="Gruppenmitglieder" name="group_usersms2side__dx" id="group_usersms2side__dx" size="undefined" multiple="multiple">
84
      </select>
85
    </div>
86
    <span id="group_usersms2side_hidden" style="display: none;"></span>
87
  </div>
88
  <script type="text/javascript">
89
    $().ready(function() {
90
      $('#group_clients').multiselect2side({ moveOptions: false, labeldx: "Mandanten, für die diese Gruppe gültig ist", labelsx: "Alle Mandanten" });
91
    });
92
  </script>
93

  
94
</div>
95

  
96
<div class="buttons">
97
  <a class="button neutral" href="#">Zurück</a>
98
  <input value="Speichern" type="button">
99
</div>
100

  
101
</div>
102

  
103

  
104

  
105
<div class="col wi-wide">
106
<h2>Boxes (.boxes)</h2>
107
<div class="boxes">
108
	<h3 title="Select/Deselect all"><input title="Select/Deselect" value="1" name="dummy1" type="checkbox" id="dummy1">
109
		<label for="dummy1">Überschrift (Select all)</label>
110
		<script type="text/javascript">$('#dummy1').checkall('.checkallgroup1');</script>
111
	</h3>
112
	<div>
113
		<input value="1" class="checkallgroup1" id="group_rights_map_customer_vendor_edit" name="group.rights_map.customer_vendor_edit" type="checkbox">
114
		<label for="group_rights_map_customer_vendor_edit">Option 1</label>
115
	</div>
116
	<div>
117
		<input value="1" id="group_rights_map_customer_vendor_all_edit" class="checkallgroup1" name="group.rights_map.customer_vendor_all_edit" type="checkbox">
118
		<label for="group_rights_map_customer_vendor_all_edit">Option 2</label>
119
	</div>
120
	<div>
121
		<input value="1" name="group.rights_map.part_service_assembly_edit" id="group_rights_map_part_service_assembly_edit" type="checkbox" class="checkallgroup1">
122
		<label for="group_rights_map_part_service_assembly_edit">Option 3</label>
123
	</div>
124
	<div>
125
		<input value="1" name="group.rights_map.part_service_assembly_details" id="group_rights_map_part_service_assembly_details" class="checkallgroup1" type="checkbox">
126
		<label for="group_rights_map_part_service_assembly_details">Option 4</label>
127
	</div>
128
	<div>
129
		<input value="1" id="group_rights_map_project_edit" type="checkbox" name="group.rights_map.project_edit" class="checkallgroup1">
130
		<label for="group_rights_map_project_edit">Option 4</label>
131
	</div>
132
</div>
133
</div>
134

  
135

  
136
</div><!-- /.wrapper -->
137

  
138

  
139

  
140
<div class="form-addition">
141
	<h3 class="h4">In Bericht aufnehmen</h3>
142
	<div class="list col">
143
		<h4> Numbers &amp; IDs </h4>
144
		<div>
145
			<input name="l_id" id="l_id" type="checkbox" value="Y">
146
			<label for="l_id"> Buchungsnummer </label>
147
		</div>
148
		<div>
149
			<input name="l_customernumber" id="l_customernumber" type="checkbox" value="Y" checked="">
150
			<label for="l_customernumber"> Kundennummer </label>
151
		</div>
152
		<div>
153
			<input name="l_taxnumber" id="l_taxnumber" type="checkbox" value="Y">
154
			<label for="l_taxnumber"> Steuernummer </label>
155
		</div>
156
		<div>
157
			<input name="l_invnumber" id="l_invnumber" type="checkbox" value="Y">
158
			<label for="l_invnumber"> Rechnungen </label>
159
		</div>
160
	</div>
161
	<div class="list col">
162
		<h4> Kunde </h4>
163
		<div>
164
			<input name="l_name" id="l_name" type="checkbox" value="Y" checked="">
165
			<label for="l_name"> Kundenname </label>
166
		</div>
167
		<div>
168
			<input name="l_contact" id="l_contact" type="checkbox" value="Y" checked="">
169
			<label for="l_contact"> Kontakt </label>
170
		</div>
171
	</div>
172
	<div class="list col">
173
		<h4> Adresse </h4>
174
		<div>
175
			<input name="l_street" id="l_street" type="checkbox" value="Y" checked="">
176
			<label for="l_street"> Straße </label>
177
		</div>
178
		<div>
179
			<input name="l_zipcode" id="l_zipcode" type="checkbox" value="Y" checked="">
180
			<label for="l_zipcode"> PLZ </label>
181
		</div>
182
		<div>
183
			<input name="l_city" id="l_city" type="checkbox" value="Y" checked="">
184
			<label for="l_city"> Stadt </label>
185
		</div>
186
		<div>
187
			<input name="l_country" id="l_country" type="checkbox" value="Y" checked="">
188
			<label for="l_country"> Land </label>
189
		</div>
190
		<div>
191
			<input name="l_gln" id="l_gln" type="checkbox" value="Y" checked="">
192
			<label for="l_gln"> GLN </label>
193
		</div>
194
	</div>
195
	<div class="list col">
196
		<h4> Benutzerdefinierte Variablen </h4>
197
<!-- PENDENT: bessere Loesung suchen -->
198
		<input type="checkbox" name="l_cvar_Geburtsdatum" id="l_cvar_Geburtsdatum" value="Y">
199
		<label for="l_cvar_Geburtsdatum">Geburtsdatum</label>
200
	</div>
201
</div>
202

  
203

  
204
<div class="wrapper">
205

  
206

  
207
<div class="filter_toggle" style="display: block;">
208
	<a href="#" onclick="javascript:$(&quot;.filter_toggle&quot;).toggle()" class="button toggle off neutral">Filter zeigen</a> Aktiv, Gültig 
209
</div>
210
<div class="filter_toggle" style="display: none;">
211
	<a href="#" onclick="javascript:$(&quot;.filter_toggle&quot;).toggle()" class="button toggle on neutral with-panel">Filter verbergen</a> 
212
	<div class="filter-toggle-panel">
213
		<table id="filter_table" class="tbl-horizontal">
214
			<caption>Projekt</caption>
215
			<tbody>
216
				<tr>
217
					<th>Nummer</th>
218
					<td><input id="filter_projectnumber_substr_ilike" value="" class="wi-normal" name="filter.projectnumber:substr::ilike" type="text">
219
					</td>
220
				</tr>
221
				<tr>
222
					<th>Beschreibung</th>
223
					<td><input id="filter_description_substr_ilike" value="" name="filter.description:substr::ilike" class="wi-normal initial_focus" type="text">
224
					</td>
225
				</tr>
226
				<tr>
227
					<th>Kunde</th>
228
					<td><input type="text" class="wi-normal" name="filter.customer.name:substr::ilike" id="filter_customer_name_substr_ilike" value="">
229
					</td>
230
				</tr>
231
				<tr>
232
					<th>Projekttyp</th>
233
					<td> 
234
					<select id="filter_project_type_id" class="wi-normal" name="filter.project_type_id">
235
						<option value=""></option>
236
						<option value="1">Standard</option>
237
					</select>
238
					</td>
239
				</tr>
240
				<tr>
241
					<th>Projektstatus</th>
242
					<td> 
243
					<select id="filter_project_status_id" class="wi-normal" name="filter.project_status_id">
244
						<option value=""></option>
245
						<option value="1">Akquise</option>
246
						<option value="2">In Planung</option>
247
					</select>
248
					</td>
249
				</tr>
250
			</tbody>
251
		</table>
252
		<table class="tbl-horizontal">
253
			<caption>In Bericht aufnehmen</caption>
254
			<tbody>
255
				<tr>
256
					<td> 
257
					<select style="width: 200px" name="filter.active" id="filter_active">
258
						<option selected="" value="active">Aktiv</option>
259
						<option value="inactive">Inaktiv</option>
260
					</select>
261
					</td>
262
				</tr>
263
				<tr>
264
					<td> 
265
					<select id="filter_valid" style="width: 200px" name="filter.valid">
266
						<option value="valid" selected="">Gültig</option>
267
						<option value="invalid">Ungültig</option>
268
					</select>
269
					</td>
270
				</tr>
271
				<tr>
272
					<td> 
273
					<select id="filter_status" style="width: 200px" name="filter.status">
274
						<option value="all">Alle</option>
275
						<option value="orphaned">Nie benutzt</option>
276
					</select>
277
					</td>
278
				</tr>
279
			</tbody>
280
		</table>
281
		<div class="buttons">
282
			<input type="button" onclick="$(&quot;#search_form&quot;).resetForm()" class="neutral" value="Zurücksetzen">
283
		</div>
284
	</div>
285
<!-- /.filter_panel -->
286
</div>
287

  
288

  
289
</div>
290

  
291

  
292

  
293

  
294

  
295

  
296

  
297
</form>
298
</body>
299
</html>
css/developement/form-elements.html
1
<!DOCTYPE html>
2
<html lang="de">
3
<head>
4
  <meta charset="utf-8" />
5
  <link href="../style.css" rel="stylesheet">
6
  <title>Test und Entwicklung des Kivitendo-CSS</title>
7
</head>
8
<body class="developing">
9
<header>
10
	<h1>Kivitendo-Formular-Elemente</h1>
11
	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
12
</header>
13

  
14
<form action="#">
15

  
16

  
17

  
18

  
19
<div class="wrapper">
20

  
21

  
22
<h2>Formular-Elemente mit Standard-Einstellungen</h2>
23

  
24

  
25
<table class="tbl-horizontal col test">
26
	<caption>Klassische Input-Elemente</caption>
27
	<colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup> 
28
	<tbody>
29
		<tr>
30
			<th>Text</th>
31
			<td><input type="text" name="input-type-text"></td>
32
		</tr>
33
		<tr>
34
			<th>Password</th>
35
			<td><input type="password" name="input-type-password"></td>
36
		</tr>
37
		<tr>
38
			<th>Checkbox</th>
39
			<td>
40
			  <input type="checkbox" name="input-type-checkbox" value="cb1" id="cb1-1"><label for="cb1-1">1</label> &nbsp; 
41
        <input type="checkbox" name="input-type-checkbox" value="cb2" id="cb1-2"><label for="cb1-2">2</label>
42
			</td>
43
		</tr>
44
		<tr>
45
			<th>Radio</th>
46
			<td>
47
        <input type="radio" name="input-type-radio" value="Yes" id="rd1-1"><label for="rd1-1">Yes</label> &nbsp; 
48
        <input type="radio" name="input-type-radio" value="No" id="rd1-2"><label for="rd1-2">No</label>			
49
			</td>
50
		</tr>
51
		<tr>
52
			<th>Submit</th>
53
			<td><input type="submit" name="sbmt1"></td>
54
		</tr>
55
		<tr>
56
			<th>Reset</th>
57
			<td><input type="reset" name="rst1"></td>
58
		</tr>
59
		<tr>
60
			<th>Button</th>
61
			<td><input type="button" name="btn1" value="Anzeigen"></td>
62
		</tr>
63
		<tr>
64
			<th>Image</th>
65
			<td><input type="image" name="input-type-image"></td>
66
		</tr>
67
		<tr>
68
			<th>File</th>
69
			<td><input type="file" name="input-type-file"></td>
70
		</tr>
71
	</tbody>
72
</table>
73

  
74

  
75
<table class="tbl-horizontal">
76
	<caption>Andere Formular-Elemente</caption>
77
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
78
	<tbody>
79
		<tr>
80
			<th>Select</th>
81
			<td>
82
			  <select id="slct1" name="slct1">
83
			    <option value=""></option>
84
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
85
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
86
			    <option value="Timothy Leary">Timothy Leary</option>
87
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
88
			  </select>
89
			</td>
90
		</tr>
91
		<tr>
92
			<th>Textarea</th>
93
			<td><textarea name="txtarea1">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
94
		</tr>
95
		<tr>
96
			<th>Button</th>
97
			<td>
98
			  <button name="bttn1-1" type="button">Type Button</button><br>
99
			  <button name="bttn1-2" type="submit">Type Submit</button><br>
100
			  <button name="bttn1-3" type="reset">Type Reset</button>
101
			</td>
102
		</tr>
103
	</tbody>
104
</table>
105

  
106
<table class="tbl-horizontal">
107
	<caption>Neue Input-Elemente in HTML5</caption>
108
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
109
	<tbody>
110
		<tr>
111
			<th>Search</th>
112
			<td><input type="search" name="input-type-search"></td>
113
		</tr>
114
		<tr>
115
			<th>Tel</th>
116
			<td><input type="tel" name="input-type-tel"></td>
117
		</tr>
118
		<tr>
119
			<th>URL</th>
120
			<td><input type="url" name="input-type-url"></td>
121
		</tr>
122
		<tr>
123
			<th>Email</th>
124
			<td><input type="email" name="input-type-email"></td>
125
		</tr>
126
		<tr>
127
			<th>Datetime</th>
128
			<td><input type="datetime" name="input-type-datetime"></td>
129
		</tr>
130
		<tr>
131
			<th>Date</th>
132
			<td><input type="date" name="input-type-date"></td>
133
		</tr>
134
		<tr>
135
			<th>Time</th>
136
			<td><input type="time" name="input-type-time"></td>
137
		</tr>
138
		<tr>
139
			<th>Month</th>
140
			<td><input type="month" name="input-type-month"></td>
141
		</tr>
142
		<tr>
143
			<th>Week</th>
144
			<td><input type="week" name="input-type-week"></td>
145
		</tr>
146
		<tr>
147
			<th>Datetime-Local</th>
148
			<td><input type="datetime-local" name="input-type-datetime-local"></td>
149
		</tr>
150
		<tr>
151
			<th>Number</th>
152
			<td><input type="number" name="input-type-number"></td>
153
		</tr>
154
		<tr>
155
			<th>Range</th>
156
			<td><input type="range" name="input-type-range"></td>
157
		</tr>
158
		<tr>
159
			<th>Color</th>
160
			<td><input type="color" name="input-type-color"></td>
161
		</tr>
162
	</tbody>
163
</table>
164

  
165

  
166
<table class="tbl-horizontal">
167
	<caption>Abmessungen (Beispiel Input[type=text])</caption>
168
	<colgroup> <col class="wi-mediumsmall"><col class="wi-verysmall"><col class="wi-lightwide"> </colgroup> 
169
	<tbody>
170
		<tr>
171
			<th>wi-smallest</th>
172
			<th>44px</th>
173
			<td><input type="text" name="input-type-text" class="wi-smallest"></td>
174
		</tr>
175
		<tr>
176
			<th>wi-verysmall</th>
177
			<th>63px</th>
178
			<td><input type="text" name="input-type-text" class="wi-verysmall"></td>
179
		</tr>
180
		<tr>
181
			<th>wi-small</th>
182
			<th>95px</th>
183
			<td><input type="text" name="input-type-text" class="wi-small"></td>
184
		</tr>
185
		<tr>
186
			<th>wi-mediumsmall</th>
187
			<th>121px</th>
188
			<td><input type="text" name="input-type-text" class="wi-mediumsmall"></td>
189
		</tr>
190
		<tr>
191
			<th>wi-normal</th>
192
			<th>161px</th>
193
			<td><input type="text" name="input-type-text" class="wi-normal"></td>
194
		</tr>
195
		<tr>
196
			<th>wi-lightwide</th>
197
			<th>188px</th>
198
			<td><input type="text" name="input-type-text" class="wi-lightwide"></td>
199
		</tr>
200
		<tr>
201
			<th>wi-wide</th>
202
			<th>249px</th>
203
			<td><input type="text" name="input-type-text" class="wi-wide"></td>
204
		</tr>
205
		<tr>
206
			<th>wi-wider</th>
207
			<th>329px</th>
208
			<td><input type="text" name="input-type-text" class="wi-wider"></td>
209
		</tr>
210
		<tr>
211
			<th>wi-verywide</th>
212
			<th>489px</th>
213
			<td><input type="text" name="input-type-text" class="wi-verywide"></td>
214
		</tr>
215
	</tbody>
216
</table>
217

  
218
</div><!-- /.wrapper -->
219

  
220

  
221
<div class="wrapper">
222

  
223

  
224
<h2>Abmessungen mit assoziativen Klassennamen</h2>
225

  
226

  
227
<table class="tbl-horizontal col">
228
	<caption>Klasse wi-normal</caption>
229
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
230
	<tbody>
231
		<tr>
232
			<th>Text</th>
233
			<td><input type="text" name="input-type-text-2" class="wi-normal"></td>
234
		</tr>
235
		<tr>
236
			<th>Password</th>
237
			<td><input type="password" name="input-type-password-2" class="wi-normal"></td>
238
		</tr>
239
		<tr>
240
			<th>Submit</th>
241
			<td><input type="submit" name="sbmt2" class="wi-normal"></td>
242
		</tr>
243
		<tr>
244
			<th>Reset</th>
245
			<td><input type="reset" name="rst2" class="wi-normal"></td>
246
		</tr>
247
		<tr>
248
			<th>Button</th>
249
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-normal"></td>
250
		</tr>
251
		<tr>
252
			<th>Select</th>
253
			<td>
254
			  <select id="slct1" name="slct2" class="wi-normal">
255
			    <option value=""></option>
256
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
257
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
258
			    <option value="Timothy Leary">Timothy Leary</option>
259
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
260
			  </select>
261
			</td>
262
		</tr>
263
		<tr>
264
			<th>Textarea</th>
265
			<td><textarea name="txtarea2" class="wi-normal">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
266
		</tr>
267
		<tr>
268
			<th>Button (Tag)</th>
269
			<td>
270
			  <button name="bttn1-1" type="button" class="wi-normal">Type Button</button><br>
271
			  <button name="bttn1-2" type="submit" class="wi-normal">Type Submit</button><br>
272
			  <button name="bttn1-3" type="reset" class="wi-normal">Type Reset</button>
273
			</td>
274
		</tr>
275
	</tbody>
276
</table>
277

  
278
<table class="tbl-horizontal col">
279
	<caption>Klasse wi-smallest</caption>
280
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
281
	<tbody>
282
		<tr>
283
			<th>Text</th>
284
			<td><input type="text" name="input-type-text-2" class="wi-smallest"></td>
285
		</tr>
286
		<tr>
287
			<th>Password</th>
288
			<td><input type="password" name="input-type-password-2" class="wi-smallest"></td>
289
		</tr>
290
		<tr>
291
			<th>Submit</th>
292
			<td><input type="submit" name="sbmt2" class="wi-smallest"></td>
293
		</tr>
294
		<tr>
295
			<th>Reset</th>
296
			<td><input type="reset" name="rst2" class="wi-smallest"></td>
297
		</tr>
298
		<tr>
299
			<th>Button</th>
300
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-smallest"></td>
301
		</tr>
302
		<tr>
303
			<th>Select</th>
304
			<td>
305
			  <select id="slct1" name="slct2" class="wi-smallest">
306
			    <option value=""></option>
307
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
308
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
309
			    <option value="Timothy Leary">Timothy Leary</option>
310
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
311
			  </select>
312
			</td>
313
		</tr>
314
		<tr>
315
			<th>Textarea</th>
316
			<td><textarea name="txtarea2" class="wi-smallest">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
317
		</tr>
318
		<tr>
319
			<th>Button (Tag)</th>
320
			<td>
321
			  <button name="bttn1-1" type="button" class="wi-smallest">Type Button</button><br>
322
			  <button name="bttn1-2" type="submit" class="wi-smallest">Type Submit</button><br>
323
			  <button name="bttn1-3" type="reset" class="wi-smallest">Type Reset</button>
324
			</td>
325
		</tr>
326
	</tbody>
327
</table>
328

  
329
<table class="tbl-horizontal col">
330
	<caption>Klasse wi-verysmall</caption>
331
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
332
	<tbody>
333
		<tr>
334
			<th>Text</th>
335
			<td><input type="text" name="input-type-text-2" class="wi-verysmall"></td>
336
		</tr>
337
		<tr>
338
			<th>Password</th>
339
			<td><input type="password" name="input-type-password-2" class="wi-verysmall"></td>
340
		</tr>
341
		<tr>
342
			<th>Submit</th>
343
			<td><input type="submit" name="sbmt2" class="wi-verysmall"></td>
344
		</tr>
345
		<tr>
346
			<th>Reset</th>
347
			<td><input type="reset" name="rst2" class="wi-verysmall"></td>
348
		</tr>
349
		<tr>
350
			<th>Button</th>
351
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-verysmall"></td>
352
		</tr>
353
		<tr>
354
			<th>Select</th>
355
			<td>
356
			  <select id="slct1" name="slct2" class="wi-verysmall">
357
			    <option value=""></option>
358
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
359
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
360
			    <option value="Timothy Leary">Timothy Leary</option>
361
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
362
			  </select>
363
			</td>
364
		</tr>
365
		<tr>
366
			<th>Textarea</th>
367
			<td><textarea name="txtarea2" class="wi-verysmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
368
		</tr>
369
		<tr>
370
			<th>Button (Tag)</th>
371
			<td>
372
			  <button name="bttn1-1" type="button" class="wi-verysmall">Type Button</button><br>
373
			  <button name="bttn1-2" type="submit" class="wi-verysmall">Type Submit</button><br>
374
			  <button name="bttn1-3" type="reset" class="wi-verysmall">Type Reset</button>
375
			</td>
376
		</tr>
377
	</tbody>
378
</table>
379

  
380
<table class="tbl-horizontal col">
381
	<caption>Klasse wi-small</caption>
382
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
383
	<tbody>
384
		<tr>
385
			<th>Text</th>
386
			<td><input type="text" name="input-type-text-2" class="wi-small"></td>
387
		</tr>
388
		<tr>
389
			<th>Password</th>
390
			<td><input type="password" name="input-type-password-2" class="wi-small"></td>
391
		</tr>
392
		<tr>
393
			<th>Submit</th>
394
			<td><input type="submit" name="sbmt2" class="wi-small"></td>
395
		</tr>
396
		<tr>
397
			<th>Reset</th>
398
			<td><input type="reset" name="rst2" class="wi-small"></td>
399
		</tr>
400
		<tr>
401
			<th>Button</th>
402
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-small"></td>
403
		</tr>
404
		<tr>
405
			<th>Select</th>
406
			<td>
407
			  <select id="slct1" name="slct2" class="wi-small">
408
			    <option value=""></option>
409
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
410
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
411
			    <option value="Timothy Leary">Timothy Leary</option>
412
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
413
			  </select>
414
			</td>
415
		</tr>
416
		<tr>
417
			<th>Textarea</th>
418
			<td><textarea name="txtarea2" class="wi-small">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
419
		</tr>
420
		<tr>
421
			<th>Button (Tag)</th>
422
			<td>
423
			  <button name="bttn1-1" type="button" class="wi-small">Type Button</button><br>
424
			  <button name="bttn1-2" type="submit" class="wi-small">Type Submit</button><br>
425
			  <button name="bttn1-3" type="reset" class="wi-small">Type Reset</button>
426
			</td>
427
		</tr>
428
	</tbody>
429
</table>
430

  
431
<table class="tbl-horizontal col">
432
	<caption>Klasse wi-mediumsmall</caption>
433
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
434
	<tbody>
435
		<tr>
436
			<th>Text</th>
437
			<td><input type="text" name="input-type-text-2" class="wi-mediumsmall"></td>
438
		</tr>
439
		<tr>
440
			<th>Password</th>
441
			<td><input type="password" name="input-type-password-2" class="wi-mediumsmall"></td>
442
		</tr>
443
		<tr>
444
			<th>Submit</th>
445
			<td><input type="submit" name="sbmt2" class="wi-mediumsmall"></td>
446
		</tr>
447
		<tr>
448
			<th>Reset</th>
449
			<td><input type="reset" name="rst2" class="wi-mediumsmall"></td>
450
		</tr>
451
		<tr>
452
			<th>Button</th>
453
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-mediumsmall"></td>
454
		</tr>
455
		<tr>
456
			<th>Select</th>
457
			<td>
458
			  <select id="slct1" name="slct2" class="wi-mediumsmall">
459
			    <option value=""></option>
460
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
461
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
462
			    <option value="Timothy Leary">Timothy Leary</option>
463
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
464
			  </select>
465
			</td>
466
		</tr>
467
		<tr>
468
			<th>Textarea</th>
469
			<td><textarea name="txtarea2" class="wi-mediumsmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
470
		</tr>
471
		<tr>
472
			<th>Button (Tag)</th>
473
			<td>
474
			  <button name="bttn1-1" type="button" class="wi-mediumsmall">Type Button</button><br>
475
			  <button name="bttn1-2" type="submit" class="wi-mediumsmall">Type Submit</button><br>
476
			  <button name="bttn1-3" type="reset" class="wi-mediumsmall">Type Reset</button>
477
			</td>
478
		</tr>
479
	</tbody>
480
</table>
481

  
482
<table class="tbl-horizontal col">
483
	<caption>Klasse wi-lightwide</caption>
484
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
485
	<tbody>
486
		<tr>
487
			<th>Text</th>
488
			<td><input type="text" name="input-type-text-2" class="wi-lightwide"></td>
489
		</tr>
490
		<tr>
491
			<th>Password</th>
492
			<td><input type="password" name="input-type-password-2" class="wi-lightwide"></td>
493
		</tr>
494
		<tr>
495
			<th>Submit</th>
496
			<td><input type="submit" name="sbmt2" class="wi-lightwide"></td>
497
		</tr>
498
		<tr>
499
			<th>Reset</th>
500
			<td><input type="reset" name="rst2" class="wi-lightwide"></td>
501
		</tr>
502
		<tr>
503
			<th>Button</th>
504
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-lightwide"></td>
505
		</tr>
506
		<tr>
507
			<th>Select</th>
508
			<td>
509
			  <select id="slct1" name="slct2" class="wi-lightwide">
510
			    <option value=""></option>
511
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
512
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
513
			    <option value="Timothy Leary">Timothy Leary</option>
514
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
515
			  </select>
516
			</td>
517
		</tr>
518
		<tr>
519
			<th>Textarea</th>
520
			<td><textarea name="txtarea2" class="wi-lightwide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
521
		</tr>
522
		<tr>
523
			<th>Button (Tag)</th>
524
			<td>
525
			  <button name="bttn1-1" type="button" class="wi-lightwide">Type Button</button><br>
526
			  <button name="bttn1-2" type="submit" class="wi-lightwide">Type Submit</button><br>
527
			  <button name="bttn1-3" type="reset" class="wi-lightwide">Type Reset</button>
528
			</td>
529
		</tr>
530
	</tbody>
531
</table>
532

  
533
<table class="tbl-horizontal col">
534
	<caption>Klasse wi-wide</caption>
535
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
536
	<tbody>
537
		<tr>
538
			<th>Text</th>
539
			<td><input type="text" name="input-type-text-2" class="wi-wide"></td>
540
		</tr>
541
		<tr>
542
			<th>Password</th>
543
			<td><input type="password" name="input-type-password-2" class="wi-wide"></td>
544
		</tr>
545
		<tr>
546
			<th>Submit</th>
547
			<td><input type="submit" name="sbmt2" class="wi-wide"></td>
548
		</tr>
549
		<tr>
550
			<th>Reset</th>
551
			<td><input type="reset" name="rst2" class="wi-wide"></td>
552
		</tr>
553
		<tr>
554
			<th>Button</th>
555
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-wide"></td>
556
		</tr>
557
		<tr>
558
			<th>Select</th>
559
			<td>
560
			  <select id="slct1" name="slct2" class="wi-wide">
561
			    <option value=""></option>
562
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
563
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
564
			    <option value="Timothy Leary">Timothy Leary</option>
565
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
566
			  </select>
567
			</td>
568
		</tr>
569
		<tr>
570
			<th>Textarea</th>
571
			<td><textarea name="txtarea2" class="wi-wide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
572
		</tr>
573
		<tr>
574
			<th>Button (Tag)</th>
575
			<td>
576
			  <button name="bttn1-1" type="button" class="wi-wide">Type Button</button><br>
577
			  <button name="bttn1-2" type="submit" class="wi-wide">Type Submit</button><br>
578
			  <button name="bttn1-3" type="reset" class="wi-wide">Type Reset</button>
579
			</td>
580
		</tr>
581
	</tbody>
582
</table>
583

  
584
<table class="tbl-horizontal col">
585
	<caption>Klasse wi-wider</caption>
586
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
587
	<tbody>
588
		<tr>
589
			<th>Text</th>
590
			<td><input type="text" name="input-type-text-2" class="wi-wider"></td>
591
		</tr>
592
		<tr>
593
			<th>Password</th>
594
			<td><input type="password" name="input-type-password-2" class="wi-wider"></td>
595
		</tr>
596
		<tr>
597
			<th>Submit</th>
598
			<td><input type="submit" name="sbmt2" class="wi-wider"></td>
599
		</tr>
600
		<tr>
601
			<th>Reset</th>
602
			<td><input type="reset" name="rst2" class="wi-wider"></td>
603
		</tr>
604
		<tr>
605
			<th>Button</th>
606
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-wider"></td>
607
		</tr>
608
		<tr>
609
			<th>Select</th>
610
			<td>
611
			  <select id="slct1" name="slct2" class="wi-wider">
612
			    <option value=""></option>
613
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
614
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
615
			    <option value="Timothy Leary">Timothy Leary</option>
616
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
617
			  </select>
618
			</td>
619
		</tr>
620
		<tr>
621
			<th>Textarea</th>
622
			<td><textarea name="txtarea2" class="wi-wider">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
623
		</tr>
624
		<tr>
625
			<th>Button (Tag)</th>
626
			<td>
627
			  <button name="bttn1-1" type="button" class="wi-wider">Type Button</button><br>
628
			  <button name="bttn1-2" type="submit" class="wi-wider">Type Submit</button><br>
629
			  <button name="bttn1-3" type="reset" class="wi-wider">Type Reset</button>
630
			</td>
631
		</tr>
632
	</tbody>
633
</table>
634

  
635
<table class="tbl-horizontal col">
636
	<caption>Klasse wi-verywide</caption>
637
	<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> 
638
	<tbody>
639
		<tr>
640
			<th>Text</th>
641
			<td><input type="text" name="input-type-text-2" class="wi-verywide"></td>
642
		</tr>
643
		<tr>
644
			<th>Password</th>
645
			<td><input type="password" name="input-type-password-2" class="wi-verywide"></td>
646
		</tr>
647
		<tr>
648
			<th>Submit</th>
649
			<td><input type="submit" name="sbmt2" class="wi-verywide"></td>
650
		</tr>
651
		<tr>
652
			<th>Reset</th>
653
			<td><input type="reset" name="rst2" class="wi-verywide"></td>
654
		</tr>
655
		<tr>
656
			<th>Button</th>
657
			<td><input type="button" name="btn2" value="Anzeigen" class="wi-verywide"></td>
658
		</tr>
659
		<tr>
660
			<th>Select</th>
661
			<td>
662
			  <select id="slct1" name="slct2" class="wi-verywide">
663
			    <option value=""></option>
664
			    <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
665
			    <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
666
			    <option value="Timothy Leary">Timothy Leary</option>
667
			    <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
668
			  </select>
669
			</td>
670
		</tr>
671
		<tr>
672
			<th>Textarea</th>
673
			<td><textarea name="txtarea2" class="wi-verywide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
674
		</tr>
675
		<tr>
676
			<th>Button (Tag)</th>
677
			<td>
678
			  <button name="bttn1-1" type="button" class="wi-verywide">Type Button</button><br>
679
			  <button name="bttn1-2" type="submit" class="wi-verywide">Type Submit</button><br>
680
			  <button name="bttn1-3" type="reset" class="wi-verywide">Type Reset</button>
681
			</td>
682
		</tr>
683
	</tbody>
684
</table>
685

  
686

  
687

  
688

  
689

  
690
</div>
691

  
692

  
693

  
694

  
695

  
696
</form>
697

  
698
</body>
699
</html>
css/developement/index.html
1
<!DOCTYPE html>
2
<html lang="de">
3
<head>
4
  <meta charset="utf-8" />
5
  <link href="../style.css" rel="stylesheet">
6
  <title>Test und Entwicklung des Kivitendo-CSS</title>
7
</head>
8
<body class="developing">
9
<div class="wrapper">
10
<header>
11
  <h1>Entwicklung &amp; Dokumentation des Kivitendo-CSS</h1>
... Dieser Diff wurde abgeschnitten, weil er die maximale Anzahl anzuzeigender Zeilen überschreitet.

Auch abrufbar als: Unified diff