Mirror/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2025-12-13 07:34:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

more styling

Browse Source
This commit is contained in:
SpikeHD
2022-07-23 22:24:48 -07:00
parent 95267720a4
commit 8700a77ba0
5 changed files with 98 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/resources/icons/eye.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<desc>Created with Fabric.js 1.7.22</desc>
<defs>
</defs>
<g transform="translate(128 128) scale(0.72 0.72)" style="">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
<path d="M 89.307 43.082 C 74.775 25.601 59.868 16.737 45 16.737 c -14.869 0 -29.775 8.864 -44.307 26.345 c -0.924 1.112 -0.924 2.724 0 3.836 C 15.225 64.399 30.131 73.264 45 73.264 c 14.868 0 29.775 -8.864 44.307 -26.346 C 90.231 45.806 90.231 44.194 89.307 43.082 z M 45 62 c -9.374 0 -17 -7.626 -17 -17 s 7.626 -17 17 -17 s 17 7.626 17 17 S 54.374 62 45 62 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<circle cx="45" cy="45" r="9" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

11
src/resources/icons/like.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<desc>Created with Fabric.js 1.7.22</desc>
<defs>
</defs>
<g transform="translate(128 128) scale(0.72 0.72)" style="">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
<path d="M 0 87.201 h 18.478 c 1.44 0 2.607 -1.167 2.607 -2.607 V 35.343 c 0 -1.44 -1.167 -2.607 -2.607 -2.607 H 0 L 0 87.201 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 83.186 46.32 c 3.763 0 6.814 -3.051 6.814 -6.814 c 0 -3.763 -3.051 -6.814 -6.814 -6.814 H 61.591 c 3.758 -6.768 3.872 -27.328 -5.046 -29.797 c -1.689 -0.468 -3.365 0.823 -3.554 2.565 c -1.568 14.428 -10.395 32.362 -19.37 32.881 h -6.991 v 43.003 h 3.627 c 1.952 0 3.817 0.666 5.444 1.743 c 4.063 2.691 10.906 4.265 17.465 4.101 h 3.172 v 0.012 h 21.788 c 3.763 0 6.814 -3.051 6.814 -6.814 c 0 -3.763 -3.051 -6.814 -6.814 -6.814 h 3.037 c 3.763 0 6.814 -3.051 6.814 -6.814 c 0 -3.763 -3.051 -6.814 -6.814 -6.814 h 2.025 c 3.763 0 6.814 -3.051 6.814 -6.814 S 86.949 46.32 83.186 46.32 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
src/ui/Mods.css
View File

@@ -1,5 +1,5 @@
.Mods {
backdrop-filter: blur(10px);
height: 100%;
height: 90%;
width: 100%;
}

63
src/ui/components/mods/ModTile.css
View File

@@ -1,13 +1,76 @@
.ModListItem {
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
margin: 10px;
background: rgb(99, 98, 98, 0.2);
border-radius: 10px;
backdrop-filter: blur(10px);
transition: background-color 0.1s ease-in-out;
}
.ModListItem:hover {
cursor: pointer;
background: rgb(99, 98, 98, 0.8);
}
.ModName {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 10px 0 0 10px;
margin-left: 10px;
color: #fff;
font-weight: bold;
}
.ModListItem img {
object-fit: cover;
width: 80%;
height: 100px;
margin: 14px;
}
img.nsfw {
filter: blur(16px);
}
.ModInner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
color: #fff;
padding-bottom: 10px;
}
.ModInner div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 8px;
}
.ModInner div span {
margin: 0px 5px;
}
.ModInner img {
object-fit: contain;
width: 20px;
height: 20px;
margin: 0px;
filter: invert(1);
}

13
src/ui/components/mods/ModTile.tsx
View File

@@ -2,6 +2,8 @@ import React from 'react'
import { ModData } from '../../../utils/gamebanana'
import './ModTile.css'
import Like from '../../../resources/icons/like.svg'
import Eye from '../../../resources/icons/eye.svg'
interface IProps {
mod: ModData
@@ -19,7 +21,16 @@ export class ModTile extends React.Component<IProps, never> {
<div className="ModListItem">
<span className="ModName">{mod.name}</span>
<img src={mod.images[0]} className={mod.nsfw ? 'nsfw' : ''} />
<div className="ModInner"></div>
<div className="ModInner">
<div className="likes">
<img src={Like} />
<span>{mod.likes.toLocaleString()}</span>
</div>
<div className="views">
<img src={Eye} />
<span>{mod.views.toLocaleString()}</span>
</div>
</div>
</div>
)
}