From 039977cd6a1ad0cbf8a24e0cc7f5410dd116778b Mon Sep 17 00:00:00 2001 From: Damillora Date: Tue, 26 Jan 2021 00:05:02 +0700 Subject: [PATCH] Modify game profile design --- package.json | 3 +- src/node_modules/components/CopyArea.svelte | 13 +++++++ .../components/GameListItem.svelte | 14 ++++---- src/style/app.scss | 4 ++- src/style/components/_copyarea.scss | 8 +++++ src/style/components/_gameitem.scss | 34 +++++++++++++++++++ yarn.lock | 31 +++++++++++++++++ 7 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 src/node_modules/components/CopyArea.svelte create mode 100644 src/style/components/_copyarea.scss create mode 100644 src/style/components/_gameitem.scss diff --git a/package.json b/package.json index d10ddbb..095c9da 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ }, "dependencies": { "compression": "^1.7.1", - "modern-normalize": "^1.0.0", "node-fetch": "^2.6.1", "polka": "next", "sirv": "^1.0.0" @@ -28,6 +27,8 @@ "@rollup/plugin-replace": "^2.2.0", "@rollup/plugin-url": "^5.0.0", "autoprefixer": "^10.2.3", + "clipboard": "^2.0.6", + "modern-normalize": "^1.0.0", "node-sass": "^5.0.0", "postcss": "^8.2.4", "rollup": "^2.3.4", diff --git a/src/node_modules/components/CopyArea.svelte b/src/node_modules/components/CopyArea.svelte new file mode 100644 index 0000000..6d1557f --- /dev/null +++ b/src/node_modules/components/CopyArea.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/node_modules/components/GameListItem.svelte b/src/node_modules/components/GameListItem.svelte index 876e700..f6ae6b6 100644 --- a/src/node_modules/components/GameListItem.svelte +++ b/src/node_modules/components/GameListItem.svelte @@ -1,13 +1,15 @@ -
-
-

{name}

+
+
+

{name}

-
-

Player Name: {playername}

-

ID: {gameid}

+
+

person

+

code

diff --git a/src/style/app.scss b/src/style/app.scss index 52f60d6..2bcf7d2 100644 --- a/src/style/app.scss +++ b/src/style/app.scss @@ -12,4 +12,6 @@ @import './components/menu'; @import './components/gallery'; @import './components/mediaitem'; -@import './components/projectitem'; \ No newline at end of file +@import './components/projectitem'; +@import './components/gameitem'; +@import './components/copyarea'; \ No newline at end of file diff --git a/src/style/components/_copyarea.scss b/src/style/components/_copyarea.scss new file mode 100644 index 0000000..3f4b3c5 --- /dev/null +++ b/src/style/components/_copyarea.scss @@ -0,0 +1,8 @@ +.copyarea { + background: $bg-primary; + color: $accent-primary; + padding: 0.5rem; + border: 1px solid $accent-primary; + font-family: 'Courier New', Courier, monospace; + cursor: pointer; +} \ No newline at end of file diff --git a/src/style/components/_gameitem.scss b/src/style/components/_gameitem.scss new file mode 100644 index 0000000..07ec871 --- /dev/null +++ b/src/style/components/_gameitem.scss @@ -0,0 +1,34 @@ +.game-item { + padding: 0.25rem 1rem; + width: 100%; + display: flex; + flex-direction: row; + @include transition; + + &:hover { + background-color: $bg-secondary; + } + + &__title { + flex-grow: 1; + } + &__caption { + font-size: $text-2xl; + @include my(0.25rem); + } + + &__content { + @include my(0.5rem); + display: block; + + p { + @include my(0.25rem); + text-align: right; + } + flex-shrink: 1; + } + &__icon { + padding: 0.5rem; + vertical-align: middle; + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 5ff93b6..a0e1313 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1175,6 +1175,15 @@ clean-css@^4.2.1: dependencies: source-map "~0.6.0" +clipboard@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" + integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + cliui@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5" @@ -1337,6 +1346,11 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -1561,6 +1575,13 @@ globule@^1.0.0: lodash "~4.17.10" minimatch "~3.0.2" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= + dependencies: + delegate "^3.1.2" + graceful-fs@^4.1.2, graceful-fs@^4.2.3: version "4.2.4" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" @@ -2487,6 +2508,11 @@ scss-tokenizer@^0.2.3: js-base64 "^2.1.8" source-map "^0.4.2" +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= + "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" @@ -2775,6 +2801,11 @@ terser@^5.0.0: source-map "~0.7.2" source-map-support "~0.5.19" +tiny-emitter@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"