cbgaindia / ckanext-openbudgetsin_theme Goto Github PK
View Code? Open in Web Editor NEWCustom CKAN theme extension for Open Budgets India
Home Page: https://openbudgetsindia.org/
License: MIT License
Custom CKAN theme extension for Open Budgets India
Home Page: https://openbudgetsindia.org/
License: MIT License
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
Especially when we iterate over multiple organizations, can we save this extra call by any chance?
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
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.
We need to modify CSS section: .context-info h1.heading
Dashboard GIFs should animate on hovering over the card.
On hovering the last card in govt tiers section card width seems to be small, as the zooming in card hides a bit.
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.
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.
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
Background images of cards flatten up or their aspect ratios seems messed up in some cards in the homepage while testing for responsiveness.
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
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.
Reference: OCHA-DAP/hdx-ckan@57c63a7
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
Load time ain't an issue, inaccuracy in numbers needs to be fixed.
Reference: #42
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
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;
}
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.
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; }
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.
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
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?
Change the hover pointer on the tiers of government icons
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.
The links, as per the designs in figma, are underlined but they aren't so in the code
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.