package.json

 {
   "name": "@coscine/project",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "private": true,
   "directories": {
     "doc": "docs"
@@ -12,9 +12,9 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.1.0",
-    "@coscine/app-util": "^1.0.0",
-    "@coscine/project-creation": "^1.0.1",
+    "@coscine/api-connection": "^1.2.0",
+    "@coscine/app-util": "^1.1.0",
+    "@coscine/project-creation": "^1.1.0",
     "@itcenter-layout/bootstrap": "^1.4.3",
     "@itcenter-layout/masterpage": "^1.2.5",
     "@types/jquery": "^3.3.31",

src/App.vue

 <template>
   <div id="project" class="container">
     <h4 style="text-align: left;">{{ $t('headline') }}:</h4>
-    <component :is="currentComponent" @back="back" @openCreate="openCreate" v-bind:languageLocale="language"/>
+    <component :is="currentComponent" v-bind:projectId="selectedProjectId" @back="back" @openCreate="openCreate"  v-bind:languageLocale="language"/>
   </div>
 </template>
 
@@ -18,11 +18,17 @@ export default Vue.extend({
   data() {
     return {
       currentComponent: 'List',
+      selectedProjectId: '',
       language: LanguageUtil.getLanguage(),
     };
   },
   methods: {
-    openCreate() {
+    openCreate(projectId: any) {
+      if (projectId) {
+        this.selectedProjectId = projectId;
+      } else {
+        this.selectedProjectId = '';
+      }
       this.currentComponent = 'CreateProject';
     },
     back() {

src/components/List.vue

 <template>
   <div class="list">
     <b-card-group deck class="dashboard">
-      <b-card v-for="(project, index) in projects" :key="index" class="project_card" @click.prevent="redirect(project)">  
+      <b-card v-for="(project, index) in projects" :key="index" class="project_card" @click.prevent="redirect(project)">
         <b-row>
           <div class="col icon_bar">
-            <button class="edit_button float-right" style="float:right;">
+            <button class="edit_button float-right" @click.stop.prevent="click_edit(project)" style="float:right;">
               <EditIcon title="" />
             </button>
           </div>
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { ProjectApi, defaultOnCatch } from '@coscine/api-connection';
+import { ProjectApi, defaultOnCatch, redirectToProject } from '@coscine/api-connection';
 
 import EditIcon from 'vue-material-design-icons/Pencil.vue';
 
@@ -76,8 +76,10 @@ export default Vue.extend({
       this.$emit('openCreate');
     },
     redirect(project: any) {
-      const baseUrl = (_spPageContextInfo as any).siteAbsoluteUrl;
-      window.location.href = baseUrl + '/p/' + project.id + '/';
+      redirectToProject(project);
+    },
+    click_edit(project: any) {
+      this.$emit('openCreate', project.id);
     },
   },
   components: {
@@ -87,40 +89,59 @@ export default Vue.extend({
 </script>
 
 <style>
+</style>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
 .dashboard h2 {
   text-align: left;
   margin-left: 0.15em;
 }
-.card-deck .card.project_card {
-  cursor: pointer;
-  min-width: 8em;
-  min-height: 8em;
-  max-width: 8em;
-  max-height: 8em;
-  width: 8em;
-  height: 8em;
-  margin: 0.5em;
-  text-align: center;
-}
-.project_card:hover {
-  background-color: #cccccc !important;
-}
-.card_icon {
-  width: 2.5em;
-}
 .dashboard h6 {
+  margin: 0.3em;
   color: #00549f;
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap;
+  white-space: pre-wrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 .dashboard div.card-body {
   padding: 0 0 0 0;
 }
+.dashboard div.card-body{
+  margin-right: -15px;
+  margin-left: -15px;
+}
 .dashboard div.container-fluid {
   padding: 0;
 }
-.edit_button {
+.card_icon {
+  width: 3em;
+}
+.card-deck .card.project_card {
+  cursor: pointer;
+  min-width: 9em;
+  min-height: 9em;
+  max-width: 9em;
+  max-height: 9em;
+  width: 9em;
+  height: 9em;
+  margin: 0.5em;
+  text-align: center;
+}
+.icon_bar {
+  height: 2em;
+  visibility: hidden;
+}
+.project_card:hover .icon_bar {
+  visibility: visible;
+}
+.project_card:hover {
+  background-color: #cccccc;
+}
+.icon_bar .edit_button {
   padding: 0.1em;
   width: auto;
   height: auto;
@@ -132,19 +153,10 @@ export default Vue.extend({
   border-color: #00549f;
   border-image: none;
 }
-.icon_bar {
-  height: 2em;
+.icon_bar .edit_button:hover {
+  color: white;
+  background-color: #00549f;
 }
-.icon_bar {
-  visibility: hidden;
-}
-.project_card:hover .icon_bar {
-  visibility: visible;
-}
-</style>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
 h3 {
   margin: 40px 0 0;
 }
@@ -157,6 +169,6 @@ li {
   margin: 0 10px;
 }
 a {
-  color: #42b983;
+  color: #57ab27;
 }
 </style>

vue.config.js

@@ -2,18 +2,18 @@ module.exports = {
     devServer: {
         disableHostCheck: true,
     },
-	publicPath: './',
+    publicPath: './',
     configureWebpack: {
         devtool: 'source-map',
         devServer: {
             port: 9525,
         }
     },
-	filenameHashing: false,
-	chainWebpack: config => {
-		config.optimization.delete('splitChunks')
-	},
-	css: {
+    filenameHashing: false,
+    chainWebpack: config => {
+        config.optimization.delete('splitChunks')
+    },
+    css: {
         extract: false,
     },
 }
\ No newline at end of file