set style for importing single button

center-for-threat-informed-defense · Oct 1, 2024 · 17539d7 · 17539d7
1 parent 61b99b8
commit 17539d7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/src/mappings_explorer/templates/_navigation.html.j2 b/src/mappings_explorer/templates/_navigation.html.j2
@@ -6,13 +6,14 @@
 <a href="{{url_prefix}}" class="logo d-flex align-items-center">
   <img src="{{url_prefix}}static/img/mappings_explorer_header_logo_h60.png" alt="Mappings Explorer" />
 </a>
-  <div class="mobile-nav-div">
+  <div class="mobile-nav-div" style="margin-left: auto;">
     <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
     <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
-    <div class="project-switcher">
+    {#<div class="project-switcher">
       <img src="{{url_prefix}}static/img/project-logos/related.svg" style="height: 40px; margin:auto;" alt="" />
-    </div>
+    </div>#}
   </div>
+  <div style="display: flex">
   <nav id="navbar" class="navbar">
     <ul>
       <li class="dropdown"><a href="{{url_prefix}}about/"><span>ABOUT</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
@@ -59,13 +60,17 @@
           </span>
         </div>
       </li>
-      <li style="padding-left: 10px;" class="project-switcher-lg">
+      {# <li style="padding-left: 10px;" class="project-switcher-lg">
         <div class="project-switcher">
           <img src="{{url_prefix}}static/img/project-logos/related.svg" style="height: 40px; margin:auto;" alt="" />
         </div>
-      </li>
+      </li> #}
     </ul>
   </nav>
+  <div class="project-switcher">
+    <img src="{{url_prefix}}static/img/project-logos/related.svg" style="height: 40px; margin:auto;" alt="" />
+  </div>
+  </div>
 </div>
 <script>
   function navSearchWebsite(url) {

diff --git a/src/mappings_explorer/templates/_related_switcher_content.html.j2 b/src/mappings_explorer/templates/_related_switcher_content.html.j2
@@ -34,22 +34,27 @@
           </svg>
         </a>
       </div>
-      <div class="featured projects">
-          <h2>Most Relevant</h2>
-            <div class="project-grid">
-              <template v-for="project in projectList" :key="project">
-              <a v-if="project.featured" class="project-container" :href="project.url" target="_blank">
-                <img :src="url_prefix + 'static/img/project-logos/' + project.imgsrc" alt="" />
-                <h3>[[project.label]]</h3>
-              </a>
-              </template>
-          </div>
-      </div>
+      <template v-if="currentProjectObj.featured_list">
+        <div class="featured projects">
+            <h2>Most Relevant</h2>
+              <div class="project-grid">
+                <template v-for="project in projectList" :key="project">
+                  <a v-if="currentProjectObj.featured_list.find(id => id === project.id)"
+                  class="project-container" :href="project.url" target="_blank">
+                    <img :src="url_prefix + 'static/img/project-logos/' + project.imgsrc" alt="" />
+                    <h3>[[project.label]]</h3>
+                  </a>
+                </template>
+            </div>
+        </div>
+      </template>
+
       <div class="all projects">
           <h2>All Projects</h2>
           <div class="project-grid">
             <template v-for="project in projectList" :key="project">
-              <a v-if="!project.featured" class="project-container" :href="project.url" target="_blank">
+              <a v-if="!currentProjectObj.featured_list.find(id => id === project.id) && project.id !== currentProjectId"
+               class="project-container" :href="project.url" target="_blank">
                 <img :src="url_prefix + 'static/img/project-logos/' + project.imgsrc" alt="" />
                 <h3>[[project.label]]</h3>
               </a>
@@ -63,6 +68,8 @@
     delimiters: ["[[", "]]"],
     data() {
       return {
+        currentProjectId: "mappings_explorer",
+        currentProjectObj:{},
         projectList: {},
         fullProjectList: {},
         notificationList: {},
@@ -83,6 +90,7 @@
             this.projectList = json.projects;
             this.fullProjectList = json.projects;
             this.notificationList = json.notifications;
+            this.currentProjectObj = this.fullProjectList.find(p => p.id === this.currentProjectId)
           });
       }
     },

diff --git a/src/mappings_explorer/templates/static/project-switcher.css b/src/mappings_explorer/templates/static/project-switcher.css
@@ -42,6 +42,7 @@
     display: flex;
     gap: 10px;
     padding-bottom: 8px;
+    margin-top: 10px;
   }
   .project-switcher-expanded .heading-div img {
    height: 20px;
@@ -64,6 +65,7 @@
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 0px;
     margin: 15px 0px;
+    margin-top: 5px;
   }
   .project-switcher-expanded .project-container {
     text-align: center;
@@ -119,7 +121,8 @@
     height: 14px;
     display: inline;
     margin: auto 0px;
-    margin-left: -20px;
+    margin-left: -10px;
+    width: 0px;
     transition: .5s;
   }
   .project-switcher-expanded .notification:hover {
@@ -130,6 +133,7 @@
     visibility: visible;
     opacity: 1;
     margin-left: 10px;
+    width: auto;
   }
   .project-switcher-expanded .error-text {
     font-style: italic;
@@ -139,5 +143,4 @@
   .project-switcher-expanded input {
     color: #0B2338;
     border: #0B2338 solid 1px;
-
   }