chore: redesign templates

leanupjs · Dec 16, 2020 · 455877f · 455877f
1 parent a9e77e5
commit 455877f
Show file tree

Hide file tree

Showing 51 changed files with 164 additions and 196 deletions.
diff --git a/packages/cli/core/template/public/index.html b/packages/cli/core/template/public/index.html
@@ -1,12 +1,6 @@
 <!DOCTYPE html>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-<link
-  rel="stylesheet"
-  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-  crossorigin="anonymous"
-/>
 
 <!-- add the PWA manifest -->
 <!-- <link rel="manifest" href="manifest.json" />
@@ -24,7 +18,7 @@
 <link rel="icon" sizes="144x144" href="assets/pwa.icon.png" /> -->
 
 <title>PoC - Flexible web application architecture</title>
-<div class="container-fluid">
+<div>
   <header>
     <h1>PoC - Flexible web application architecture</h1>
     <p>
@@ -41,22 +35,18 @@ <h1>PoC - Flexible web application architecture</h1>
     </p>
   </header>
   <main>
-    <div class="row">
-      <div class="col">
-        <h3>Apps</h3>
-        <div id="angular" class="app"></div>
-        <div id="angularjs" class="app"></div>
-        <div id="aurelia" class="app"></div>
-        <div id="inferno" class="app"></div>
-        <div id="lit-element" class="app"></div>
-        <div id="preact" class="app"></div>
-        <div id="react" class="app"></div>
-        <div id="svelte" class="app"></div>
-        <div id="vanilla" class="app"></div>
-        <div id="vue" class="app"></div>
-        <div id="vue3" class="app"></div>
-      </div>
-    </div>
+    <h3>Apps</h3>
+    <div id="angular"></div>
+    <div id="angularjs"></div>
+    <div id="aurelia"></div>
+    <div id="inferno"></div>
+    <div id="lit-element"></div>
+    <div id="preact"></div>
+    <div id="react"></div>
+    <div id="svelte"></div>
+    <div id="vanilla"></div>
+    <div id="vue"></div>
+    <div id="vue3"></div>
   </main>
   <footer>
     <hr />

diff --git a/packages/cli/core/template/src/style.sass b/packages/cli/core/template/src/style.sass
@@ -1,6 +1,5 @@
 @import tailwindcss/base
-
-// @import tailwindcss/components
+@import tailwindcss/components
 @import tailwindcss/utilities
 
 h1
@@ -13,7 +12,7 @@ h3
     @apply text-lg mt-2 mb-1.5
 
 button
-    @apply bg-gray-700 hover:bg-gray-500 text-white py-2 px-3 rounded-md
+    @apply bg-gray-700 hover:bg-gray-500 text-white py-2 px-3 rounded-md my-1 mr-1
 
     &.primary
         @apply bg-green-700 hover:bg-green-500
@@ -39,7 +38,7 @@ div
         @apply font-sans px-5 pb-5 border border-indigo-300 m-2 bg-gray-50 rounded-md
 
 table
-    @apply table-auto w-full
+    @apply table-auto w-full rounded-md
 
     th,
     td

