Hack for Full Screen Editor - hide code snippets

Show and Tell
8

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…

58

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

St4geB1Bzj
St4geB1Bzj.gif987×485 731 KB

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

46

5 Likes