Beautify the Registrations page and the Employments page

[mikeymicrophone]

We're ready to improve the usability, functionality, aesthetics and clarity of the registrations index. This is a page that summarizes the information gathered from clients who fill out the 'registration card' in the real estate office.

I'm open to your artistic design, especially if it can be done with clean scss and really good class and id and data attributes. Open to Turbolinks, Stimulus and jQuery methodologies.

[mikeymicrophone]

Each registration captures details about why the client is searching for a new apartment or condo. It can be connected to multiple Client objects through Registrants, and they can have phone, email, and social objects along with Lease and Apartment objects based on where they've lived or units they've seen in their search.

We are gathering a basic registration profile including details about where the clients live and work. The questions we ask are likely to evolve to focus on information we can use. We want to gather information for marketing including social presence and follow up through traditional channels.

[mikeymicrophone]

The app uses icons from Font Awesome for its basic navigation. I'd be open to using this as the basis of turning links into icons.

[mikeymicrophone]

Many of the clients who register end up leasing apartments and form deals with commissions. All these objects can be reflected back onto the registrations page, as it behooves the informedness of the agents who are running the clients.

[mikeymicrophone]

All clients registered are expected to be reflected in Follow Up Boss records, either with people already in their system, or as ones we create in the course of registration or lease documentation. We expect that some clients will eventually complete multiple registrations, since we'll be generating repeat business.

Some clients have multiple jobs, and work for multiple companies. This is the type of information that is useful to be propagated to the index page that the senior agent will be browsing. But, it won't be relevant for the majority of clients. So we have some basic many-to-one relationships to roll up into this registrations overview.

[mikeymicrophone]

The application as it stands is very slightly modified from the scaffolds generated for each resource. We have, among others, index and show pages for Registrations, Registrants (join table), Clients, Employers, Employments (join table), Landlords, Leases (join table), Apartments, Emails, Phones, and Social Accounts. We will be pursuing overarching design concepts that make sense for most or all of these contexts, but initially focused on Employments, as this is a model that engages with the following useful concepts:

• the client's name
• their age (if known)
• their company's name
• their industry
• contact info for the client
• contact info for the company
• their salary
• their title
• physical address of the company (for commuting)
• any other clients we've had in the past who worked there
• any apartments the client ends up renting with us
• any apartments their coworkers have rented with us

[mikeymicrophone]

You should design a UI that displays those details in a clear, efficient, and attractive way, using icons, hover text, colors, fonts, and whatever else you find appropriate.

Structurally, the information will be contained in a nested group of divs, spans, anchors and other HTML5 elements, which will be styled using class names and scss. Class names can be reused across the application (for instance, we could have .employment .salary rules for everywhere a salary is shown in the context of an employment throughout the system. There could also be page-specific rules to modify or supercede those, which would be nested under a class or id that was particular to the employments index that is the template at hand.

Note, the employments are being displayed in a table with tr, td and th components. This is not the type of element structure that I expect to use going forward. Using flexbox as a starting point for css layout is encouraged.

[mikeymicrophone]

The HTML5 should be generated by Rails helpers, not templates, wherever possible. There are a few techniques for doing this in ways that are compatible with the html_safe sanitizers and the ERB yielding pattern. You'll find some of these already implemented throughout the app, but if more sophisticated block handling is desired, we can dig up the Ruby syntax that makes it possible. Block-aware helpers are highly recommended, as we will be reusing many of these HTML structural groups for efficient styling across the entire application.

For example, a UI concept that I'd like to explore is a nice prominent highlight for the row of data that is currently being hovered over by the mouse cursor. If that row could look like it is popping forward in 3D (e.g. with a thick colorful drop shadow), it would help us focus on one row at a time. It should be possible to achieve this styling with a particular class of containing div. Then we can call the helper to wrap our markup in that div, using the block to enhance flexibility for markup being placed inside.

If scss mixins can also be used to establish component groups of css rules, all the better. For instance, we could define a component that makes a shadow we like and then call the component with various colors and thicknesses as desired by any designers we engage in the future.

[mikeymicrophone]

This is an example of how registrations appear now.

[mikeymicrophone]

This is an example of how employments appear now.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.05 ETH (10.22 USD @ $204.49/ETH) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  • Want to chip in? Add your own contribution here.
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  • $61,202.28 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 1 year, 1 month ago. Please review their action plans below:

1) hibeekaey has started work.

I would use my 3+ years of experience as a front-end developer to come up with new designs. 2) oriooctopus has started work.

I'd like to look into this. I have 3 years of experience as a developer/designer 3) richard4s has started work.

I would look into the issue, explore it first, fund the bugs and hopefully fix them. 4) hrithikgautham has started work.

I've had hands-on experience in html, css, js and scss. I will be able to deliver what u expect. Thank You!

Learn more on the Gitcoin Issue Details page.

[mikeymicrophone]

Have you worked on any stylesheets? I may move the app to webpacker, so it might be good to wait for that and merge it into your fork first. If you already have code, I can merge it later on, no problem :)

[HellBringer419]

I tried to beautify the page by making things a bit more compact and easy to read. Please have a look at this linked prototype.

This prototype is for the Registration page only. If it's not upto the mark, please tell me; I'll try coming up with better ideas.

[zakare791]

Is this still a working project (i.e open gitcoin bounty)?

[wannj-Dennis]

Hi, is this project still valid? I would like to give it a shot. Based on your latter UI requirements, it would be awesome to work on it