Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision 418b8da4

Von Hans Peter Schlaepfer vor fast 5 Jahren hinzugefügt

  • ID 418b8da46825c54e6638006fa19eae19e70635bc
  • Vorgänger c50a049c
  • Nachfolger c27d0449

Neues kivitendo Design neues Verzeichnis css/developement

Unterschiede anzeigen:

css/developement/anleitung.html
1
<!DOCTYPE html>
2
<html lang="de">
3
<head>
4
  <meta charset="utf-8" />
5
  <link href="../style.css" rel="stylesheet">
6
  <title>Kivitendo-Design: Anleitung &amp; Grundsätze</title>
7
</head>
8
<body class="developing">
9
<header>
10
  <h1>Anleitung und Grunsätze</h1>
11
	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
12
</header>
13
<div class="wrapper">
14
  <h2>Grundregeln</h2>
15

  
16
<h3>INPUT-Tag:</h3>
17
	<p>Da das INPUT-Element sehr vielseitig ist und via CSS das TYPE-Attribut abgefangen werden kann, muss dieses <b>TYPE-Attribut zwingend</b> mit den reservierten Begriffen gesetzt sein, da Webbrowser mitsamt ihrer CSS-Fähigkeiten das Fehlen missinterpretieren können. Standard ist TEXT, im weiteren dürfen vorerst SUBMIT, RESET, CHECKBOX und RADIO verwendet werden. Fehlt dieses Attribut oder wird ein ungehöriges gesetzt, wird das Feld vom Browser nicht korrekt dargestellt.</p>
18
	<p>Korrekt: <code>&lt;input type="text" name="name" id="name"&gt;</code><br>Falsch:&nbsp; <code>&lt;input name="name" id="name"&gt;</code> (häufig aufgetreten)<p>
19
	<h3>H1 (Header 1):</h3><p>Dieses Element sollte nur <b>einmal pro Seite</b> eingesetzt werden, und zwar einzig für den Seitentitel. Zudem sollte dieses Attribut <b>gleich zu Beginn der Template-Datei</b> gesetzt werden, und nicht innerhalb eines Formular- oder Wrapper-Elements. Das unkorrekte Setzen dieses Elements ist zwar durch den CSS-Code abgefangen, die Darstellung könnte aber in solchen Fällen nicht den Vorstellungen entsprechen.</p>
