changed style and meta data.

src/MetaData.js

@@ -1,13 +1,14 @@
 import React from 'react'
 
-class MetaInformationForm extends React.Component {
+class MetaDataForm extends React.Component {
   constructor () {
     super()
     this.changeType = this.changeType.bind(this)
   }
 
   changeType (event) {
-    this.type = this.sali
+    console.log(this.sali.value)
+    this.props.data.type = this.sali.value
   }
 
   render () {
@@ -41,22 +42,35 @@ class MetaInformationForm extends React.Component {
         </fieldset>
       )
     }
+    if (typeof data.type === 'undefined') {
+      data.type = 'text'
+    }
 
     return (
       <form>
-        <select value={data.type} ref={(input) => { this.sali = input }} onChange={changeType}>
+        <select value={data.type} ref={(input) => { this.sali = input }} onChange={this.changeType}>
           <option value='text'>Text</option>
           <option value='image'>Image</option>
           <option value='link'>Link</option>
           <option value='file'>File</option>
         </select>
-        {metaElements[type]}
+        {metaElements[data.type]}
       </form>
     )
   }
 }
 
-class MetaInformationDisplay extends React.Component {
+class MetaDataDisplay extends React.Component {
+  constructor () {
+    super()
+    this.changeType = this.changeType.bind(this)
+  }
+
+  changeType (event) {
+    console.log(event, this.sali)
+    this.props.data.type = this.sali.value
+  }
+
   render () {
     const { data } = this.props
     const metaElements = {
@@ -90,7 +104,7 @@ class MetaInformationDisplay extends React.Component {
 
     return (
       <form>
-        <select value={data.type} ref={(input) => { this.sali = input }} onChange={changeType}>
+        <select value={data.type} ref={(input) => { this.sali = input }} onChange={this.changeType}>
           <option value='text'>Text</option>
           <option value='image'>Image</option>
           <option value='link'>Link</option>
@@ -102,18 +116,18 @@ class MetaInformationDisplay extends React.Component {
   }
 }
 
-class MetaInformation extends React.Component {
+class MetaData extends React.Component {
   render () {
     const { method, data } = this.props
     if (method === 'form') {
       return (
-        <MetaInformationForm method={method} data={data} />
+        <MetaDataForm method={method} data={data} />
       )
     }
     return (
-      <MetaInformationDisplay method={method} data={data} />
+      <MetaDataDisplay method={method} data={data} />
     )
   }
 }
 
-export default MetaInformation
+export default MetaData

src/css/style.css

@@ -76,22 +76,21 @@ button {
   cursor: pointer;
 }
 /** Appearance */
-@import url("https://fonts.googleapis.com/css?family=Roboto");
+@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");
 .clearfix {
   overflow: auto;
   zoom: 1;
 }
 * {
   font-family: 'Roboto', sans-serif;
-  font-size: 18;
+  font-size: 14px;
   box-sizing: border-box;
 }
-h1,
-h2,
-h3,
-h4,
-th {
-  font-family: 'Roboto', sans-serif;
+h1 {
+  font-size: 48px;
+  font-weight: 100;
+  font-style: normal;
+  margin: 0.5em 0 0.3em 0;
 }
 code {
   font-family: 'Source Code Pro', monospace;

src/css/style.styl

@@ -5,7 +5,9 @@
 //@import url('https://fonts.googleapis.com/css?family=Proza+Libre')
 //@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro')
 //@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans')
-@import url('https://fonts.googleapis.com/css?family=Roboto')
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
+//@import url('https://fonts.googleapis.com/css?family=News+Cycle')
+//@import url('https://fonts.googleapis.com/css?family=Wire+One');
 
 .clearfix
   overflow auto
@@ -14,15 +16,22 @@
   //font-family 'Mukta Vaani', sans-serif
   //font-family 'Alegreya Sans', sans-serif; 
   font-family 'Roboto', sans-serif
-  font-size 18
+  font-size 14px
   box-sizing border-box
 h1, h2, h3, h4, th
-  font-family 'Roboto', sans-serif
+  //font-family 'Alegreya Sans', sans-serif; 
+  //font-family 'Roboto', sans-serif
+  //font-family 'News Cycle', sans-serif
   //font-family 'Proza Libre', sans-serif
+  //font-family: 'Wire One', sans-serif;
+h1
+  font-size 48px
+  font-weight 100
+  font-style normal
+  margin 0.5em 0 0.3em 0 
 code
   font-family 'Source Code Pro', monospace
 p, input
-  //font-family: 'Alegreya Sans', sans-serif;
   font-family 'Roboto', sans-serif
 
 /** Main layout (Flexbox-Design) */

src/project/components/EditProject.js

@@ -1,15 +1,20 @@
 import React from 'react'
+import MetaData from 'MetaData'
 
 class EditProjectForm extends React.Component {
   render () {
+    let a = {}
     return (
-      <form className='app-form'>
-        <input type='text' ref={input => { this.projectName = input }} placeholder='Project ID' />
-        <input type='text' ref={input => { this.projectName = input }} placeholder='Project Name' />
-        <input type='text' ref={input => { this.projectName = input }} placeholder='Project Description' />
-        <input type='text' ref={input => { this.projectName = input }} placeholder='Project Manager' />
-        <button type='submit'>Save</button>
-      </form>
+      <div>
+        <form className='app-form'>
+          <input type='text' ref={input => { this.projectName = input }} placeholder='Project ID' />
+          <input type='text' ref={input => { this.projectName = input }} placeholder='Project Name' />
+          <input type='text' ref={input => { this.projectName = input }} placeholder='Project Description' />
+          <input type='text' ref={input => { this.projectName = input }} placeholder='Project Manager' />
+          <button type='submit'>Save</button>
+        </form>
+        <MetaData method='form' data={a} />
+      </div>
     )
   }
 }

src/project/initialData.js

@@ -2,34 +2,22 @@ export const projectList = [{
   id: 'JU_CSD',
   name: 'Jungfrau',
   description: '9th generation GNSS receiver',
-  manager: 'Thomas Brauner',
-  versions: [
-    { name: 'MPW033C', date: '11.12.2015' },
-    { name: 'Production TO', date: '10.03.2017' }
-  ],
-  documents: [
-    { name: 'Specification', file: 'ju_spec.docx' },
-    { name: 'Pin List', file: 'ju_pin_list.xlsx' },
-    { name: 'Characterization PCB', file: 'ju_char_bord.brd' }
-  ],
-  pictures: [
-    { name: 'Jungfrau Logo', file: 'jungfrau.png' }
+  meta: [
+    { type: 'text', key: 'Project manager', value: 'Thomas Brauner' },
+    { type: 'link', url: 'ju_spec.docx', description: 'Specification' },
+    { type: 'link', url: 'ju_pin_list.xlsx', description: 'Pin List' },
+    { type: 'link', url: 'ju_char_bord.brd', description: 'Characterization PCB' },
+    { type: 'image', url: 'jungfrau.png', description: 'Jungfrau Logo' }
   ]
 }, {
   id: 'TI_CSD',
   name: 'Titlis',
   description: '7th generation GNSS receiver',
-  manager: 'Luca Plutino',
-  versions: [
-    { name: 'MPWA', date: '11.12.2013' },
-    { name: 'Production TO', date: '10.03.2015' }
-  ],
-  documents: [
-    { name: 'Specification', file: 'ti_spec.docx' },
-    { name: 'Pin List', file: 'ti_pin_list.xlsx' },
-    { name: 'Characterization PCB', file: 'ti_char_bord.brd' }
-  ],
-  pictures: [
-    { name: 'Titlis Logo', file: 'titlis.png' }
+  meta: [
+    { type: 'text', key: 'Project manager', value: 'Luca Plutino' },
+    { type: 'link', url: 'ti_spec.docx', description: 'Specification' },
+    { type: 'link', url: 'ti_pin_list.xlsx', description: 'Pin List' },
+    { type: 'link', url: 'ti_char_bord.brd', description: 'Characterization PCB' },
+    { type: 'image', url: 'Titlis.png', description: 'Titlis Logo' }
   ]
 }]

src/registermap/components/registermap.css

@@ -1,17 +0,0 @@
-table,
-tbody,
-thead {
-  border-collapse: collapse;
-}
-table tr,
-tbody tr,
-thead tr,
-table th,
-tbody th,
-thead th,
-table td,
-tbody td,
-thead td {
-  border-collapse: collapse;
-  border: 1px solid #dcdef2;
-}

src/registermap/components/registermap.styl

@@ -1,5 +0,0 @@
-table, tbody, thead
-	border-collapse collapse
-	tr, th, td
-		border-collapse collapse
-		border 1px solid #DCDEF2