Hack for Full Screen Editor - hide code snippets

[stucork]

EDIT - See post 8 for a simpler method to achieve the same result

Original post:
I saw this feature request a few times so I thought I’d see if I could get it to work.

Full screen editor?
Allow to hide the Code Snippets column

Edit - I thought I couldn’t get this to work with chrome devtools overrides because it kept flickering when I did it… - But it does work! - See second post.

Step 1.
Open Chrome Dev Tools. Use the pop out mode.

Step 2.
Go to Sources --> Page --> Top–> anvil.works --> ide --> css --> app.css?..

Step 3.
Replace the line of code with this (I’d paste it here but it’s too many characters)

And you’re done…

Step 4. (Optional)
For Dark Mode… Download this add on from Chrome Web Store: Dark Reader

[stucork]

Overrides!!! Yes this can work with Overrides…

Step 1:
Go to overrides and add a folder
Click Allow

Step 2:
Follow the steps in the first post!

Step 3
Right-click and ‘save for overrides’

In the future:
Just hit cmd option i (mac) or ctrl shift i (windows/linux) for dev tools
Check that you’ve enabled overrides…
To go back to normal mode just close dev tools

edit: I got the flickering to stop which was caused by the @import

[ccie6145]

I feel this will be a very popular Post!

Is it possible for them to add this to Anvil? I believe I am going to go request it now.

[stucork]

It sort of is an anvil feature already.
Currently it will happen on screens smaller than 991px.
All I did was change a few CSS media queries so that it happens on screens smaller than 4001px…

[stucork]

p.s. for anyone who wants to use the dark reader I suggested from the chrome webstore. A small caveat is that the highlight code colours aren’t really visible. I have a solution to that so do drop me a message, or reply to this post, if you need it.

edit: I’ve changed the css file so that the highlight colours can be changed… should you wish to use dark reader just uncomment those lines in the css file.

[nathanguyette]

This is brilliant! Full screen mode for the win!!

[kevin]

For anyone interested, you can use Stylus to set this up as your default so you won’t need to keep Dev Tools open or deal with overrides. The extension’s available for Firefox, Chrome, and Opera.

I’m on Firefox and created a rule that applies @stucork’s CSS tweak to any URL starting with https://anvil.works/build#app:. It’s working well so far - I just toggle the rule on or off as needed.

[stucork]

Edit - anvil now has fullscreen mode build in - click the expand arrows - I’ll leave this code here (edited to work with anvil fullscreen) which people may find the dark mode highlighting useful - Plus you may wish to adjust the width that the floating toolbox takes up…

Original Post
What a great suggestion!!

So here is my edit for the full-screen mode with @kevin’s suggestion using Stylus - which is also available on chrome webstore.

Once installed:

• click the Stylus Icon --> Manage --> Write New Style
• Name it - ‘anvil-works-fullscreen’
• underneath the code section click applies to URL https://anvil.works/build

Then…
Copy and paste the code below (I think is the minimum you need, but I’ll edit if I find anything needs adding):

/* full screen mode*/
/* full screen mode*/

[aux-frame] {
  /* separation of tabs */
  padding-top: 50px;
  padding-bottom: 100px;
}

[aux-frame] .frame-tab {
  display: block;
  z-index: 8 !important;
}

[aux-frame] .frame-body {
  width: 33% !important;
  /* changed so that it appears as 1/3 of the screen - change this value if you want less */
  position: fixed;
  left: 100%;
   z-index: 10 !important;
  overflow-y: auto;
  top: 115px;
  max-height: calc(100% - 115px - 15px);
}

[aux-frame] .frame-body .panel {
  margin-bottom: 0;
}

[form-editor]:not(.full-screen) .main-panel {
  right:5px;
  padding-right: 0;
}

.aux-frame-click-guard {
  z-index: 9 !important;
}

/* edit for html editor */
.with-sidebar [form-editor] .big-property-editor {
  right: 5px; 
}

.with-sidebar [form-editor]:not(.full-screen) .big-property-editor {
  right: 5px; 
}

If you would like to use dark reader include this aswell:

/* adjusted highlighting for dark reader */
.CodeMirror-focused .CodeMirror-selected { background: #3aa3fe40 !important; }
.CodeMirror-activeline-background{background-color: #5a9bff47 !important;}
.cm-matchhighlight{border-bottom: 2px solid rgba(143, 180, 238, 0.9);background: #008dff66;}

Then hit Save

Bonus Feature - add a keyboard shortcut - in chrome

• Click Stylus --> Manage --> Shortcuts
• Scroll down to Stylus
• Add a shortcut to ‘Turn off all styles’ (I used alt + shift + F since dark reader uses alt + shift + D)
• Hitting this shortcut should toggle the fullscreen mode in avil’s ide

[nathanguyette]

This is brilliant. I’m using Stylus mod and makes development waaaay easier.

[meredydd]

You may notice that the form editor now has a native Full Screen mode, which does something a bit similar to @stucork’s CSS hack here

[stucork]

@meredydd Thank you - I’d like to think this post put that to the top of the list haha!

Can we make the frame-body width less than 50% on large screens? Seems like too much… I found 33% to be nicer…

And:

• I think the scroll bar on the code view goes over the frame tab…
• the big-property-editor (custom html editor) doesn’t seem to work in fullscreen mode…

[meredydd]

It - and its enthusiastic reception - certainly helped move it up the list!

Do you have screenshots of either of those bugs? Neither of them happen to me!

(And good suggestion re popout width. Done.)

[stucork]

here are the screenshots - using chrome - incognito just in case anything else was impacting it.
Checked on firefox and also similar issue (though the scroll bar fades when not in use on firefox)

(Still getting 50% for the pop-out width?)