Bad date selector

RawToast · Mar 30, 2018 · b394fc9 · b394fc9
1 parent bf3e6dc
commit b394fc9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 34 deletions.
diff --git a/dokusho/src/app/DateSelector.re b/dokusho/src/app/DateSelector.re
@@ -0,0 +1,10 @@
+let component = ReasonReact.statelessComponent("DateSelector");
+
+let make = (~today: string, _children) => {
+  ...component,
+  render: (_) =>
+    <div className="dateselector"> <ReactToolbox.DatePicker 
+        label="Today"
+        /> 
+    </div>
+};
diff --git a/dokusho/src/app/Dokusho.re b/dokusho/src/app/Dokusho.re
@@ -40,7 +40,9 @@ module Dokusho {
                 onSubmit=(self.reduce((text) => AddEntry(self.state.selectedEntry, int_of_string(text))))
                 />
               <PageTypeSelection onChangeSelect=(self.reduce(selected => ChangeSelection(selected))) />
-            </div>
+
+              <DateSelector today="" />  
+          </div>
 
             <Entries entries=(List.hd(self.state.readingData.days).entries) />
 

diff --git a/dokusho/src/app/Input.re b/dokusho/src/app/Input.re
@@ -31,14 +31,13 @@ module Input = {
                 reduce(() => {text: txt, selection: state.selection})()
               })
               onKeyDown=((evt) =>
-                  if (ReactEventRe.Keyboard.key(evt) == "Enter") {
+                if (ReactEventRe.Keyboard.key(evt) == "Enter") {
                   onSubmit(state.text);
                   (reduce(() => {text: "", selection: state.selection }))()
-                  }
+                }
               )
             />
         </div>
-
         }
     };
   };
diff --git a/dokusho/src/styles/index.css b/dokusho/src/styles/index.css
@@ -1,57 +1,65 @@
 /* @embed base.css */
 /* reset */
-body, div {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  flex-shrink: 0;
+
+.dateselector {
+  flex-direction: box;
 }
 
 body {
-font: 14px "Century Gothic", Futura, sans-serif;
+  font: 14px "Century Gothic", Futura, sans-serif;
 }
 
 #root {
-align-items: center;
-justify-content: center;
-position: absolute;
-top: 0;
-left: 0;
-bottom: 0;
-right: 0;
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 
 .app {
-width: 280px;
-max-height: 450px;
-flex: 1;
-box-shadow: 0 2px 15px #ccc;
-margin: 10px;
-align-items: stretch;
-}
+  flex-direction: column;
+
+  width: 280px;
+  max-height: 450px;
+  flex: 1;
+  box-shadow: 0 2px 15px #ccc;
+  margin: 10px;
+  align-items: stretch;
+  }
 
 .title {
-font-size: 20px;
-align-items: center;
-padding: 20px;
+  display: flex;
+  flex-direction: column;
+  font-size: 20px;
+  align-items: center;
+  padding: 20px;
 }
 
 .entries {
-text-align: center;
-flex: 1;
-overflow: auto;
+  flex-direction: column;
+  text-align: center;
+  flex: 1;
+  overflow: auto;
 }
 
 .entry {
-  display: flex;
+  flex-direction: column;
   padding: 5px 10px;
   align-items: center;
-  flex-direction: col;
 }
 
 .footer {
-align-items: center;
-padding: 5px 10px 20px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+  padding: 5px 10px 20px;
 }
 
 /* input[type="checkbox"] {