Remove scrollbar for fullscreen

src/app/component/blog/blog-entry/blog-entry.component.html

@@ -94,7 +94,7 @@ <h2 class="link blog-title" [class.remote]="!local">
   }
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     @if (submitting) {
       <app-loading [inline]="true"></app-loading>
     }

src/app/component/comment/comment-reply/comment-reply.component.html

@@ -1,6 +1,7 @@
 <form>
   <app-editor [control]="comment"
               [tags]="tags"
+              [fullscreenDefault]="false"
               [selectResponseType]="selectResponseType"
               (syncTags)="editorTags = $event"
               [autoFocus]="autofocus"></app-editor>

src/app/component/ext/ext.component.html

@@ -52,7 +52,7 @@
   }
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     <div *ngIf="invalid && !force" class="overwrite warning" i18n-title title="Will drop all unknown configs.">
       <input id="overwrite" type="checkbox" [(ngModel)]="overwrite" [ngModelOptions]="{standalone: true}">
       <label for="overwrite" i18n>Overwrite</label>

src/app/component/filter/filter.component.html

@@ -8,7 +8,7 @@
   </optgroup>
 </select>
 <ng-container *ngFor="let filter of filters; let i=index">
-  <div class="form-array" [title]="filter">
+  <div class="controls" [title]="filter">
     <select id="filter-{{ i }}" [ngModel]="filter" (ngModelChange)="setFilter(i, $event)">
       <optgroup *ngFor="let g of allFilters" [label]="g.label">
         <option *ngFor="let f of g.filters" [value]="f.filter">{{ f.label || f.filter }}</option>

src/app/component/filter/filter.component.ts

@@ -61,7 +61,7 @@ export class FilterComponent implements OnChanges, OnDestroy {
   allFilters: FilterGroup[] = [];
   filters: UrlFilter[] = [];
 
-  emoji = emoji('🪄️') || '🔍️';
+  emoji = emoji($localize`🪄️`) || $localize`🔍️`;
 
   constructor(
     public router: Router,

src/app/component/page-controls/page-controls.component.html

@@ -7,14 +7,14 @@
          [class.disabled]="page.first"
          [queryParams]="{ pageNumber: store.view.defaultPageNumber ? 0 : null }"
          queryParamsHandling="merge" i18n>first</a>
-      |
+      <span> | </span>
       @if (showPrev) {
         <a class="prev-page"
            routerLink="./"
            routerLinkActive="disabled"
            [queryParams]="{ pageNumber: prev }"
            queryParamsHandling="merge" i18n>prev</a>
-        |
+        <span> | </span>
       }
     }
     <a class="next-page"
@@ -23,7 +23,7 @@
        [queryParams]="{ pageNumber: next }"
        (click)="scrollUp()"
        queryParamsHandling="merge" i18n>next</a>
-    |
+    <span> | </span>
     <a class="last-page"
        *ngIf="showPageLast"
        routerLink="./"

src/app/component/plugin/plugin.component.html

@@ -50,7 +50,7 @@
   }
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     <button type="submit" [disabled]="submitted && !editForm.valid" i18n>save</button>
     <button type="button" (click)="editing = false" i18n>cancel</button>
   </span>

src/app/component/ref/ref.component.html

@@ -311,7 +311,7 @@
   }
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     <div *ngIf="invalid && !force" class="overwrite warning" i18n-title title="Will drop all unknown plugins.">
       <input id="overwrite" type="checkbox" [(ngModel)]="overwrite" [ngModelOptions]="{standalone: true}">
       <label for="overwrite" i18n>Overwrite</label>

src/app/component/sidebar/sidebar.component.ts

