refactor: minor adjustment to github integration UI

comses · Oct 26, 2024 · b88a22a · b88a22a
1 parent a812066
commit b88a22a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/django/library/jinja2/library/codebases/releases/retrieve.jinja b/django/library/jinja2/library/codebases/releases/retrieve.jinja
@@ -294,14 +294,13 @@
     <div class="card-body">
         <div class="section mb-0">
             <div>
-                <b class="card-title">Github Integration</b>
-                <span class="badge bg-gray">beta</span>
-            </div>
-            <div class="card-text pt-0 mb-3">
-                <a class="small" href="/github/" target="_blank">
-                    <i class="fas fa-question-circle"></i> What is this?
-                </a>
+                <b class="card-title">
+                    <i class="fab fa-github"></i>
+                    Github Integration
+                </b>
+                <sup class="badge bg-gray"><small>beta</small></sup>
             </div>
+
             {% if codebase.git_mirror %}
                 {% if codebase.git_mirror.remote_url %}
                     <div class="d-flex align-items-center">
@@ -336,6 +335,11 @@
                     </div>
                 {% endif %}
             {% endif %}
+            <div class="card-text">
+                <a class="small" href="/github/" target="_blank">
+                    <i class="fas fa-question-circle"></i> What is this?
+                </a>
+            </div>
         </div>
     </div>
 </div>

diff --git a/frontend/src/components/GithubMirrorModal.vue b/frontend/src/components/GithubMirrorModal.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
-    <button class="btn btn-sm btn-secondary my-1 w-100" rel="nofollow" @click="modal?.show()">
-      <i class="fab fa-github"></i>
+    <button
+      class="btn btn-sm btn-outline-secondary w-100-with-icon my-1"
+      rel="nofollow"
+      @click="modal?.show()"
+    >
+      <i class="icon-left fas fa-arrow-up"></i>
       Mirror on Github
     </button>
     <BootstrapModal

diff --git a/frontend/src/scss/_global.scss b/frontend/src/scss/_global.scss
@@ -71,6 +71,22 @@ a.anchor {
   }
 }
 
+.w-100-with-icon {
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon-left {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 0.5rem;
+  }
+}
+
 .btn-group-xs > .btn,
 .btn-xs {
   padding: 0.25rem 0.4rem;