Murali-group / GraphSpace

The interactive graph sharing website.
http://graphspace.org
GNU General Public License v2.0
30 stars 41 forks source link

fixes of issue "Side Panel Search Bar Text Unreadable" #421

Open Anirbanbhk88 opened 4 years ago

Anirbanbhk88 commented 4 years ago

Purpose

Describe the problem or feature in addition to a link to the issues.

Example: Fixes #379

Approach

How does this change address the problem?

I have used the following CSS to the searchbar input element in the html to fix the placeholder cut off issue. .inputSrchEdgeNodes{ padding-top: 6px !important; padding-right: 19px !important; padding-bottom: 6px !important; padding-left: 6px !important; }

I also commented the following html code(in default_sidebar.html) which I suppose was causing the placeholder text to move to top. This code might be redundant and not needed

<div id="searchPopover" class="popover fade">
    <p class="lead zero-margin zero-padding"
       style="font-size: medium; text-align: right; ">
        Search for nodes and edges</p>
</div>

please see the output screenshot

Open Questions and Pre-Merge TODOs

Learning

Describe the research stage

Links to blog posts, patterns, libraries or addons used to solve this problem

Blog Posts

jddanna commented 3 years ago

Purpose

Describe the problem or feature in addition to a link to the issues.

Example: Fixes #379

Approach

How does this change address the problem?

I have used the following CSS to the searchbar input element in the html to fix the placeholder cut off issue. .inputSrchEdgeNodes{ padding-top: 6px !important; padding-right: 19px !important; padding-bottom: 6px !important; padding-left: 6px !important; }

I also commented the following html code(in default_sidebar.html) which I suppose was causing the placeholder text to move to top. This code might be redundant and not needed

<div id="searchPopover" class="popover fade">
    <p class="lead zero-margin zero-padding"
       style="font-size: medium; text-align: right; ">
        Search for nodes and edges</p>
</div>

please see the output screenshot

Open Questions and Pre-Merge TODOs

  • [ ] Use github checklists. When solved, check the box and explain the answer.

Learning

Describe the research stage

Links to blog posts, patterns, libraries or addons used to solve this problem

Blog Posts

The last "fixes" commit has the necessary changes and looks like a good solution. I am not sure what the other commits were about, including the maintenance message. I think It would make sense to make a new branch with just the fix, otherwise I can go through and make sure there are no conflicts.