Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Design improvements for issue page #201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fredfalcon merged 7 commits into from
Jun 6, 2017
Merged

Design improvements for issue page #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6dce257
Modify tweet and share btn of issue-page
jajodiaraghav Jun 6, 2017
1ccb4f3
Improve design of issue-panel in /issue
jajodiaraghav Jun 6, 2017
9d5b2e7
Improve design of second-panel in /issue
jajodiaraghav Jun 6, 2017
c80e640
Improve design of third-panel in /issue
jajodiaraghav Jun 6, 2017
6da4398
Improve design of fourth-panel in /issue
jajodiaraghav Jun 6, 2017
55a3e4e
Improve design of /issue page
jajodiaraghav Jun 6, 2017
bbdff34
Improve design of comments page
jajodiaraghav Jun 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions website/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,14 +231,12 @@ a:hover{
height:120px;
overflow:hidden;
}

.activity-strip .activity-strip-section {
overflow:hidden;
float:left;
width:80%;
display:inline-flex;
}

.activity-strip-section > div {
margin-left: 20px;
font-size: 20px;
Expand All @@ -259,4 +257,36 @@ a:hover{
.activity-screenshot img {
width: 100px;
height: 95%;
}
.panel-image {
width: 100%;
height: 30%;
margin-bottom: -20px;
}
.panel-footer .btn {
width: 100%;
width: -moz-available;
width: -webkit-fill-available;
}
.panel-issue {
display: inline-flex;
}
.panel-issue-title {
color: white;
font-size: 46px;
padding-left: 10px;
}
.issue-panel .panel-footer {
padding-top: 20px;
}
.issue-panels .panel {
max-height: 300px;
}
.issue-panels .panel .operations .btn {
margin-top: 5px;
margin-bottom: 5px;
}
.screenshot-img {
border: 1px solid #d43f3a;
width:90%;
}
14 changes: 9 additions & 5 deletions website/templates/add_comment_to_post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
{% extends "base.html" %}
{% block content %}
<h1>New comment</h1>
<form method="POST" class="post-form">{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="save btn btn-default">Send</button>
</form>
<div class="row">
<h3>New comment</h3>
<form method="POST" class="post-form">
{% csrf_token %}
<textarea class="form-control" placeholder="Add a comment"></textarea><br>
<button type="submit" class="save btn btn-default">Send</button>
</form>
</div>
{% endblock %}
259 changes: 113 additions & 146 deletions website/templates/issue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,186 +43,153 @@
</script>
<div class="row">
<div class="col-lg-12">
<h2 class="page-header"> {{object.description}} <span class="pull-right"><i class="fa fa-eye" style="margin-right:10px;"></i> {{object.views}}</span></h2>
<a href="{{object.url}}" target="_new">{{object.url}}</a></br>
<div style="padding-top:10px;">
<a class="twitter-share-button"
<h3 class="page-header">
{{object.description}}
<span class="pull-right">
<i class="fa fa-eye"></i> {{object.views}}
</span>
</h3>
<strong>Domain:</strong>
<a href="{{object.url}}" target="_new">{{object.url}}</a>
<div class="pull-right">
<a class="twitter-share-button btn btn-info btn-sm"
href="https://twitter.com/intent/tweet?text=Bug on @{{object.domain_title}} - {{object.description}}"
data-size="small">Tweet</a>
<div class="fb-share-button" data-href="https://www.bugheist.com/issue/{{object.id}} " data-layout="button_count" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" >Share</a>
</div>
<span class="fb-share-button" data-href="https://www.bugheist.com/issue/{{object.id}} " data-layout="button_count" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore btn btn-primary btn-sm" target="_blank">Share</a>
</span>
</div>

<hr>
</div>
</div>

<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel" style="background-color:white">
<div class="panel-heading">Issue on:
<div class="col-lg-3 col-md-3">
<div class="panel panel-info">
<div class="panel-body">
<a href="/domain/{{object.domain_name}}">
<div class="row">
<div class="col-xs-3">
<img src="{{object.domain.get_logo}}" class="_overflow_img" height="75" onerror="this.onerror=null; this.style.display='none';this.parentNode.childNodes[3].style.display='block';">
<img src="{% static 'img/logo-small-transparent.png' %}" style="display:none;" class="alt-img">
</div>
<div class="col-xs-9 text-right">
<div class="huge _overflow_text">{{object.domain_title}}</div>
<div>{{issue_count}} issues</div>
</div>
</div>
<img src="{{object.domain.get_logo}}" class="panel-image" onerror="this.onerror=null; this.style.display='none';this.parentNode.childNodes[3].style.display='block';">
<img src="{% static 'img/logo-small-transparent.png' %}" class="panel-image" style="display:none;" class="alt-img">
</a>
</div>
</div>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="SC7E9NRCWHGTL">
<input type="hidden" name="hcustom" value="{{domian.name}}">
<button type="submit" class="btn btn-danger btn-small" >
<i class="fa fa-envelope fa-lg" style="margin-right:10px;"></i>Subscribe to {{object.domain_title}} bugs</button>
</form>
<div class="panel-footer">
<strong>Issue on: {{object.domain_name}}</strong>
<div>Title - <a href="/domain/{{object.domain_name}}">{{object.domain_title}}</a></div>
<div># of issues - {{issue_count}}</div><br/>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="SC7E9NRCWHGTL">
<input type="hidden" name="hcustom" value="{{domian.name}}">
<button type="submit" class="btn btn-danger btn-xs">
<i class="fa fa-envelope fa-lg"></i> Subscribe to {{object.domain_title}} bugs</button>
</form>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel" style="background-color:white">
<div class="panel-heading">Found {{object.created}} by:
<div class="col-lg-3 col-md-3">
<div class="panel panel-info">
<div class="panel-body">
<a href="/profile/{{object.user.username}}">
<div class="row">
<div class="col-xs-3">
{% if object.user.socialaccount_set.all.0.get_avatar_url %}
<img class="_overflow_img" src="{{object.user.socialaccount_set.all.0.get_avatar_url}}" width="75" height="75">
{% else %}
{% gravatar object.user.email 75 %}
{% endif %}
</div>
<div class="col-xs-9 text-right" >
<div class="huge _overflow_text">{{object.user.username}}</div>
<div>{{users_score}} points</div>
</div>
</div>
{% if object.user.socialaccount_set.all.0.get_avatar_url %}
<img class="panel-image" src="{{object.user.socialaccount_set.all.0.get_avatar_url}}">
{% else %}
<img class="panel-image" src="{% gravatar_url object.user.email 100 %}">
{% endif %}
</a>
</div>
</div>
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="item_name" value="tip for {{object.user.username}} on bugheist.com bug # {{object.id}}">
<input type="hidden" name="currency_code" value="USD">
<button type="submit" class="btn btn-danger btn-small pull-right" >
<i class="fa fa-money fa-lg" style="margin-right:5px;"></i> send a tip</button>
</form>
<div class="panel-footer">
<strong>Found {{object.created}} by: </strong>
<span class="text-capitalize">{{object.user.username}}</span>
<div>Points - {{users_score}} Points</div><br/>
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="item_name" value="tip for {{object.user.username}} on bugheist.com bug # {{object.id}}">
<input type="hidden" name="currency_code" value="USD">
<button type="submit" class="btn btn-danger btn-xs">
<i class="fa fa-money fa-lg"></i> Send a tip</button>
</form>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6" >
<div class="panel" style="background-color: {% if object.status == "closed" %}#bd2c00{% else %}#6cc644;{% endif %}">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<svg width="75px" height="75px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="issue-opened" fill="#ffffff">
{% if object.status == "closed" %}
<path d="M7,10 L9,10 L9,12 L7,12 L7,10 L7,10 Z M9,4 L7,4 L7,9 L9,9 L9,4 L9,4 Z M10.5,5.5 L9.5,6.5 L12,9 L16,4.5 L15,3.5 L12,7 L10.5,5.5 L10.5,5.5 Z M8,13.7 C4.86,13.7 2.3,11.14 2.3,8 C2.3,4.86 4.86,2.3 8,2.3 C9.83,2.3 11.45,3.18 12.5,4.5 L13.42,3.58 C12.14,2 10.19,1 8,1 C4.14,1 1,4.14 1,8 C1,11.86 4.14,15 8,15 C11.86,15 15,11.86 15,8 L13.48,9.52 C12.82,11.93 10.62,13.71 8,13.71 L8,13.7 Z" id="Shape"></path>
<div class="col-lg-3 col-md-3">
<div class="panel issue-panel" style="background-color:{% if object.status == "closed" %}#bd2c00{% else %}#6cc644;{% endif %};">
<div class="panel-heading panel-issue">
<svg width="75px" height="75px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="issue-opened" fill="#ffffff">
{% if object.status == "closed" %}
<path d="M7,10 L9,10 L9,12 L7,12 L7,10 L7,10 Z M9,4 L7,4 L7,9 L9,9 L9,4 L9,4 Z M10.5,5.5 L9.5,6.5 L12,9 L16,4.5 L15,3.5 L12,7 L10.5,5.5 L10.5,5.5 Z M8,13.7 C4.86,13.7 2.3,11.14 2.3,8 C2.3,4.86 4.86,2.3 8,2.3 C9.83,2.3 11.45,3.18 12.5,4.5 L13.42,3.58 C12.14,2 10.19,1 8,1 C4.14,1 1,4.14 1,8 C1,11.86 4.14,15 8,15 C11.86,15 15,11.86 15,8 L13.48,9.52 C12.82,11.93 10.62,13.71 8,13.71 L8,13.7 Z" id="Shape"></path>
{% else %}
<path d="M7,2.3 C10.14,2.3 12.7,4.86 12.7,8 C12.7,11.14 10.14,13.7 7,13.7 C3.86,13.7 1.3,11.14 1.3,8 C1.3,4.86 3.86,2.3 7,2.3 L7,2.3 Z M7,1 C3.14,1 0,4.14 0,8 C0,11.86 3.14,15 7,15 C10.86,15 14,11.86 14,8 C14,4.14 10.86,1 7,1 L7,1 Z M8,4 L6,4 L6,9 L8,9 L8,4 L8,4 Z M8,10 L6,10 L6,12 L8,12 L8,10 L8,10 Z" id="Shape"></path>
{% endif %}
{% endif %}
</g>
</g>
</g>
</svg>
</div>
<div class="col-xs-9 text-right">
<div class="huge" style="color:white;">{{object.status|default:"open"|title}}</div>
<form action="/update/" method="post">
{% csrf_token %}
<input type="hidden" name="id" value="{{issue.id}}">
<input type="hidden" name="action" value="{% if object.status == "closed" %}open{% else %}close{% endif %}">
<button type="submit" class="btn btn-xs pull-right" >{% if object.status == "closed" %}Open{% else %}Close{% endif %} Issue</button>
</form>
</svg>
<div class="panel-issue-title">
{{object.status|default:"Open"|title}}
</div>
</div>
<div class="panel-footer">
<form action="/update/" method="post">
{% csrf_token %}
<input type="hidden" name="id" value="{{issue.id}}">
<input type="hidden" name="action" value="{% if object.status == "closed" %}open{% else %}close{% endif %}">
<button type="submit" class="btn btn-lg btn-success">{% if object.status == "closed" %}Open{% else %}Close{% endif %} Issue</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-3 col-md-6" >
<div class="panel" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-3 text-left " >
{% if browser_family %}
<div class="small">

{% with 'img/browser-logos/'|add:browser_family|add:'/'|add:browser_family|add:'_64x64.png'|lower as image_static %}

<img src="{% static image_static %}"> {{browser_version}}
{% endwith %}
</div>

<div class="small">{{os_family}} {{os_version}}</div>
{% endif %}
</div>
<div class="col-lg-3 col-md-3">
<div class="panel panel-info">
<div class="panel-body">
{% if browser_family %}
{% with 'img/browser-logos/'|add:browser_family|add:'/'|add:browser_family|add:'_64x64.png'|lower as image_static %}
<img src="{% static image_static %}" class="panel-image">
{% endwith %}
{% endif %}
</div>
<div class="panel-footer operations">
<div class="text-center">
<strong>{{browser_version}} | {{os_family}} | {{os_version}}</strong>
</div>

</div>
<div class="col-xs-9 text-right">
{% if object.domain.github %}
{% if request.user.is_superuser or request.user == object.user %}
<p>
<a href="{{object.domain.github}}/issues/new?title={{object.description|urlencode}}&body=![0]({{object.screenshot.url}})%20http://bugheist.com/issue/{{object.id}}" target="_new">
<button type="button" class="btn btn-warning" style="margin-left:100px;">Add to Github</button>
</a>
</p>
{% endif %}
{% endif %}
{% if request.user.is_superuser or request.user == object.user %}
<p>
<a href="{% url 'issue_edit' issue.id %}">
<button type="button" class="btn btn-default">Edit</button>
</a>
</p>
<p>
<a href="/delete_issue/{{object.id}}" onclick="return confirm('Are you sure you want to delete this issue?')">
<button type="button" class="btn btn-danger">Delete</button>
</a>
</p>
{% endif %}

<br/>
{% if object.domain.github %}
{% if request.user.is_superuser or request.user == object.user %}
<a href="{{object.domain.github}}/issues/new?title={{object.description|urlencode}}&body=![0]({{object.screenshot.url}})%20http://bugheist.com/issue/{{object.id}}" target="_new" class="btn btn-warning">Add to Github</a>
{% endif %}
{% endif %}
{% if request.user.is_superuser or request.user == object.user %}
<a href="{% url 'issue_edit' issue.id %}" class="btn btn-default">Edit</a>
<a href="/delete_issue/{{object.id}}" onclick="return confirm('Are you sure you want to delete this issue?')" class="btn btn-danger">Delete</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
Screenshot:
<hr>
<img src="{{object.screenshot.url}}" style=" border: 1px solid #d43f3a;width:90%;">
<hr>
</div>
<div class="col-lg-12">
OCR Results:
<hr>
<div style=" border: 1px solid blue;">
{{object.get_ocr}}
<div class="col-lg-12">
<h4>Screenshot:</h4><hr>
<img src="{{object.screenshot.url}}" class="img-responsive screenshot-img"><hr>
</div>
<div class="col-lg-12">
<h4>OCR Results:</h4><hr>
<div class="alert alert-info">{{object.get_ocr}}</div><hr>
</div>
<hr>
</div>
</div>

<h3>Comments</h3>

<h4>Comments</h4><hr>
{% for comment in all_comment %}
<hr>
<div class="comment">
<div class="date">{{ comment.created_date }}</div>
<strong><a href="{{ comment.author_url }}">{{ comment.author }}</a></strong>
<p>{{ comment.text|linebreaks }}</p>
</div>
{% empty %}
<p>Be the first to comment.</p>
<p class="text-center text-info">Be the first to comment.</p>
{% endfor %}
<a class="btn btn-default" href="{% url 'add_comment_to_post' pk=issue.pk %}">Add comment</a>


<p class="text-center">
<a class="btn btn-default" href="{% url 'add_comment_to_post' pk=issue.pk %}">Add comment</a>
</p>
{% endblock %}