20

  
21

  
22
</div>
23
</body>
24
</html>
css/developement/farben-demo.css
1
.gray-darker {
2
  background-color: #222222;
3
}
4
.gray-dark {
5
  background-color: #555555;
6
}
7
.gray-mediumdark {
8
  background-color: #666666;
9
}
10
.gray {
11
  background-color: #888888;
12
}
13
.gray-medium {
14
  background-color: #aaaaaa;
15
}
16
.gray-light {
17
  background-color: #cfcfcf;
18
}
19
.gray-lighter {
20
  background-color: #dedede;
21
}
22
.gray-morelighter {
23
  background-color: #e0e0e0;
24
}
25
.gray-verylight {
26
  background-color: #ececec;
27
}
28
.gray-superlight {
29
  background-color: #efefef;
30
}
31
.color-red-strong {
32
  background-color: #ae0014;
33
}
34
.color-red-light {
35
  background-color: #ffd6d6;
36
}
37
.color-green-strong {
38
  background-color: #088604;
39
}
40
.color-green-light {
41
  background-color: #c9ee8e;
42
}
43
.color-blue-strong {
44
  background-color: #209ec8;
45
}
46
.color-blue-light {
47
  background-color: #b6e6e5;
48
}
49
.color-orange-strong {
50
  background-color: #6d613e;
51
}
52
.color-orange-light {
53
  background-color: #f6d972;
54
}
55
.rainbow-green {
56
  background-color: #408000;
57
}
58
.rainbow-blue {
59
  background-color: #0080ff;
60
}
61
.rainbow-red {
62
  background-color: #ff0000;
63
}
64
.rainbow-yellow {
65
  background-color: #ffff00;
66
}
67
.brand-primary {
68
  background-color: #000000;
69
}
70
.brand-label {
71
  background-color: #888888;
72
}
73
.brand-label-bg {
74
  background-color: #dedede;
75
}
76
.brand-info {
77
  background-color: #209ec8;
78
}
79
.brand-info-bg {
80
  background-color: #b6e6e5;
81
}
82
.brand-ok {
83
  background-color: #088604;
84
}
85
.brand-ok-bg {
86
  background-color: #c9ee8e;
87
}
88
.brand-warning {
89
  background-color: #6d613e;
90
}
91
.brand-warning-bg {
92
  background-color: #f6d972;
93
}
94
.brand-error {
95
  background-color: #ae0014;
96
}
97
.brand-error-bg {
98
  background-color: #ffd6d6;
99
}
100
.brand-positive {
101
  background-color: #088604;
102
}
103
.brand-positive-bg {
104
  background-color: #c9ee8e;
105
}
106
.brand-negative {
107
  background-color: #ae0014;
108
}
109
.brand-negative-bg {
110
  background-color: #ffd6d6;
111
}
112
.button-strong {
113
  background-color: #000000;
114
}
115
.button-strong-bg {
116
  background-color: #cfcfcf;
117
}
118
.button-strong-border {
119
  background-color: #cfcfcf;
120
}
121
.button-strong-hover {
122
  background-color: #000000;
123
}
124
.button-strong-hover-bg {
125
  background-color: #cfcfcf;
126
}
127
.button-strong-hover-border {
128
  background-color: #cfcfcf;
129
}
130
.button-strong-active {
131
  background-color: #000000;
132
}
133
.button-strong-active-bg {
134
  background-color: #cfcfcf;
135
}
136
.button-strong-active-border {
137
  background-color: #cfcfcf;
138
}
139
.button-soft {
140
  background-color: #555555;
141
}
142
.button-soft-bg {
143
  background-color: #ececec;
144
}
145
.button-soft-border {
146
  background-color: #ececec;
147
}
148
.button-soft-hover {
149
  background-color: #555555;
150
}
151
.button-soft-hover-bg {
152
  background-color: #ececec;
153
}
154
.button-soft-hover-border {
155
  background-color: #ececec;
156
}
157
.button-soft-active {
158
  background-color: #555555;
159
}
160
.button-soft-active-bg {
161
  background-color: #ececec;
162
}
163
.button-soft-active-border {
164
  background-color: #ececec;
165
}
166
.body-bg {
167
  background-color: #efefef;
168
}
169
.content-bg {
170
  background-color: #ffffff;
171
}
172
.tabs-bg {
173
  background-color: #efefef;
174
}
175
.heading-bg {
176
  background-color: #cfcfcf;
177
}
178
.controlpanel-bg {
179
  background-color: #e0e0e0;
180
}
181
.text-color {
182
  background-color: #000000;
183
}
184
.heading-color {
185
  background-color: #888888;
186
}
187
.caption-color {
188
  background-color: #888888;
189
}
190
#demo h1,
191
#demo h2 {
192
  clear: both;
193
  color: #888888 !important;
194
  padding: 0 ;
195
  margin: 0 ;
196
}
197
#demo h1 {
198
  font-size: 14pt;
199
  padding-top: 1.0em ;
200
}
201
#demo h2 {
202
  font-size: 12pt;
203
  margin-top: 0.2em ;
204
}
205
#demo div.selector {
206
  display: block ;
207
  width: 8.0em ;
208
  float: left ;
209
  margin: 0 1.0em 0 0 ;
210
  overflow: hidden ;
211
  padding: 0 ;
212
}
213
#demo div.selector h3 {
214
  color: #888888 !important;
215
  font-size: 9pt;
