refactor: move individual css into global css for sharing use

frontend/public/index.scss

@@ -1,3 +1,40 @@
 // 导入 Bulma
 @charset "utf-8";
 @import "bulma/bulma.sass";
+
+// coconut-leaf 全局样式
+
+// 卡片样式（作用于集合列表，Todo列表项等）
+div.paperbox-item {
+  display: flex;
+  flex-flow: row;
+  align-items: flex-start;
+
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+div.paperbox-item-words {
+  flex-grow: 1;
+  flex-basis: 0;
+
+  word-break: break-all;
+}
+
+div.paperbox-item-icon {
+  margin-left: 0.75rem;
+}
+
+// 按钮列表样式
+
+div.button-list {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+}
+
+div.button-list>* {
+  margin-right: 0.75rem;
+  margin-bottom: 0.75rem;
+  margin-left: 0 !important;
+}

frontend/src/components/collection/OwnedItem.vue

@@ -49,55 +49,35 @@ const cancelUpdateItem = () => {
 </script>
 
 <template>
-  <div class="item card">
+  <div class="paperbox-item card">
-    <div class="item-words">
+    <div class="paperbox-item-words">
       <p v-show="!isEditing">{{ name }}</p>
       <div v-show="isEditing" class="control">
         <input v-model="editingName" class="input" type="text"></input>
       </div>
     </div>
 
-    <div class="item-icon control" v-show="!isEditing" @click="editItem">
+    <div class="paperbox-item-icon control" v-show="!isEditing" @click="editItem">
       <a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
     </div>
-    <div class="item-icon control" v-show="!isEditing" @click="shareItem">
+    <div class="paperbox-item-icon control" v-show="!isEditing" @click="shareItem">
       <a class="button"><span class="icon is-small"><font-awesome-icon
             icon="fas fa-share"></font-awesome-icon></span></a>
     </div>
-    <div class="item-icon control" v-show="!isEditing" @click="deleteItem">
+    <div class="paperbox-item-icon control" v-show="!isEditing" @click="deleteItem">
       <a class="button"><span class="icon is-small"><font-awesome-icon
             icon="fas fa-trash"></font-awesome-icon></span></a>
     </div>
 
-    <div class="item-icon control" v-show="isEditing" @click="updateItem">
+    <div class="paperbox-item-icon control" v-show="isEditing" @click="updateItem">
       <button class="button"><span class="icon is-small"><font-awesome-icon
             icon="fas fa-check"></font-awesome-icon></span></button>
     </div>
-    <div class="item-icon control" v-show="isEditing" @click="cancelUpdateItem">
+    <div class="paperbox-item-icon control" v-show="isEditing" @click="cancelUpdateItem">
       <button class="button"><span class="icon is-small"><font-awesome-icon
             icon="fas fa-times"></font-awesome-icon></span></button>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-div.item {
-  display: flex;
-  flex-flow: row;
-  align-items: flex-start;
-
-  padding: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-div.item-words {
-  flex-grow: 1;
-  flex-basis: 0;
-
-  word-break: break-all;
-}
-
-div.item-icon {
-  margin-left: 0.75rem;
-}
-</style>

frontend/src/components/collection/SharingItem.vue

@@ -18,35 +18,15 @@ const deleteItem = () => {
 </script>
 
 <template>
-  <div class="item card">
+  <div class="paperbox-item card">
-    <div class="item-words">
+    <div class="paperbox-item-words">
       <p>{{ username }}</p>
     </div>
 
-    <div class="item-icon control" @click="deleteItem">
+    <div class="paperbox-item-icon control" @click="deleteItem">
       <a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-trash"></font-awesome-icon></span></a>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-div.item {
-    display: flex;
-    flex-flow: row;
-    align-items: flex-start;
-
-    padding: 1.25rem;
-    margin-bottom: 1.25rem;
-}
-
-div.item-words {
-    flex-grow: 1;
-    flex-basis: 0;
-
-    word-break: break-all;
-}
-
-div.item-icon {
-    margin-left: 0.75rem;
-}
-</style>

frontend/src/views/Collection.vue

@@ -194,7 +194,7 @@ const deleteSharingItem = async (username: string) => {
 <template>
   <div class="container" style="display: flex; flex-flow: column; margin-top: 1.25rem;">
     <h1 class="title">Owned</h1>
-    <div class="control-list">
+    <div class="button-list">
       <div class="field has-addons">
         <div class="control">
           <input v-model="pendingOwnedItemName" class="input" type="text">
@@ -225,7 +225,7 @@ const deleteSharingItem = async (username: string) => {
       <span>{{ isSharingItem ? ownedItems.get(sharingItemUuid!)![1] : "" }}</span>
     </label>
 
-    <div class="control-list">
+    <div class="button-list">
       <div class="field has-addons">
         <div class="control">
           <input v-model="pendingSharingItemUsername" class="input" type="text">
@@ -251,16 +251,4 @@ const deleteSharingItem = async (username: string) => {
   <MessageBox ref="messagebox" />
 </template>
 
-<style scoped>
+<style scoped></style>
-div.control-list {
-  display: flex; 
-  flex-flow: row;
-  flex-wrap: wrap;
-}
-
-div.control-list > * {
-  margin-right: 0.75rem;
-  margin-bottom: 0.75rem;
-  margin-left: 0 !important;
-}
-</style>