From b390575041af4964a45caf60dbceeef7fcee6ef0 Mon Sep 17 00:00:00 2001 From: Joseph Date: Mon, 4 Apr 2022 17:14:29 -0230 Subject: [PATCH 1/2] fixed home page styling --- public/app.css | 8 ++++---- src/simplified/home.tsx | 2 +- src/simplified/selectView.tsx | 12 +++++------- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/public/app.css b/public/app.css index 82340a2..25c67d9 100644 --- a/public/app.css +++ b/public/app.css @@ -466,18 +466,18 @@ a { /* BUTTONS */ .navigate { - background: linear-gradient(to left, white 50%, #2a6b92 50%) right; + background: linear-gradient(to left, white 50%, #2D2E74 50%) right; } .navigate-reverse { - background: linear-gradient(to right, white 50%, #2a6b92 50%) left; + background: linear-gradient(to right, white 50%, #2D2E74 50%) left; } .navigate, .navigate-reverse { background-size: 200%; transition: .3s ease-out; - border: 2px solid #2a6b92; - color: #2a6b92; + border: 2px solid #2D2E74; + color: #2D2E74; text-align: center; text-decoration: none; display: inline-block; diff --git a/src/simplified/home.tsx b/src/simplified/home.tsx index 1437515..7a9f37b 100644 --- a/src/simplified/home.tsx +++ b/src/simplified/home.tsx @@ -53,7 +53,7 @@ const BasicHomeView = () => { listOfHomePage.map( (resource, i) => { return ( -
+

{resource.header}

{

What Is The Card Type?

- + { friendlyResourceRoot.RESOURCES @@ -53,13 +53,11 @@ const SelectView = () => { ) } - - +
); } From 0a2cc1f8090bd15abd314fddbf2e053f43ee5003 Mon Sep 17 00:00:00 2001 From: Joseph Date: Tue, 5 Apr 2022 09:48:49 -0230 Subject: [PATCH 2/2] refactoring and fixing home page styling and layout --- public/app.css | 11 ++- src/simplified/baseCard.tsx | 25 ++++--- src/simplified/home.tsx | 20 ++--- src/simplified/homeCard.tsx | 133 ---------------------------------- src/simplified/selectView.tsx | 3 +- 5 files changed, 39 insertions(+), 153 deletions(-) delete mode 100644 src/simplified/homeCard.tsx diff --git a/public/app.css b/public/app.css index 25c67d9..f8aec98 100644 --- a/public/app.css +++ b/public/app.css @@ -896,4 +896,13 @@ a { border-bottom-style: solid; border-top-color: black; border-top-style: solid; -} \ No newline at end of file +} +.raise-card-animation:hover, +.raise-card-animation:focus{ + box-shadow: 0 0.5em 0.5em -0.4em var(--hover); + transform: translateY(-0.25em); + transition: 0.25s; + color: white; + +} + diff --git a/src/simplified/baseCard.tsx b/src/simplified/baseCard.tsx index bbee3b9..378b81f 100644 --- a/src/simplified/baseCard.tsx +++ b/src/simplified/baseCard.tsx @@ -24,7 +24,8 @@ interface BaseCardProps { hideHeader:boolean, cardImage?:any, IconColor?:string, - + IconSize?:string, + titleSize?:string } export const BaseCard = (props: BaseCardProps) => { @@ -40,12 +41,11 @@ export const BaseCard = (props: BaseCardProps) => { }, [props.wait]); - const content = props.content; let headerPadding = {}; if (props.title == "") headerPadding = {padding:"7px"}; - const resourceType = friendlyToFhir(props.header); - + const resourceType = (props.header == "Questionnaire")? "Questionnaire":friendlyToFhir(props.header); + return ( { classNames="res-card" > ) => { - if (e.target instanceof Element && e.target.tagName !== "svg" && e.target.tagName !== "path" && props.clickable) { + if (e.target instanceof Element && e.target.tagName !== "svg" && e.target.tagName !== "path" && props.clickable && resourceType!='') { setShow(false); if (State.get().bundle?.resources.length) { State.get().bundle.set("pos", State.get().bundle.resources.length-1); @@ -98,12 +99,18 @@ export const BaseCard = (props: BaseCardProps) => { State.emit("set_bundle_pos", State.get().bundle.resources.length-1); navigate(`/edit/${State.get().bundle.resources.length-1}`); } + if(props.title == 'Create Cards'){ + navigate('/create') + } + if(props.title == 'View Cards'){ + navigate('/') + } }} > - + @@ -112,13 +119,13 @@ export const BaseCard = (props: BaseCardProps) => { - {props.title} + {props.title} {content} - + ); - } \ No newline at end of file + } diff --git a/src/simplified/home.tsx b/src/simplified/home.tsx index 7a9f37b..d46e10d 100644 --- a/src/simplified/home.tsx +++ b/src/simplified/home.tsx @@ -8,7 +8,6 @@ import State from "../state"; import { Container, Row, Col, Card } from "react-bootstrap"; import friendlyNames from "../../friendly-names.json"; import { ACTIVITY_DEFINITION, allFormElems, friendlyResourceRoot, getBorderPropsForType, getFormElementListForResource } from "./nameHelpers"; -import { HomeCard } from "./homeCard"; console.log(friendlyResourceRoot.RESOURCES) @@ -35,18 +34,17 @@ const listOfHomePage = [ 'title':'View Cards', 'cardImage':faGrid, 'cardColor':'sage-green', - 'textColor':'black', + 'textColor':'white', 'FHIR': '', } ] - +console.log(friendlyResourceRoot.RESOURCES[4].SELF.FHIR) const BasicHomeView = () => { return (

Home Page

- { @@ -56,16 +54,20 @@ const BasicHomeView = () => {

{resource.header}

- + profile={resource.profile} + />
); } diff --git a/src/simplified/homeCard.tsx b/src/simplified/homeCard.tsx deleted file mode 100644 index d2c0bb0..0000000 --- a/src/simplified/homeCard.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import {Card, Row} from "react-bootstrap"; -import {useState, useEffect} from "react"; -import { CSSTransition } from 'react-transition-group'; -import State, { SageUiStatus } from "../state"; -import { Color } from "react-bootstrap/esm/types"; -import { ACTIVITY_DEFINITION, friendlyToFhir, PLAN_DEFINITION, QUESTIONNAIRE } from "./nameHelpers"; -import { incrementNextId } from "../helpers/schema-utils"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faInfoCircle,faGrid,faBookMedical,faCirclePlus, IconDefinition } from '@fortawesome/pro-solid-svg-icons'; -import { useNavigate } from "react-router-dom"; - - - -interface HomeCardProps { - header?: string, - title: string, - cardText?:string, - content?: JSX.Element, - cardImage:any, - cardColor?:string, - bsBg?: string, - bsText?: Color | string, - bsBorder?: string, - FHIR: string, - profile?: string, - wait?: number, - clickable?: boolean, - link?: string, -} - - -export const HomeCard = (props: HomeCardProps) => { - const [show, setShow] = useState(false); - const navigate = useNavigate(); - - useEffect(() => { - const timeoutId = setTimeout(() => { - setShow(true); - }, props.wait); - return clearTimeout(timeoutId); - }, [props.wait]); - - - - const content = props.content; - let headerPadding = {}; - if (props.title == "") headerPadding = {padding:"7px"}; - const resourceType = props.FHIR; - - - console.log(props.profile) - return ( - - ) => { - - if (e.target instanceof Element && e.target.tagName !== "svg" && e.target.tagName !== "path" && props.clickable && resourceType!='') { - setShow(false); - if (State.get().bundle?.resources.length) { - State.get().bundle.set("pos", State.get().bundle.resources.length-1); - State.get().ui.set("openMode", "insert"); - } - const nextId = incrementNextId(); // Saving some trouble by using this -- we should decide on a standard way to generate unique URLs - const referencedResourceName = `${resourceType}-${State.get().CPGName}${nextId}`; - const referencedResourceUrl = `http://fhir.org/guides/${State.get().publisher}/${resourceType}/${referencedResourceName}`; - const json = { - resourceType: "Bundle", - entry: [ - { - resource: { - resourceType: resourceType, - name: referencedResourceName, - url: referencedResourceUrl, - meta: {profile: [props.profile]} - } - }, - { - resource: { - resourceType: PLAN_DEFINITION, - library: "", // r4 expects library as an array, cpg expects a single value (we are always using the cpg spec in basic view) - action: [ - { - title: "", - description: "", - condition: [], - definitionCanonical: referencedResourceUrl - } - ] - } - } - ] - }; - State.emit("load_json_resource", json); - // Set current editor position to the last resource (should be the PlanDefinition in `json` after the "load_json_resource" call) - State.emit("set_bundle_pos", State.get().bundle.resources.length-1); - navigate(`/edit/${State.get().bundle.resources.length-1}`); - } - if(props.title == 'Create Cards'){ - navigate('/create') - } - if(props.title == 'View Cards'){ - navigate('/') - } - - }} - > - - - - - - - FHIR Docs - - - - {props.title} - - - - - - - ); - } \ No newline at end of file diff --git a/src/simplified/selectView.tsx b/src/simplified/selectView.tsx index aa9bfb1..ae52b4f 100644 --- a/src/simplified/selectView.tsx +++ b/src/simplified/selectView.tsx @@ -34,7 +34,6 @@ const SelectView = () => { { wait={i * 25} clickable={true} profile={resource.DEFAULT_PROFILE_URI} + titleSize='15px' + IconSize= '50px' />
);