Skip to content

Commit 2d811ff

Browse files
ckjckj
committed
Responsive group detail
1 parent a4d5baf commit 2d811ff

File tree

3 files changed

+149
-38
lines changed

3 files changed

+149
-38
lines changed

‎src/sentry/static/sentry/less/sentry.less

Lines changed: 114 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -940,6 +940,10 @@ a.icon-share {
940940
line-height: 1.4;
941941
}
942942

943+
.stats {
944+
color: #949ea4;
945+
}
946+
943947
.count {
944948
color: #454C50;
945949
font-size: 22px;
@@ -953,10 +957,6 @@ a.icon-share {
953957
text-align: right;
954958
}
955959

956-
.assigned-to, .occurrences, .users {
957-
color: #949ea4;
958-
}
959-
960960
.assigned-to {
961961
.btn-group {
962962
margin-top: -3px;
@@ -1544,7 +1544,7 @@ ol.context-line {
15441544

15451545
.mini-tag-list {
15461546
padding-left: 0;
1547-
margin-bottom: 10px;
1547+
margin-bottom: 0;
15481548
> li {
15491549
display: inline-block;
15501550
background: #f9f9f9;
@@ -2553,7 +2553,10 @@ table.integrations {
25532553

25542554
/* Small screens */
25552555

2556-
@media(max-width:767px){
2556+
@media(max-width:767px) {
2557+
body {
2558+
overflow-x: hidden;
2559+
}
25572560

25582561
header {
25592562
padding: 15px 0 13px;
@@ -2596,6 +2599,23 @@ table.integrations {
25962599
}
25972600
}
25982601

2602+
.box {
2603+
border-width: 2px;
2604+
margin-bottom: 15px;
2605+
margin: 0 -15px 0;
2606+
border: 0;
2607+
border-radius: 0;
2608+
2609+
.box-header {
2610+
border-radius: 0;
2611+
// background: #f1f2f3;
2612+
border-top: 2px solid #f1f2f3;
2613+
border-bottom: 2px solid #f1f2f3;
2614+
padding: 15px;
2615+
background: lighten(#f1f2f3, 3);
2616+
}
2617+
}
2618+
25992619
/* Stream */
26002620

26012621
.primary-filters {
@@ -2652,4 +2672,92 @@ table.integrations {
26522672
}
26532673
}
26542674
}
2675+
2676+
/* Detail */
2677+
2678+
.group-detail {
2679+
border: 0;
2680+
margin: -10px 0 -5px;
2681+
2682+
2683+
h3 {
2684+
white-space: normal;
2685+
font-size: 20px;
2686+
line-height: 1.1;
2687+
}
2688+
.meta {
2689+
font-size: 13px;
2690+
}
2691+
2692+
.assigned-to .btn-group {
2693+
float: none;
2694+
margin-left: -6px;
2695+
2696+
.dropdown-menu {
2697+
left: 0;
2698+
right: auto;
2699+
}
2700+
}
2701+
2702+
.count {
2703+
font-size: 18px;
2704+
}
2705+
2706+
.user-selector {
2707+
height: 25px;
2708+
}
2709+
2710+
.is-assigned {
2711+
text-align: left;
2712+
}
2713+
2714+
.stats {
2715+
margin-bottom: 15px;
2716+
2717+
.row {
2718+
border: 2px solid #f1f2f3;
2719+
border-radius: 4px;
2720+
margin: 0;
2721+
}
2722+
}
2723+
2724+
.assigned-to, .event-count, .user-count {
2725+
padding: 6px 12px;
2726+
margin: 0;
2727+
}
2728+
2729+
.event-count, .user-count {
2730+
border-left: 2px solid #f1f2f3;
2731+
}
2732+
}
2733+
2734+
.btn-group.more {
2735+
float: right;
2736+
2737+
.dropdown-menu {
2738+
left: auto;
2739+
right: 0;
2740+
}
2741+
}
2742+
2743+
.group-detail-filters {
2744+
margin: -32px -17px -2px;
2745+
padding-right: 0;
2746+
2747+
a {
2748+
padding: 10px 0;
2749+
}
2750+
}
2751+
2752+
.event-toolbar {
2753+
display: none;
2754+
}
2755+
2756+
.context {
2757+
overflow: auto;
2758+
2759+
li {
2760+
width: 800px;
2761+
}
2762+
}
26552763
}

‎src/sentry/templates/sentry/groups/details.html

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,26 @@
1919
<a href="{% url 'sentry-stream' team.slug project.slug %}" class="back-button icon-arrow-left"></a>
2020
<div class="group-detail">
2121
<div class="row">
22-
<div class="col-xs-8 details">
22+
<div class="col-sm-8 details">
2323
<h3>{{ group.title }}</h3>
2424
<div class="meta">
2525
<time>{{ group.last_seen|timesince }}</time> &middot;
2626
<span class="message">{{ group.message_short }}</span>
2727
</div>
2828
</div>
29-
<div class="col-xs-4 occurrences">
29+
<div class="col-sm-4 stats">
3030
<div class="row">
3131
<div class="col-xs-4 assigned-to">
32-
<div class="hidden-xs">
32+
3333
<assignee-selector></assignee-selector>
3434
<div class="is-assigned"><span class="hidden-sm">is</span> assigned</div>
35-
</div>
3635
</div>
37-
<div class="col-xs-4 occurences align-right"><span class="count">{{ group.times_seen|small_count }}</span> events</div>
38-
<div class="col-xs-4 users align-right"><span class="count">209</span> users</div>
36+
<div class="col-xs-4 event-count align-right"><span class="count">{{ group.times_seen|small_count }}</span> events</div>
37+
<div class="col-xs-4 user-count align-right"><span class="count">209</span> users</div>
3938
</div>
4039
</div>
4140
</div>
42-
<div class="seen-by" ng-if="selectedGroup.seenBy">
41+
<div class="seen-by hidden-xs" ng-if="selectedGroup.seenBy">
4342
<ul>
4443
<li>Seen by</li>
4544
<li ng-repeat="user in selectedGroup.seenBy">
@@ -55,7 +54,7 @@ <h3>{{ group.title }}</h3>
5554
<div class="btn-group">
5655
<a href="#" class="btn btn-default btn-sm"><span class="icon-trash"></span></a>
5756
</div>
58-
<div class="btn-group">
57+
<div class="btn-group more">
5958
<a href="#" class="btn btn-default btn-sm dropdown-toggle">More <span class="icon-arrow-down"></span></a>
6059
<ul class="dropdown-menu">
6160
{% if can_admin_event %}
@@ -163,7 +162,7 @@ <h4>
163162
{% endblock %}
164163

165164
{% block sidebar %}
166-
<ul class="nav nav-stacked">
165+
<ul class="nav nav-stacked hidden-xs">
167166
<li{% if page == 'details' %} class="active"{% endif %}><a href="{% url 'sentry-group' group.team.slug group.project.slug group.id %}">Aggregate</a></li>
168167
<li{% if page == 'tag_list' %} class="active"{% endif %}>
169168
<a href="{% url 'sentry-group-tags' group.team.slug group.project.slug group.id %}">{% trans "Tags" %}</a>
@@ -173,24 +172,26 @@ <h4>
173172
</li>
174173
</ul>
175174

176-
<h6>{% trans "Aggregate Details" %}</h6>
177-
178-
<dl class="flat">
179-
<dt>{% trans "Status:" %}</dt>
180-
<dd class="align-right">{{ group.get_status_display|title }}</dd>
181-
<dt>{% trans "First Seen:" %}</dt>
182-
<dd class="pretty-date align-right" data-datetime="{% localized_datetime group.first_seen "c" %}">{{ group.first_seen|timesince }}</dd>
183-
{% if group.active_at and group.active_at != group.first_seen %}
184-
<dt>{% trans "Reopened:" %}</dt>
185-
<dd class="pretty-date align-right" data-datetime="{% localized_datetime group.active_at "c" %}">{{ group.active_at|timesince }}</dd>
186-
{% endif %}
187-
<dt>{% trans "Last Seen:" %}</dt>
188-
<dd class="pretty-date align-right" data-datetime="{% localized_datetime group.last_seen "c" %}">{{ group.last_seen|timesince }}</dd>
189-
{% if group.avg_time_spent %}
190-
<dt>{% trans "Avg Duration:" %}</dt>
191-
<dd>{% if group.avg_time_spent %}{{ group.avg_time_spent|duration }}{% else %}<em>{% trans "n/a" %}</em>{% endif %}</dd>
192-
{% endif %}
193-
</dl>
175+
<div class="hidden-xs">
176+
<h6>{% trans "Aggregate Details" %}</h6>
177+
178+
<dl class="flat">
179+
<dt>{% trans "Status:" %}</dt>
180+
<dd class="align-right">{{ group.get_status_display|title }}</dd>
181+
<dt>{% trans "First Seen:" %}</dt>
182+
<dd class="pretty-date align-right" data-datetime="{% localized_datetime group.first_seen "c" %}">{{ group.first_seen|timesince }}</dd>
183+
{% if group.active_at and group.active_at != group.first_seen %}
184+
<dt>{% trans "Reopened:" %}</dt>
185+
<dd class="pretty-date align-right" data-datetime="{% localized_datetime group.active_at "c" %}">{{ group.active_at|timesince }}</dd>
186+
{% endif %}
187+
<dt>{% trans "Last Seen:" %}</dt>
188+
<dd class="pretty-date align-right" data-datetime="{% localized_datetime group.last_seen "c" %}">{{ group.last_seen|timesince }}</dd>
189+
{% if group.avg_time_spent %}
190+
<dt>{% trans "Avg Duration:" %}</dt>
191+
<dd>{% if group.avg_time_spent %}{{ group.avg_time_spent|duration }}{% else %}<em>{% trans "n/a" %}</em>{% endif %}</dd>
192+
{% endif %}
193+
</dl>
194+
</div>
194195

195196
{% if seen_by_faces %}
196197
<h6>{% trans "Seen By" %}</h6>
@@ -208,9 +209,11 @@ <h6>{% trans "Seen By" %}</h6>
208209
</ul>
209210
{% endif %}
210211

211-
{% for tag in group.get_tags %}
212-
{% render_tag_widget group tag %}
213-
{% endfor %}
212+
<div class="hidden-xs">
213+
{% for tag in group.get_tags %}
214+
{% render_tag_widget group tag %}
215+
{% endfor %}
216+
</div>
214217

215218
{% for html in group|get_widgets:request %}
216219
{{ html|safe }}

‎src/sentry/templates/sentry/layout.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,11 +156,11 @@ <h1>{% block heading %}{% endblock %}</h1>
156156

157157
{% block content %}
158158
<div class="row">
159-
<div class="col-xs-3 sidebar">
159+
<div class="col-sm-3 sidebar">
160160
{% block sidebar %}
161161
{% endblock %}
162162
</div>
163-
<div class="col-xs-9">
163+
<div class="col-sm-9">
164164
{% block main %}
165165
{% endblock %}
166166
</div>

0 commit comments

Comments
 (0)