Fixes #168 Updated the entire Awards Section

[ritankarsaha]

FIXES

This PR fixes the issue #168 .

DESCRIPTION:-

This PR does the following making changes in a number of files:-

1. Updates the models.py of the awards app in the applications folder to incorporate the image field
   image = models.ImageField(upload_to='awards/images/', null=True, blank=True) and also incorporate the received_by field
   received_by = models.CharField(max_length=255, null=True, blank=True)

2. Updates the views.py file in the same location, to display a limited portion of each award in the All Awards page or the index.html page and other fixes.

3. Updates the urls.py file in the same location to incorporate double-digit ids as well instead o ids ranging from [0-9] only.

4. Updates the award.html file so that the image can be displayed, received_by attribute be displayed and the whole content too. Lastly UI fixes.

5. Updates the index.html file so that all the awards are displayed in an orderly fashion with images right aligned and the description if too long contains a gist of the original content. Lastly UI fixes.

PROOF OF WORK:-

PORTION 1

Screen.Recording.2024-07-07.at.4.mp4

This video shows two essential fixes:-

1. The image attribute is added in the model and successful image upload is taking place.
2. The received_by attribute is added as well in the model and name can be added as to who received the award which in turn is displayed in the list of awards(index.html) and individual award page(award.html) with a proper icon.
3. In the award list page(index.html) the images will be right aligned to maintain the UI of how the awards are displayed. Similarly awards with no images will display no image. In award.html or the individual award page the images will be left aligned if there is any image uploaded, if not nothing gets displayed and only the listed award is shown.

These two images show the image displayed both in the index.html page with all the awards, and in the award.html page where only the specified award is displayed.

PORTION 2

Screen.Recording.2024-07-07.at.4.1.mp4

This video shows the fix:-

1. Instead of a large chunk of text in the description, it will trim off the receding portion displaying just a segment of the portion in the preview region in the index.html page in contrary to the screenshot provided in the issue where the entire description is getting displayed without any trim.

Screen.Recording.2024-07-07.at.5.mp4

This video is in accordance with the previous video showing that while in the award-list page or the index.html page the long text gets trimmed to a smaller chunk and when the corresponding award page of that particular award(award.html) page is opened, the entire text is displayed properly.

The UI too has been fixed accordingly.

Thank You.

[ritankarsaha]

@SamakshAgarwal1112 I have made the changes, fixed issue #168 and opened a PR for the same.

[SamakshAgarwal1112]

@ritankarsaha Good effort. Here are a few suggestions from my side :

• Instead of one long connected box with all awards, try making all those awards as separate boxes. Right now they all are in a single box separated by dashes.
• The image is to be resized. Right now, if we put a long image, the card doesn't look right. Refer models of gallery for an idea.
  
• Right now you are only showing the first 50 words of the desc, but from the third person perspective it doesn't seem like there is still description left. Take the cut portion of your desc and add three dots in the end like '...' to show that there is still desc left.
• When you make different boxes for awards as suggested in first point, add a feature such that when the user clicks an award box, then the user will be redirected to that respective awards page.
• On the detailed awards page, the issue of long description still persists. So what you can do is add a max_length of 2000 words in the model for desc.

[ritankarsaha]

@SamakshAgarwal1112 Updated the changes as deemed.

[ritankarsaha]

@SamakshAgarwal1112 Made the changes in the models.py for trimming and added ProcessedImageField for image resizing

[SamakshAgarwal1112]

@ritankarsaha Great work! Last few tweaks though! Resize the image to 300x300. And center align the image in both, index and specific awards page.

[ritankarsaha]

@SamakshAgarwal1112 Made the changes and pushed new commits into the PR

[SamakshAgarwal1112]

@ritankarsaha LGTM. Well done.