diff --git a/manifest.json b/manifest.json index 8ec905d..53bd154 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Atlas", "author": "ohitsdylan", - "version": "3.18.1", + "version": "3.19.0", "api_version": 2, "default_locale": "en-us", "settings": [ diff --git a/script.js b/script.js index d2615c0..74af72e 100644 --- a/script.js +++ b/script.js @@ -101,6 +101,18 @@ $(document).ready(function() { $(this).find( '.category-rollup i' ).toggleClass( 'ph-plus-bold ph-minus-bold' ); }); + // Switch over Common Questions categories + $( '.questions_category-button' ).click(function switchCommonQuestions() { + // Store the clicked button text to use as a reference for the data-attribute of the related questions + var questionType = $(this).text(); + // Remove the previous button's "active" state and add it to the clicked button + $( '.qc_active' ).removeClass( 'qc_active' ); + $(this).addClass( 'qc_active' ); + // Remove active state from the current block and add it to the one referenced by the data-attribute + $( '.qc_blocks-active' ).removeClass( 'qc_blocks-active' ); + $( `.qc_blocks[data-question-type='${questionType}'` ).addClass( 'qc_blocks-active' ); + }); + // Retrieve latest articles and insert title, date, and link content into feed $.ajax({ method: 'GET', diff --git a/style.css b/style.css index 04b0189..fe74eac 100644 --- a/style.css +++ b/style.css @@ -442,6 +442,113 @@ Home Page Rollup Sections display: none; } +/* +Common Questions +================================ */ +.common_questions { + background-color: #fafafa; +} + +.qc_top { + margin-top: 24px; + padding-top: 24px; +} + +.qc_blocks { + margin-bottom: -24px; + padding: 16px; + display: none !important; +} + +.qc_blocks-active { + display: flex !important; + flex-flow: row nowrap !important; + gap: 1rem; + overflow-x: auto; + scroll-snap-type: inline proximity; + -webkit-overflow-scrolling: touch; +} + +.common_questions-header { + padding: 0 24px; + font-size: 1.25rem; + font-weight: bold; +} + +.questions_category-button { + height: 48px; + margin: 12px 8px; + line-height: 44px; + color: #2555d9; + background-color: #ebeff8; + + border-radius: 2px; + text-align: center; + transition: color 0.1s; +} + +.qc_active { + color: #fff; + background-color: #2555d9; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); +} + +.questions_category-button:hover { + color: #7492e6; + transition: color 0.1s; + cursor: pointer; +} + +.qc_block { + min-width: 144px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + scroll-snap-align: center; + scroll-snap-stop: always; + scroll-margin: -1rem; +} + +.qc_block-title { + padding: 8px 0; + border-bottom: 1px solid #dae0f2; +} + +.qc_block-questions { + font-size: 0.8rem; + overflow-wrap: anywhere; +} + +.qc_block-questions li { + padding-top: 16px; + padding-bottom: 8px; +} + +.qc_block-questions li ~ li { + padding: 8px 0; +} + +.qc_block-questions li i { + vertical-align: -0.1rem; +} + +.qc_block-more { + margin-top: 16px; + padding: 8px; + color: #fff; + background-color: #2555d9; + font-size: 0.8rem; + border-radius: 2px; +} + +.qc_block-more a { + padding: 8px; + color: #fff; +} + +.qc_block-more i { + padding-right: 8px; + float: right; +} + /* New Articles ================================ */ diff --git a/templates/home_page.hbs b/templates/home_page.hbs index 909d143..1ebafbd 100644 --- a/templates/home_page.hbs +++ b/templates/home_page.hbs @@ -280,6 +280,339 @@ + + +
+
Browse common questions
+ +
Finance
+
Products
+
General Questions
+
+ + +
+
+
Disbursements
+ +
+ +
+
Invoices & Payments
+ +
+ +
+
Customer Accounts/Charges
+ +
+
+ + +
+
+
ADM
+ +
+ +
+
PicoCooler
+ +
+ +
+
365Beacon
+ +
+ +
+
Network & Connectivity
+ +
+
+ + + +
+
+
Market Management
+ +
+ +
+
Misc
+ +
+
+ +
New Articles