commit 274d36ead9e239f1fd03b6c36ecf3a7007e68c6a parent 18e322a5ffb5eac37d6dc625d29b0e79009bd08f Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Wed, 14 Aug 2019 08:40:25 +0700 moving to my PC Diffstat:
| M | src/App.re | | | 45 | ++++++++++++++++++++++++++++++++++++++++++--- |
| D | src/CurVi.re | | | 38 | -------------------------------------- |
| A | src/CurViScene.re | | | 36 | ++++++++++++++++++++++++++++++++++++ |
| A | src/List.re | | | 26 | ++++++++++++++++++++++++++ |
| M | src/Spoiler.re | | | 7 | ++++--- |
| A | src/Styled.re | | | 30 | ++++++++++++++++++++++++++++++ |
| A | src/UsesScene.re | | | 6 | ++++++ |
7 files changed, 144 insertions(+), 44 deletions(-)
diff --git a/src/App.re b/src/App.re @@ -1,8 +1,47 @@ +module Styles = { + open Css; + + let container = + style([ + minHeight(vh(100.0)), + flexGrow(1.0), + flexShrink(1.0), + flexBasis(`auto), + display(`flex), + flexDirection(`column), + textAlign(`left), + padding(em(1.0)), + paddingTop(px(0)), + paddingBottom(px(0)), + fontSize(em(0.9)), + ]); + + let main = + style([ + flexGrow(1.0), + width(`percent(100.0)), + marginTop(px(0)), + marginBottom(px(0)), + marginLeft(`auto), + marginRight(`auto), + maxWidth(em(50.0)), + ]); +}; + [@react.component] let make = () => { let url = ReasonReact.Router.useUrl(); - switch (url.path) { - | _ => <CurVi /> - }; + let content = () => + switch (url.path) { + | ["/uses"] => <CurViScene /> + | _ => <CurViScene /> + }; + + <div className=Styles.container> + <main className=Styles.main> + <Styled dark=true /> + {content()} + </main> + </div>; }; diff --git a/src/CurVi.re b/src/CurVi.re @@ -1,38 +0,0 @@ -type state = { - opened: string, - dark: bool, -}; -type section = - | Quest - | Info - | Contact; -type action = - | ToggleDark - | Open(section); - -let convert = (s: section) => - switch (s) { - | Quest => "quest" - | Info => "info" - | Contact => "contact" - }; -let initialState = {opened: "quest", dark: false}; - -[@react.component] -let make = () => { - let (_, _) = - React.useReducer( - (state, action) => - switch (action) { - | ToggleDark => {...state, dark: !state.dark} - | Open(toOpen) => {...state, opened: convert(toOpen)} - }, - initialState, - ); - - <div> - <span> - <Spoiler content={ReasonReact.string("Hello")} title="Yeay" /> - </span> - </div>; -}; diff --git a/src/CurViScene.re b/src/CurViScene.re @@ -0,0 +1,36 @@ +type state = { + opened: string, + dark: bool, +}; +type section = + | Quest + | Info + | Contact; +type action = + | ToggleDark + | Open(section); + +let convert = (s: section) => + switch (s) { + | Quest => "quest" + | Info => "info" + | Contact => "contact" + }; +let initialState = {opened: "quest", dark: false}; + +[@react.component] +let make = () => { + let (_, _) = + React.useReducer( + (state, action) => + switch (action) { + | ToggleDark => {...state, dark: !state.dark} + | Open(toOpen) => {...state, opened: convert(toOpen)} + }, + initialState, + ); + + <React.Fragment> + <Spoiler content={ReasonReact.string("Hello")} title="Yeay" /> + </React.Fragment>; +}; diff --git a/src/List.re b/src/List.re @@ -0,0 +1,26 @@ +module Styles = { + open Css; + let ul = style([ + marginLeft(em(2.5)), + marginTop(em(0.8)), + paddingLeft(px(0)), + /* listStyle((`outside, `none)), */ + ]); +} + +type listContent = { + text: ReasonReact.reactElement, + customClass: string, +}; + +[@react.component] +let make = (~content: list(listContent)) => { + let contentMapped = List.map((item, key) => { + <li key={key}> + <p></p> + </li> + }, content); + <ul className=Styles.ul> + <li><span>{ReasonReact.string("Hell")}</span></li> + </ul> +}; diff --git a/src/Spoiler.re b/src/Spoiler.re @@ -3,6 +3,7 @@ module Styles = { let summary = style([ + fontSize(em(1.0)), marginTop(em(1.0)), marginBottom(em(1.0)), marginLeft(px(0)), @@ -24,7 +25,7 @@ type action = [@react.component] let make = (~content: ReasonReact.reactElement, ~title: string) => - <summary className=Styles.summary> - <details> {ReasonReact.string(title)} </details> + <details> + <summary className=Styles.summary> {ReasonReact.string(title)} </summary> content - </summary>; + </details>; diff --git a/src/Styled.re b/src/Styled.re @@ -0,0 +1,30 @@ +open Utils; + +[@react.component] +let make = (~dark: bool) => { + let backgroundColor = dark ? "#1b1b1b" : "#fdfdfd"; + let textColor = dark ? "#fdfdfd" : "#1b1b1b"; + let htmlStyle = "html { height: 100vh; background-color:" ++ backgroundColor ++ "; color:" ++ textColor ++ "; }"; + let bodyStyle = {j| +body { + display: flex; + min-height: 100vh; + flex-direction: column; + margin: 0; + padding: 0; + line-height: 1.8em; + letter-spacing: -0.01em; + word-wrap: break-word; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + |j}; + let miscStyle = {j| +::selection { + background-color: #79d688; +} + |j}; + let setStyle = htmlStyle ++ bodyStyle ++ miscStyle; + + <style dangerouslySetInnerHTML={dangerousHtml(setStyle)} /> +}; diff --git a/src/UsesScene.re b/src/UsesScene.re @@ -0,0 +1,6 @@ +[@react.component] +let make = () => { + <React.Fragment> + <span>{ReasonReact.string("Hi")}</span> + </React.Fragment> +}