computernewb/MSAgent-Chat
6
0
Fork 0
Code Issues 14 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Change to SCSS so that rules are automatically backported to older browsers. In the future we can also take advantage of its other features.

Browse source
This commit is contained in:
Elijah R 2024-07-14 15:22:55 -04:00
parent bb8c40b440
commit cc2a9db92e
6 changed files with 385 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -9,6 +9,7 @@
"packageManager": "yarn@4.2.2",
"devDependencies": {
"@parcel/packager-ts": "2.12.0",
"@parcel/transformer-sass": "2.12.0",
"@parcel/transformer-typescript-types": "2.12.0",
"typescript": ">=3.0.0"
}

246
webapp/src/css/style.css
View file

@ -1,246 +0,0 @@
body {
background-color: #3A6EA5;
font-size: 11px;
}
#logonView {
display: block;
}
#chatView {
display: none;
}
.window {
display: flex;
flex-direction: column;
position: fixed;
.title-bar {
user-select: none;
}
}
.window-body {
flex: 1;
}
#motdContainer {
font-family: "Arial", sans-serif;
}
#bottomLinks {
font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
background-color: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
padding: 0.95em;
margin: 0px;
left: 0;
right: 0;
transform: unset;
text-align: center;
li {
padding: 0.2em;
display: inline-block;
border-right: 1px solid black;
margin: 0;
padding-right: 0.2rem;
margin-right: 0.2rem;
a {
font-size: 14pt;
color: #fff;
}
a:visited {
font-size: 14pt;
color: #fff;
}
}
li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}
list-style: none;
display: block;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#logonWindowLogo {
background-color: #ffffff;
margin: 0;
border-bottom: 8px solid;
border-image: linear-gradient(to right, #013755, #9ec0da, #013755) 4;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
img {
margin-left: auto;
margin-right: auto;
display: block;
}
}
#logonForm {
margin-top: 25px;
margin-left: 15px;
display: flex;
flex-direction: column;
div {
display: flex;
flex-direction: row;
}
}
#logonUsername, #logonRoom {
align-self: flex-end;
margin-left: auto;
width: 300px;
margin-right: 90px;
margin-bottom: 10px;
}
#logonButton {
align-self: flex-end;
margin-left: auto;
margin-right: 90px;
}
#roomSettingsBody {
display: flex;
flex-direction: column;
}
#roomSettingsTabContent {
flex: 1;
margin-bottom: 8px;
}
/* CSS nesting isn't even a year old as of writing this, we should consider using SASS or something for now */
#roomSettingsWallpaperTab {
display: flex;
flex-direction: column;
.wallpaperMonitor {
text-align: center;
flex: 1;
}
#roomSettingsWallpaperSelect {
height: 114px;
display: flex;
flex-direction: row;
gap: 8px;
.mainCol {
display: flex;
flex-direction: column;
flex: 1;
.tree-view {
flex: 1;
overflow: auto;
}
}
#roomSettingsWallpaperURL {
margin-top: 8px;
width: 100%;
}
}
}
#chatBar {
margin: 0;
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 100%;
background-color: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
height: 3vh;
padding: 4px;
padding-left: 0px;
}
#chatInput {
flex-grow: 1;
margin-right: 4px;
margin-left: 4px;
height: 100%;
}
#chatSendBtn {
font-weight: bold;
margin-right: 4px;
}
.wallpaperMonitor {
div {
display: inline-block;
position: relative;
}
.wallpaperMonitorFg {
position: absolute;
width: 152px;
height: 112px;
margin: 17px 16px;
background: linear-gradient(160deg, #9b4f96, #0038a8);
}
}
.fieldRowRight {
justify-content: flex-end;
}
.context-menu {
background-color: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,inset -2px -2px grey, inset 2px 2px #fff;
padding-left: 0.2em;
padding-right: 0.2em;
z-index: 1;
ul {
list-style: none;
padding: 0;
margin: 0;
}
}
.context-menu-item {
padding-left: 0.2rem;
font-size: 11px;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
font-family: "Pixelated MS Sans Serif", Arial;
cursor: pointer;
padding: 5px;
padding-right: 5em;
margin-top: 2px;
margin-bottom: 2px;
list-style-type: none;
}
.context-menu-item:hover {
background-color: navy;
color: #fff;
}
.d-none {
display: none;
}

251
webapp/src/css/style.scss Normal file
View file

@ -0,0 +1,251 @@
body {
background-color: #3a6ea5;
font-size: 11px;
}
#logonView {
display: block;
}
#chatView {
display: none;
}
.window {
display: flex;
flex-direction: column;
position: fixed;
.title-bar {
user-select: none;
}
}
.window-body {
flex: 1;
}
#motdContainer {
font-family: 'Arial', sans-serif;
}
#bottomLinks {
font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
background-color: silver;
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #dfdfdf,
inset -2px -2px grey,
inset 2px 2px #fff;
padding: 0.95em;
margin: 0px;
right: 0;
bottom: 0;
text-align: center;
list-style: none;
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
li {
padding: 0.2em;
display: inline-block;
border-right: 1px solid black;
margin: 0;
padding-right: 0.2rem;
margin-right: 0.2rem;
a {
font-size: 14pt;
color: #fff;
}
a:visited {
font-size: 14pt;
color: #fff;
}
}
li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;
}
}
#logonWindowLogo {
background-color: #ffffff;
margin: 0;
border-bottom: 8px solid;
border-image: linear-gradient(to right, #013755, #9ec0da, #013755) 4;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
img {
margin-left: auto;
margin-right: auto;
display: block;
}
}
#logonForm {
margin-top: 25px;
margin-left: 15px;
display: flex;
flex-direction: column;
div {
display: flex;
flex-direction: row;
}
}
#logonUsername,
#logonRoom {
align-self: flex-end;
margin-left: auto;
width: 300px;
margin-right: 90px;
margin-bottom: 10px;
}
#logonButton {
align-self: flex-end;
margin-left: auto;
margin-right: 90px;
}
#roomSettingsBody {
display: flex;
flex-direction: column;
}
#roomSettingsTabContent {
flex: 1;
margin-bottom: 8px;
}
#roomSettingsWallpaperTab {
display: flex;
flex-direction: column;
.wallpaperMonitor {
text-align: center;
flex: 1;
}
#roomSettingsWallpaperSelect {
height: 114px;
display: flex;
flex-direction: row;
gap: 8px;
.mainCol {
display: flex;
flex-direction: column;
flex: 1;
.tree-view {
flex: 1;
overflow: auto;
}
}
#roomSettingsWallpaperURL {
margin-top: 8px;
width: 100%;
}
}
}
#chatBar {
margin: 0;
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 100%;
background-color: silver;
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #dfdfdf,
inset -2px -2px grey,
inset 2px 2px #fff;
height: 3vh;
padding: 4px;
padding-left: 0px;
}
#chatInput {
flex-grow: 1;
margin-right: 4px;
margin-left: 4px;
height: 100%;
}
#chatSendBtn {
font-weight: bold;
margin-right: 4px;
}
.wallpaperMonitor {
div {
display: inline-block;
position: relative;
}
.wallpaperMonitorFg {
position: absolute;
width: 152px;
height: 112px;
margin: 17px 16px;
background: linear-gradient(160deg, #9b4f96, #0038a8);
}
}
.fieldRowRight {
justify-content: flex-end;
}
.context-menu {
background-color: silver;
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #dfdfdf,
inset -2px -2px grey,
inset 2px 2px #fff;
padding-left: 0.2em;
padding-right: 0.2em;
z-index: 1;
ul {
list-style: none;
padding: 0;
margin: 0;
}
}
.context-menu-item {
padding-left: 0.2rem;
font-size: 11px;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
font-family: 'Pixelated MS Sans Serif', Arial;
cursor: pointer;
padding: 5px;
padding-right: 5em;
margin-top: 2px;
margin-bottom: 2px;
list-style-type: none;
&:hover {
background-color: navy;
color: #fff;
}
}
.d-none {
display: none;
}

2
webapp/src/html/index.html
View file

@ -8,7 +8,7 @@
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Computernewb's Internet Pub Hub" />
<link rel="stylesheet" href="https://unpkg.com/98.css" />
<link type="text/css" rel="stylesheet" href="../css/style.css" />
<link type="text/css" rel="stylesheet" href="../css/style.scss" />
</head>
<body>
<div id="logonView">

2
webapp/src/html/testbed.html
View file

@ -8,7 +8,7 @@
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Computernewb's Internet Pub Hub" />
<link rel="stylesheet" href="https://unpkg.com/98.css" />
<link type="text/css" rel="stylesheet" href="../css/style.css" />
<link type="text/css" rel="stylesheet" href="../css/style.scss" />
<script type="module" src="../ts/testbed.ts"></script>
</head>

134
yarn.lock
View file

@ -1044,6 +1044,17 @@ __metadata:
languageName: node
linkType: hard
"@parcel/transformer-sass@npm:2.12.0":
version: 2.12.0
resolution: "@parcel/transformer-sass@npm:2.12.0"
dependencies:
"@parcel/plugin": "npm:2.12.0"
"@parcel/source-map": "npm:^2.1.1"
sass: "npm:^1.38.0"
checksum: 10c0/d82ee90605f9a8f04a978e2d72faf9693a843a0875961b6e7aa40659197356f1be45d738840c52863607c7823f70630f819aebd843606af8ea00772b75ba7574
languageName: node
linkType: hard
"@parcel/transformer-svg@npm:2.12.0":
version: 2.12.0
resolution: "@parcel/transformer-svg@npm:2.12.0"
@ -1600,6 +1611,16 @@ __metadata:
languageName: node
linkType: hard
"anymatch@npm:~3.1.2":
version: 3.1.3
resolution: "anymatch@npm:3.1.3"
dependencies:
normalize-path: "npm:^3.0.0"
picomatch: "npm:^2.0.4"
checksum: 10c0/57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
languageName: node
linkType: hard
"argparse@npm:^2.0.1":
version: 2.0.1
resolution: "argparse@npm:2.0.1"
@ -1647,6 +1668,13 @@ __metadata:
languageName: node
linkType: hard
"binary-extensions@npm:^2.0.0":
version: 2.3.0
resolution: "binary-extensions@npm:2.3.0"
checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5
languageName: node
linkType: hard
"bl@npm:^4.0.3":
version: 4.1.0
resolution: "bl@npm:4.1.0"
@ -1674,7 +1702,7 @@ __metadata:
languageName: node
linkType: hard
"braces@npm:^3.0.3":
"braces@npm:^3.0.3, braces@npm:~3.0.2":
version: 3.0.3
resolution: "braces@npm:3.0.3"
dependencies:
@ -1772,6 +1800,25 @@ __metadata:
languageName: node
linkType: hard
"chokidar@npm:>=3.0.0 <4.0.0":
version: 3.6.0
resolution: "chokidar@npm:3.6.0"
dependencies:
anymatch: "npm:~3.1.2"
braces: "npm:~3.0.2"
fsevents: "npm:~2.3.2"
glob-parent: "npm:~5.1.2"
is-binary-path: "npm:~2.1.0"
is-glob: "npm:~4.0.1"
normalize-path: "npm:~3.0.0"
readdirp: "npm:~3.6.0"
dependenciesMeta:
fsevents:
optional: true
checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
languageName: node
linkType: hard
"chownr@npm:^1.1.1":
version: 1.1.4
resolution: "chownr@npm:1.1.4"
@ -2398,6 +2445,25 @@ __metadata:
languageName: node
linkType: hard
"fsevents@npm:~2.3.2":
version: 2.3.3
resolution: "fsevents@npm:2.3.3"
dependencies:
node-gyp: "npm:latest"
checksum: 10c0/a1f0c44595123ed717febbc478aa952e47adfc28e2092be66b8ab1635147254ca6cfe1df792a8997f22716d4cbafc73309899ff7bfac2ac3ad8cf2e4ecc3ec60
conditions: os=darwin
languageName: node
linkType: hard
"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
version: 2.3.3
resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
dependencies:
node-gyp: "npm:latest"
conditions: os=darwin
languageName: node
linkType: hard
"generate-function@npm:^2.3.1":
version: 2.3.1
resolution: "generate-function@npm:2.3.1"
@ -2421,6 +2487,15 @@ __metadata:
languageName: node
linkType: hard
"glob-parent@npm:~5.1.2":
version: 5.1.2
resolution: "glob-parent@npm:5.1.2"
dependencies:
is-glob: "npm:^4.0.1"
checksum: 10c0/cab87638e2112bee3f839ef5f6e0765057163d39c66be8ec1602f3823da4692297ad4e972de876ea17c44d652978638d2fd583c6713d0eb6591706825020c9ee
languageName: node
linkType: hard
"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.4":
version: 10.4.5
resolution: "glob@npm:10.4.5"
@ -2579,6 +2654,13 @@ __metadata:
languageName: node
linkType: hard
"immutable@npm:^4.0.0":
version: 4.3.6
resolution: "immutable@npm:4.3.6"
checksum: 10c0/7d0952a768b4fadcee47230ed86dc9505a4517095eceaf5a47e65288571c42400c6e4a2ae21eca4eda957cb7bc50720213135b62cf6a181639111f8acae128c3
languageName: node
linkType: hard
"import-fresh@npm:^3.3.0":
version: 3.3.0
resolution: "import-fresh@npm:3.3.0"
@ -2648,6 +2730,15 @@ __metadata:
languageName: node
linkType: hard
"is-binary-path@npm:~2.1.0":
version: 2.1.0
resolution: "is-binary-path@npm:2.1.0"
dependencies:
binary-extensions: "npm:^2.0.0"
checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38
languageName: node
linkType: hard
"is-extglob@npm:^2.1.1":
version: 2.1.1
resolution: "is-extglob@npm:2.1.1"
@ -2662,7 +2753,7 @@ __metadata:
languageName: node
linkType: hard
"is-glob@npm:^4.0.3":
"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
version: 4.0.3
resolution: "is-glob@npm:4.0.3"
dependencies:
@ -3166,6 +3257,7 @@ __metadata:
resolution: "msagent-chat@workspace:."
dependencies:
"@parcel/packager-ts": "npm:2.12.0"
"@parcel/transformer-sass": "npm:2.12.0"
"@parcel/transformer-typescript-types": "npm:2.12.0"
typescript: "npm:>=3.0.0"
languageName: unknown
@ -3360,6 +3452,13 @@ __metadata:
languageName: node
linkType: hard
"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
version: 3.0.0
resolution: "normalize-path@npm:3.0.0"
checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
languageName: node
linkType: hard
"nth-check@npm:^2.0.1":
version: 2.1.1
resolution: "nth-check@npm:2.1.1"
@ -3484,7 +3583,7 @@ __metadata:
languageName: node
linkType: hard
"picomatch@npm:^2.3.1":
"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
version: 2.3.1
resolution: "picomatch@npm:2.3.1"
checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@ -3705,6 +3804,15 @@ __metadata:
languageName: node
linkType: hard
"readdirp@npm:~3.6.0":
version: 3.6.0
resolution: "readdirp@npm:3.6.0"
dependencies:
picomatch: "npm:^2.2.1"
checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b
languageName: node
linkType: hard
"real-require@npm:^0.2.0":
version: 0.2.0
resolution: "real-require@npm:0.2.0"
@ -3801,6 +3909,19 @@ __metadata:
languageName: node
linkType: hard
"sass@npm:^1.38.0":
version: 1.77.8
resolution: "sass@npm:1.77.8"
dependencies:
chokidar: "npm:>=3.0.0 <4.0.0"
immutable: "npm:^4.0.0"
source-map-js: "npm:>=0.6.2 <2.0.0"
bin:
sass: sass.js
checksum: 10c0/2bfd62794070352c804f949e69bd8bb5b4ec846deeb924251b2c3f7b503170fb1ae186f513f0166907749eb34e0277dee747edcb78c886fb471aac01be1e864c
languageName: node
linkType: hard
"secure-json-parse@npm:^2.7.0":
version: 2.7.0
resolution: "secure-json-parse@npm:2.7.0"
@ -3942,6 +4063,13 @@ __metadata:
languageName: node
linkType: hard
"source-map-js@npm:>=0.6.2 <2.0.0":
version: 1.2.0
resolution: "source-map-js@npm:1.2.0"
checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
languageName: node
linkType: hard
"source-map@npm:^0.6.1":
version: 0.6.1
resolution: "source-map@npm:0.6.1"