Skip to content

Commit a1c5379

Browse files
iMattProiMattPro
committed
Make flex box usage more universal in ideas
1 parent 8b4b194 commit a1c5379

3 files changed

Lines changed: 52 additions & 31 deletions

File tree

‎styles/prosilver/template/idea_body.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
</noscript>
99
<div class="panel">
1010
<div class="inner">
11-
<div class="idea-panel">
12-
<div class="idea-panel-inner">
11+
<div class="idea-panel flex-box flex-wrap">
12+
<div class="idea-panel-inner flex-grow">
1313
<h3>{{ lang('VOTES') }}</h3>
1414
<div class="rating">
1515
<a {% if S_CAN_VOTE %}href="{{ U_IDEA_VOTE }}"{% endif %} class="minivote vote-up{{ not S_CAN_VOTE_UP ? ' vote-disabled' }}" title="{{ lang('VOTE_UP') }}" data-l-err="{{ lang('ERROR') }}" data-l-msg="{{ lang('VOTE_ERROR') ~ lang('COLON') }}"><i class="icon fa-check-circle user-voted{{ not S_VOTED_UP ? ' hidden' }}" aria-hidden="true"></i><i class="icon fa-thumbs-up"></i><span class="vote-count">{{ IDEA_VOTES_UP }}</span></a> &nbsp;
@@ -43,7 +43,7 @@ <h3>{{ lang('VOTES') }}</h3>
4343
</ul>
4444
</div>
4545
</div>
46-
<div class="idea-panel-inner">
46+
<div class="idea-panel-inner flex-grow">
4747
<h3>{{ lang('STATUS') }}</h3>
4848
<div class="status-dropdown-container dropdown-container dropdown-{S_CONTENT_FLOW_END}">
4949
<span class="status-badge status-{{ IDEA_STATUS_ID }}">
@@ -66,7 +66,7 @@ <h3>{{ lang('STATUS') }}</h3>
6666
{% endif %}
6767
</div>
6868
{% if IDEA_RFC %}
69-
<div class="status-item">
69+
<div class="status-item flex-box flex-align-end">
7070
{{ lang('RFC') ~ lang('COLON') }}
7171
<a id="rfclink" href="{{ IDEA_RFC }}" style="{% if not IDEA_RFC %}display:none;{% endif %}overflow:hidden;text-overflow:ellipsis;white-space:nowrap;{% if S_CAN_EDIT %}max-width:75%;{% endif %}">{{ lang('RFC_LINK_TEXT') }}</a>
7272
{% if S_CAN_EDIT %}
@@ -76,7 +76,7 @@ <h3>{{ lang('STATUS') }}</h3>
7676
</div>
7777
{% endif %}
7878
{% if IDEA_TICKET or S_CAN_EDIT %}
79-
<div class="status-item">
79+
<div class="status-item flex-box flex-align-end">
8080
{{ lang('TICKET') ~ lang('COLON') }}
8181
<a id="ticketlink" {% if IDEA_TICKET %}href="https://tracker.phpbb.com/browse/PHPBB3-{{ IDEA_TICKET }}">PHPBB3-{{ IDEA_TICKET }}{% else %}style="display:none">{% endif %}</a>
8282
{% if S_CAN_EDIT %}
@@ -86,7 +86,7 @@ <h3>{{ lang('STATUS') }}</h3>
8686
</div>
8787
{% endif %}
8888
{% if IDEA_DUPLICATE or S_IS_MOD %}
89-
<div class="status-item duplicatetoggle" {% if IDEA_STATUS_ID != STATUS_ARY.DUPLICATE %}style="display:none"{% endif %}>
89+
<div class="status-item flex-box flex-align-end duplicatetoggle" {% if IDEA_STATUS_ID != STATUS_ARY.DUPLICATE %}style="display:none"{% endif %}>
9090
{{ lang('DUPLICATE') ~ lang('COLON') }}
9191
<a id="duplicatelink" data-link="{{ U_IDEA_DUPLICATE }}" {% if IDEA_DUPLICATE %}href="{{ U_IDEA_DUPLICATE }}">{{ IDEA_DUPLICATE }}{% else %}style="display:none">{% endif %}</a>
9292
{% if S_IS_MOD %}
@@ -119,7 +119,7 @@ <h3>{{ lang('STATUS') }}</h3>
119119
</div>
120120
{% endif %}
121121
{% if IDEA_IMPLEMENTED or S_IS_MOD %}
122-
<div class="status-item implementedtoggle" {% if IDEA_STATUS_ID != STATUS_ARY.IMPLEMENTED %}style="display:none"{% endif %}>
122+
<div class="status-item flex-box flex-align-end implementedtoggle" {% if IDEA_STATUS_ID != STATUS_ARY.IMPLEMENTED %}style="display:none"{% endif %}>
123123
{{ lang('IMPLEMENTED_VERSION') ~ lang('COLON') }}
124124
<span id="implementedversion"{% if not IDEA_IMPLEMENTED %} style="display:none;"{% endif %}>{{ IDEA_IMPLEMENTED }}</span>
125125
{% if S_IS_MOD %}

‎styles/prosilver/template/index_body.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ <h2>{{ lang('IDEAS_TITLE') }}</h2>
77
{% include 'action_bar_top.html' %}
88

