cbgaindia / ckanext-openbudgetsin_theme Goto Github PK

Two "X" icons appearing in mobile menu sidebar. This issue is specific to iPhone users.
Also the "budget basics" button is too low.

Can we make the drop downs in homepage navigation bar to expand on hover? Currently they expand on click.

In the menu options only the names are clickable and not the arrows. At the top in "Union Dashboard" arrow is clickable and not the name. Making the whole thing confusing.

I noticed we aren't following semantic rules for HTML code on the website. We don't have an h1 tag on the homepage and we're incorrectly using h3 tags for 'paragraphs'. Here are a couple of instances I noticed

• The main heading of the website needs to be an <h1> tag but it's an <h2> tag
  <h2 class="home-tagline"> Making India's Budgets open, usable and easy to comprehend</h2>

• We're using <h3> tags for 'paragraphs'; we should be using the <p> tag here

<div class="banner-description">
    <h3 class="homepage-section-text">
         ...
    </h3>
</div>

Given this, I'm assuming there might be more instances where we're not following the rules. Let me know if you want to do a code walk-through together and fix them.

Remove .row-fluid class with .row class and restructure content with appropriate div containers with .container. Though the structure works fine in the current state. Adding new styles becomes an issue. Also, this would help us to reduce the extra specific styling for other elements, Thus reducing the overall technical debt by giving in more flexibility.

Ex - Link1 , Link2, Link3

The links in the dropdown header are inconsistent, some links are underlined, some links aren't. By default, all links should be underlined. Here are the screenshots of the links in the dropdown

Here's the figma file for dropdowns, https://www.figma.com/file/b1T3AFvt6rpHrPRDimloXJ/home-page?node-id=398%3A49710

Background images of cards flatten up or their aspect ratios seems messed up in some cards in the homepage while testing for responsiveness.

The headers links like Datasets and The Portal expand and collapse with event listener - onclick. Change the event listener to mouseover. This is to improve UX by reducing the number of links to access the sub links.

Change the hover pointer on the tiers of government icons

Position of the screen reader icon tool tip in mobile view, it gets out of the normal view.

The two GIFs, if they can be zoomed in to fill in the space as white space seems a little weird. It is just a suggestion.

Especially when we iterate over multiple organizations, can we save this extra call by any chance?

Remove all the ckanext-budgetviz related styles from this repo. There are certain styles specific for visualizations which should be placed in ckanext-budgetviz instead of this repo. This makes it difficult to improve and enhance the styles.

Ex - Link
.notes { margin: 10px; }

Dashboard GIFs should animate on hovering over the card.

The dropdown options should match the options we have in the footer

Either we need to update it to be more specific :

.module .module-content p {
    font-size: 85%;
}

Or add the same for ul & li tags

Following URLs have huge load time:

/organization/about/individual-state-budgets render time 13.700 seconds
/organization/about/municipal-budget render time 21.456 seconds

We need to re-look into hierarchy plugin to fix it.

"Open Data" logo looks a little messed up. Both on desktop and mobile.

Currently, some of the pages aren't compatible with Screen Reader mostly because of missing alternative text for images and labels for search bars. We need to edit HTML templates to add appropriate help text to fix most of these issues.

