Switch to flexbox styling, add some css tweaks

src/css/override.css

@@ -1,3 +1,7 @@
+body {
+  width: 600px;
+}
+
 .appheader-logo-enpit {
   width: 106px;
   height: 40px;
@@ -28,6 +32,7 @@
   height: 256px;
 }
 
+/* the following is not recommended - directly declare oj-flex classes in your html instead */
 .artist-name {
   display: -ms-flexbox;
 	display: -webkit-flex;
@@ -46,3 +51,7 @@
   margin-bottom: 2px;
   font-weight: bold;
 }
+
+div#add-artist-container .oj-flex .oj-flex-item:nth-child(2) {
+  margin-left: 1em;
+}

src/js/views/add-artist.html

@@ -1,63 +1,59 @@
 <h1>Interpret hinzufügen</h1>
-<div class="oj-form oj-md-odd-cols-4 oj-md-labels-inline">
-    <div class="oj-row">
-        <div class="oj-col">
-            <label for="nameControl">Name:<sup>*</sup></label>
-        </div>
-        <div class="oj-col">
-            <input name="nameControl"
-                required
-                placeholder="Name des Interpreten"
-                data-bind="ojComponent: {
+<div id="add-artist-container" class="oj-form-layout">
+    <div class="oj-form">
+        <div class="oj-flex">
+            <div class="oj-flex-item">
+                <label for="nameControl">Name:<sup>*</sup></label>
+                <input id="nameControl" required placeholder="Name des Interpreten" data-bind="ojComponent: {
                     component: 'ojInputText',
                     value: name,
                     required: true,
                     invalidComponentTracker: tracker,
                     rootAttributes: {style:'max-width:100%'}
                 }">
+            </div>
         </div>
-    </div>
-    <div class="oj-row">
-        <div class="oj-col">
-            <label for="genreControl">Genre:<sup>*</sup></label>
-        </div>
-        <div class="oj-col">
-            <select name="genreControl"
-                required
-                data-bind="ojComponent: {
+        <div class="oj-flex">
+            <div class="oj-flex-item">
+                <label for="genreControl">Genre:<sup>*</sup></label>
+                <select id="genreControl" required data-bind="ojComponent: {
                     component: 'ojSelect',
-                    value: genre,
-                    rootAttributes: {style:'max-width:20em'}}">
+                    value: genre
+                }">
                 <option value="rock">Rock</option>
                 <option value="pop">Pop</option>
                 <option value="schlager">Schlager</option>
             </select>
-        </div>
-    </div>
-    <div class="oj-row">
-        <div class="oj-col">
-            <label for="yearControl">Gründungsjahr:</label>
-        </div>
-        <div class="oj-col">
-            <input name="yearControl"
-                data-bind="ojComponent: {
+            </div>
+            <div class="oj-flex-item">
+                <label for="yearControl">Gründungsjahr:</label>
+                <input id="yearControl" data-bind="ojComponent: {
                     component: 'ojInputNumber',
                     value: year,
                     required: true,
                     invalidComponentTracker: tracker,
-                    rootAttributes: {style:'max-width:100%'}
+                    max: 2050,
+                    min: 1800,
+                    converter: {
+                        type: 'number',
+                        options: {
+                            style: 'decimal',
+                            roundingMode: 'HALF_DOWN',
+                            maximumFractionDigits: 0,
+                            useGrouping: false
+                        }
+                    }
                 }">
+            </div>
         </div>
-    </div>
-    <div class="oj-row">
-        <div class="oj-col">
-            <button id="add-artist-button"
-                class="oj-button oj-button-confirm"
-                data-bind="click: save, ojComponent: {
+        <div class="oj-flex">
+            <div class="oj-flex-item">
+                <button id="add-artist-button" class="oj-button oj-button-confirm" data-bind="click: save, ojComponent: {
                     component: 'ojButton',
                     label: 'Speichern'
                 }">
             </button>
+            </div>
         </div>
     </div>
 </div>