docs: update design

mercurius-js · Feb 16, 2023 · 10d2bdb · 10d2bdb
1 parent 6eea162
commit 10d2bdb
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 24 deletions.
diff --git a/docs/contribute.md b/docs/contribute.md
@@ -19,31 +19,26 @@ If you don't know where to start you can have a look at the list of good first i
   <div v-if="issues.length > 0" class="issues">
     <div v-for="issue in filteredIssues" class="good-issue">
       <div class="card">
-        <div class="card-content">
-          <div class="media">
-            <div class="media-content">
-              <p class="title is-4">
-                <a :href="issue.url">{{ issue.title }}</a>
-              </p>
-              <p class="subtitle is-6">
+        <div class="card-header">
+            <div class="subtitle">
                 <a :href="issue.project.url">{{ issue.project.name }}</a>
-              </p>
-              <p>
-                <strong>{{ issue.comments }}</strong>
-                <span> Comments</span>
-              </p>
             </div>
-          </div>
+        </div>
+        <div class="card-content">
+            <h3 class="title">
+              <a :href="issue.url">{{ issue.title }}</a>
+            </h3>
+            <div class="issue-labels">
+                <div v-for="label in issue.labels" >
+                     <span class="issue-label">{{ label }}</span>
+                </div>
+            </div>
+            <div class="issue-comments">
+              <strong>{{ issue.comments }}</strong>
+              <span> Comments</span>
+            </div>
         </div>
       </div>
     </div>
   </div>
-  <div v-if="Object.keys(projects).length > 0" class="project-filters">
-    <!-- <label v-for="(project, name) in projects" class="panel-block checkbox">
-      <input :type="checkbox" :checked="project.selected" @change="toggleProject(name, $event.target.checked)" />
-      <span>{{ name }} <span class="has-text-grey-light">({{ project.count }})</span></span>
-    </label> -->
-    <button @click="_toggleProjects(true)">Select All</button>
-    <button @click="_toggleProjects(false)">Clear All</button>
-  </div>
 </div>
diff --git a/index.html b/index.html
@@ -48,8 +48,59 @@
         flex-direction: column;
       }
 
+
       .good-issue {
-        margin: 0 0 .5em 0;
+        margin: 0 0 1em 0;
+      }
+
+      .good-issue .card {
+        border-radius: 5px;
+        -webkit-box-shadow: 3px 3px 10px 4px rgba(40, 40, 40, 0.99);
+        -moz-box-shadow: 3px 3px 10px 4px rgba(40, 40, 40, 0.99);
+        -o-box-shadow: 3px 3px 10px 4px rgba(40, 40, 40, 0.99);
+        box-shadow: 3px 3px 10px 4px rgba(40, 40, 40, 0.99);
+      }
+
+      .good-issue .card .card-content {
+        display: flex;
+        flex-direction: column;
+        padding: 0 1em .5em 1em;
+      }
+
+      .good-issue .card .card-content .title{
+        font-size: 24px;
+        margin-bottom: 0.5em;
+      }
+
+      .good-issue .card .card-content .issue-labels {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .good-issue .card .card-content .issue-label{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 15px;
+        background-color: #111111;
+        padding: .1em 1em;
+        margin-right: .3em;
+        margin-bottom: .3em;
+        border-radius: 15px;
+      }
+
+      .good-issue .card .card-content .issue-comments{
+        margin-left: .3em;
+        font-size: 15px;
+      }
+      .good-issue .card .card-header{
+        display: flex;
+        justify-content: right;
+        padding: 0 .5em;
+      }
+
+      .good-issue .card .card-header .subtitle{
+        font-size: 18px;
       }
 
       .error-result,
@@ -97,8 +148,7 @@
           },
           created() {
             this.loading = true
-            // fetch('https://goodfirstissue.fastify.io/api/find-issues?org=mercurius-js')
-            fetch('https://gh-issues-finder-backend-k44evywkza-ew.a.run.app/api/find-issues?org=mercurius-js')
+            fetch('https://goodfirstissue.fastify.io/api/find-issues?org=mercurius-js')
               .then(resp => resp.json())
               .then(data => {
                 this.issues = data.results