216
  font-weight: normal;
217
  height: 2.8em ;
218
  display: table-cell;
219
  vertical-align: bottom ;
220
}
221
#demo div.selector div.color {
222
  width: 8.0em ;
223
  height: 8.0em ;
224
  display: block;
225
  overflow: hidden ;
226
  padding: 0 ;
227
  margin: 0;
228
  border: 1px #000 solid ;
229
}
230
#demo .group {
231
  display: inline-block;
232
  float: left;
233
  overflow: hidden ;
234
}
css/developement/farben-demo.html
1
<!DOCTYPE html>
2
<html lang="de">
3
<head>
4
  <meta charset="utf-8" />
5
  <link href="../style.css" rel="stylesheet">
6
  <link href="farben-demo.css" rel="stylesheet">
7
  <title>Kommunikation mit Farben in Kivitendo</title>
8

  
9
  <script type="text/javascript" src="../../js/jquery.js"></script>
10
  <script type="text/javascript" src="../../js/common.js"></script>
11
  <script type="text/javascript" src="../../js/namespace.js"></script>
12
  <script type="text/javascript" src="../../js/kivi.js"></script>
13
  <script type="text/javascript" src="../../js/locale/de.js"></script>
14
  <script type="text/javascript" src="../../js/jquery-ui.js"></script>
15
  <script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script>
16
  <script type="text/javascript" src="../../js/kivi.ActionBar.js"></script>
17
  <script type="text/javascript" src="../../js/kivi.Draft.js"></script>
18
  <script type="text/javascript" src="../../js/kivi.File.js"></script>
19
  <script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script>
20
  <script type="text/javascript" src="../../js/kivi.Part.js"></script>
21
  <script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script>
22
  <script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script>
23
  <script type="text/javascript" src="../../js/kivi.io.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
</head>
33
<body class="developing">
34
<header>
35
	<h1>Anzeige aller Farben in Kivitendo</h1>
36
	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
