From f437bd5c4f761b2c405d5103e6d4333b1cc7b8c4 Mon Sep 17 00:00:00 2001
From: Rebecca Hollis <rhollis@jdsfaulkner.com>
Date: Fri, 13 Nov 2020 13:31:56 -0500
Subject: [PATCH] Worked on categorizing resources

---
 src/assets/conf/resources-landing-page.json   | 144 ++++++++++--------
 .../styles/test-resources-landing-page2.scss  |  13 +-
 src/assets/pages/styles/theme-light.scss      |   2 +-
 .../pages/test-resources-landing-page2.html   |  46 +++---
 4 files changed, 115 insertions(+), 90 deletions(-)

diff --git a/src/assets/conf/resources-landing-page.json b/src/assets/conf/resources-landing-page.json
index a695e39..ecd9943 100644
--- a/src/assets/conf/resources-landing-page.json
+++ b/src/assets/conf/resources-landing-page.json
@@ -1,29 +1,7 @@
 {
   "grid-container": {
-    "Human Resources": [
-      {
-        "title": "Paycor",
-        "description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
-        "imagePath": "paycor-logo3-100x100.png",
-        "urlText": "https://www.paycor.com/",
-        "altText": "Paycor logo"
-      }
-    ],
-    "General": [
-      {
-        "title": "Gmail",
-        "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
-        "imagePath": "gmail-logo2-100x100.png",
-        "urlText": "https://mail.google.com",
-        "altText": "Gmail logo"
-      },
-      {
-        "title": "Workplace",
-        "description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.",
-        "imagePath": "workplace-logo3-100x100.png",
-        "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "Workplace logo"
-      },
+    "Category1": [
+      //Project management, clients, invoicing, data
       {
         "title": "Clarity",
         "description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.",
@@ -46,46 +24,36 @@
         "altText": "Deltek logo"
       },
       {
-        "title": "Learning Center",
-        "description": "Visit your central location for training resources, including online courses and the company’s procedure manual. ",
-        "imagePath": "learning-center-icon4-100x100.png",
-        "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "Learning Center image"
-      },
-      {
-        "title": "ASTM Procedures",
-        "description": "Visit this website for access to current ASTM procedures. Contact the CMT Manager for the login ID and password.",
-        "imagePath": "astm-logo3-100x100.png",
-        "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "ASTM logo"
-      },
-      {
-        "title": "Swag Store",
-        "description": "Buy polo shirts and other logo gear here. Costs are deducted from your paycheck, or you can apply Funny Money.",
-        "imagePath": "swag-store-icon-100x100.png",
+        "title": "Procore",
+        "description": "Streamline billing. Administrators for field engineering projects use Procore software for invoice collection, review and approval.",
+        "imagePath": "procore-logo-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "Store image"
+        "altText": "Procore logo"
       },
       {
-        "title": "Employee Handbook",
-        "description": "View this document to learn about the company’s policies related to employment, including pay and benefits.",
+        "title": "Client W-9 Form",
+        "description": "A W-9 form is required by JDSfaulkner so that the company can file an information return with the IRS.",
         "imagePath": "pdf-icon3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "PDF icon"
-      },
+      }
+    ],
+
+    "Category2": [
+      //Work tools, e-mail, calendar, cloud storage
       {
-        "title": "JDSfaulkner.com",
-        "description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.",
-        "imagePath": "jdsfaulkner-small-icon.png",
-        "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "Website image"
+        "title": "Gmail",
+        "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
+        "imagePath": "gmail-logo2-100x100.png",
+        "urlText": "https://mail.google.com",
+        "altText": "Gmail logo"
       },
       {
-        "title": "Dropbox",
-        "description": "The Structural Engineering Design department stores most of its files and folders in the Dropbox cloud-based system.",
-        "imagePath": "dropbox-logo3-100x100.png",
+        "title": "Workplace",
+        "description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.",
+        "imagePath": "workplace-logo3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "Dropbox logo"
+        "altText": "Workplace logo"
       },
       {
         "title": "Google Workspace",
@@ -95,11 +63,22 @@
         "altText": "Google Workspace logo"
       },
       {
-        "title": "Procore",
-        "description": "Streamline billing. Administrators for field engineering projects use Procore software for invoice collection, review and approval.",
-        "imagePath": "procore-logo-100x100.png",
+        "title": "Dropbox",
+        "description": "The Structural Engineering Design department stores most of its files and folders in the Dropbox cloud-based system.",
+        "imagePath": "dropbox-logo3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "Procore logo"
+        "altText": "Dropbox logo"
+      }
+    ],
+
+    "Category3": [
+      //Marketing, client-facing media, publications
+      {
+        "title": "JDSfaulkner.com",
+        "description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.",
+        "imagePath": "jdsfaulkner-small-icon.png",
+        "urlText": "https://jdsfaulkner.workplace.com",
+        "altText": "Website image"
       },
       {
         "title": "Salesforce",
@@ -135,6 +114,31 @@
         "imagePath": "pdf-icon3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "Spreadsheet icon"
+      }
+    ],
+
+    "Category4": [
+      //HR, policies, onboarding, benefits, payroll 
+      {
+        "title": "Paycor",
+        "description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
+        "imagePath": "paycor-logo3-100x100.png",
+        "urlText": "https://www.paycor.com/",
+        "altText": "Paycor logo"
+      },
+      {
+        "title": "Swag Store",
+        "description": "Buy polo shirts and other logo gear here. Costs are deducted from your paycheck, or you can apply Funny Money.",
+        "imagePath": "swag-store-icon-100x100.png",
+        "urlText": "https://jdsfaulkner.workplace.com",
+        "altText": "Store image"
+      },
+      {
+        "title": "Employee Handbook",
+        "description": "View this document to learn about the company’s policies related to employment, including pay and benefits.",
+        "imagePath": "pdf-icon3-100x100.png",
+        "urlText": "https://jdsfaulkner.workplace.com",
+        "altText": "PDF icon"
       },
       {
         "title": "Direct Deposit",
@@ -163,23 +167,33 @@
         "imagePath": "pdf-icon3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "Preview image"
-      }
-    ],
-    "Tax Documents": [
+      },
       {
         "title": "W-4 Form",
         "description": "Fill out this form and submit to HR so that the company can withhold the correct federal income tax from your pay.",
         "imagePath": "pdf-icon3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
         "altText": "PDF icon"
+      }
+    ],
+
+    "Category5": [
+      //Career growth, company procedures, helpful references
+      {
+        "title": "Learning Center",
+        "description": "Visit your central location for training resources, including online courses and the company’s procedure manual. ",
+        "imagePath": "learning-center-icon4-100x100.png",
+        "urlText": "https://jdsfaulkner.workplace.com",
+        "altText": "Learning Center image"
       },
       {
-        "title": "Client W-9 Form",
-        "description": "A W-9 form is required by JDSfaulkner so that the company can file an information return with the IRS.",
-        "imagePath": "pdf-icon3-100x100.png",
+        "title": "ASTM procedures",
+        "description": "Visit this website for access to current ASTM procedures. Contact the CMT Manager for the login ID and password.",
+        "imagePath": "astm-logo3-100x100.png",
         "urlText": "https://jdsfaulkner.workplace.com",
-        "altText": "PDF icon"
+        "altText": "ASTM logo"
       }
     ]
+
   }
 }
