0x21-consulting / thriver Goto Github PK
View Code? Open in Web Editor NEWThriver, a Content Management System for Nonprofit Organizations
License: MIT License
Thriver, a Content Management System for Nonprofit Organizations
License: MIT License
Create an API for NoSLB that will allow features to register methods without worrying about race conditions.
When a user verifies their email address, a popup appears showing their email has been verified. We need to style this section.
The section appears as the first child under <body>
. Here's the markup:
<div class="accounts-dialog accounts-centered-dialog">
Email verified.
You are now logged in as ********@gmail.com.
<div class="login-button" id="just-verified-dismiss-button">Dismiss</div>
</div>
Styles currently applied to the whole section:
** login_buttons.import.less:342 **
.accounts-centered-dialog {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
z-index: 1001;
position: fixed;
left: 50%;
margin-left: -129px;
top: 50%;
margin-top: -40px;
}
** login_buttons.import.less:234 **
.accounts-dialog {
border: 1px solid #cccccc;
z-index: 1000;
background: white;
border-radius: 4px;
padding: 8px 12px;
margin: -8px -12px 0 -12px;
width: 250px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
color: #333;
}
Styles currently applied to child "Dismiss" button:
** login_buttons.import.less:389 **
#just-verified-dismiss-button, #messages-dialog-dismiss-button {
margin-top: 8px;
}
** login_buttons.import.less:153 **
.accounts-dialog .login-button {
width: auto;
margin-bottom: 4px;
}
** login_buttons.import.less:99 **
#login-buttons .login-button, .accounts-dialog .login-button {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
padding: 4px 8px;
font-size: 80%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
text-align: center;
color: #fff;
background: #596595;
border: 1px solid #464f75;
border-radius: 4px;
}
** login_buttons.import.less:256 **
.accounts-dialog > * {
line-height: 1.6;
}
** login_buttons.import.less:133 **
.accounts-dialog * {
padding: 0;
margin: 0;
line-height: inherit;
color: inherit;
font: inherit;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
When submitting the donate form, the submit doesn't disable, allowing for accidental duplicate submissions.
Just shows the exclamation icon, hex ๏ช I think it should show the number of notifications, unless you disagree. If so, I can add a dataset property for an ::after psuedo-element, or connect the number in the template directly.
At times, clicking a link will cause a stutter before the smooth scroll appears. It's almost as if the page relocates to that location of the destination, then back in less than half a second before beginning the smooth scroll.
Location bar URI updates no longer update accurately. There seems to be some very large offset, perhaps at 1000px or greater.
In the What We Do section, it looks like <h3>
elements have no top margin, and <li>
elements have no bullet point. That's what's causing the formatting to look a bit off. In reality, some of the sections are actually well-formed from markdown, such as the Advocacy page; it just doesn't look like it because of some missing styles.
Tabs sometimes result in incorrect class assignment on click of area of tab.
Ideally I think the URL and nav active class would change as a section takes over 50% of the viewport.
However not sure if that's possible.
If the hash value in the URI in the browser's location bar changes, prevent the page from reloading and smooth scroll to the respective location.
This is something we should talk about.
Is scrolling to a section the best method?
Or could it be better if say it faded in/out?
If scrolling is the answer:
Observing a flicker of the section it is to scroll to occasionally.
Can we modify the easing of that effect?
Staff members aren't very keen on writing markdown for sections. Help them out with some compromised interface that allows for some WYSIWYG elements without causing additions of poor code and without incurring a buggy and unpredictable interface.
Please create a show all button in the Providers section that will cause the map to zoom out and display all providers for the state.
When a user's email address gets verified by them following a link sent to them in an email, we need to somehow convey to the user that the email has been verified successfully.
CSS rules should be in place for letting the user know that a button is disabled and may not be clicked. This includes the following:
<button>
<input type="submit" />
The following templates may contain disabled buttons at any given time:
We need to complete the event for the 'Get Help' button in the utility navigation.
@micchickenburger , was hoping you could help.
Visible on line 55-61 in utility.js:
'click li.getHelp': closeAsides, 'click li.getHelp': function (event) { location.href='/#service-providers'; $('figure.alert').addClass('active').delay(5000).queue(function(){ $(this).removeClass("active").dequeue(); }); }
We need to scroll down the page to #service-providers and display an alert with content.
Alerts have their own module where their template can be referenced.
Line 6 of account_register.html reads:
<p id="register-error" style="display:none;"></p>
I've added a display:none to this element temporarily.
It needs to only be only placed in the markup if error=true.
Then of course we can remove the inline style.
Alternatively it needs to have a class added to the element if error=true, that way I can hide the element unless error=true.
To be used in such sections as news articles and large content editable areas such as work.
CSS required for print in addition to singular print icon styles.
Perform cross-browser testing to ensure compatibility with:
Fields with errors now highlight after form submission; however, they look terrible. The color of the inset box shadow on the error fields should reflect the brand. Furthermore, the error messages are ::after pseudo elements on error field parent nodes since input elements cannot contain pseudo elements and I think error messages should be adequately presented near the problem fields. My current solution has some display problems, as you can see in the screenshot. Particularly, error messages on the expiration or cvv2 fields cover the submit button because those fields are floating. I tried to clear the float, as well as the overflow:auto; hack, but neither resolve the problem.
The donate section can be too large for some displays, requiring a scroll. I don't think this should be the case.
When user selects "Get Help" from the utility navigation: the page is to scroll to the "Providers" section. In addition to this: an alert is displayed for the user reading something such as:
"If this is an emergency please dial 911. Please use our provider locator to find the nearest available help center."
We need to acquire or create the appropriate verbiage for this alert.
Clicking the Twitter icon will open the twitter feed, but clicking it again won't close it. Same goes for notifications element.
Seems tabbing through a sidebar form field for instance can completely dismantle the UI.
Let's add an 'current' class to a selected section via the navigation or as it is scrolled through.
Currently the logo file being used was doctored by me because the PDF was rendering some errors in transparency.
Can we get a copy of all logo asset files in either an AI or EPS file format?
Generic notifications should link to their hrefs somehow. For instance, if an action alert is added, the user should be able to click the corresponding notification to view the action alert. The notification already receives this information in the url attribute; we just need the front-end to inform the user somehow that it's clickable.
Template components, like the Donate, work, callout, and community sections should be modularized into their own folders. In that way they may eventually register themselves to new API features, which I anticipate will be required in order for the "Complete Location and History Support" milestone to complete.
When logged in as a site admin, the edit name fields for article sections don't display the section's name if that section is a sub-section.
Currently only configured for Chrome.
The hover effect established by the following code does not apply to email, search, or password input fields, which can make the hover effect feel inconsistent, such as in the profile tab under Account Details.
form .styledSelect:hover, form .cvv2:hover, form input[type=text]:hover {
background-color: #4c5d67;
}
Furthermore, disabled fields should not have a hover effect.
<input type="text" value="Text" disabled /> <!-- Don't allow user to edit -->
I understand we needed to implement a solution to prevent bubbling on the scroll action to detect if the fixed nav class should be added. However from an animation perspective, adding that fixed nav class right away is essential for a better UX.
Is there a way we can make that class added sooner? Perhaps on some type of "scroll initialized" function?
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.