37
</header>
38
<div class="wrapper" id="demo">
39
<!--
40
For creating the blocks from the less-code use following grep:
41
\.([a-z-]+)[ ]*\{[^\n]+      replace with
42
<div class="selector"><h3>\1</h3><div class="color \1"></div></div>     or
43
<div class="selector"><h3>$1</h3><div class="color $1"></div></div>
44
-->
45

  
46
<h1>more brown</h1>
47
<div class="selector"><h3>.gray-darker</h3><div class="color gray-darker"></div></div>
48
<div class="selector"><h3>.gray-dark</h3><div class="color gray-dark"></div></div>
49
<div class="selector"><h3>.gray-mediumdark</h3><div class="color gray-mediumdark"></div></div>
50
<div class="selector"><h3>.gray</h3><div class="color gray"></div></div>
51
<div class="selector"><h3>.gray-medium</h3><div class="color gray-medium"></div></div>
52
<div class="selector"><h3>.gray-light</h3><div class="color gray-light"></div></div>
53
<div class="selector"><h3>.gray-lighter</h3><div class="color gray-lighter"></div></div>
54
<div class="selector"><h3>.gray-morelighter</h3><div class="color gray-morelighter"></div></div>
55
<div class="selector"><h3>.gray-verylight</h3><div class="color gray-verylight"></div></div>
56
<div class="selector"><h3>.gray-superlight</h3><div class="color gray-superlight"></div></div>
57

  
58
<h1>Divers Color Specications</h1>
59
<div class="group">
60
<h2>ok</h2>
61
<div class="selector"><h3>.color-green-strong</h3><div class="color color-green-strong"></div></div>
62
<div class="selector"><h3>.color-green-light</h3><div class="color color-green-light"></div></div>
63
</div>
64
<div class="group">
65
<h2>error</h2>
66
<div class="selector"><h3>.color-red-strong</h3><div class="color color-red-strong"></div></div>
67
<div class="selector"><h3>.color-red-light</h3><div class="color color-red-light"></div></div>
68
</div>
69
<div class="group">
70
<h2>info/hint</h2>
71
<div class="selector"><h3>.color-blue-strong</h3><div class="color color-blue-strong"></div></div>
72
<div class="selector"><h3>.color-blue-light</h3><div class="color color-blue-light"></div></div>
73
</div>
74
<div class="group">
75
<h2>warning</h2>
76
<div class="selector"><h3>.color-orange-strong</h3><div class="color color-orange-strong"></div></div>
77
<div class="selector"><h3>.color-orange-light</h3><div class="color color-orange-light"></div></div>
78
</div>
79

  
80

  
81
<h2>divers</h2>
82
<div class="selector"><h3>.rainbow-green</h3><div class="color rainbow-green"></div></div>
83
<div class="selector"><h3>.rainbow-blue</h3><div class="color rainbow-blue"></div></div>
84
<div class="selector"><h3>.rainbow-red</h3><div class="color rainbow-red"></div></div>
85
<div class="selector"><h3>.rainbow-yellow</h3><div class="color rainbow-yellow"></div></div>
86

  
87
<h1>Brand colors</h1>
88

  
89
<h2>Text (Label & data)</h2>
90
<div class="selector"><h3>.brand-primary</h3><div class="color brand-primary"></div></div>
91
<div class="selector"><h3>.brand-label</h3><div class="color brand-label"></div></div>
92
<div class="selector"><h3>.brand-label-bg</h3><div class="color brand-label-bg"></div></div>
93

  
94
<h1>Messages & info types</h1>
95
<div class="selector"><h3>.brand-ok</h3><div class="color brand-ok"></div></div>
96
<div class="selector"><h3>.brand-ok-bg</h3><div class="color brand-ok-bg"></div></div>
97

  
98
<div class="selector"><h3>.brand-error</h3><div class="color brand-error"></div></div>
99
<div class="selector"><h3>.brand-error-bg</h3><div class="color brand-error-bg"></div></div>
100

  
101
<div class="selector"><h3>.brand-info</h3><div class="color brand-info"></div></div>
102
<div class="selector"><h3>.brand-info-bg</h3><div class="color brand-info-bg"></div></div>
103

  
104
<div class="selector"><h3>.brand-warning</h3><div class="color brand-warning"></div></div>
105
<div class="selector"><h3>.brand-warning-bg</h3><div class="color brand-warning-bg"></div></div>
106

  
107
<h1>Positive & negative colors</h1>
108
<div class="selector"><h3>.brand-positive</h3><div class="color brand-positive"></div></div>
109
<div class="selector"><h3>.brand-positive-bg</h3><div class="color brand-positive-bg"></div></div>
110
<div class="selector"><h3>.brand-negative</h3><div class="color brand-negative"></div></div>
111
<div class="selector"><h3>.brand-negative-bg</h3><div class="color brand-negative-bg"></div></div>
112

  
113

  
114
<h1>Buttons</h1>
115
<h2>Button with manipulation (submit etc.)</h2>
116
<div class="selector"><h3>.button-strong</h3><div class="color button-strong"></div></div>
117
<div class="selector"><h3>.button-strong-bg</h3><div class="color button-strong-bg"></div></div>
118
<div class="selector"><h3>.button-strong-border</h3><div class="color button-strong-border"></div></div>
119
<div class="selector"><h3>.button-strong-hover</h3><div class="color button-strong-hover"></div></div>
120
<div class="selector"><h3>.button-strong-hover-bg</h3><div class="color button-strong-hover-bg"></div></div>
121
<div class="selector"><h3>.button-strong-hover-border</h3><div class="color button-strong-hover-border"></div></div>
122
<div class="selector"><h3>.button-strong-active</h3><div class="color button-strong-active"></div></div>
123
<div class="selector"><h3>.button-strong-active-bg</h3><div class="color button-strong-active-bg"></div></div>
124
<div class="selector"><h3>.button-strong-active-border</h3><div class="color button-strong-active-border"></div></div>
125
<h2>button withoud data manipulation (reset, cancel, open, show etc.)</h2>
126
<div class="selector"><h3>.button-soft</h3><div class="color button-soft"></div></div>
127
<div class="selector"><h3>.button-soft-bg</h3><div class="color button-soft-bg"></div></div>
128
<div class="selector"><h3>.button-soft-border</h3><div class="color button-soft-border"></div></div>
129
<div class="selector"><h3>.button-soft-hover</h3><div class="color button-soft-hover"></div></div>
130
<div class="selector"><h3>.button-soft-hover-bg</h3><div class="color button-soft-hover-bg"></div></div>
131
<div class="selector"><h3>.button-soft-hover-border</h3><div class="color button-soft-hover-border"></div></div>
132
<div class="selector"><h3>.button-soft-active</h3><div class="color button-soft-active"></div></div>
133
<div class="selector"><h3>.button-soft-active-bg</h3><div class="color button-soft-active-bg"></div></div>
134
<div class="selector"><h3>.button-soft-active-border</h3><div class="color button-soft-active-border"></div></div>
135

  
136

  
137
<h1>SCAFFOLDING</h1>
138
<div class="selector"><h3>.body-bg</h3><div class="color body-bg"></div></div>
139
<div class="selector"><h3>.content-bg</h3><div class="color content-bg"></div></div>
140
<div class="selector"><h3>.tabs-bg</h3><div class="color tabs-bg"></div></div>
141
<div class="selector"><h3>.heading-bg</h3><div class="color heading-bg"></div></div>
142
<div class="selector"><h3>.controlpanel-bg</h3><div class="color controlpanel-bg"></div></div>
143

  
144
<div class="selector"><h3>.text-color</h3><div class="color text-color"></div></div>
145
<div class="selector"><h3>.heading-color</h3><div class="color heading-color"></div></div>
146
<div class="selector"><h3>.caption-color</h3><div class="color caption-color"></div></div>
147

  
148

  
149

  
150

  
151
</div>
152
</body>
153
</html>
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
<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>
73
</div><!-- ./buttons -->
74

  
75
<h3>Navigation &amp; User Interface</h3>
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>
77
<div class="buttons">
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>
100
</div><!-- ./buttons -->
101
</form>
102

  
103
<h2>Nachrichten (Messages)</h2>
104
<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:</p>
105
<ul>
106
	<li>Flash_Messages</li>
107
	<li>Old_Style</li>
108
</ul>
109
<p>Dann gibt es mind. 4 <b>Message-Arten</b>:</p>
110
<ul>
111
	<li>Error</li>
112
	<li>Warning</li>
113
	<li>Info oder Hint</li>
114
	<li>OK</li>
115
</ul>
116
<p>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p>
117

  
118

  
119
<h3>Error</h3>
120

  
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>
122
<div id="flash_error" class="flash_message flash_message_error">
123
<div class="button-container">
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>
128
</div>
129
<div class="message-container">
130
	<span class="flash_title" style="float:left;">Fehler:</span>
131
	<div class="flash_notification" style="float:left;">
132
		<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span>
133
		<div id="flash_detail_error" class="detail" style="display:none;">
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>
136
    </div>
137
	</div>
138
</div>
139
</div>
140
<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p>
141
<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div>
142

  
143

  
144
<h3>Warning</h3>
145

  
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>
147
<div id="flash_warning" class="flash_message flash_message_warning">
148
<div class="button-container">
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>
153
</div>
154
<div class="message-container">
155
	<span class="flash_title" style="float:left;">Warnung:</span>
156
	<div class="flash_notification" style="float:left;">
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>
158
		<div id="flash_detail_warning" class="detail" style="display:none;">
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>
161
    </div>
162
	</div>
163
</div>
164
</div>
165
<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p>
166
<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div>
167

  
168

  
169
<h3>Info / Hint</h3>
170

  
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>
172
<div id="flash_info" class="flash_message flash_message_info">
173
<div class="button-container">
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>
178
</div>
179
<div class="message-container">
180
	<span class="flash_title" style="float:left;">Information:</span>
181
	<div class="flash_notification" style="float:left;">
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>
183
		<div id="flash_detail_info" class="detail" style="display:none;">
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>
186
    </div>
187
	</div>
188
</div>
189
</div>
190
<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p>
191
<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div>
192

  
193

  
194
<h3>OK</h3>
195

  
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>
197
<div id="flash_ok" class="flash_message flash_message_ok">
198
<div class="button-container">
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>
203
</div>
204
<div class="message-container">
205
	<span class="flash_title" style="float:left;">OK:</span>
206
	<div class="flash_notification" style="float:left;">
207
		<span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span>
208
		<div id="flash_detail_ok" class="detail" style="display:none;">
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>
211
    </div>
212
	</div>
213
</div>
214
</div>
215
<p class="message message_ok">Achtung, wichtiger Hinweis! (P.message_ok)</p>
216
<div class="message message_ok">Achtung, wichtiger Hinweis! (DIV.message_ok)</div>
217

  
218

  
219
</div>
220
</body>
221
</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"></script>
33
 
34
  <title>Spezielle Formular-Elemente</title>
35
</head>
36
<body class="developing">
37
<header>
38
  <h1>Spezielle Formular-Elemente</h1>
39
	<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
40
</header>
41
<form action="#">
42

  
43
<div class="wrapper">
44

  
45

  
46
<div class="col">
47
<h2>ms2side (.ms2side / MultiSelect2Side)</h2>
48

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

  
92
</div>
93

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

  
99
</div>
100

  
101

  
102

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

  
133

  
134
</div><!-- /.wrapper -->
135

  
136

  
137

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

  
201

  
202
<div class="wrapper">
203
	<div class="filter_toggle" style="display: block;">
204
		<a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle off neutral">Filter zeigen</a> 
205
	</div>
206
	<div class="filter_toggle" style="display: none;">
207
		<a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle on neutral with-panel">Filter verbergen</a> 
208
<!-- PENDENT: Panel einbauen -->
209
		<div class="filter-toggle-panel">
210
			<table id="filter_table" class="tbl-horizontal">
211
				<caption>Ware</caption>
212
				<tbody>
213
					<tr>
214
						<th>Beschreibung</th>
215
						<td><input value="" name="filter.name:substr::ilike" type="text" id="filter_name_substr_ilike" class="wi-normal" size="20">
216
						</td>
217
					</tr>
218
					<tr>
219
						<th>Typ</th>
220
						<td>
221
						<select name="filter.type" id="price_rule_filter_type" class="wi-normal">
222
							<option value=""></option>
223
							<option value="customer">Preisregeln (Verkauf)</option>
224
							<option value="vendor">Preisregeln (Einkauf)</option>
225
						</select>
226
						</td>
227
					</tr>
228
					<tr>
229
						<th>Ware</th>
230
						<td><span class="part_picker"><input data-part-picker-data="{'class':'wi-normal'}" value="" name="filter.item_type_matches[].part" id="filter_item_type_matches5719277_part" type="hidden" class="wi-normal part_autocomplete">
231
						<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" type="text" class="wi-normal ui-autocomplete-input" id="filter_item_type_matches5719277_part_name" autocomplete="off">
232
						<span class="ppp_popup_button"></span></span></td>
233
					</tr>
234
					<tr>
235
						<th>Warengruppe</th>
236
						<td>
237
						<select name="filter.item_type_matches[].partsgroup" id="filter_item_type_matches5719278_partsgroup" class="wi-normal">
238
							<option value=""></option>
239
							<option value="447">Computer Occasion</option>
240
							<option value="448">Hardwareteile Occasion</option>
241
							<option value="449">Computer neu</option>
242
							<option value="450">Hardwareteile neu</option>
243
							<option value="451">Peripheriegeräte neu</option>
244
							<option value="452">Peripheriegeräte Occasion</option>
245
							<option value="528">Dienstleistung</option>
246
							<option value="594">Lizenzgebühren</option>
247
							<option value="635">Zubehör</option>
248
							<option value="681">Verbrauchsmaterial</option>
249
							<option value="920">Geldbetraege</option>
250
							<option value="13376">0Kundengerät</option>
251
							<option value="27265">Dienstleistung (Stunden)</option>
252
						</select>
253
						</td>
254
					</tr>
255
					<tr>
256
						<th>Menge</th>
257
						<td><input value="" name="filter.item_type_matches[].qty" type="text" id="filter_item_type_matches5719279_qty" class="wi-normal">
258
						</td>
259
					</tr>
260
					<tr id="price_rule_filter_customer_tr" style="display:none">
261
						<th>Kunde</th>
262
						<td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].customer" id="price_rule_filter_customer" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'customer','class':'wi-normal'}">
