Update cards UI

YellowFish085 · May 1, 2020 · 38e8e5e · 38e8e5e
1 parent 4c5fc14
commit 38e8e5e
Show file tree

Hide file tree

Showing 12 changed files with 1,125 additions and 219 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,8 +20,10 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
+    "color": "^3.1.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",

diff --git a/src/App.vue b/src/App.vue
@@ -449,112 +449,11 @@ a {
     }
 
     .card {
-      background: rgb(var(--color-foreground));
-      border-radius: 3px;
-      box-shadow: 0 2px 20px rgba(var(--color-shadow), .09);
-      overflow: hidden;
-      position: relative;
-
       a {
         color: inherit;
         outline: 0;
         text-decoration: none;
         transition: 0.15s;
-
-        &:hover {
-          color: rgb(var(--color-blue));
-        }
-      }
-
-      .cover {
-        background-position: 50%;
-        background-repeat: no-repeat;
-        background-size: cover;
-        position: relative;
-
-        .overlay {
-          background: rgba(var(--color-overlay), 0.8);
-          color: rgba(var(--color-text-bright));
-          padding: 12px;
-          position: relative;
-
-          .title {
-            color: rgb(var(--color-text-bright));
-            font-size: 1.4rem;
-            line-height: 17px;
-          }
-
-          .subtitle {
-            color: rgb(var(--color-blue));
-            font-size: 1.2rem;
-            margin-top: 8px;
-          }
-        }
-      }
-
-      &--placeholder {
-        .cover {
-          background-color: rgba(var(--color-background), 0.8);
-          border-radius: 3px;
-          overflow: hidden;
-          padding: relative;
-
-          &:before {
-            animation: loading-pulse-data 2s linear infinite;
-            background: linear-gradient(90deg,
-              rgba(var(--color-background),0) 0,
-              rgba(var(--color-blue-dim),.15) 40%,
-              rgba(var(--color-blue-dim),.15) 60%,
-              rgba(var(--color-background),0));
-            content: '';
-            display: block;
-            height: 100%;
-            transform: translateX(0);
-            width: 200%;
-          }
-        }
-
-        .block {
-          background-color: rgba(var(--color-background), 0.8);
-          border-radius: 2px;
-          margin: 14px 20px;
-          overflow: hidden;
-
-          &:before {
-            animation: loading-pulse-data 2s linear infinite;
-            background: linear-gradient(90deg,
-              rgba(var(--color-background),0) 0,
-              rgba(var(--color-blue-dim),.15) 40%,
-              rgba(var(--color-blue-dim),.15) 60%,
-              rgba(var(--color-background),0));
-            content: '';
-            display: block;
-            height: 100%;
-            transform: translateX(0);
-            width: 200%;
-          }
-
-          &--big {
-            height: 30px;
-            margin: 22px 20px;
-          }
-
-          &--medium {
-            height: 8px;
-            margin-bottom: 0;
-            width: 80%;
-          }
-
-          &--small {
-            height: 8px;
-            margin-bottom: 0;
-            width: 60%;
-          }
-
-          &--no-margin {
-            margin: 0;
-          }
-        }
       }
     }
   }

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -78,6 +78,9 @@
   "ENUM_BOTTOM": {
     "message": "Bottom"
   },
+  "ENUM_CANCELED": {
+    "message": "Canceled"
+  },
   "ENUM_CENTER": {
     "message": "Center"
   },
@@ -90,15 +93,45 @@
   "ENUM_FALL": {
     "message": "Fall"
   },
+  "ENUM_FINISHED": {
+    "message": "Finished"
+  },
   "ENUM_MANGA": {
     "message": "Manga"
   },
+  "ENUM_MOVIE": {
+    "message": "Movie"
+  },
+  "ENUM_MUSIC": {
+    "message": "Music"
+  },
+  "ENUM_NOT_YET_RELEASED": {
+    "message": "Not yet releasing"
+  },
+  "ENUM_NOVEL": {
+    "message": "Novel"
+  },
+  "ENUM_ONA": {
+    "message": "ONA"
+  },
+  "ENUM_ONE_SHOT": {
+    "message": "One shot"
+  },
+  "ENUM_OVA": {
+    "message": "OVA"
+  },
+  "ENUM_RELEASING": {
+    "message": "Releasing"
+  },
   "ENUM_RIGHT": {
     "message": "Right"
   },
   "ENUM_SPRING": {
     "message": "Spring"
   },
+  "ENUM_SPECIAL": {
+    "message": "Special"
+  },
   "ENUM_SUMMER": {
     "message": "Summer"
   },
@@ -111,6 +144,12 @@
   "ENUM_TOP": {
     "message": "Top"
   },
+  "ENUM_TV": {
+    "message": "TV"
+  },
+  "ENUM_TV_SHORT": {
+    "message": "TV Short"
+  },
   "ENUM_WINTER": {
     "message": "Winter"
   },
@@ -192,6 +231,9 @@
   "S_Changelog": {
     "message": "Changelog"
   },
+  "S_Chapters": {
+    "message": "chapters"
+  },
   "S_Clear": {
     "message": "Clear"
   },
@@ -219,6 +261,9 @@
   "S_EnableWebIntegrationDescription": {
     "message": "<b>AL Search</b> comes with a web integration feature that adds a button on the page to some website related to anime and manga culture (e.g. Crunchyroll) with a few actions."
   },
+  "S_Episodes": {
+    "message": "episodes"
+  },
   "S_Error": {
     "message": "Error"
   },
@@ -264,6 +309,15 @@
   "S_FilterByYear": {
     "message": "Filter by year"
   },
+  "S_NextAiringEpisodeIn": {
+    "message": "Ep $DATA$ airing in",
+    "placeholders": {
+      "data": {
+        "content": "$1",
+        "example": "<Episode number>"
+      }
+    }
+  },
   "S_NoMediaForStudio": {
     "message": "No media to preview for this studio."
   },
@@ -288,12 +342,30 @@
   "S_OverlayY": {
     "message": "(top / center / bottom)"
   },
+  "S_PublishingSince": {
+    "message": "Publishing since $DATA$",
+    "placeholders": {
+      "data": {
+        "content": "$1",
+        "example": "<Date>"
+      }
+    }
+  },
   "S_Refresh": {
     "message": "Refresh"
   },
   "S_RefreshMyData": {
     "message": "Refresh my data"
   },
+  "S_ReleasingSince": {
+    "message": "Releasing since $DATA$",
+    "placeholders": {
+      "data": {
+        "content": "$1",
+        "example": "<Date>"
+      }
+    }
+  },
   "S_ResultsGlobalFirst": {
     "message": "Global results first"
   },