\ No newline at end of file
diff --git a/src/assets/pages/styles/test-resources-landing-page2.scss b/src/assets/pages/styles/test-resources-landing-page2.scss
index aaa5077..6e36ff3 100644
--- a/src/assets/pages/styles/test-resources-landing-page2.scss
+++ b/src/assets/pages/styles/test-resources-landing-page2.scss
@@ -16,8 +16,10 @@ html {
   color: navbartext;
 }
 
-.body {
-  font-size: .875rem;
+body {
+  font-size: 1rem;
+  padding-top: 80px;
+  padding-bottom: 20px;
 }
 
 .feather {
@@ -39,9 +41,7 @@ html {
 	background-color: primary;
 }
 
-body {
-  padding-bottom: 20px;
-}
+
 
 .navbar {
   margin-bottom: 20px;
@@ -66,7 +66,8 @@ body {
   position: sticky;
   top: 48px; /* Height of navbar */
   height: calc(100vh - 48px);
-  padding-top: .5rem;
+  padding-top: 3rem;
+  padding-left: .5rem;
   overflow-x: hidden;
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 }
diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss
index 8f1fe62..2c95fd0 100644
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@@ -13,7 +13,7 @@ $theme-colors: (
         "activecardfont":#e1e4e8,
         "searchfont": #2c2c2c,
         "sidebarfill": #f6f6f6,
-        "sidebartext": #c2c2c2,
+        "sidebartext": #545455,
         "webcardimagebackground": #eeeeee,
         "webcardimagebackgroundhover": #f0f0f0,
         "headertextcolor": #434344,
diff --git a/src/assets/pages/test-resources-landing-page2.html b/src/assets/pages/test-resources-landing-page2.html
index 806012f..83ba9eb 100644
--- a/src/assets/pages/test-resources-landing-page2.html
+++ b/src/assets/pages/test-resources-landing-page2.html
@@ -35,7 +35,7 @@
           <div class="sidebar-sticky">
             <ul class="nav flex-column">
               <li class="nav-item">
-                <a class="nav-link active" href="#">
+                <a class="nav-link active text-sidebartext" href="#">
                   <span data-feather="home"></span>
                   Top <span class="sr-only">(current)</span>
                 </a>
@@ -47,54 +47,64 @@
               <a class="d-flex align-items-center" href="#">
               </a>
             </h6>
-            <ul class="nav flex-column mb-2">
+            <ul class="nav flex-column mb-2 ml-4">
               <li class="nav-item">
-                <a class="nav-link" href="#">
+                <a class="nav-link text-sidebartext" href="#Category1-collapser">
                   <span data-feather="list-ul"></span>
-                  Category 1
+                  Project management, clients, invoicing, data
                 </a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">
+                <a class="nav-link text-sidebartext" href="#Category2-collapser">
                   <span data-feather="list-ul"></span>
-                  Category 2
+                  Work tools, e-mail, calendar, cloud storage
                 </a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">
+                <a class="nav-link text-sidebartext" href="#Category3-collapser">
                   <span data-feather="list-ul"></span>
-                  Category 3
+                  Marketing, client-facing media, publications
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#Tax-Documents-collapser">
+               <li class="nav-item">
+                <a class="nav-link text-sidebartext" href="#Category4-collapser">
+                  <span data-feather="list-ul"></span>
+                  HR, policies, onboarding, benefits, payroll
+                </a>
+              </li>
+               <li class="nav-item">
+                <a class="nav-link text-sidebartext" href="#Category5-collapser">
                   <span data-feather="list-ul"></span>
-                  Tax Documents
+                  Career growth, company procedures, helpful references
                 </a>
               </li>
             </ul>
           </div>
         </nav>
 
-<main>
+
+  <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
         
         <div class="album py-5 bg-secondary">
         <div class="container">
             <input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
-                   placeholder="Search"
+                   placeholder="Search (What kind of resource are you looking for?)"
                    aria-label="Search">
         </div>
+      
 
         <div class="album py-5 bg-secondary">
-            <div class="container bg-secondary">
-                <!--                div container-->
-                <div id="grid-container">
-                </div>
-            </div>
+        <div class="container bg-secondary">
+        <div id="grid-container">
+        </div>
         </div>
+        </div>
+      </div>
     </div>
 
 
+