design new issue page

[CodeWithBishal]

Proposing this design for the bug description page.

Here is a summary of each significant piece of information and functionality included in the page:

• Title and Open Graph Tags: The page's title and Open Graph metadata are dynamically set to include the domain title and the bug description, enhancing SEO and shareability on social media platforms.

• Bug Description and Metadata: Displays the bug description, view count, and other metadata such as domain URL, allowing users to understand the bug context. It includes actions like copying the title, sharing on social media, and bookmarking.

• Translation Feature: Incorporates Google Translate to enable translating the page content, improving accessibility for non-English speakers.

• Reporter and Domain Information: Shows details about the bug's reporter (with a link to their profile) and the affected domain, including the number of issues reported and options to subscribe to bug notifications for the domain.

• Browser and OS Information: Presents the browser version, operating system, and OS version used when the bug was reported, which can be crucial for debugging.

• Bug Type, Status, and Management: Displays the bug's type and current status (open or closed), with options for authorized users to edit the issue, change its status, or delete it. A feature for reporting the issue anonymously is also provided.

• GitHub Integration: Offers links to view the bug on GitHub or to report it there, enhancing collaboration and tracking.

• Description and Screenshots: A section for a more detailed description of the bug using Markdown, rendered into HTML, and a display of associated screenshots to visually represent the bug.

• OCR Results: If available, shows the results of Optical Character Recognition on the bug's screenshots, aiding in understanding text within images.

• Comments Section: Allows users to view existing comments and add their own, fostering community discussion and collaboration on bug resolution.

• Interactive Scripts: Includes JavaScript to handle various interactions on the page, such as editing the bug report, updating the issue status, liking/disliking, flagging/unflagging, and bookmarking issues. It also contains functionality for sanitizing URLs and integrating Markdown descriptions with embedded images.

TODO:
Remove:
files inside remove folder
and

urls.py
Remove: IssueView
re_path(r"^like_issue/(?P<issue_pk>\d+)/$", website.views.like_issue, name="like_issue"),
    re_path(
        r"^dislike_issue/(?P<issue_pk>\d+)/$",
        website.views.dislike_issue,
        name="dislike_issue",
    ),
    re_path(r"^flag_issue/(?P<issue_pk>\d+)/$", website.views.flag_issue, name="flag_issue"),
    re_path(r"^like_issue2/(?P<issue_pk>\d+)/$", like_issue2, name="like_issue2"),
    re_path(r"^dislike_issue2/(?P<issue_pk>\d+)/$", dislike_issue2, name="dislike_issue2"),
    re_path(r"^flag_issue2/(?P<issue_pk>\d+)/$", flag_issue2, name="flag_issue2"),
    re_path(r"^issue/(?P<slug>\w+)/$", IssueView.as_view(), name="issue_view"),
    re_path(r"^issue2/(?P<slug>\w+)/$", IssueView2.as_view(), name="issue_view2"),

views.py
Remove
like_issue2, like_issue,dislike_issue,dislike_issue2,flag_issue2,flag_issue

FOLDER FILES(Remove)
includes/_likes2.html
includes/_dislike2.html
includes/_flags2.html
includes/_bookmark2.html

[DonnieBLT]

This is a great improvement. I feel like it could be combined a bit more there is a lot of information to display and could use some combining of parts and separation of parts. Looks better than what we have though. Thank you!

[CodeWithBishal]

@DonnieBLT Here is the updated version combining the sidebar. Kept a space under the Bug Title and Link. I can create more space, Do let me know if more space is required.

[DonnieBLT]

This looks great! Thanks. I have a few ideas I will share later today.

[MattSilverio]

Hey guys, do you need some effort to these front end tasks?

@CodeWithBishal , I felt the size of the words on the sidebar could be smaller. They are looking to me some '<h2>' or '<h3>' default size tag

Try to make like "EXPERIMENTAL" and "MORE" but keeping the black color. If not ok, try some 2-4px plus to font-size

[DhananjayDogne]

I want to work on frontend part of this enhancement .Please tell me if you need any help.
@CodeWithBishal

[CodeWithBishal]

Hi @DhananjayDogne,
Sure here is the figma file: https://www.figma.com/file/3hr4L0140ZjJpzWnPgYbip/BLT-Website?type=design&node-id=0%3A1&mode=design&t=gXz2W9lLeBYUPtit-1

Do not make changes to the "DO NOT EDIT" group. I have created a clone under "Make adjustments" Feel free to make changes here.

[aakash2330]

if the frontend for this ready @CodeWithBishal , or can I work on it ?

[CodeWithBishal]

@aakash2330 you can work on it!

[CodeWithBishal]

Hi @DonnieBLT,

I am proposing this as the final design of the Bug Description page. Do you have something to add?

[DonnieBLT]

quick feedback: the title can get long so it may be good to have it on it's own line - also would like to see the CVE number, a small chart for views, and the company name bigger, along with their contact email - looks great though

[DonnieBLT]

@CodeWithBishal can you share a link to an editable figma file we can collaborate on?

[CodeWithBishal]

@CodeWithBishal can you share a link to an editable figma file we can collaborate on?

Sure, Here is the link: https://www.figma.com/file/3hr4L0140ZjJpzWnPgYbip/BLT-Website?type=design&node-id=0%3A1&mode=design&t=TLtLWeIOVvtainZl-1

[DonnieBLT]

We lost some functionality after the recent update - lets add this back -

[CodeWithBishal]

Hi, I have tested locally and it works for me.

[DonnieBLT]

I mean to have that in the new design

[CodeWithBishal]

I have added Edit button, View on Github, Delete.

• I think it is okay if the full link is not viewable, but yes the full title should be viewable, so we need shift the 5 containers below and create 2 lines of space for title, 1 line for link(width: half line then use ellipses ... )

Updated UI

[DonnieBLT]

Looking better. I would like each button to show the text of what it is and I think a right column with the info might be good. Can you please also add the CVE, like / dislike and suggested tip amount? You could also make the company logo bigger like the user avatar.

[CodeWithBishal]

Hi @DonnieBLT, can you please elaborate on "a right column with the info" are we talking about Popovers?
Popovers Reference: https://getbootstrap.com/docs/5.3/components/popovers/
or
I have added text after Icon

You could also make the company logo bigger like the user avatar.

Is it ok if I make the changes while implementing? right now I am using an image for the header so can't specifically alter the logo size.

Can you please also add the CVE

I could not find CVE in the current design, could you elaborate on how should it look like and what are other components to be added on that card?

like / dislike

Based on the CVE card design I will add this

suggested tip amount

[CodeWithBishal]

Hey @DonnieBLT ! Can I get some update on this?
Please confirm: PRs created on this issue are eligible for GSOC Leaderboard?

[DonnieBLT]

yes of course they are eligible - all of the proposed changes look good, would like to see this update.

[DonnieBLT]

I need to go through this and come up with a mockup

[CodewithbishalBLT]

/assign

[CodewithbishalBLT]

/assign