feat: frontend first concept (layout etc.)

adfinis · Oct 23, 2023 · 29dfe1e · 29dfe1e
1 parent 840c5d4
commit 29dfe1e
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 73 deletions.
diff --git a/frontend/app/components/package-compact/component.js b/frontend/app/components/package-compact/component.js
@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+export default class ProjectCompactComponent extends Component {
+  get color() {
+    let { state } = this.args;
+    switch (state) {
+      case 'outdated':
+        return 'danger';
+      case 'warning':
+        return state;
+      case 'up-to-date':
+        return 'success';
+    }
+  }
+}
diff --git a/frontend/app/components/package-compact/template.hbs b/frontend/app/components/package-compact/template.hbs
@@ -0,0 +1,4 @@
+<span
+  {{uk-tooltip (concat 'EOL: ' (or @eol_date '2023-11-07')) pos='bottom'}}
+  class='uk-text-{{or this.color "success"}} '
+>{{or @name 'ember'}} {{or @version '4.9'}}</span>
diff --git a/frontend/app/components/project-compact/component.js b/frontend/app/components/project-compact/component.js
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+
+export default class ProjectCompactComponent extends Component {
+  get icon() {
+    let { state } = this.args;
+    switch (state) {
+      case 'outdated':
+        return 'bolt';
+      case 'warning':
+        return state;
+      case 'up-to-date':
+        return 'check';
+      default:
+        console.log(
+          'app/components/project-compact/component.js invalid state!'
+        );
+        return 'invalid state!!!';
+    }
+  }
+}
diff --git a/frontend/app/components/project-compact/template.hbs b/frontend/app/components/project-compact/template.hbs
@@ -0,0 +1,22 @@
+<div class='od-project-compact'>
+
+  <UkCard as |card|>
+
+    <LinkTo @route='details'>
+      <h3 class='od-title-compact'>{{@name}}</h3></LinkTo>
+
+    <card.body>
+
+      <div class='od-icon-compact'>
+
+        <UkIcon @icon='{{this.icon}}' @ratio={{4}} />
+
+      </div>
+      {{#if (has-block)}}
+        {{yield}}
+      {{else}}
+        <PackageCompact />
+      {{/if}}
+    </card.body>
+  </UkCard>
+</div>
diff --git a/frontend/app/components/project-detailed/template.hbs b/frontend/app/components/project-detailed/template.hbs
@@ -0,0 +1,60 @@
+<div class='od-project'>
+  <UkCard as |card|>
+    <card.header>
+      <card.title>{{@name}}</card.title>
+      <a href='https://github.com/adfinis/outdated' target='blank_'>
+        <UkButton @color='text' @label='Repository' /></a>
+    </card.header>
+    <card.body class='uk-padding-remove-top'>
+      <div class='od-package-table'>
+        <table>
+          <thead><tr><th>Package</th><th>Version</th><th>End Of Life Date</th><th
+              >Release Date</th></tr></thead>
+
+          <tbody>
+            <Package
+              @name='Python'
+              @version='8.3.16'
+              @eol_date='2033-11-11'
+              @rel_date='2011-12-12'
+              @status='package-outdated'
+            />
+
+            <Package
+              @name='Django'
+              @version='3.2.16'
+              @eol_date='2033-11-11'
+              @rel_date='2015-09-14'
+              @status='package-warning'
+            />
+            <Package
+              @name='django-environ'
+              @version='1.0.3'
+              @eol_date='2023-06-23'
+              @rel_date='2012-11-12'
+            />
+            <Package
+              @name='embroider'
+              @version='1.8.3'
+              @eol_date='2026-01-21'
+              @rel_date='2022-11-12'
+            />
+            <Package
+              @name='yarn'
+              @version='1.23.12'
+              @eol_date='2013-07-13'
+              @rel_date='2017-05-12'
+            />
+            <Package
+              @name='ember-focus-trap'
+              @version='1.0.1'
+              @eol_date='1934-03-23'
+              @rel_date='2016-03-12'
+            />
+
+          </tbody>
+        </table>
+      </div>
+    </card.body>
+
+  </UkCard></div>
diff --git a/frontend/app/components/project/template.hbs b/frontend/app/components/project/template.hbs
diff --git a/frontend/app/router.js b/frontend/app/router.js
@@ -9,4 +9,5 @@ export default class Router extends EmberRouter {
 Router.map(function () {
   this.route('overview', { path: '/' });
   this.route('create');
+  this.route('details', { path: '/projects/nanosoft' });
 });
diff --git a/frontend/app/styles/app.scss b/frontend/app/styles/app.scss
@@ -1,5 +1,25 @@
 @import 'ember-uikit';
 
+/* Font */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+html {
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+/* Utility Classes*/
+
+.od-margin-small {
+  @extend .uk-margin-small-left;
+  @extend .uk-margin-small-right;
+  @extend .uk-margin-small-bottom;
+  @extend .uk-margin-small-top;
+}
+
 /*Table*/
 .od-table {
   @extend .uk-table;
@@ -15,11 +35,6 @@
 
 /* Package Table */
 .od-package-table {
-  .od-package-table-scroll-container {
-    @extend .uk-overflow-auto;
-    @extend .uk-height-max-medium;
-    border: 1px solid #e3e3e3;
-  }
   table,
   .od-package-table-head {
     @extend .od-table;
@@ -80,3 +95,50 @@
     }
   }
 }
+/* Compact Projects*/
+.od-projects-compact {
+  @extend .uk-container;
+  @extend .uk-container-expand;
+  @extend .uk-grid;
+  @extend .uk-grid-small;
+  @extend .uk-grid-match;
+}
+.od-project-compact {
+  @extend .od-margin-small;
+  a {
+    @extend .uk-text-decoration-none;
+  }
+
+  width: 17.5%;
+  .od-title-compact {
+    margin: 0;
+    @extend .uk-text-center;
+    @extend .uk-text-nowrap;
+    padding-top: 6px;
+    padding-inline: 10px;
+    &:hover {
+      background: #fbfbfb;
+    }
+  }
+  .uk-card-body {
+    @extend .uk-padding-small;
+    @extend .uk-padding-remove-top;
+
+    @extend .uk-flex;
+    @extend .uk-flex-column;
+    @extend .uk-flex-middle;
+    @extend .uk-flex-center;
+    .od-icon-compact {
+      span[icon='bolt'] {
+        @extend .uk-text-danger;
+      }
+      span[icon='warning'] {
+        @extend .uk-text-warning;
+        margin-right: 10px;
+      }
+      span[icon='check'] {
+        @extend .uk-text-success;
+      }
+    }
+  }
+}
diff --git a/frontend/app/templates/details.hbs b/frontend/app/templates/details.hbs
@@ -0,0 +1 @@
+<ProjectDetailed @name='Outdated' />
diff --git a/frontend/app/templates/overview.hbs b/frontend/app/templates/overview.hbs
@@ -1,5 +1,25 @@
-<div>
-  <Project @name='Nanosoft' />
-  <Project @name='Timed' />
-  <Project @name='Outdated' />
+<div class='od-projects-compact'>
+  <ProjectCompact @state='outdated' @name='camac-ng'>
+    <PackageCompact
+      @version='2.8.8'
+      @name='python'
+      @state='outdated'
+      @eol_date='2020-11-11'
+    />
+  </ProjectCompact>
+  <ProjectCompact @state='up-to-date' @name='WIGL' />
+  <ProjectCompact @state='warning' @name='outdated'>
+    <PackageCompact @state='warning' @name='psycopg2' @version='1.2.3' />
+  </ProjectCompact>
+
+  <ProjectCompact @state='outdated' @name='ebau'>
+    <PackageCompact @state='outdated' @name='psycopg2' @version='0.1.3' />
+  </ProjectCompact>
+
+  <ProjectCompact @state='outdated' @name='camac-ng'>
+    <PackageCompact @state='outdated' @name='paython' version='1.3.4' />
+  </ProjectCompact>
+  <ProjectCompact @state='up-to-date' @name='timed' />
+  <!--Maybe Add Pagination-->
+
 </div>