Skip to content

Commit

Permalink
fix weird chromium behavior
Browse files Browse the repository at this point in the history 
On Chromium, the paper is unselectable,
and at many similar angles it is partially unselectable.
It can be scrolled in its padding,
and if it's changed to overflow text, it's selectable.

This is fixed by having an inner element be the scroll container.
Also, some styles are updated for consistency.
  • Loading branch information
@EmeraldBlock
EmeraldBlock committed Dec 7, 2023
1 parent f444627 commit afd67a1
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 85 deletions.
7 changes: 3 additions & 4 deletions build/bundle.js
View file

Large diffs are not rendered by default.

31 changes: 18 additions & 13 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ body {
#world {
transform: rotateX(-10deg) rotateY(10deg) translate3d(15rem,48rem,-100rem);
transition: transform 2s ease-in-out;
--border-width: 8px;
}

.computer {
Expand Down Expand Up @@ -146,19 +147,32 @@ https://css-tricks.com/old-timey-terminal-styling/
width: 8.5rem;
height: 11rem;
background-color: beige;
padding: 1rem;
transform:
translate(-50%,-50%)
translateY(-30.01rem)
rotateX(90deg)
translate(7rem,5rem)
rotate(10deg)
;
overflow-y: scroll;
font-size: 12pt;
font-family: "Courier New";
display: flex;
}

.scroll {
padding: calc(1rem - var(--border-width));
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: black transparent;
scrollbar-color: #00000080 transparent;
}

.scroll::-webkit-scrollbar {
width: calc(1rem / 8);
background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb {
background-color: #00000080;
}

.paper h1 {
Expand All @@ -170,15 +184,6 @@ https://css-tricks.com/old-timey-terminal-styling/
font-weight: bold;
}

.paper::-webkit-scrollbar {
width: calc(1rem / 8);
background-color: transparent;
}

.paper::-webkit-scrollbar-thumb {
background-color: #00000080;
}

.object, .group {
position: absolute;
left: 50%;
Expand All @@ -187,7 +192,7 @@ https://css-tricks.com/old-timey-terminal-styling/

.object {
box-sizing: border-box;
border: 8px solid black;
border: var(--border-width) solid black;
}

.object:hover:not(.selected) {
Expand Down
133 changes: 67 additions & 66 deletions js/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,77 +11,78 @@ const comp = <div id="comp" class="computer object">
</div>;

const paper = <div class="paper object">
<h1>CLUB WEBSITE MANUAL<br />and<br />CAKE DISPENSARY</h1>
<p>
Click on stuff to look at it.
You probably figured that one out already,
but did you know you can press <kbd>Esc</kbd> to zoom back out???
</p>
<p>
The terminal's filesystem requires IndexedDB permissions.
</p>
<p>
Good luck!
</p>
<h2>About the club</h2>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Officers:
<ul>
<li><b>President:</b> Joe</li>
<li><b>Vice President:</b> Austin</li>
<li><b>Secretary:</b> Thomas</li>
<li><b>Outreach Director:</b> Xindi</li>
<li><b>Tech Lead:</b> Jonathan</li>
<li><b>Contributing Members:</b> Eden, Oscar</li>
</ul>
</p>
<h2>About this site</h2>
<p>
This is a prototype.
Maybe it really is cooler than a plain old 2D site,
or maybe it isn't and we'll work on something else.
</p>
<p>
Everything here is HTML/CSS/JS, with no client-side libraries!
(Only TypeScript and webpack are used for development.)
Maybe I should research libraries more.
I still can't believe web browsers support really decent basic 3D!!!
</p>
<p>
By the way, try zooming in and out, or resizing your browser window.
Accessibility!!
In fact, the terminal supports selections and copy-pasting
via a few shims on a "contenteditable" element.
Actually you can select any text on this site.
Except the blinking cursor character. Cool effect, huh?
</p>
<p>
This site's source code is available <a target="_blank" rel="noreferrer" href="https://github.com/BFHS-Open/site">here</a>.
It's licensed under the ISC License,
which according to Wikipedia is (hopefully) just the MIT License but more concise.
</p>
<p>
Have fun!
</p>
<p>
-Austin
</p>
<div class="scroll">
<h1>CLUB WEBSITE MANUAL<br />and<br />CAKE DISPENSARY</h1>
<p>
Click on stuff to look at it.
You probably figured that one out already,
but did you know you can press <kbd>Esc</kbd> to zoom back out???
</p>
<p>
The terminal's filesystem requires IndexedDB permissions.
</p>
<p>
Good luck!
</p>
<h2>About the club</h2>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Officers:
<ul>
<li><b>President:</b> Joe</li>
<li><b>Vice President:</b> Austin</li>
<li><b>Secretary:</b> Thomas</li>
<li><b>Outreach Director:</b> Xindi</li>
<li><b>Tech Lead:</b> Jonathan</li>
<li><b>Contributing Members:</b> Eden, Oscar</li>
</ul>
</p>
<h2>About this site</h2>
<p>
This is a prototype.
Maybe it really is cooler than a plain old 2D site,
or maybe it isn't and we'll work on something else.
</p>
<p>
Everything here is HTML/CSS/JS, with no client-side libraries!
(Only TypeScript and webpack are used for development.)
Maybe I should research libraries more.
I still can't believe web browsers support really decent basic 3D!!!
</p>
<p>
By the way, try zooming in and out, or resizing your browser window.
Accessibility!!
In fact, the terminal supports selections and copy-pasting
via a few shims on a "contenteditable" element.
Actually you can select any text on this site.
Except the blinking cursor character. Cool effect, huh?
</p>
<p>
This site's source code is available <a target="_blank" rel="noreferrer" href="https://github.com/BFHS-Open/site">here</a>.
It's licensed under the ISC License,
which according to Wikipedia is (hopefully) just the MIT License but more concise.
</p>
<p>
Have fun!
</p>
<p>
-Austin
</p>
</div>
</div>;

const world = new World(document.getElementById("world")!, [
{
elem: makeTable({ width: 5*12, depth: 2*12, height: 2.5*12 }),
transform: "",
},
{
elem: comp,
Expand Down
4 changes: 2 additions & 2 deletions js/world.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ export default class World {
public selected: HTMLElement | undefined;
public defaultTransform: string;

constructor(root: HTMLElement, objects: { elem: HTMLElement, transform: string }[]) {
constructor(root: HTMLElement, objects: { elem: HTMLElement, transform?: string }[]) {
this.root = root;
const self = this;
for (const { elem, transform } of objects) {
this.root.appendChild(elem);
if (transform == null) continue;
elem.style.pointerEvents = "all";
elem.style.pointerEvents = "auto";
elem.addEventListener("click", function(e) {
if (this === self.selected) return;
if (self.selected != null) self.selected.classList.remove("selected");
Expand Down

0 comments on commit afd67a1

Please sign in to comment.