263
						<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="customer" id="price_rule_filter_customer_name" autocomplete="off">
264
						</span></td>
265
					</tr>
266
					<tr id="price_rule_filter_vendor_tr" style="display:none">
267
<!-- PENDENT: Korrekt mit customer? -->
268
						<th>Lieferant</th>
269
						<td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].vendor" id="price_rule_filter_vendor" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'vendor','class':'wi-normal'}">
270
						<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="vendor" id="price_rule_filter_vendor_name" autocomplete="off">
271
						</span></td>
272
					</tr>
273
					<tr>
274
						<th>Kunden-/Lieferantentyp</th>
275
						<td>
276
						<select name="filter.item_type_matches[].business" id="filter_item_type_matches5719280_business" class="wi-normal">
277
							<option value=""></option>
278
							<option value="23353">LehrerInnen</option>
279
							<option value="23347">IT-Firma</option>
280
							<option value="41723">Behörde</option>
281
							<option value="158">Firma</option>
282
							<option value="157">Privatperson</option>
283
						</select>
284
						</td>
285
					</tr>
286
				</tbody>
287
			</table>
288
			<table id="filter_table" class="tbl-horizontal">
289
				<caption>Dates</caption>
290
				<tbody>
291
					<tr>
292
						<th>Liefertermin</th>
