Comments (13)
I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)
I actually made a userstyle for that a while ago:
:root {
--default-columns: 1;
}
[class*="selector_wrapper"] {
width: auto;
justify-content: center;
}
[class*="selector_list-area"] {
width: calc(96px * var(--default-columns) + 2em);
resize: horizontal;
min-width: calc(96px + 2em);
display: grid;
align-content: start;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
padding: 0 1em;
padding-bottom: 140px;
gap: 1em;
overflow-x: visible;
overflow-y: scroll;
}
[class*="selector_list-area"] > div {
margin-bottom: calc(-0.5em - 1em);
min-width: 5rem;
flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
position: relative;
}
[class*="selector_list-area"]::after {
content: unset;
}
[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
width: auto;
}
[class*="selector_new-buttons"] {
width: calc(100% - 16px);
}
oBqQOvVsCl.mp4
from scratchaddons.
I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)
from scratchaddons.
That userstyle doesn't work well with editor-stage-left
.
from scratchaddons.
I don't think the size of the costume bar changes based on screen size...
from scratchaddons.
I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)
I actually made a userstyle for that a while ago:
:root { --default-columns: 1; } [class*="selector_wrapper"] { width: auto; justify-content: center; } [class*="selector_list-area"] { width: calc(96px * var(--default-columns) + 2em); resize: horizontal; min-width: calc(96px + 2em); display: grid; align-content: start; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); padding: 0 1em; padding-bottom: 140px; gap: 1em; overflow-x: visible; overflow-y: scroll; } [class*="selector_list-area"] > div { margin-bottom: calc(-0.5em - 1em); min-width: 5rem; flex-grow: 1; } [class*="asset-panel_wrapper"] { position: relative; } [class*="selector_list-area"]::after { content: unset; } [class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] { width: auto; } [class*="selector_new-buttons"] { width: calc(100% - 16px); }oBqQOvVsCl.mp4
It moves the costume editor and other stuff away. We need to be able to clip it instead.
from scratchaddons.
It moves the costume editor and other stuff away. We need to be able to clip it instead.
A way to do this is to add position: absolute
to the [class*="selector_wrapper"]
, and to add a <div style="width: calc(96px + 2em);"></div>
before it. Maybe there's a way do it with pure CSS, though.
from scratchaddons.
Found something, you can add the width to [class*="asset-panel_detail-area"]::before
.
This also resolves it being incompatible with editor-stage-left
.
Modified CSS:
:root {
--default-columns: 1;
}
[class*="asset-panel_detail-area"]::before {
content: "";
width: calc(96px + 3em);
}
[class*="selector_wrapper"] {
width: auto;
justify-content: center;
position: absolute;
height: 100%;
z-index: 2;
}
[class*="selector_list-area"] {
width: calc(96px * var(--default-columns) + 2em);
resize: horizontal;
min-width: calc(96px + 2em);
display: grid;
align-content: start;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
padding: 0 1em;
padding-bottom: 140px;
gap: 1em;
overflow-x: visible;
overflow-y: scroll;
}
[class*="selector_list-area"] > div {
margin-bottom: calc(-0.5em - 1em);
min-width: 5rem;
flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
position: relative;
}
[class*="selector_list-area"]::after {
content: unset;
}
[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
width: auto;
}
[class*="selector_new-buttons"] {
width: calc(100% - 16px);
}
from scratchaddons.
You can move it outside of the visible area, which makes it impossible to zoom back in my modified stylesheet:
from scratchaddons.
Why make it horizontal and not a grid?
from scratchaddons.
It is a grid, just not when it's that big and there's not enough costumes.
See CST's video above for the behavior
from scratchaddons.
Found something, you can add the width to
[class*="asset-panel_detail-area"]::before
.This also resolves it being incompatible with
editor-stage-left
.Modified CSS:
:root { --default-columns: 1; } [class*="asset-panel_detail-area"]::before { content: ""; width: calc(96px + 3em); } [class*="selector_wrapper"] { width: auto; justify-content: center; position: absolute; height: 100%; z-index: 2; } [class*="selector_list-area"] { width: calc(96px * var(--default-columns) + 2em); resize: horizontal; min-width: calc(96px + 2em); display: grid; align-content: start; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); padding: 0 1em; padding-bottom: 140px; gap: 1em; overflow-x: visible; overflow-y: scroll; } [class*="selector_list-area"] > div { margin-bottom: calc(-0.5em - 1em); min-width: 5rem; flex-grow: 1; } [class*="asset-panel_wrapper"] { position: relative; } [class*="selector_list-area"]::after { content: unset; } [class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] { width: auto; } [class*="selector_new-buttons"] { width: calc(100% - 16px); }
The min-width doesn't seem responsive....
from scratchaddons.
The min-width doesn't seem responsive....
What do you mean?
from scratchaddons.
The min-width doesn't seem responsive....
What do you mean?
The min-width is supposed to be different on screens with different dimensions else there will be an overlay that can't be dragged to remove.
from scratchaddons.
Related Issues (20)
- `mediarecorder`: custom shortcut to stop- and start recording HOT 2
- 3.0 Scratchblocks on forums: Apply custom block styles HOT 1
- Jump to custom block definition: add context menu option HOT 1
- Remove `handle-licenses.js` HOT 1
- Remove unnecessary `MANIFEST_VERSION` constants HOT 1
- Rearrangeable custom block inputs: Adding or rearranging an empty-string label creates "%l" labels. HOT 7
- Settings page works - but addons don't - on v1.38.1 HOT 37
- Service worker restart breaks regex matches
- Scratch Addons refuses to work on some pages in newest Chrome update. HOT 2
- Auto-hiding palette does not work with dropdowns or text regions HOT 1
- Hover over a custom block input to see the name of it as a tooltip HOT 1
- Legal: Should the licenses page include the author and copyright year? HOT 1
- An extension to clear certain lists on save HOT 5
- Interpolation HOT 3
- Finding the root cause of the constant log-outs HOT 12
- Invalid addon.json causes error page to repeatedly open
- Addons turning off automatically maybe because of synchronization HOT 2
- `turbowarp-player`: gamepad, fullscreen and player options do not follow darkmode scheme HOT 1
- "Add this project" button in cloud games popup is not centered
- variables on the variables tab for this sprite only are showing variables from different sprites
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scratchaddons.