99
{# TOP IDEAS #}
10-
<h2 class="push-left">{{ lang('TOP_IDEAS') }}</h2>
11-
{% if top_ideas %}
12-
<a class="button view-all" href="{{ U_VIEW_TOP }}"><i class="icon fa-fw fa-line-chart"></i> <span>{{ lang('VIEW_TOP') }}</span></a>
13-
{% endif %}
10+
<div class="flex-box flex-align-end flex-justify">
11+
<h2>{{ lang('TOP_IDEAS') }}</h2>
12+
{% if top_ideas %}
13+
<a class="button view-all" href="{{ U_VIEW_TOP }}"><i class="icon fa-fw fa-line-chart"></i> <span>{{ lang('VIEW_TOP') }}</span></a>
14+
{% endif %}
15+
</div>
1416
<div class="forumbg">
1517
<div class="inner">
1618
<ul class="topiclist">
@@ -27,11 +29,13 @@ <h2 class="push-left">{{ lang('TOP_IDEAS') }}</h2>
2729
</div>
2830

2931
{# LATEST IDEAS #}
30-
<h2 class="push-left">{{ lang('LATEST_IDEAS') }}</h2>
31-
{% if latest_ideas %}
32-
<a class="button view-all" href="{{ U_VIEW_LATEST }}"><i class="icon fa-fw fa-lightbulb-o"></i> <span>{{ lang('VIEW_LATEST') }}</span></a>
33-
{% endif %}
34-
<div class="forumbg" style="margin-top: 10px">
32+
<div class="flex-box flex-align-end flex-justify">
33+
<h2>{{ lang('LATEST_IDEAS') }}</h2>
34+
{% if latest_ideas %}
35+
<a class="button view-all" href="{{ U_VIEW_LATEST }}"><i class="icon fa-fw fa-lightbulb-o"></i> <span>{{ lang('VIEW_LATEST') }}</span></a>
36+
{% endif %}
37+
</div>
38+
<div class="forumbg">
3539
<div class="inner">
3640
<ul class="topiclist">
3741
<li class="header">
@@ -47,11 +51,13 @@ <h2 class="push-left">{{ lang('LATEST_IDEAS') }}</h2>
4751
</div>
4852

4953
{# IMPLEMENTED IDEAS #}
50-
<h2 class="push-left">{{ lang('IMPLEMENTED_IDEAS') }}</h2>
51-
{% if implemented_ideas %}
52-
<a class="button view-all" href="{{ U_VIEW_IMPLEMENTED }}"><i class="icon fa-fw fa-code-fork fa-flip-vertical"></i> <span>{{ lang('VIEW_IMPLEMENTED') }}</span></a>
53-
{% endif %}
54-
<div class="forumbg" style="margin-top: 10px">
54+
<div class="flex-box flex-align-end flex-justify">
55+
<h2>{{ lang('IMPLEMENTED_IDEAS') }}</h2>
56+
{% if implemented_ideas %}
57+
<a class="button view-all" href="{{ U_VIEW_IMPLEMENTED }}"><i class="icon fa-fw fa-code-fork fa-flip-vertical"></i> <span>{{ lang('VIEW_IMPLEMENTED') }}</span></a>
58+
{% endif %}
59+
</div>
60+
<div class="forumbg">
5561
<div class="inner">
5662
<ul class="topiclist">
5763
<li class="header">

‎styles/prosilver/theme/ideas.css‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
/* flex box classes */
2+
.flex-box {
3+
display: flex !important;
4+
}
5+
6+
.flex-wrap {
7+
flex-wrap: wrap;
8+
}
9+
10+
.flex-grow {
11+
flex-grow: 1;
12+
}
13+
14+
.flex-justify {
15+
justify-content: space-between;
16+
}
17+
18+
.flex-align-end {
19+
align-items: flex-end;
20+
}
21+
22+
.flex-align-center {
23+
align-items: center;
24+
}
25+
126
/* Common Styles */
227
dd.topics {
328
text-align: left;
@@ -93,18 +118,13 @@ dd.topics {
93118
/* Ideas Lists Styles */
94119
.view-all {
95120
color: #536482;
96-
float: right;
97121
margin: 0.8em 0 0.2em;
98122
}
99123

100124
.view-all:hover {
101125
color: #536482;
102126
}
103127

104-
.push-left {
105-
float: left;
106-
}
107-
108128
@media (min-width: 701px) and (max-width: 950px) {
109129
ul.topiclist dt {
110130
margin-right: -250px;
@@ -118,13 +138,10 @@ dd.topics {
118138
/* Idea Body Styles */
119139
.idea-panel {
120140
font-size: 11px;
121-
display: flex;
122-
flex-wrap: wrap;
123141
width: 100%;
124142
}
125143

126144
.idea-panel-inner {
127-
flex-grow: 1;
128145
box-sizing: border-box;
129146
width: 400px;
130147
padding: 0 3px;
@@ -185,8 +202,6 @@ dd.topics {
185202
}
186203

187204
.status-item {
188-
display: flex;
189-
align-items: flex-end;
190205
min-height: 18px;
191206
margin: 4px 0;
192207
}

0 commit comments

Comments
 (0)