various styling fixes

package.json

@@ -33,6 +33,7 @@
     "eslint": "^3.15.0",
     "html-webpack-plugin": "^2.28.0",
     "nodemon": "^1.11.0",
+    "react-collapsible": "^1.2.1",
     "styled-components": "^1.4.3",
     "webpack": "^2.2.1",
     "webpack-dashboard": "^0.3.0",

webapp/static/styles.css

@@ -1,8 +1,33 @@
 label,
 label input,
-label textarea {
+label textarea,
+label select {
     display: block;
     width: 240px;
+    margin-bottom: 12px;
+}
+
+.Collapsible {
+    margin-bottom: 12px;
+}
+
+.Collapsible__contentInner label,
+.Collapsible__contentInner label input,
+.Collapsible__contentInner label textarea,
+.Collapsible__contentInner label select {
+    width: 200px;
+}
+
+.Collapsible__contentInner {
+    padding-top: 12px;
+    padding-left: 12px;
+}
+
+.Collapsible__trigger.is-closed:before {
+    content: "> ";
+}
+.Collapsible__trigger.is-open:before {
+    content: "< ";
 }
 
 textarea.address {
@@ -14,7 +39,9 @@ textarea.body {
 }
 
 button {
-    margin-top: 12px;
+    display: block;
+    margin-top: 1em;
+    margin-bottom: 12px;
 }
 
 .home {
@@ -25,6 +52,3 @@ button {
     padding: 12px;
 }
 
-embed {
-    flex: 1 100%;
-}

webapp/views/components/Input.js

@@ -6,7 +6,9 @@ export default function(props) {
             {props.text}:
             <input
                 class={props.name}
-                onchange={props.onchange.bind(null, props.name)} type="text"
+                type="text"
+                placeholder={props.placeholder}
+                onchange={props.onchange.bind(null, props.name)}
             />
         </label>
     );

webapp/views/components/LetterOptions.js

@@ -1,61 +1,98 @@
 import { h } from 'preact';
+import Collapsible from 'react-collapsible';
 import Input from './Input';
 import TextAreaInput from './TextAreaInput';
+import Select from './Select';
+
+const EXAMPLE_ADDRESS="Max Mustermann\nMusterstr. 73\n12345 Musterstadt";
 
 export default function(props) {
+    const templateTypeOptions = [
+        {
+            value: 'brief-fam',
+            name: "Familie"
+        },
+        {
+            value: 'brief-valerie',
+            name: "Valerie"
+        },
+        {
+            value: 'brief-rain',
+            name: "Rain Baumeister"
+        },
+        {
+            value: 'brief-thomas',
+            name: "Thomas"
+        }
+    ];
+
     return (
         <div>
+            <Select
+                name="template"
+                text="Vorlage"
+                onchange={props.onChange}
+                value={props.template}
+                options={templateTypeOptions}
+            />
+
             <TextAreaInput
                 name="address"
                 text="Adresse"
+                placeholder={EXAMPLE_ADDRESS}
                 onchange={props.onChange}
                 value={props.address}
             />
             <Input
                 name="subject"
                 text="Betreff"
+                placeholder="Betreffzeile"
                 onchange={props.onChange}
                 value={props.subject}
             />
-            <Input
+            <Collapsible trigger="Bezugszeichenzeile">
-                name="yourRef"
+                <Input
-                text="Ihr Zeichen"
+                    name="yourRef"
-                onchange={props.onChange}
+                    text="Ihr Zeichen"
-                value={props.yourRef}
+                    onchange={props.onChange}
-            />
+                    value={props.yourRef}
-            <Input
+                />
-                name="yourMail"
+                <Input
-                text="Ihr Schreiben vom"
+                    name="yourMail"
-                onchange={props.onChange}
+                    text="Ihr Schreiben vom"
-                value={props.yourMail}
+                    onchange={props.onChange}
-            />
+                    value={props.yourMail}
-            <Input
+                />
-                name="customer"
+                <Input
-                text="Kundernummer"
+                    name="customer"
-                onchange={props.onChange}
+                    text="Kundernummer"
-                value={props.customer}
+                    onchange={props.onChange}
-            />
+                    value={props.customer}
-            <Input
+                />
-                name="invoice"
+                <Input
-                text="Rechnung"
+                    name="invoice"
-                onchange={props.onChange}
+                    text="Rechnung"
-                value={props.invoice}
+                    onchange={props.onChange}
-            />
+                    value={props.invoice}
-            <Input
+                />
-                name="yourMail"
+                <Input
-                text="Ihr Schreiben vom"
+                    name="yourMail"
-                onchange={props.onChange}
+                    text="Ihr Schreiben vom"
-                value={props.yourMail}
+                    onchange={props.onChange}
-            />
+                    value={props.yourMail}
+                />
+            </Collapsible>
             <Input
                 name="date"
                 text="Datum"
+                placeholder="Heute"
                 onchange={props.onChange}
                 value={props.date}
             />
             <Input
                 name="opening"
                 text="Anrede"
+                placeholder="Sehr geehrte Damen und Herren"
                 onchange={props.onChange}
                 value={props.opening}
             />
@@ -63,11 +100,13 @@ export default function(props) {
                 name="body"
                 text="Brieftext"
                 onchange={props.onChange}
+                placeholder="Inhalt des Briefes"
                 value={props.body}
             />
             <Input
                 name="closing"
                 text="Grußformel"
+                placeholder="Mit freundlichen Grüßen"
                 onchange={props.onChange}
                 value={props.closing}
             />

webapp/views/components/Preview.js

@@ -20,6 +20,6 @@ export default props => {
     }
 
     return (
-        <iframe src={props.pdfUrl} style="width:718px; height:700px;" frameborder="0"></iframe>
+        <iframe src={props.pdfUrl} style="width:700px; height:1050px;" frameborder="0"></iframe>
     );
 };

webapp/views/components/Select.js

@@ -0,0 +1,27 @@
+import { h } from 'preact';
+
+export default (props) => {
+
+    const { options = [] } = props;
+    const optionsMarkup = options.map(option => {
+        return (
+            <option
+                label={option.name}
+                value={option.value}
+                selected={props.value === option.value}
+            />
+        );
+    });
+
+    return (
+        <label>
+            {props.text}:
+            <select
+                class={props.name}
+                onchange={props.onchange.bind(null, props.name)}
+            >
+                {optionsMarkup}
+            </select>
+        </label>
+    );
+}

webapp/views/components/TextAreaInput.js

@@ -6,6 +6,7 @@ export default function(props) {
             {props.text}:
             <textarea
                 class={props.name}
+                placeholder={props.placeholder}
                 onchange={props.onchange.bind(null, props.name)}
             />
         </label>

webapp/views/pages/Home.js

@@ -14,9 +14,9 @@ class Home extends Component {
             <div className="home">
                 <div>
                     <LetterOptions onChange={this._onChange.bind(this)} />
-                    <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
                 </div>
                 <div>
+                    <Button onClick={this._onGenerate.bind(this)} text="Backe PDF"/>
                     <Preview
                         pdfUrl={this.state.pdfUrl}
                         pdfIsLoading={this.state.pdfIsLoading}