Skip to content

Changes

Page history
Update DOC Office Migration to Commerce.gov authored by KAI YEE's avatar KAI YEE
Show whitespace changes
Inline Side-by-side
DOC-Office-Migration-to-Commerce.gov.md
View page @ d6019bcf
......@@ -69,147 +69,3 @@ This is the Context for homepage for Anonymous Users. Please follow this example
With the upgrade of the USWDS version 02 theme, certain modifications were made to the twig and sass files to ensure consistency and ease of use in the development of the Department of Commerce office subsites. A majority of the issues that arise are due to the configuration synchronization not conveying CSS classes properly to the merge request and subsequently won't convey in a git pull when a developer needs it. You can easily find the blocks in question in the block layout. This procedure can be applied to all office homepages and it should work properly and consistently to all offices.
**The search block is on the wrong place**
![image](uploads/cc4d7d05b2535124fcf39c830b6e6279/image.png)
The reason why the search on desktop is in the wrong place is because the search needs to be moved from the Header region to the Secondary menu region
![image](uploads/1171b35927c3821b9ec1a0fd72c0d33a/image.png)
The searchblock itself will need to be manually placed because fixed blocks does not convey this content
**DOC searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="commerce_search_block">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search" class="usasearch-search-block-form usa-form-large" data-drupal-selector="usasearch-search-block-form-2" id="usasearch-search-block-form--2" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions--2"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit--2" type="submit" value="Search" /></div>
</form>
</div>
```
**OHRM searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="block-usasearchform">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search/docs" id="usasearch-search-block-form" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search ui-autocomplete-input" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" /><input name="dc" type="hidden" value="8230" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit" type="submit" value="Search" /></div>
</form>
</div>
```
**OCR searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="block-usasearchform">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search/docs" id="usasearch-search-block-form-desktop" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search ui-autocomplete-input" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" /> <input name="dc" type="hidden" value="8427" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions-desktop"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit" type="submit" value="Search" /></div>
</form>
</div>
```
**OSY searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="block-usasearchform">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search/docs" id="usasearch-search-block-form-desktop" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search ui-autocomplete-input" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" /> <input name="dc" type="hidden" value="8646" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions-desktop"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit-mobile" type="submit" value="Search" /></div>
</form>
</div>
```
**OFM searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="block-usasearchform">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search/docs" id="usasearch-search-block-form" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search ui-autocomplete-input" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" /><input name="dc" type="hidden" value="8230" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit" type="submit" value="Search" /></div>
</form>
</div>
```
**OAM searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="block-usasearchform">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search/docs" id="usasearch-search-block-form-desktop" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search ui-autocomplete-input" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" /> <input name="dc" type="hidden" value="8839" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions-desktop" id="edit-actions"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit-desktop" type="submit" value="Search" /></div>
</form>
</div>
```
**Whiaapi searchblock html**
```
<div class="usasearch-search-block-form usa-form-large block block-usasearch block-usasearch-search-form-block" data-drupal-selector="usasearch-search-block-form" id="block-usasearchform">
<form accept-charset="UTF-8" action="https://search.commerce.gov/search/docs" id="usasearch-search-block-form-desktop" method="GET">
<div class="js-form-item form-item js-form-type-search form-item-query js-form-item-query form-no-label"><label class="visually-hidden" for="desktop_query">Search</label> <input aria-autocomplete="list" aria-haspopup="" autocomplete="off" class="usagov-search-autocomplete form-search ui-autocomplete-input" data-drupal-selector="edit-query" id="desktop_query" maxlength="128" name="query" placeholder="Search" size="60" title="Enter the terms you wish to search for." type="search" value="" /></div>
<input data-drupal-selector="edit-affiliate" name="affiliate" type="hidden" value="www.commerce.gov" /> <input name="dc" type="hidden" value="8926" />
<div class="form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions-desktop" id="edit-actions"><input class="usa-button js-form-submit form-submit" data-drupal-selector="edit-submit" id="edit-submit-desktop" type="submit" value="Search" /></div>
</form>
</div>
```
**This is how it's should look**
![image](uploads/c9ce1c85871b96117f374535f12fd3d7/image.png)
**For the suboffice front teaser, notice how the text is not wrapping properly**
![image](uploads/22e06f0528059c93679ece00b00b96ed/image.png)
This CSS class should be office_front_teaser
![image](uploads/54e3066874068ab2f1ec17fe43f0a1a6/image.png)
In the text itself, the paragraph class needs to be changed to "office-teaser-text"
![image](uploads/46512224da3e0c682e6e9ca7819c290e/image.png)
**This is how it's should look**
![image](uploads/2930e5d82ae2ed35e8734be9a087fc48/image.png)
**In the suboffice Popular Links block sometimes called Resource block, the block class should be office-popular links not hr-popular-links**
![image](uploads/99cd4989e9f246bd63c69cf5eb9a41a8/image.png)
In the suboffice popular links view, in the title field, there is a CSS class which needs to be changed to popular-links-title
![image](uploads/d85e3c54747853f695dce8f0f9197b04/image.png)
**This is how it's should look**
![image](uploads/04c436200f69df30629a122e641492de/image.png)
**In the top stories view, the overall CSS class should be office-top-stories. Sometimes this view is called xyzoffice-frontpage because this is what is display the office homepage**
![image](uploads/0fb363fc0141a56358e4647941a1c12e/image.png)
This is how it should look
![image](uploads/d5d1594535e229381824bd7f5b77c48f/image.png)
A secondary-menu-search class needs to be added to all search blocks in the secondary menu region in all Contexts so an extra search block can be hidden in the mobile menu
![image](uploads/307946d0af86855a3e75f149b53873fb/image.png)