Merge branch 'feat/cards'

FRC-1721 · Jan 5, 2025 · e27c76f · e27c76f
2 parents 4341546 + 65b379d
commit e27c76f
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/app/__init__.py b/app/__init__.py
@@ -30,6 +30,7 @@ def index():
             milestones_data.append(
                 {
                     "name": milestone.title,
+                    "repo_name": repo_name,
                     "progress": (
                         (
                             milestone.closed_issues
@@ -51,6 +52,7 @@ def index():
             issues_data.append(
                 {
                     "number": issue.number,
+                    "repo_name": repo_name.split("/")[1],
                     "title": issue.title,
                     "user": issue.user.login,
                     "additions": 0,  # GitHub API doesn't directly provide these
@@ -65,6 +67,7 @@ def index():
             pr_data.append(
                 {
                     "number": pr.number,
+                    "repo_name": repo_name.split("/")[1],
                     "title": pr.title,
                     "user": pr.user.login,
                     "additions": pr_details.additions,

diff --git a/app/static/style.css b/app/static/style.css
@@ -7,6 +7,13 @@ body {
   color: #fff;
 }
 
+.repo-name {
+  font-size: 0.8em;
+  color: #888;
+  margin-top: 5px;
+  text-align: center;
+}
+
 /* Milestone Progress Bars */
 #milestones {
   width: 100%;
@@ -22,6 +29,12 @@ body {
   position: relative;
 }
 
+.milestone-subtitle {
+  font-size: 0.9em;
+  color: #777;
+  margin: 5px 0;
+}
+
 .progress-bar {
   background: #555;
   height: 60px;
@@ -80,13 +93,13 @@ body {
   border: 1px solid #555;
   padding: 10px;
   border-radius: 4px;
-  overflow-y: auto;
-  max-height: 60vh;
+  overflow-y: hidden;
+  max-height: 90vh;
 }
 
 .stat-box h2 {
   margin: 0 0 10px;
-  font-size: 18px;
+  font-size: 22px;
   border-bottom: 1px solid #666;
   padding-bottom: 5px;
   text-align: left;
@@ -97,6 +110,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 5px;
+  height: 100%;
 }
 
 .card {
@@ -110,20 +124,6 @@ body {
   gap: 10px;
   height: 60px;
 }
-
-.card-number {
-  background: #ffa500;
-  color: #222;
-  font-weight: bold;
-  font-size: 30px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 100%;
-}
-
 .card-content {
   flex: 1;
   display: flex;
@@ -150,3 +150,35 @@ body {
   text-align: right;
   align-self: flex-end;
 }
+
+/* Card number */
+.number {
+  font-size: 3em;
+  font-weight: bold;
+  text-align: center;
+  position: relative;
+  background: orange; /* Orange background */
+  color: #222;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 110px;
+  height: 100%;
+}
+
+/* Override for when displaying repo name inside the card number */
+.number .repo-name {
+  font-weight: normal;
+  position: absolute;
+  bottom: 5px; /* Adjust for positioning */
+  text-align: center;
+  width: 100%;
+  color: rgba(255, 255, 255, 0.8); /* Slightly lighter text for contrast */
+  white-space: nowrap; /* Prevent wrapping */
+  overflow: hidden; /* Prevent text spilling */
+  text-overflow: ellipsis; /* Add ellipsis if too long */
+  font-size: min(
+    0.3em,
+    4vw
+  ); /* Dynamically scale font-size based on viewport width */
+}
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -15,6 +15,7 @@
     <section id="milestones">
         {% for milestone in milestones %}
         <div class="milestone">
+            <div class="milestone-subtitle"><span class="repo-name">{{ milestone.repo_name }}</span></div>
             <div class="progress-bar">
                 <div class="progress" style="width: {{ milestone.progress }}%;">
                     <span class="milestone-text">{{ milestone.name }} ({{ milestone.progress }}%)</span>
@@ -36,7 +37,10 @@ <h2>Issues ({{ issues_count }})</h2>
             <div class="card-container">
                 {% for issue in issues %}
                 <div class="card">
-                    <div class="card-number">#{{ issue.number }}</div>
+                    <div class="number">
+                        <div class="card-number">#{{ issue.number }}</div>
+                        <div class="repo-name">{{ issue.repo_name }}</div>
+                    </div>
                     <div class="card-content">
                         <span class="card-title">{{ issue.title }}</span>
                         <span class="card-meta">Opened by {{ issue.user }}</span>
@@ -52,7 +56,11 @@ <h2>Pull Requests ({{ pull_requests_count }})</h2>
             <div class="card-container">
                 {% for pr in pull_requests %}
                 <div class="card">
-                    <div class="card-number">#{{ pr.number }}</div>
+                    <div class="number">
+                        <div class="card-number">#{{ pr.number }}</div>
+                        <div class="repo-name">{{ pr.repo_name }}</div>
+                    </div>
+
                     <div class="card-content">
                         <span class="card-title">{{ pr.title }}</span>
                         <span class="card-meta">Opened by {{ pr.user }}</span>