diff --git a/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts
@@ -6,8 +6,8 @@ import { AppController, ResolvedRoute } from './controller';
 @Component({
   selector: 'app',
   template: `
-    <div id="app">
-      <h4>{{ framework.name }} v{{ framework.version }}</h4>
+    <div class="my-app">
+      <h1>{{ framework.name }} v{{ framework.version }}</h1>
       <small>{{ finishedRendering }} ms upcomming time</small>
       <list-serie *ngIf="resolvedRoute.url === 'series'"></list-serie>
       <create-serie *ngIf="resolvedRoute.url === 'series/create'"></create-serie>

diff --git a/packages/cli/frameworks/angular/template/src/components/input/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/input/component.angular.ts
@@ -4,9 +4,9 @@ import { InputControl } from '@leanup/form/controls/controls';
 @Component({
   selector: 'app-input',
   template: `
-    <div class="form-group">
+    <div>
       <label for="{{ control.id }}">{{ control.label }}</label>
-      <input class="form-control" id="{{ control.id }}" name="{{ control.name }}" [(ngModel)]="control.value" />
+      <input id="{{ control.id }}" name="{{ control.name }}" [(ngModel)]="control.value" />
     </div>
   `,
 })

diff --git a/packages/cli/frameworks/angular/template/src/components/series/create/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/create/component.angular.ts
@@ -6,10 +6,10 @@ import { CreateSerieController } from './controller';
   selector: 'create-serie',
   template: `
     <form (ngSubmit)="onSubmit()">
-      <h5>Create a new measuring serie</h5>
+      <h2>Create a new measuring serie</h2>
       <editor-serie [editorForm]="editorForm"></editor-serie>
-      <button class="btn btn-primary" type="submit" id="submit">Add</button>
-      <button class="btn secondary" type="reset" id="cancel" (click)="onCancel()">Abbrechen</button>
+      <button class="primary" type="submit" id="submit">Add</button>
+      <button class="secondary" type="reset" id="cancel" (click)="onCancel()">Abbrechen</button>
     </form>
   `,
 })

diff --git a/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts
@@ -8,11 +8,11 @@ import { EditSerieController } from './controller';
   selector: 'edit-serie',
   template: `
     <form (ngSubmit)="ctrl.onSubmit()">
-      <h5>Edit a existing measuring serie</h5>
+      <h2>Edit a existing measuring serie</h2>
       <editor-serie [editorForm]="ctrl.editorForm"></editor-serie>
-      <button class="btn btn-primary" type="submit" id="submit">Edit</button>
-      <button class="btn btn-secondary" type="reset" id="cancel" (click)="ctrl.onCancel()">Abbrechen</button>
-      <button class="btn btn-danger" id="delete" type="button" (click)="ctrl.onDelete()">Delete</button>
+      <button class="primary" type="submit" id="submit">Edit</button>
+      <button class="secondary" type="reset" id="cancel" (click)="ctrl.onCancel()">Abbrechen</button>
+      <button class="danger" id="delete" type="button" (click)="ctrl.onDelete()">Delete</button>
     </form>
   `,
 })

diff --git a/packages/cli/frameworks/angular/template/src/components/series/list/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/list/component.angular.ts
@@ -6,12 +6,10 @@ import { ListSerieController } from './controller';
   selector: 'list-serie',
   template: `
     <div>
-      <h5>List</h5>
+      <h2>List</h2>
       <div>
-        <button class="btn btn-success" id="add" type="button" (click)="add()">Add</button>
-        <button class="btn btn-info" id="start" type="button" *ngIf="showPerformanceButton" (click)="onStart()">
-          Performance
-        </button>
+        <button class="primary" id="add" type="button" (click)="add()">Add</button>
+        <button id="start" type="button" *ngIf="showPerformanceButton" (click)="onStart()">Performance</button>
       </div>
       <table class="table" *ngFor="let element of elements; index as i">
         <thead>
@@ -30,7 +28,7 @@ import { ListSerieController } from './controller';
             <td>{{ serie.getTitle() }}</td>
             <td>{{ serie.getUnit() }}</td>
             <td>
-              <button class="btn btn-info" id="edit-{{ i }}" type="button" (click)="edit(serie)">Edit</button>
+              <button id="edit-{{ i }}" type="button" (click)="edit(serie)">Edit</button>
             </td>
           </tr>
         </tbody>

diff --git a/packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts
@@ -24,8 +24,8 @@ ANGULARJS_MODULE.component('app', {
     },
   ],
   template: `
-  <div id="app">
-    <h4>{{ $ctrl.framework.name }} v{{ $ctrl.framework.version }}</h4>
+  <div class="my-app">
+    <h1>{{ $ctrl.framework.name }} v{{ $ctrl.framework.version }}</h1>
     <small>{{ $ctrl.finishedRendering }} ms upcomming time</small>
     <list-serie ng-if="$ctrl.resolvedRoute.url === 'series'"></list-serie>
     <create-serie ng-if="$ctrl.resolvedRoute.url === 'series/create'"></create-serie>

diff --git a/packages/cli/frameworks/angularjs/template/src/components/input/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/input/component.angularjs.ts
@@ -24,10 +24,10 @@ ANGULARJS_MODULE.component('appInput', {
     },
   ],
   template: `
-  <div class="form-group">
+  <div>
     <label for="{{$ctrl.control.id}}">{{$ctrl.control.label}}</label>
     <input
-      class="form-control"
+     
       id="{{$ctrl.control.id}}"
       name="{{$ctrl.control.name}}"
       ng-model="$ctrl.control.value"

diff --git a/...ges/cli/frameworks/angularjs/template/src/components/series/create/component.angularjs.ts b/...ges/cli/frameworks/angularjs/template/src/components/series/create/component.angularjs.ts
@@ -5,10 +5,10 @@ ANGULARJS_MODULE.component('createSerie', {
   controller: ['$scope', CreateSerieController],
   template: `
   <form ng-submit="$ctrl.onSubmit()">
-    <h5>Create a new measuring serie</h5>
+    <h2>Create a new measuring serie</h2>
     <editor-serie editor-form="$ctrl.editorForm"></editor-serie>
-    <button class="btn btn-primary" type="submit" id="submit">Add</button>
-    <button class="btn secondary" type="reset" id="cancel" ng-click="$ctrl.onCancel()">
+    <button class="primary" type="submit" id="submit">Add</button>
+    <button class="secondary" type="reset" id="cancel" ng-click="$ctrl.onCancel()">
       Abbrechen
     </button>
   </form>

diff --git a/packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts
@@ -18,13 +18,13 @@ ANGULARJS_MODULE.component('editSerie', {
   ],
   template: `
     <form ng-submit="$ctrl.onSubmit()">
-      <h5>Edit a existing measuring serie</h5>
+      <h2>Edit a existing measuring serie</h2>
       <editor-serie editor-form="$ctrl.editorForm"></editor-serie>
-      <button class="btn btn-primary" type="submit" id="submit">Edit</button>
-      <button class="btn btn-secondary" type="reset" id="cancel" ng-click="$ctrl.onCancel()">
+      <button class="primary" type="submit" id="submit">Edit</button>
+      <button class="secondary" type="reset" id="cancel" ng-click="$ctrl.onCancel()">
         Abbrechen
       </button>
-      <button class="btn btn-danger" id="delete" type="button" ng-click="$ctrl.onDelete()">
+      <button class="danger" id="delete" type="button" ng-click="$ctrl.onDelete()">
         Delete
       </button>
     </form>

diff --git a/packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts
@@ -17,12 +17,12 @@ ANGULARJS_MODULE.component('listSerie', {
   ],
   template: `
     <div>
-      <h5>List</h5>
+      <h2>List</h2>
       <div>
-        <button class="btn btn-success" id="add" type="button" ng-click="$ctrl.add()">
+        <button class="primary" id="add" type="button" ng-click="$ctrl.add()">
           Add
         </button>
-        <button class="btn btn-info" id="start" type="button" ng-if="$ctrl.showPerformanceButton" ng-click="$ctrl.onStart()">
+        <button id="start" type="button" ng-if="$ctrl.showPerformanceButton" ng-click="$ctrl.onStart()">
           Performance
         </button>
       </div>
@@ -43,7 +43,7 @@ ANGULARJS_MODULE.component('listSerie', {
             <td>{{ serie.getTitle() }}</td>
             <td>{{ serie.getUnit() }}</td>
             <td>
-              <button class="btn btn-info" id="edit-{{$index}}" type="button" ng-click="$ctrl.edit(serie)">
+              <button id="edit-{{$index}}" type="button" ng-click="$ctrl.edit(serie)">
                 Edit
               </button>
             </td>

diff --git a/packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.html b/packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.html
@@ -2,8 +2,8 @@
   <require from="../series/create/component.aurelia"></require>
   <require from="../series/edit/component.aurelia"></require>
   <require from="../series/list/component.aurelia"></require>
-  <div id="app">
-    <h4>${framework.name} v${framework.version}</h4>
+  <div class="my-app">
+    <h1>${framework.name} v${framework.version}</h1>
     <small>${finishedRendering} ms upcomming time</small>
     <list-serie if.bind="resolvedRoute.url === 'series'"></list-serie>
     <create-serie if.bind="resolvedRoute.url === 'series/create'"></create-serie>

diff --git a/packages/cli/frameworks/aurelia/template/src/components/input/component.aurelia.html b/packages/cli/frameworks/aurelia/template/src/components/input/component.aurelia.html
@@ -1,6 +1,6 @@
 <template>
-  <div class="form-group">
+  <div>
     <label for="${control.id}">${control.label}</label>
-    <input class="form-control" id="${control.id}" name="${control.name}" value.bind="control.value" />
+    <input id="${control.id}" name="${control.name}" value.bind="control.value" />
   </div>
 </template>
diff --git a/packages/cli/frameworks/aurelia/template/src/components/series/create/component.aurelia.html b/packages/cli/frameworks/aurelia/template/src/components/series/create/component.aurelia.html
@@ -1,9 +1,9 @@
 <template>
   <require from="../editor/component.aurelia"></require>
   <form submit.delegate="onSubmit()">
-    <h5>Create a new measuring serie</h5>
+    <h2>Create a new measuring serie</h2>
     <editor-serie editor-form.bind="editorForm"></editor-serie>
-    <button class="btn btn-primary" type="submit" id="submit">Add</button>
-    <button class="btn secondary" type="reset" id="cancel" click.delegate="onCancel()">Abbrechen</button>
+    <button class="primary" type="submit" id="submit">Add</button>
+    <button class="secondary" type="reset" id="cancel" click.delegate="onCancel()">Abbrechen</button>
   </form>
 </template>
diff --git a/packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.html b/packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.html
@@ -1,10 +1,10 @@
 <template>
   <require from="../editor/component.aurelia"></require>
   <form submit.delegate="onSubmit()">
-    <h5>Edit a existing measuring serie</h5>
+    <h2>Edit a existing measuring serie</h2>
     <editor-serie editor-form.bind="editorForm"></editor-serie>
-    <button class="btn btn-primary" type="submit" id="submit">Edit</button>
-    <button class="btn btn-secondary" type="reset" id="cancel" click.delegate="onCancel()">Abbrechen</button>
-    <button class="btn btn-danger" id="delete" type="button" click.delegate="onDelete()">Delete</button>
+    <button class="primary" type="submit" id="submit">Edit</button>
+    <button class="secondary" type="reset" id="cancel" click.delegate="onCancel()">Abbrechen</button>
+    <button class="danger" id="delete" type="button" click.delegate="onDelete()">Delete</button>
   </form>
 </template>
diff --git a/packages/cli/frameworks/aurelia/template/src/components/series/list/component.aurelia.html b/packages/cli/frameworks/aurelia/template/src/components/series/list/component.aurelia.html
@@ -1,11 +1,9 @@
 <template>
   <div>
-    <h5>List</h5>
+    <h2>List</h2>
     <div>
-      <button class="btn btn-success" id="add" type="button" click.delegate="add()">Add</button>
-      <button class="btn btn-info" id="start" type="button" if.bind="showPerformanceButton" click.delegate="onStart()">
-        Performance
-      </button>
+      <button class="primary" id="add" type="button" click.delegate="add()">Add</button>
+      <button id="start" type="button" if.bind="showPerformanceButton" click.delegate="onStart()">Performance</button>
     </div>
     <table class="table" repeat.for="element of elements">
       <thead>
@@ -24,7 +22,7 @@ <h5>List</h5>
           <td>${serie.getTitle()}</td>
           <td>${serie.getUnit()}</td>
           <td>
-            <button class="btn btn-info" id="edit-${$index}" type="button" click.delegate="edit(serie)">Edit</button>
+            <button id="edit-${$index}" type="button" click.delegate="edit(serie)">Edit</button>
           </td>
         </tr>
       </tbody>

diff --git a/packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx
@@ -31,10 +31,10 @@ export class AppComponent extends InvernoComponent<unknown, AppController> imple
 
   public render(): JSX.Element {
     return (
-      <div id="app">
-        <h4>
+      <div class="my-app">
+        <h1>
           {this.ctrl.framework.name} v{this.ctrl.framework.version}
-        </h4>
+        </h1>
         <small>{this.ctrl.finishedRendering} ms upcomming time</small>
         {this.resolvedRoute.url === 'series' && <ListSerieComponent />}
         {this.resolvedRoute.url === 'series/create' && <CreateSerieComponent />}

diff --git a/packages/cli/frameworks/inferno/template/src/components/series/create/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/create/component.inferno.tsx
@@ -20,9 +20,9 @@ export class CreateSerieComponent extends InvernoComponent<unknown, unknown> imp
           this.ctrl.onSubmit();
         }}
       >
-        <h5>Create a new measuring serie</h5>
+        <h2>Create a new measuring serie</h2>
         <EditorSerieComponent editorForm={this.ctrl.editorForm} />
-        <button className="btn btn-primary" type="submit" id="submit">
+        <button className="primary" type="submit" id="submit">
           Add
         </button>
         <button

diff --git a/packages/cli/frameworks/inferno/template/src/components/series/edit/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/edit/component.inferno.tsx
@@ -26,13 +26,13 @@ export class EditSerieComponent extends InvernoComponent<Props, EditSerieControl
           this.ctrl.onSubmit();
         }}
       >
-        <h5>Edit a existing measuring serie</h5>
+        <h2>Edit a existing measuring serie</h2>
         <EditorSerieComponent editorForm={this.ctrl.editorForm} />
-        <button className="btn btn-primary" type="submit" id="submit">
+        <button className="primary" type="submit" id="submit">
           Edit
         </button>
         <button
-          className="btn btn-secondary"
+          className="secondary"
           type="reset"
           id="cancel"
           onClick={() => {
@@ -42,7 +42,7 @@ export class EditSerieComponent extends InvernoComponent<Props, EditSerieControl
           Abbrechen
         </button>
         <button
-          className="btn btn-danger"
+          className="danger"
           id="delete"
           type="button"
           onClick={() => {

diff --git a/packages/cli/frameworks/inferno/template/src/components/series/list/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/list/component.inferno.tsx
@@ -36,7 +36,6 @@ export class ListSerieComponent extends InvernoComponent<unknown, unknown> imple
                   <td>{serie.getUnit()}</td>
                   <td>
                     <button
-                      className="btn btn-info"
                       id={`edit-${index}`}
                       type="button"
                       onClick={() => {
@@ -56,10 +55,10 @@ export class ListSerieComponent extends InvernoComponent<unknown, unknown> imple
     }
     return (
       <div>
-        <h5>List</h5>
+        <h2>List</h2>
         <div>
           <button
-            className="btn btn-success"
+            className="primary"
             id="add"
             type="button"
             onClick={() => {
@@ -70,7 +69,6 @@ export class ListSerieComponent extends InvernoComponent<unknown, unknown> imple
           </button>
           {this.ctrl.showPerformanceButton && (
             <button
-              className="btn btn-info"
               id="start"
               type="button"
               onClick={() => {