293
						<td><input value="" name="filter.item_type_matches[].reqdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719281_reqdate" data-validate="date" size="11">
294
						<img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td>
295
					</tr>
296
					<tr>
297
						<th>Buchungsdatum Beleg</th>
298
						<td><input value="" name="filter.item_type_matches[].transdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719282_transdate" data-validate="date" size="11">
299
						<img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td>
300
					</tr>
301
					<tr>
302
						<th class="caption" colspan="2">Prices &amp; Discounts</th>
303
					</tr>
304
					<tr>
305
						<th>Preisgruppe</th>
306
						<td>
307
						<select name="filter.item_type_matches[].pricegroup" id="filter_item_type_matches5719283_pricegroup" class="wi-normal">
308
							<option value=""></option>
309
							<option value="0">keine Preisgruppe</option>
310
							<option value="27267">50 CHF pro Stunde</option>
311
							<option value="27268">100 CHF pro Stunde</option>
312
						</select>
313
						<br>
314
						</td>
315
					</tr>
316
					<tr>
317
						<th>Preis</th>
318
						<td><input value="" name="filter.price:number" type="text" id="filter_price_number" class="wi-normal" size="20">
319
						</td>
320
					</tr>
321
					<tr>
322
						<th>Abschlag</th>
323
						<td><input value="" name="filter.reduction:number" type="text" id="filter_reduction_number" class="wi-normal" size="20">
