workspace projects list

scss/atat.scss

@@ -29,3 +29,4 @@
 
 @import 'sections/login';
 @import 'sections/request_approval';
+@import 'sections/projects_list';

scss/elements/_block_lists.scss

@@ -12,6 +12,9 @@
   @include panel-base;
   @include panel-theme-default;
   padding: $gap * 2;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 @mixin block-list__title {

scss/elements/_tables.scss

@@ -16,10 +16,12 @@
 
     th {
       @include block-list-header;
+      display: table-cell;
     }
 
     td {
       @include block-list-item;
+      display: table-cell;
     }
 
     &:last-child {

scss/sections/_projects_list.scss

@@ -0,0 +1,33 @@
+.project-list-item {
+  .project-list-item__environment {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .project-list-item__environment__link {
+      text-decoration: none;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .icon {
+        @include icon-color($color-primary);
+        margin-right: $gap;
+      }
+
+      span {
+        text-decoration: underline;
+      }
+    }
+
+    .project-list-item__environment__members {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      span {
+        @include h6;
+      }
+    }
+  }
+}

templates/workspace_projects.html.to

@@ -2,25 +2,29 @@
 
 {% block workspace_content %}
 
-<div class="panel">
-  <div class='responsive-table-wrapper'>
-    <table>
-      <thead>
-        <tr>
-          <th scope="col">Name</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for p in projects %}
-        <tr>
-          <td>{{ p['name'] }}</td>
-        </tr>
-        {% end %}
-      </tbody>
-    </table>
-  </div>
-</div>
+{% for project in projects %}
+  <div class='block-list project-list-item'>
+    <header class='block-list__header'>
+      <h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
+      <a class='block-list__header__link' href='/'>edit</a>
+    </header>
+    <ul>
+      {% for environment in project['environments'] %}
+        <li class='block-list__item project-list-item__environment'>
+          <a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
+            {% module Icon('link') %}
+            <span>{{ environment["name"]}}</span>
+          </a>
 
+          <div class='project-list-item__environment__members'>
+            <div class='label'>0</div>
+            <span>members</span>
+          </div>
+        </li>
+      {% end %}
+    </ul>
+  </div>
+{% end %}
 
 {% end %}