Worked on categorizing resources

pull/2/head
Rebecca Hollis 5 years ago
parent 797e41e4a7
commit f437bd5c4f

@ -1,29 +1,7 @@
{ {
"grid-container": { "grid-container": {
"Human Resources": [ "Category1": [
{ //Project management, clients, invoicing, data
"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"
},
{ {
"title": "Clarity", "title": "Clarity",
"description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.", "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" "altText": "Deltek logo"
}, },
{ {
"title": "Learning Center", "title": "Procore",
"description": "Visit your central location for training resources, including online courses and the companys procedure manual. ", "description": "Streamline billing. Administrators for field engineering projects use Procore software for invoice collection, review and approval.",
"imagePath": "learning-center-icon4-100x100.png", "imagePath": "procore-logo-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",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Store image" "altText": "Procore logo"
}, },
{ {
"title": "Employee Handbook", "title": "Client W-9 Form",
"description": "View this document to learn about the companys policies related to employment, including pay and benefits.", "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", "imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon" "altText": "PDF icon"
}, }
],
"Category2": [
//Work tools, e-mail, calendar, cloud storage
{ {
"title": "JDSfaulkner.com", "title": "Gmail",
"description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.", "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
"imagePath": "jdsfaulkner-small-icon.png", "imagePath": "gmail-logo2-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://mail.google.com",
"altText": "Website image" "altText": "Gmail logo"
}, },
{ {
"title": "Dropbox", "title": "Workplace",
"description": "The Structural Engineering Design department stores most of its files and folders in the Dropbox cloud-based system.", "description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.",
"imagePath": "dropbox-logo3-100x100.png", "imagePath": "workplace-logo3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Dropbox logo" "altText": "Workplace logo"
}, },
{ {
"title": "Google Workspace", "title": "Google Workspace",
@ -95,11 +63,22 @@
"altText": "Google Workspace logo" "altText": "Google Workspace logo"
}, },
{ {
"title": "Procore", "title": "Dropbox",
"description": "Streamline billing. Administrators for field engineering projects use Procore software for invoice collection, review and approval.", "description": "The Structural Engineering Design department stores most of its files and folders in the Dropbox cloud-based system.",
"imagePath": "procore-logo-100x100.png", "imagePath": "dropbox-logo3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "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", "title": "Salesforce",
@ -135,6 +114,31 @@
"imagePath": "pdf-icon3-100x100.png", "imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Spreadsheet icon" "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 companys policies related to employment, including pay and benefits.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
}, },
{ {
"title": "Direct Deposit", "title": "Direct Deposit",
@ -163,23 +167,33 @@
"imagePath": "pdf-icon3-100x100.png", "imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Preview image" "altText": "Preview image"
} },
],
"Tax Documents": [
{ {
"title": "W-4 Form", "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.", "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", "imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon" "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 companys procedure manual. ",
"imagePath": "learning-center-icon4-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Learning Center image"
}, },
{ {
"title": "Client W-9 Form", "title": "ASTM procedures",
"description": "A W-9 form is required by JDSfaulkner so that the company can file an information return with the IRS.", "description": "Visit this website for access to current ASTM procedures. Contact the CMT Manager for the login ID and password.",
"imagePath": "pdf-icon3-100x100.png", "imagePath": "astm-logo3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon" "altText": "ASTM logo"
} }
] ]
} }
} }

@ -16,8 +16,10 @@ html {
color: navbartext; color: navbartext;
} }
.body { body {
font-size: .875rem; font-size: 1rem;
padding-top: 80px;
padding-bottom: 20px;
} }
.feather { .feather {
@ -39,9 +41,7 @@ html {
background-color: primary; background-color: primary;
} }
body {
padding-bottom: 20px;
}
.navbar { .navbar {
margin-bottom: 20px; margin-bottom: 20px;
@ -66,7 +66,8 @@ body {
position: sticky; position: sticky;
top: 48px; /* Height of navbar */ top: 48px; /* Height of navbar */
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem; padding-top: 3rem;
padding-left: .5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }

@ -13,7 +13,7 @@ $theme-colors: (
"activecardfont":#e1e4e8, "activecardfont":#e1e4e8,
"searchfont": #2c2c2c, "searchfont": #2c2c2c,
"sidebarfill": #f6f6f6, "sidebarfill": #f6f6f6,
"sidebartext": #c2c2c2, "sidebartext": #545455,
"webcardimagebackground": #eeeeee, "webcardimagebackground": #eeeeee,
"webcardimagebackgroundhover": #f0f0f0, "webcardimagebackgroundhover": #f0f0f0,
"headertextcolor": #434344, "headertextcolor": #434344,

@ -35,7 +35,7 @@
<div class="sidebar-sticky"> <div class="sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#"> <a class="nav-link active text-sidebartext" href="#">
<span data-feather="home"></span> <span data-feather="home"></span>
Top <span class="sr-only">(current)</span> Top <span class="sr-only">(current)</span>
</a> </a>
@ -47,54 +47,64 @@
<a class="d-flex align-items-center" href="#"> <a class="d-flex align-items-center" href="#">
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-2 ml-4">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link text-sidebartext" href="#Category1-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Category 1 Project management, clients, invoicing, data
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link text-sidebartext" href="#Category2-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Category 2 Work tools, e-mail, calendar, cloud storage
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link text-sidebartext" href="#Category3-collapser">
<span data-feather="list-ul"></span> <span data-feather="list-ul"></span>
Category 3 Marketing, client-facing media, publications
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#Tax-Documents-collapser"> <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> <span data-feather="list-ul"></span>
Tax Documents Career growth, company procedures, helpful references
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </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="album py-5 bg-secondary">
<div class="container"> <div class="container">
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont" <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"> aria-label="Search">
</div> </div>
<div class="album py-5 bg-secondary"> <div class="album py-5 bg-secondary">
<div class="container bg-secondary"> <div class="container bg-secondary">
<!-- div container--> <div id="grid-container">
<div id="grid-container"> </div>
</div>
</div>
</div> </div>
</div>
</div>
</div> </div>

Loading…
Cancel
Save