search

csharpfritz / csharp_with_csharpfritz

Show notes, slides, and samples from the CSharp with CSharpFritz show
MIT License
662 stars 215 forks source link

Card layout improvements using Bootstrap... #137

Closed JustCallMeAD closed 2 years ago

JustCallMeAD commented 2 years ago

  1. Placed the "add" button in a column so it has the same padding as the rest of the layout and removed the button width as it is not required.

  2. Updated "index.chtm"l and "_itemCard.chtml" so that all cards have equal height and the width is automatically calculated (3 column layout). Ref: https://getbootstrap.com/docs/5.2/components/card/#card-groups

  3. Updated the "_itemCard.chtml" card footer to use class="float-end" class instead of inline style (float:right). Ref: https://getbootstrap.com/docs/5.2/utilities/float/

  4. Updated the "_itemCard.chtm"l card footer buttons to use role="button" instead of inline style (cursor:pointer). Ref: https://getbootstrap.com/docs/5.2/content/reboot/#pointers-on-buttons

  5. Updated the "_itemCard.chtml" card footer so that the text could not be accidentally selected when clicking a button. Ref: https://getbootstrap.com/docs/5.2/utilities/interactions/

csharpfritz commented 2 years ago

Thanks so much for the update!