Skip to content

Commit ac5adc5

Browse files
haydenmcphaydenmcp
authored
Updated the summary page. (#445)
* Added background image and changed color scheme. * Added parallax to home page. Lots more to do but pushing progress. * Updated text color. * Added some homepage styling * Used div instead of sp-card for home page features * Modified some styling on home page. * Added more styling to home * Updated styling * Removed scroll from home page in favor of usage at the main component level. * Finished implementation of simple responsiveness, styled home for demos, moved nav menu items into navbar and attempted to create a more ux-friendly color-scheme. Foundations are set. More to do. * Widened width and height to 100% for base index and necessary children, introduced deep-card component, began modifying the summary page. * Added some card styling * Added computation of current and average sentiment score to front-end, fixed test error in deep-card * Added dynamic calculation of sentiment average
1 parent 814112a commit ac5adc5

17 files changed

+417
-199
lines changed

‎packages/deep-card/README copy.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Card Component
2+
3+
[![Vulnerabilities](https://snyk.io/test/github/ThinkDeepTech/thinkdeep/master/badge.svg?targetFile=packages/deep-card/package.json)](https://snyk.io/test/github/ThinkDeepTech/thinkdeep/master?targetFile=packages/deep-card/package.json)

‎packages/deep-card/deep-card.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* eslint-disable no-unused-vars */
2+
3+
import {html, LitElement, css} from 'lit';
4+
5+
/**
6+
* Card component.
7+
*/
8+
export class DeepCard extends LitElement {
9+
/**
10+
* Styles for lit component.
11+
*/
12+
static get styles() {
13+
return [
14+
css`
15+
:host {
16+
transition: box-shadow 0.3s;
17+
min-width: 60vw;
18+
max-width: 90vw;
19+
min-height: 22vh;
20+
width: var(--width, 90vw);
21+
height: var(--height, 22vh);
22+
border-radius: 5px;
23+
background-color: var(--background-color, white);
24+
}
25+
26+
:host(:hover) {
27+
box-shadow: 0 0 8px var(--shadow-color, gray);
28+
}
29+
30+
.header ::slotted(*) {
31+
margin-left: 15px;
32+
margin-top: 15px;
33+
}
34+
35+
.footer ::slotted(*) {
36+
margin-left: 15px;
37+
margin-bottom: 15px;
38+
margin-top: 15px;
39+
}
40+
41+
a {
42+
display: flex;
43+
flex-direction: column;
44+
}
45+
`,
46+
];
47+
}
48+
49+
/**
50+
* Lit render function.
51+
* @return {TemplateResult}
52+
*/
53+
render() {
54+
return html`
55+
<a>
56+
<div class="header">
57+
<slot name="header"></slot>
58+
</div>
59+
<div class="body">
60+
<slot name="body"></slot>
61+
</div>
62+
<div class="footer">
63+
<slot name="footer"></slot>
64+
</div>
65+
</a>
66+
`;
67+
}
68+
}
69+
70+
customElements.define('deep-card', DeepCard);

‎packages/deep-card/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en-CA">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Thinkdeep</title>
7+
8+
<script src="./index.js"></script>
9+
</head>
10+
<body>
11+
12+
<deep-card></deep-card>
13+
14+
15+
<script type="module" src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
16+
</body>
17+
</html>

‎packages/deep-card/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './deep-card.js';

‎packages/deep-card/package.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "@thinkdeep/deep-card",
3+
"version": "0.0.8",
4+
"description": "Card component.",
5+
"keywords": [
6+
"Lit",
7+
"JavaScript",
8+
"WebComponents"
9+
],
10+
"author": "Hayden McParlane <hayden.mcparlane@gmail.com>",
11+
"homepage": "https://github.com/ThinkDeepTech/thinkdeep#readme",
12+
"license": "GPL-3.0-or-later",
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/ThinkDeepTech/thinkdeep.git"
16+
},
17+
"type": "module",
18+
"scripts": {
19+
"start": "web-dev-server --config ./web-dev-server.config.js --esbuild-target auto",
20+
"start:watch": "web-dev-server --config ./web-dev-server.config.js --watch --esbuild-target auto",
21+
"tests:e2e": "web-test-runner --config ./web-test-runner.config.js",
22+
"tests:e2e:watch": "web-test-runner --config ./web-test-runner.config.js --watch",
23+
"build": "rimraf build && rollup -c rollup.config.mjs"
24+
},
25+
"devDependencies": {
26+
"@esm-bundle/chai": "^4.3.4",
27+
"@open-wc/testing": "^3.1.4",
28+
"@open-wc/testing-helpers": "^2.1.2",
29+
"@thinkdeep/tools": "^0.0.8",
30+
"@web/dev-server-esbuild": "^0.2.12",
31+
"@web/dev-server-rollup": "^0.3.5",
32+
"@web/test-runner": "^0.13.15",
33+
"@web/test-runner-playwright": "^0.8.6",
34+
"@web/test-runner-puppeteer": "^0.10.0",
35+
"chai": "^4.3.4",
36+
"mocha": "^9.0.2",
37+
"rimraf": "^3.0.2",
38+
"rollup": "^2.72.1"
39+
},
40+
"dependencies": {
41+
"@webcomponents/webcomponentsjs": "^2.5.0",
42+
"lit": "^2.0.2"
43+
},
44+
"private": true
45+
}

‎packages/deep-card/rollup.config.mjs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import merge from 'deepmerge';
2+
3+
// NOTE: The relative path below is required otherwise the build errors out.
4+
import baseConfig from "@thinkdeep/tools/rollup.config.mjs";
5+
6+
export default merge(baseConfig, {
7+
// if you use createSpaConfig, you can use your index.html as entrypoint,
8+
// any <script type="module"> inside will be bundled by rollup
9+
input: './index.html',
10+
11+
// alternatively, you can use your JS as entrypoint for rollup and
12+
// optionally set a HTML template manually
13+
// input: './app.js',
14+
});

‎packages/deep-card/test/deep-card.unit.test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// import {html, litFixtureSync, expect} from '@open-wc/testing';
2+
// import '@thinkdeep/deep-card/deep-card.js';
3+
4+
// describe('card', () => {
5+
6+
// });

‎packages/deep-card/web-dev-server.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import config from '@thinkdeep/tools/web-dev-server.config.js';
2+
3+
export default config;

‎packages/deep-card/web-test-runner.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import config from '@thinkdeep/tools/web-test-runner.config.js';
2+
3+
export default config;

‎packages/deep-economic-analyzer/deep-analyzer-page-home.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class DeepAnalyzerPageHome extends i18nMixin(LitElement) {
6969
height: auto;
7070
padding: 5px;
7171
border-radius: 7px;
72-
opacity: 0.65;
72+
opacity: 0.55;
7373
text-align: center;
7474
margin-bottom: 8vh;
7575
}

‎packages/deep-economic-analyzer/deep-analyzer-page-summary.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import '@material/mwc-list/mwc-list';
1111
import '@material/mwc-list/mwc-list-item';
1212
import '@material/mwc-select';
1313
import '@material/mwc-textfield';
14+
import '@thinkdeep/deep-card';
1415
import './deep-site-configuration.js';
1516
import CollectEconomicData from './graphql/CollectEconomicData.mutation.graphql';
1617
import GetSentiment from './graphql/GetSentiment.query.graphql';
@@ -128,23 +129,28 @@ export default class DeepAnalyzerPageSummary extends LitElement {
128129
static get styles() {
129130
return css`
130131
:host {
131-
height: auto;
132-
width: 100vw;
132+
display: block;
133+
height: 100%;
134+
width: 100%;
133135
}
134136
135137
.grid-container {
136138
display: grid;
137139
grid-template-columns: 1fr;
138-
min-height: 80vh;
139140
background-color: var(--secondary-color);
140141
justify-items: center;
142+
align-items: center;
143+
height: 100%;
144+
width: 100%;
141145
}
142146
143147
.input,
144148
google-chart,
145-
mwc-list {
149+
mwc-list,
150+
deep-card {
146151
width: 90vw;
147152
max-width: 90vw;
153+
margin: 8px;
148154
}
149155
150156
mwc-button {
@@ -156,6 +162,12 @@ export default class DeepAnalyzerPageSummary extends LitElement {
156162
overflow: hidden;
157163
}
158164
165+
.summary {
166+
display: flex;
167+
flex-direction: row;
168+
justify-content: space-around;
169+
}
170+
159171
[hidden] {
160172
display: none;
161173
}

‎packages/deep-economic-analyzer/deep-economic-analyzer.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export class DeepEconomicAnalyzer extends i18nMixin(LitElement) {
140140
css`
141141
:host {
142142
display: block;
143-
height: 100vh;
144-
width: 100vw;
143+
width: 100%;
144+
height: 100%;
145145
}
146146
147147
.grid-container {
@@ -150,6 +150,7 @@ export class DeepEconomicAnalyzer extends i18nMixin(LitElement) {
150150
grid-template-areas:
151151
'header'
152152
'content';
153+
height: 100%;
153154
}
154155
155156
mwc-top-app-bar-fixed {

‎packages/deep-economic-analyzer/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@
4545
}
4646

4747
html, body {
48-
max-height: 100vh;
49-
max-width: 100vw;
48+
height: 100%;
5049
width: 100vw;
5150
display: block;
51+
background-color: var(--primary-color);
5252
}
5353
</style>
5454

‎packages/deep-economic-analyzer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"@material/mwc-select": "^0.25.3",
4747
"@material/mwc-textfield": "^0.25.3",
4848
"@material/mwc-top-app-bar-fixed": "^0.25.3",
49-
"@spectrum-web-components/card": "^0.10.11",
49+
"@thinkdeep/deep-card": "0.0.8",
5050
"@thinkdeep/deep-footer": "^0.0.8",
5151
"@vaadin/router": "^1.7.4",
5252
"@webcomponents/webcomponentsjs": "^2.5.0",

‎packages/tools/web-dev-server.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export default {
3030
'process.env.PREDECOS_MICROSERVICE_SUBSCRIPTION_URL': JSON.stringify(
3131
process.env.PREDECOS_MICROSERVICE_SUBSCRIPTION_URL
3232
),
33+
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
3334
}),
3435
graphql(),
3536
],

‎packages/tools/web-test-runner.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export default {
8383
PREDECOS_TEST_AUTH_CLIENT_SECRET:
8484
process.env.PREDECOS_TEST_AUTH_CLIENT_SECRET,
8585
PREDECOS_TEST_AUTH_LOGIN_URL: `https://${process.env.PREDECOS_TEST_AUTH_DOMAIN}/oauth/token`,
86+
NODE_ENV: process.env.NODE_ENV,
8687
}),
8788
],
8889
};

0 commit comments

Comments
 (0)