Few WAVE(http://wave.webaim.org) failing links:
http://wave.webaim.org/report#/https://openbudgetsindia.org/
http://wave.webaim.org/report#/https://openbudgetsindia.org/dataset?res_format=PDF
http://wave.webaim.org/report#/https://openbudgetsindia.org/organization/
http://wave.webaim.org/report#/https://openbudgetsindia.org/budget-basics/

Source: https://groups.google.com/forum/#!topic/datameet/AOmYmWZ4LqE

The dashboard heading is accurate in the sense that it accounts for the left padding. And although the code is the same for all other headings, the headings for all other sections are misaligned.

This misalignment has happened because of trying to compensate for the scale effect on hover. We should remove the scaling effect on hover until we figure out a solution that doesn't cause the headings of the different sections to be misaligned.

The input click and input area is much smaller than expected

Check the figma file for reference, https://www.figma.com/file/b1T3AFvt6rpHrPRDimloXJ/home-page?node-id=158%3A1911

The links, as per the designs in figma, are underlined but they aren't so in the code

The hashtags grossly misrepresent what those terms are, they're just links to those search result pages and not "real" hashtags. We should remove the # symbol to avoid miscommunication and confusion.

Made the changes in figma, https://www.figma.com/file/b1T3AFvt6rpHrPRDimloXJ/home-page?node-id=158%3A521

Noticed a weird bug with the dropdown on desktop. When the dropdown is open and there's a mouse hover, the dropdown position changes.

For the dots to be aligned we need to use the middot symbol rather than using a full-stop.

The code would look something like the following:
<span class="ml-4 link-color">&middot;</span>

Reference: OCHA-DAP/hdx-ckan@57c63a7

On hovering the last card in govt tiers section card width seems to be small, as the zooming in card hides a bit.

Mobile footer seems crowded an unaligned. Also logos does not seem clear at all.

I was working on some other issues for the dropdown and noticed we have an extra arrow because of a :before class that we don't need. I've modified the image to show the extra arrow, it's harder to spot it otherwise.

Sometimes the drop down in the header section disappears when we click on a link which is supposed to open nested menu in it. Then again we need to click on the navigation link in the header to get the desired result.

Dashboard and search on mobile is broken.

The dashboard links in the footer aren't arranged as per the category they fall under. We need to have sub-headings under the dashboard to logically group them.

We need to add a box-shadow for the dropdowns in the header navigation to improve the hover state visibility for the links within — since the hover state background color is the same as the website background color. Here are the values in figma, https://www.figma.com/file/b1T3AFvt6rpHrPRDimloXJ/home-page?node-id=398%3A50044

The focus styling for search input isn't in line with the designs on figma. Here's the file for reference, https://www.figma.com/file/b1T3AFvt6rpHrPRDimloXJ/home-page?node-id=158%3A1911

The HTML code for cards in 'key features', and I'm not sure if this is the case everywhere, seems rather complicated. Here's the current code:

<div class="feature ml-24">
    <a href="https://openbudgetsindia.org/dataset?res_format=CSV" target="_blank">
        <span class="card-link-container"></span>
    </a>
    <div class="image-container dataset-icon">
        <!-- <img class="banner-image" alt="Explore machine readable Datasets" src="Key_features_icon-22.png"> -->
    </div>
    <div class="text-container mt-8">
        <h4>
            <a href="/dataset?res_format=CSV" target="_blank">
                Machine Readable Datasets
            </a>
        </h4>
    </div>
</div>


The first couple of lines seems unnecessary?

<a href="https://openbudgetsindia.org/dataset?res_format=CSV" target="_blank">
    <span class="card-link-container"></span>
</a>


Why are we doing this? Instead we could do the following,

<div class="feature ml-24">
    <a href="https://openbudgetsindia.org/dataset?res_format=CSV">
        <div class="image-container dataset-icon">
            <!-- <img class="banner-image" alt="Explore machine readable Datasets" src="Key_features_icon-22.png"> -->
        </div>
        <div class="text-container mt-8">
            <h4>
                <a href="/dataset?res_format=CSV" target="_blank">
                    Machine Readable Datasets
                </a>
            </h4>
        </div>
    </a>
</div>

Wrap the <a> tag around the content, that way we don't have to create pseudo span elements?

We need to modify CSS section: .context-info h1.heading

• Add OG elements : https://developers.facebook.com/docs/sharing/opengraph/object-properties

We need the entire 'budget basics' card needs to be clickable not just the button.

Issue Details

• Icon for mobile menu post redisign looks compressed.
• The hamburger menu icon looks out of place.

Device Details
iPhone XS / iOS14 / Firefox

Separate CSS sections for different templates. This would help the contributors to change and evolve the design. Currently, most of the CSS styles are present in a consolidated base file.

The current font size for trending news is 20px, we should reduce this to 16px. I've made the change here, https://www.figma.com/file/b1T3AFvt6rpHrPRDimloXJ/home-page?node-id=772%3A377

Load time ain't an issue, inaccuracy in numbers needs to be fixed.
Reference: #42

The government wise budget section has a few cards which seems to be zooming out instead of zooming in like other cards in the homepage.

The font-weight for some reason seems lighter than usual, we'll need too add the following line in to ensure 'Get Started' has the correct weight

.key-features-section .budget-basics-card .image-container .link-button {
  font-weight: normal;
}

currently, the count of datasets and tiers of governance is not showing or showing the wrong count for datasets. Need to show the exact count for tiers of governance as well as for total datasets available.