324
						</td>
325
					</tr>
326
					<tr>
327
						<th>Rabatt</th>
328
						<td><input value="" name="filter.discount:number" type="text" id="filter_discount_number" class="wi-normal" size="20">
329
						</td>
330
					</tr>
331
					<tr>
332
						<th class="caption" colspan="2">Status</th>
333
					</tr>
334
					<tr>
335
						<th>Priorität</th>
336
						<td>
337
						<select name="filter.priority" id="filter_priority" class="wi-normal">
338
							<option value="" selected="">Alle</option>
339
							<option value="3">Normal</option>
340
							<option value="4">Override</option>
341
						</select>
342
						</td>
343
					</tr>
344
					<tr>
345
						<th>Ungültig</th>
346
						<td>
347
						<select name="filter.obsolete" id="filter_obsolete" class="wi-normal">
348
							<option value="">Beide</option>
349
							<option value="0" selected="">Gültig</option>
350
							<option value="1">Ungültig</option>
351
						</select>
352
						</td>
353
					</tr>
354
				</tbody>
355
			</table>
356
			<div class="col list">
357
				<h3 class="caption">Hat Regeltypen</h3>
358
				<div>
359
					<input value="part" name="filter.has_item_type[]" id="filter_has_item_type5719284" type="checkbox">
