fix: docs and site fixes (#478)

Harpush · web-flow · commit 0e1ea1906c7a · 2024-11-25T08:13:08.000+01:00
* fix: fork me on github ribbon

* fix: docs flex layout and split directive

* fix: remove obsolete collapse expand example
diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
 # angular-split [![npm latest version](https://img.shields.io/npm/v/angular-split/latest.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![NPM next version](https://img.shields.io/npm/v/angular-split/next.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![Discord](https://img.shields.io/discord/748677963142135818?color=7289DA&label=Angular%20Discord&logo=discord&logoColor=white&style=flat-square)](https://discord.gg/Qm9MPCg)
 
-Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
+Angular UI library to split views and allow dragging to resize areas using CSS grid layout.
 
 Documentation and examples:
 [https://angular-split.github.io](https://angular-split.github.io)
 
 ### Credits
 
-#### Built by [Bertrand Gaillard](https://github.com/bertrandg).
+#### Built by [Bertrand Gaillard](https://github.com/bertrandg)
 
-#### Maintained by: [Bram Borggreve](https://github.com/beeman) (As of 2020).
+#### Maintained by: [Bram Borggreve](https://github.com/beeman) (As of 2020)
 
 #### Previously: [Bertrand Gaillard](https://github.com/bertrandg) (2016 to 2019)
 
diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-split",
   "version": "18.0.0",
-  "description": "Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
+  "description": "Angular UI library to split views and allow dragging to resize areas using CSS grid layout.",
   "author": "beeman",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "split",
     "split-pane",
     "split-area",
-    "flexbox"
+    "grid"
   ],
   "license": "Apache-2.0",
   "exports": {
diff --git a/src/app/documentation/documentation.component.html b/src/app/documentation/documentation.component.html
@@ -64,7 +64,7 @@ <h4>
   <br /><br />
 
   <h4>
-    <b>SplitAreaDirective</b>&nbsp;<span class="sel"
+    <b>SplitAreaComponent</b>&nbsp;<span class="sel"
       >(selector: '<span class="selContent">as-split-area</span>' / exportAs: '<span class="selContent"
         >asSplitArea</span
       >')</span
diff --git a/src/app/documentation/documentation.component.ts b/src/app/documentation/documentation.component.ts
@@ -95,8 +95,7 @@ export class DocumentationComponent {
         name: 'useTransition',
         type: 'boolean',
         default: 'false',
-        details:
-          'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code> changes.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>',
+        details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code> changes',
       },
     ],
     outputs: [
@@ -124,7 +123,7 @@ export class DocumentationComponent {
         name: 'transitionEnd',
         value: 'SplitAreaSize[]',
         details:
-          'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code> changes).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>',
+          'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code> changes).<br>Only if <code>[useTransition]="true"</code>',
       },
     ],
     class: [
diff --git a/src/app/examples/collapse-expand/collapse-expand.component.ts b/src/app/examples/collapse-expand/collapse-expand.component.ts
diff --git a/src/app/examples/collapse-expand/collapse-expand.module.ts b/src/app/examples/collapse-expand/collapse-expand.module.ts
diff --git a/src/app/examples/example-types.ts b/src/app/examples/example-types.ts
@@ -1,7 +1,6 @@
 export enum ExampleEnum {
   CLICK = 'click',
   CODE = 'code',
-  COLLAPSE = 'collapse',
   DIR = 'dir',
   GEEK = 'geek',
   IFRAME = 'iframe',
diff --git a/src/app/examples/examples.routes.ts b/src/app/examples/examples.routes.ts
@@ -82,15 +82,6 @@ export const exampleRoutes: Routes = [
         (m) => m.TogglingDomAndVisibilityModule,
       ),
   },
-  {
-    data: {
-      type: ExampleEnum.COLLAPSE,
-      label: 'Collapse/Expand a specific area',
-      srcUrl: `${srcUrlBaseApp}/collapse-expand/collapse-expand.component.ts`,
-    },
-    path: 'collapse-expand',
-    loadChildren: () => import('./collapse-expand/collapse-expand.module').then((m) => m.CollapseExpandModule),
-  },
   {
     data: {
       type: ExampleEnum.CLICK,
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -32,7 +32,7 @@ import { Component, VERSION } from '@angular/core'
         <div class="text-center">
           <img src="/assets/logo.svg" height="100" class="m-auto" alt="" />
           <h1 class="mt-3">angular-split</h1>
-          <h4>Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.</h4>
+          <h4>Angular UI library to split views and allow dragging to resize areas using CSS grid layout.</h4>
           <h5 class="mt-3 text-muted">Running on Angular v{{ version }}.</h5>
           <a href="https://www.npmjs.com/package/angular-split"
             ><img
diff --git a/src/index.html b/src/index.html
@@ -8,25 +8,27 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
+    />
+    <style>
+      .github-fork-ribbon:before {
+        background-color: #f80;
+      }
+    </style>
   </head>
+
   <body>
     <sp-app-root>
       <p style="text-align: center; margin-top: 200px">Loading...</p>
     </sp-app-root>
-    <a href="https://github.com/angular-split/angular-split/"
-      ><img
-        style="
-          position: fixed;
-          top: 0;
-          right: 0;
-          border: 0;
-          z-index: 1040;
-          transform-origin: top right;
-          transform: scale(0.8);
-        "
-        src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
-        alt="Fork me on GitHub"
-        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
-    /></a>
+    <a
+      class="github-fork-ribbon"
+      href="https://github.com/angular-split/angular-split/"
+      data-ribbon="Fork me on GitHub"
+      title="Fork me on GitHub"
+      >Fork me on GitHub</a
+    >
   </body>
 </html>