@@ -86,7 +86,8 @@ export class SidebarComponent implements OnInit, OnChanges, OnDestroy {
     router.events.pipe(
       filter(event => event instanceof NavigationEnd),
     ).subscribe(() => {
-      if (this.config.mobile && this.lastView != this.store.view.current || this.store.view.current === 'ref/summary' && !window.matchMedia('(min-width: 1024px)').matches) {
+      if (this.config.tablet && this.lastView != this.store.view.current ||
+          !this.config.huge  && this.store.view.current === 'ref/summary') {
         this.lastView = this.store.view.current;
         this.expanded = false;
       }

src/app/component/sort/sort.component.html

@@ -5,11 +5,11 @@
   <option class="unselected">🔼️ sort</option>
   <option *ngFor="let opt of allSorts" [value]="opt.value">{{ opt.label || opt.value }}</option>
 </select>
-<span class="form-array" *ngFor="let f of sorts; let i=index">
+<span class="controls" *ngFor="let f of sorts; let i=index">
   <select id="filter-{{ i }}" [ngModel]="sortCol(sorts[i])" (ngModelChange)="setSortCol(i, $event)">
     <option *ngFor="let opt of allSorts" [value]="opt.value">{{ opt.label || opt.value }}</option>
   </select>
-  <button type="button" *ngIf="sortDir(sorts[i]) === 'DESC'"(click)="setSortDir(i, 'ASC')">🔽️</button>
-  <button type="button" *ngIf="sortDir(sorts[i]) === 'ASC'" (click)="setSortDir(i, 'DESC')">🔼️</button>
+  <button type="button" *ngIf="sortDir(sorts[i]) === 'DESC'"(click)="setSortDir(i, 'ASC')" i18n>🔽️</button>
+  <button type="button" *ngIf="sortDir(sorts[i]) === 'ASC'" (click)="setSortDir(i, 'DESC')" i18n>🔼️</button>
   <button type="button" *ngIf="sorts.length > 1" (click)="removeSort(i)" i18n>&ndash;</button>
 </span>

src/app/component/template/template.component.html

@@ -49,7 +49,7 @@
   }
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     <button type="submit" [disabled]="submitted && !editForm.valid" i18n>save</button>
     <button type="button" (click)="editing = false" i18n>cancel</button>
   </span>

src/app/component/user/user.component.html

@@ -60,7 +60,7 @@
   }
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     <button type="submit" [disabled]="submitted && !editForm.valid" i18n>save</button>
     <button type="button" (click)="editing = false" i18n>cancel</button>
   </span>

src/app/component/viewer/viewer.component.ts

@@ -281,7 +281,7 @@ export class ViewerComponent implements OnChanges, AfterViewInit {
     if (this.config.mobile && window.matchMedia("(orientation: landscape)").matches) {
       return this.thread ? 'calc(100vw - 32px)' : 'calc(100vw - 12px)';
     }
-    return '80vw';
+    return this.config.huge ? '67vw' : '80vw';
   }
 
   get embedHeight() {

src/app/directive/image.directive.ts

@@ -99,11 +99,13 @@ export class ImageDirective implements OnInit, OnDestroy {
 
   private onResize() {
     if (this.defaultWidth && this.defaultHeight) {
+      this.el.style.width = this.defaultWidth + 'px';
+      this.el.style.height = this.defaultHeight + 'px';
       this.el.style.backgroundSize = '100% 100%';
       return;
     }
     const parentWidth = this.el.parentElement.offsetWidth;
-    if (!this.grid && this.config.mobile && (!this.defaultWidth || this.defaultWidth >= window.innerWidth)) {
+    if (this.config.mobile && !this.grid && (!this.defaultWidth || this.defaultWidth >= window.innerWidth)) {
       this.el.style.width = (parentWidth - 12) + 'px';
       this.el.style.height = this.defaultHeightPx || height(parentWidth, this.dim) + 'px';
     } else if (this.grid || this.dim.width > parentWidth && (!this.defaultWidth || this.defaultWidth >= parentWidth)) {

src/app/form/editor/editor.component.html

@@ -13,7 +13,8 @@
               (click)="toggleStacked()"
               i18n-title title="Stacked or side by side layout toggle"
               i18n>/</button>
-    } @else if (currentText) {
+    }
+    @if (fullscreen || currentText) {
       <button type="button"
               (click)="togglePreview()"
               i18n-title title="Show preview"
@@ -56,6 +57,8 @@
   </div>
   <textarea #editor
             [formControl]="control"
+            (touchstart)="fullscreenDefault = fullscreenDefault === undefined ? true : undefined"
+            (tap)="fullscreenDefault && !initialFullscreen && toggleFullscreen(true) || true"
             (focusin)="editing = true"
             (input)="setText($any($event).target.value)"
             (blur)="syncText($any($event).target.value)"

src/app/form/editor/editor.component.scss

@@ -1,4 +1,5 @@
 :host.fullscreen {
+  border: none !important;
   &, .text-wrapper, .toolbar {
     pointer-events: none;
   }

src/app/form/editor/editor.component.ts

@@ -6,6 +6,7 @@ import {
   ElementRef,
   EventEmitter,
   HostBinding,
+  HostListener,
   Input,
   OnChanges,
   OnDestroy,
@@ -48,7 +49,7 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   @HostBinding('class.help')
   help = false;
   @HostBinding('class.preview')
-  preview = false;
+  preview = this.store.local.showPreview;
 
   @ViewChild('editor')
   editor?: ElementRef<HTMLTextAreaElement>;
@@ -59,6 +60,8 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   @Input()
   selectResponseType = false;
   @Input()
+  fullscreenDefault?: boolean;
+  @Input()
   tags?: string[];
   @Input()
   control!: UntypedFormControl;
@@ -79,6 +82,7 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   overlayRef?: OverlayRef;
   helpRef?: OverlayRef;
   toggleResponse = 0;
+  initialFullscreen = false;
 
   private _text? = '';
   private _editing = false;
@@ -96,7 +100,6 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
     private el: ElementRef,
     private vc: ViewContainerRef,
   ) {
-    this.preview = store.local.showPreview;
     this.router.events.pipe(
       filter(event => event instanceof NavigationEnd)
     ).subscribe(() => this.toggleFullscreen(false));
@@ -132,6 +135,14 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
     for (const dispose of this.disposers) dispose();
     this.disposers.length = 0;
     document.body.style.height = '';
+    document.body.classList.remove('fullscreen');
+  }
+
+  @HostListener('window:scroll')
+  preventScroll() {
+    if (this.overlayRef) {
+      window.scrollTo(0, 0);
+    }
   }
 
   @HostBinding('style.padding.px')
@@ -163,7 +174,6 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
     if (!this._editing && value) {
       defer(() => {
         this._editing = value;
-        this.preview = this.store.local.showPreview;
         this.tags = this.fullTags;
         this.syncTags.emit(this.tags);
       });
@@ -257,7 +267,11 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   }, 400);
 
   togglePreview() {
-    this.store.local.showPreview = this.preview = !this.preview;
+    if (this.fullscreen) {
+      this.store.local.showFullscreenPreview = this.preview = !this.preview;
+    } else {
+      this.store.local.showPreview = this.preview = !this.preview;
+    }
     this.editor?.nativeElement.focus();
   }
 
@@ -277,12 +291,14 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
 
   toggleFullscreen(override?: boolean) {
     if (override === this.fullscreen) return;
+    this.initialFullscreen = true;
     this.fullscreen = override !== undefined ? override : !this.fullscreen;
     if (this.fullscreen) {
       this._text = this.currentText;
       this.stacked = this.store.local.editorStacked;
       this.preview = this.store.local.showFullscreenPreview;
       if (this.store.viewportHeight) document.body.style.height = this.store.viewportHeight + 'px';
+      document.body.classList.add('fullscreen');
       this.overlayRef = this.overlay.create({
         height: this.store.viewportHeight ? this.store.viewportHeight + 'px' : '100vh',
         width: '100vw',
@@ -295,18 +311,20 @@ export class EditorComponent implements OnChanges, AfterViewInit, OnDestroy {
       });
       this.overlayRef.attach(new DomPortal(this.el));
       this.overlayRef.backdropClick().subscribe(() => this.toggleFullscreen(false));
-      this.overlayRef.keydownEvents().subscribe(event => event.key === "Escape" && this.toggleFullscreen(false));
+      this.overlayRef.keydownEvents().subscribe(event => event.key === 'Escape' && this.toggleFullscreen(false));
       this.editor?.nativeElement.focus();
-      defer(() => this.editor?.nativeElement.scrollIntoView(true));
+      this.editor?.nativeElement.scrollIntoView({ block: 'end' });
     } else {
       this.stacked = true;
       this.preview = this.store.local.showPreview;
       this.overlayRef?.detach();
       this.overlayRef?.dispose();
       delete this.overlayRef;
       document.body.style.height = '';
+      document.body.classList.remove('fullscreen');
+      this.editor?.nativeElement.focus();
+      this.editor?.nativeElement.scrollIntoView({ block: 'center', inline: 'center' });
     }
-    this.editor?.nativeElement.focus();
   }
 
   toggleHelp(override?: boolean) {

src/app/form/ext/ext.component.html

@@ -33,7 +33,7 @@
     }
     @if (defaultSort && !user) {
       <label for="defaultSort" i18n>Default Sort:</label>
-      <span class="form-array">
+      <span class="controls">
         <select id="defaultSort" (input)="setSortCol($any($event.target).value)">
           <option></option>
           @for (opt of allSorts; track opt) {
@@ -99,7 +99,7 @@
       <div class="form">
         @if (defaultSort && user) {
           <label for="defaultSortAdvanced" i18n>Default Sort:</label>
-          <span class="form-array">
+          <span class="controls">
             <select id="defaultSortAdvanced" (input)="setSortCol($any($event.target).value)">
               <option></option>
               @for (opt of allSorts; track opt) {

src/app/mods/editor.ts

@@ -9,7 +9,6 @@ export const htmlPlugin: Plugin = {
     experimental: true,
     generated: $localize`Generated by jasper-ui ${moment().toISOString()}`,
     description: $localize`Activates built-in HTML editor support and allows users to format Ref comments as  HTML.`,
-    icons: [{ thumbnail: $localize`📐️` }],
     editorButtons: [{ label: $localize`📐️️ HTML`, remember: true, ribbon: true, global: true }],
   },
 };
@@ -33,7 +32,6 @@ export const latexPlugin: Plugin = {
     For example: "This equation represents the Fourier transform of a function $f(x)$. The Fourier transform is a mathematical operation that transforms a function from the time or spatial domain to the frequency domain. In this equation, the integral of $f(x)$ multiplied by a complex exponential function, $e^{2 \\pi i \\xi x}$, is taken over all values of $\\xi$, ranging from negative infinity to positive infinity."
     For example: "This equation represents an iterative evaluation of the continued fraction $\\cfrac{2}{1+\\cfrac{2}{1+\\cfrac{2}{1}}}$, which is commonly known as the golden ratio or $\\phi$."`,
     editor: $localize`💲️ LaTeX`,
-    icons: [{ thumbnail: $localize`💲️` }],
     editorButtons: [{ label: $localize`💲️ LaTeX`, remember: true, ribbon: true, global: true }],
   },
 };

src/app/page/ext/ext.component.html

@@ -26,7 +26,7 @@ <h5 class="fake-link" routerLink="." i18n>Edit Tag</h5>
       }
 
       <span><!-- Buttons --></span>
-      <span class="buttons form-array right">
+      <span class="buttons right">
         @if (creating) {
           <app-loading [inline]="true"></app-loading>
         }
@@ -50,7 +50,7 @@ <h5 class="fake-link" routerLink="." i18n>Edit Tag</h5>
       }
 
       <span><!-- Buttons --></span>
-      <span class="buttons form-array right">
+      <span class="buttons right">
         @if (invalid) {
           @if (!force) {
             <div class="overwrite warning" i18n-title title="Will drop all unknown configs.">

src/app/page/settings/backup/backup.component.html

@@ -9,7 +9,7 @@ <h2>Clear Origin</h2>
   <input type="datetime-local" step="1" formControlName="olderThan">
 
   <span><!-- Buttons --></span>
-  <span class="buttons form-array right">
+  <span class="buttons right">
     <button type="submit" [disabled]="submitted && !originForm.valid" i18n>Delete</button>
   </span>
 </form>

src/app/page/settings/me/me.component.html

@@ -9,7 +9,7 @@
     }
 
     <span><!-- Buttons --></span>
-    <span class="buttons form-array right">
+    <span class="buttons right">
       @if (editing) {
         <app-loading [inline]="true"></app-loading>
       }

src/app/page/settings/password/password.component.html

@@ -11,7 +11,7 @@
     }
 
     <span><!-- Buttons --></span>
-      <span class="buttons form-array right">
+      <span class="buttons right">
       <button type="submit" [disabled]="submitted && !passwordForm.valid" i18n>Save</button>
     </span>
   </form>

src/app/page/settings/ref/ref.component.html

@@ -7,7 +7,7 @@ <h2 i18n>{{ plugin.name || plugin.tag }} Settings</h2>
       <p>{{ plugin.config?.description || '' }}</p>
 
       <span><!-- Buttons --></span>
-      <span class="buttons form-array right">
+      <span class="buttons right">
         @if (writeAccess) {
           @if (plugin.config?.hasDefaults) {
             <button type="button" (click)="loadDefaults()" i18n>🔁️ load defaults</button>

src/app/page/settings/setup/setup.component.html

@@ -11,7 +11,7 @@ <h2 i18n>Install Mods</h2>
     </p>
 
     <span><!-- Buttons --></span>
-    <span class="buttons form-array right">
+    <span class="buttons right">
       <button type="button" (click)="updateAll()" *ngIf="store.view.updates" i18n>🌟️ Update All</button>
       <button type="button" (click)="selectAll()" *ngIf="selectAllToggle" i18n>Select None</button>
       <button type="button" (click)="selectAll()" *ngIf="!selectAllToggle" i18n>Select All</button>