360
					<label for="filter_has_item_type5719284">Ware</label>
361
					<br>
362
					<input value="customer" name="filter.has_item_type[]" id="filter_has_item_type5719285" type="checkbox">
363
					<label for="filter_has_item_type5719285">Kunde</label>
364
					<br>
365
					<input value="vendor" name="filter.has_item_type[]" id="filter_has_item_type5719286" type="checkbox">
366
					<label for="filter_has_item_type5719286">Lieferant</label>
367
					<br>
368
					<input value="business" name="filter.has_item_type[]" id="filter_has_item_type5719287" type="checkbox">
369
					<label for="filter_has_item_type5719287">Kunden-/Lieferantentyp</label>
370
					<br>
371
					<input value="partsgroup" name="filter.has_item_type[]" id="filter_has_item_type5719288" type="checkbox">
372
					<label for="filter_has_item_type5719288">Warengruppe</label>
373
					<br>
374
					<input value="qty" name="filter.has_item_type[]" id="filter_has_item_type5719289" type="checkbox">
375
					<label for="filter_has_item_type5719289">Menge</label>
376
					<br>
377
					<input value="reqdate" name="filter.has_item_type[]" id="filter_has_item_type5719290" type="checkbox">
378
					<label for="filter_has_item_type5719290">Liefertermin</label>
379
					<br>
380
					<input value="transdate" name="filter.has_item_type[]" id="filter_has_item_type5719291" type="checkbox">
381
					<label for="filter_has_item_type5719291">Buchungsdatum</label>
382
					<br>
383
					<input value="pricegroup" name="filter.has_item_type[]" id="filter_has_item_type5719292" type="checkbox">
384
					<label for="filter_has_item_type5719292">Preisgruppe</label>
385
					<br>
386
				</div>
387
			</div>
388
			<input value="name" name="sort_by" id="sort_by" type="hidden">
389
			<input value="0" name="sort_dir" id="sort_dir" type="hidden">
390
			<input value="1" name="page" id="page" type="hidden">
391
			<div class="buttons">
392
				<input value="Reset Filter" class="neutral" type="reset" onclick="$('#search_form').resetForm()">
393
			</div>
394
		</div>
395
<!-- /.filter-toggle-panel -->
396
	</div>
397
<!-- /.filter_toggle -->
398
</div>
399

  
400

  
401

  
402

  
403

  
404
</form>
405
</body>
406
</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">
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>
... Dieser Diff wurde abgeschnitten, weil er die maximale Anzahl anzuzeigender Zeilen überschreitet.

Auch abrufbar als: Unified diff