add basic topic card #1201

OpenEnergyPlatform · Apr 13, 2023 · 99f1325 · 99f1325
1 parent 12cb5e3
commit 99f1325
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 2 deletions.
diff --git a/base/static/css/bootstrap.min.css b/base/static/css/bootstrap.min.css
diff --git a/dataedit/templates/dataedit/dataedit_schemalist.html b/dataedit/templates/dataedit/dataedit_schemalist.html
@@ -40,6 +40,31 @@ <h1 class="main-header__title">
         <button type="button" class="btn btn-outline-info">View tables</button>
     </div>
 </div>
+<div class="topics">
+    <div class="topics__row">
+        <div class="topics__col">
+            <div class="topic-card">
+                <div class="topic-card__header">
+                    <div class="topic-card__header-top">
+                        <div class="topic-card__title">model_draft</div>
+                        <div class="topic-card__table-nb">738 tables</div>
+                    </div>
+                    <div class="topic-card__header-btm">
+                        <span class="topic-card__tag">various data</span>
+                        <span class="topic-card__tag">draft</span>
+                        <span class="topic-card__tag">not reviewed</span>
+                    </div>
+                </div>
+                <div class="topic-card__body topic-card__body--large">
+                  <p class="topic-card__text">Unfinished data of any kind. Note: there is no version control and data is still volatile.</p>
+                    <div class="topic-card__btn">
+                        <button type="button" class="btn btn-primary">Add data set</button>
+                    </div>
+                </div>
+              </div>
+        </div>
+    </div>
+</div>
 <!-- <table id="schemas" class="table table-hover table-bordered">
     <thead>
         <tr class="table-primary">

diff --git a/theming/oepstrap.scss b/theming/oepstrap.scss
@@ -2,4 +2,5 @@
 @use 'scss/components/headers';
 @use 'scss/components/tables';
 @use 'scss/layouts/database';
-@use 'scss/layouts/main';
+@use 'scss/layouts/main';
+@use 'scss/layouts/topics';
diff --git a/theming/scss/layouts/_topics.scss b/theming/scss/layouts/_topics.scss
@@ -0,0 +1,80 @@
+@use '../base/' as *;
+@use '../base/mixins' as *;
+
+.topics {
+    @extend .container-fluid;
+
+    &__row {
+        @extend .row;
+        @extend .pt-4;
+    }
+
+    &__col {
+        @extend .col;
+        @extend .px-0;
+    }
+
+    .topic-card {
+        @extend .card;
+
+        &__header {
+            @extend .card-header;
+        }
+
+        &__header-top {
+            @include flex-row;
+            @extend .justify-content-between;
+            @extend .align-items-end;
+            @extend .pb-2;
+        }
+
+        &__title {
+            @extend .fs-6;
+            @extend .fw-semibold;
+        }
+
+        &__table-nb {
+            @extend .fs-8;
+            @extend .fw-semibold;
+        }
+
+        &__header-btm {
+            @extend .pb-1;
+        }
+
+        &__tag {
+            @extend .rounded-pill;
+            @extend .bg-primary;
+            @extend .text-white;
+            padding: 3px 1rem;
+        }
+
+        &__body {
+            @extend .card-body;
+
+            &--large {
+                @include flex-row;
+                @extend .justify-content-between;
+
+                @include media-breakpoint-down(lg) {
+                    flex-direction: column;
+                }
+            }
+        }
+
+        &__text {
+            @extend .card-text;
+        }
+
+        &__btn {
+            @include flex-row;
+            @extend .justify-content-end;
+            @extend .align-items-end;
+            width: calc((#{$C--container-width} - (#{$C--padding-standard} * 2)) / 3);
+
+            @include media-breakpoint-down(lg) {
+                width: 100%;
+            }
+        }
+    }
+}