Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create Code School Card component

See original GitHub issue

Feature request

Is your feature request related to a problem? Please describe. We have new mocks for /code_schools which requires a redo of our Code Schools Card component.

Describe the solution you’d like Emulate the code school card interface outlined in this mock

Additional context

Anywhere where the light blue (primary) color exists, please use secondary instead. After review with design, we decided to dark up the UI of the page, but elected to not update the mock.
Ignore the custom scroll bar visible in mock when looking at back of multi-location school card - use browser default scroll.
You can find the SVG assets I’d like used in this unmerged pull request: https://github.com/OperationCode/front-end/pull/137
Use the same code school logo on both sides of the card. We will eventually make them .png files so that they have a transparent background.
While the mock attempts to communicate clicking on a location in the location list on the back of the card opens a new page, it will actually just be plain text.
Ignore the housing icon. Need to make a separate issue to get it in when https://github.com/OperationCode/operationcode_backend/pull/415 is merged.
When the view width is too small, stack the buttons on top of each other vertically
Do your best to get a min-width which keeps the icons spanning only across two rows - feel free to connect the Badges to media queries that’ll reduce their size.

Components You Will Use Card Button (for locations button) LinkButton (for website button) Badge

Issue Analytics

State:
Created 5 years ago
Comments:10 (10 by maintainers)

Top GitHub Comments

1reaction

markchernovcommented, Nov 24, 2018

Ok I’ll open pr for this story. I did not do much but just reused your code and changed colors.

1reaction

markchernovcommented, Nov 24, 2018

Looks like the naming for logo files in s3 is inconsistent. Can we name files as full_school_name.jpg ? Ex. https://s3.amazonaws.com/operationcode-assets/codeSchoolLogos/cincy_code_it_bootcamps.jpg Schools missing are: ada_developers_academy.jpg, deep_dive_java_+android+salesforce.jpg, devpoint_labs.jpg, launchcode.jpg, nashville_software_school.jpg, rithm_school.jpg, sabio.jpg, the_flatiron_school.jpg, turing_school_of_software&_design.jpg, wyncode_academy.jpg