Skip to:
Content

bbPress.org

Changeset 5013


Ignore:
Timestamp:
07/10/2013 06:10:09 AM (12 years ago)
Author:
johnjamesjacoby
Message:

Responsive styling to default templates. Huge props mercime. Fixes #1933.

Location:
trunk/templates/default
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/templates/default/bbpress/content-single-topic-lead.php

    r4948 r5013  
    5656                <?php do_action( 'bbp_theme_before_topic_author_details' ); ?>
    5757
    58                 <?php bbp_topic_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>
     58                <?php bbp_topic_author_link( array( 'sep' => '', 'show_role' => true ) ); ?>
    5959
    6060                <?php if ( bbp_is_user_keymaster() ) : ?>
  • trunk/templates/default/bbpress/loop-search-reply.php

    r4970 r5013  
    3535        <?php do_action( 'bbp_theme_before_reply_author_details' ); ?>
    3636
    37         <?php bbp_reply_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>
     37        <?php bbp_reply_author_link( array( 'sep' => '', 'show_role' => true ) ); ?>
    3838
    3939        <?php if ( bbp_is_user_keymaster() ) : ?>
  • trunk/templates/default/bbpress/loop-search-topic.php

    r4970 r5013  
    5555        <?php do_action( 'bbp_theme_before_topic_author_details' ); ?>
    5656
    57         <?php bbp_topic_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>
     57        <?php bbp_topic_author_link( array( 'sep' => '', 'show_role' => true ) ); ?>
    5858
    5959        <?php if ( bbp_is_user_keymaster() ) : ?>
  • trunk/templates/default/bbpress/loop-single-reply.php

    r4948 r5013  
    4343        <?php do_action( 'bbp_theme_before_reply_author_details' ); ?>
    4444
    45         <?php bbp_reply_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>
     45        <?php bbp_reply_author_link( array( 'sep' => '', 'show_role' => true ) ); ?>
    4646
    4747        <?php if ( bbp_is_user_keymaster() ) : ?>
  • trunk/templates/default/css/bbpress-rtl.css

    r5007 r5013  
    200200    word-break: break-word;
    201201    display: inline-block;
     202}
     203
     204#bbpress-forums div.bbp-topic-author a.bbp-author-name,
     205#bbpress-forums div.bbp-reply-author a.bbp-author-name {
     206    clear: right;
     207    display: block;
    202208}
    203209
     
    517523#bbpress-forums .bbp-forum-info .bbp-forum-content,
    518524#bbpress-forums p.bbp-topic-meta {
     525    font-size: 11px;
    519526    margin: 5px 0 5px;
    520527    padding: 0;
    521     font-size: 11px;
     528    word-wrap: break-word;
    522529}
    523530
     
    967974#bbpress-forums div.bbp-template-notice img.avatar,
    968975#bbpress-forums .widget_display_topics img.avatar,
    969 #bbpress-forums .widget_display_replies img.avatar,
    970 #bbpress-forums p.bbp-topic-meta img.avatar {
     976#bbpress-forums .widget_display_replies img.avatar {
    971977    float: none;
    972978    margin-bottom: -7px;
     
    11081114    visibility: visible;
    11091115}
     1116
     1117/*--------------------------------------------------------------
     1118 Media Queries
     1119--------------------------------------------------------------*/
     1120
     1121/* =iPhone/Android landscape (and really narrow browser windows)
     1122-------------------------------------------------------------- */
     1123@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
     1124    -webkit-text-size-adjust: none;
     1125}
     1126@media only screen and (max-width: 480px) {
     1127    #bbpress-forums div.bbp-topic-tags {
     1128        clear: right;
     1129        float: right;
     1130    }
     1131    div.bbp-search-form input,
     1132    div.bbp-search-form button {
     1133        font-size: 11px;
     1134        padding: 2px;
     1135    }
     1136    li.bbp-forum-info,
     1137    li.bbp-topic-title {
     1138        width: 45%;
     1139    }
     1140    li.bbp-forum-topic-count,
     1141    li.bbp-forum-reply-count,
     1142    li.bbp-topic-voice-count,
     1143    li.bbp-topic-reply-count {
     1144        width: 15%;
     1145    }
     1146    span.bbp-reply-post-date {
     1147        float: right;
     1148    }
     1149    span.bbp-admin-links {
     1150        clear: right;
     1151        float: right;
     1152    }
     1153    #bbpress-forums .bbp-forums-list li {
     1154        display: block;
     1155        font-size: 11px;
     1156    }
     1157    #bbpress-forums div.bbp-reply-author a.bbp-author-name {
     1158        clear: none;
     1159        display: inline-block;
     1160    }
     1161    #bbpress-forums div.bbp-reply-author {
     1162        margin: 0 10px 10px;
     1163        text-align: left;
     1164        width: 100%;
     1165    }
     1166    #bbpress-forums div.bbp-reply-author img.avatar {
     1167        margin-bottom: -5px;
     1168        width: 20px;
     1169        height: auto;
     1170    }
     1171    #bbpress-forums div.bbp-reply-author .bbp-author-role {
     1172        font-size: 12px;
     1173        font-style: normal;
     1174    }
     1175    #bbpress-forums div.bbp-reply-author div {
     1176        display: inline-block;
     1177        margin-left: 12px;
     1178    }
     1179    #bbpress-forums div.bbp-reply-content {
     1180        clear: both;
     1181        margin: 10px;
     1182        padding: 0;
     1183    }
     1184    #bbpress-forums div.bbp-reply-content p {
     1185        margin-bottom: 1em;
     1186    }
     1187    div.bbp-submit-wrapper {
     1188        float: right;
     1189    }
     1190    #bbpress-forums fieldset.bbp-form {
     1191        padding: 0 10px 10px;
     1192    }
     1193    #bbpress-forums #bbp-user-body {
     1194        clear: both;
     1195        margin-right: 0;
     1196        word-wrap: break-word;
     1197    }
     1198}
     1199
     1200/* =iPhone/Android portrait
     1201-------------------------------------------------------------- */
     1202@media only screen and (max-width: 320px) {
     1203    #bbpress-forums div.bbp-search-form {
     1204        margin-bottom: 10px;
     1205    }
     1206    #bbpress-forums li.bbp-header li.bbp-forum-info,
     1207    #bbpress-forums li.bbp-body li.bbp-forum-info,
     1208    #bbpress-forums li.bbp-header li.bbp-topic-title,
     1209    #bbpress-forums li.bbp-body li.bbp-topic-title {
     1210        width: 100%;
     1211    }
     1212    #bbpress-forums li.bbp-header li.bbp-forum-info,
     1213    #bbpress-forums li.bbp-header li.bbp-topic-title {
     1214        text-align: center;
     1215        text-transform: uppercase;
     1216    }
     1217    #bbpress-forums li.bbp-header li.bbp-forum-topic-count,
     1218    #bbpress-forums li.bbp-header li.bbp-forum-reply-count,
     1219    #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
     1220    #bbpress-forums li.bbp-body li.bbp-forum-reply-count,
     1221    #bbpress-forums li.bbp-header li.bbp-topic-voice-count,
     1222    #bbpress-forums li.bbp-header li.bbp-topic-reply-count,
     1223    #bbpress-forums li.bbp-body li.bbp-topic-voice-count,
     1224    #bbpress-forums li.bbp-body li.bbp-topic-reply-count {
     1225        width: 20%;
     1226    }
     1227    #bbpress-forums li.bbp-header li.bbp-forum-freshness,
     1228    #bbpress-forums li.bbp-body li.bbp-forum-freshness,
     1229    #bbpress-forums li.bbp-header li.bbp-topic-freshness,
     1230    #bbpress-forums li.bbp-body li.bbp-topic-freshness {
     1231        width: 58%;
     1232    }
     1233   
     1234    #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
     1235    #bbpress-forums li.bbp-body li.bbp-forum-reply-count,
     1236    #bbpress-forums li.bbp-body li.bbp-forum-freshness,
     1237    #bbpress-forums li.bbp-body li.bbp-topic-voice-count,
     1238    #bbpress-forums li.bbp-body li.bbp-topic-reply-count,
     1239    #bbpress-forums li.bbp-body li.bbp-topic-freshness {
     1240        margin-top: 7px;
     1241    }   
     1242    #bbpress-forums li.bbp-header .bbp-reply-author {
     1243        text-align: right;
     1244        width: 20%;
     1245    }
     1246    #bbpress-forums li.bbp-header .bbp-reply-content{
     1247        margin-right: 22%;
     1248    }
     1249    #bbpress-forums div.bbp-template-notice img.avatar,
     1250    #bbpress-forums p.bbp-topic-meta img.avatar {
     1251        width: 14px;
     1252        height: auto;
     1253    }
     1254    #bbpress-forums fieldset.bbp-form {
     1255        padding: 10px 3px;
     1256        width: 95%;
     1257    }
     1258    #bbpress-forums div.bbp-the-content-wrapper td.mceToolbar {
     1259        padding: 1px;
     1260    }
     1261    #bbpress-forums div.bbp-the-content-wrapper td.mceToolbar td {
     1262        width: 20px;
     1263        height: 20px;
     1264    }
     1265    #bbpress-forums div.wp-editor-container {
     1266        width: 100%;
     1267        overflow: auto;
     1268    }
     1269    #bbpress-forums fieldset.bbp-form input,
     1270    input#bbp_topic_tags {
     1271        width: 95%;
     1272    }
     1273}
     1274
     1275/* =Styles for smaller device
     1276-------------------------------------------------------------- */
     1277@media only screen and (max-width: 240px) {
     1278    #bbpress-forums li.bbp-header li.bbp-forum-topic-count,
     1279    #bbpress-forums li.bbp-header li.bbp-forum-reply-count,
     1280    #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
     1281    #bbpress-forums li.bbp-body li.bbp-forum-reply-count,
     1282    #bbpress-forums li.bbp-header li.bbp-topic-voice-count,
     1283    #bbpress-forums li.bbp-header li.bbp-topic-reply-count,
     1284    #bbpress-forums li.bbp-body li.bbp-topic-voice-count,
     1285    #bbpress-forums li.bbp-body li.bbp-topic-reply-count,
     1286    #bbpress-forums li.bbp-footer .bbp-reply-content,
     1287    #bbpress-forums li.bbp-footer .bbp-reply-content {
     1288        width: 49%;
     1289    }
     1290    #bbpress-forums li.bbp-header li.bbp-forum-freshness,
     1291    #bbpress-forums li.bbp-body li.bbp-forum-freshness,
     1292    #bbpress-forums li.bbp-header li.bbp-topic-freshness,
     1293    #bbpress-forums li.bbp-body li.bbp-topic-freshness {
     1294        clear: both;
     1295        width: 100%;
     1296    }
     1297    #bbpress-forums li.bbp-header li.bbp-forum-freshness,
     1298    #bbpress-forums li.bbp-header li.bbp-topic-freshness { 
     1299        text-align: center;
     1300    }
     1301    #bbpress-forums li.bbp-header .bbp-reply-author {
     1302        text-align: right;
     1303        width: 100%;
     1304    }
     1305    #bbpress-forums li.bbp-header .bbp-reply-content {
     1306        clear: right;
     1307        margin-right: 0;
     1308    }
     1309    #bbpress-forums li.bbp-header {
     1310        overflow: hidden;
     1311    }
     1312    #bbpress-forums fieldset.bbp-form input,
     1313    input#bbp_topic_tags {
     1314        width: 90%;
     1315    }
     1316}
  • trunk/templates/default/css/bbpress.css

    r5007 r5013  
    200200    word-break: break-word;
    201201    display: inline-block;
     202}
     203
     204#bbpress-forums div.bbp-topic-author a.bbp-author-name,
     205#bbpress-forums div.bbp-reply-author a.bbp-author-name {
     206    clear: left;
     207    display: block;
    202208}
    203209
     
    518524#bbpress-forums .bbp-forum-info .bbp-forum-content,
    519525#bbpress-forums p.bbp-topic-meta {
     526    font-size: 11px;
    520527    margin: 5px 0 5px;
    521528    padding: 0;
    522     font-size: 11px;
     529    word-wrap: break-word;
    523530}
    524531
     
    968975#bbpress-forums div.bbp-template-notice img.avatar,
    969976#bbpress-forums .widget_display_topics img.avatar,
    970 #bbpress-forums .widget_display_replies img.avatar,
    971 #bbpress-forums p.bbp-topic-meta img.avatar {
     977#bbpress-forums .widget_display_replies img.avatar {
    972978    float: none;
    973979    margin-bottom: -7px;
     
    11091115    visibility: visible;
    11101116}
     1117
     1118/*--------------------------------------------------------------
     1119 Media Queries
     1120--------------------------------------------------------------*/
     1121
     1122/* =iPhone/Android landscape (and really narrow browser windows)
     1123-------------------------------------------------------------- */
     1124@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
     1125    -webkit-text-size-adjust: none;
     1126}
     1127@media only screen and (max-width: 480px) {
     1128    #bbpress-forums div.bbp-topic-tags {
     1129        clear: left;
     1130        float: left;
     1131    }
     1132    div.bbp-search-form input,
     1133    div.bbp-search-form button {
     1134        font-size: 11px;
     1135        padding: 2px;
     1136    }
     1137    li.bbp-forum-info,
     1138    li.bbp-topic-title {
     1139        width: 45%;
     1140    }
     1141    li.bbp-forum-topic-count,
     1142    li.bbp-forum-reply-count,
     1143    li.bbp-topic-voice-count,
     1144    li.bbp-topic-reply-count {
     1145        width: 15%;
     1146    }
     1147    span.bbp-reply-post-date {
     1148        float: left;
     1149    }
     1150    span.bbp-admin-links {
     1151        clear: left;
     1152        float: left;
     1153    }
     1154    #bbpress-forums .bbp-forums-list li {
     1155        display: block;
     1156        font-size: 11px;
     1157    }
     1158    #bbpress-forums div.bbp-reply-author a.bbp-author-name {
     1159        clear: none;
     1160        display: inline-block;
     1161    }
     1162    #bbpress-forums div.bbp-reply-author {
     1163        margin: 0 10px 10px;
     1164        text-align: left;
     1165        width: 100%;
     1166    }
     1167   
     1168    #bbpress-forums div.bbp-reply-author img.avatar {
     1169        margin-bottom: -5px;
     1170        width: 20px;
     1171        height: auto;
     1172    }
     1173    #bbpress-forums div.bbp-reply-author .bbp-author-role {
     1174        font-size: 12px;
     1175        font-style: normal;
     1176    }
     1177    #bbpress-forums div.bbp-reply-author div {
     1178        display: inline-block;
     1179        margin-right: 12px;
     1180    }
     1181    #bbpress-forums div.bbp-reply-content {
     1182        clear: both;
     1183        margin: 10px;
     1184        padding: 0;
     1185    }
     1186    #bbpress-forums div.bbp-reply-content p {
     1187        margin-bottom: 1em;
     1188    }
     1189    div.bbp-submit-wrapper {
     1190        float: left;
     1191    }
     1192    #bbpress-forums fieldset.bbp-form {
     1193        padding: 0 10px 10px;
     1194    }
     1195    #bbpress-forums #bbp-user-body {
     1196        clear: both;
     1197        margin-left: 0;
     1198        word-wrap: break-word;
     1199    }
     1200}
     1201
     1202/* =iPhone/Android portrait
     1203-------------------------------------------------------------- */
     1204@media only screen and (max-width: 320px) {
     1205    #bbpress-forums div.bbp-search-form {
     1206        margin-bottom: 10px;
     1207    }
     1208    #bbpress-forums li.bbp-header li.bbp-forum-info,
     1209    #bbpress-forums li.bbp-body li.bbp-forum-info,
     1210    #bbpress-forums li.bbp-header li.bbp-topic-title,
     1211    #bbpress-forums li.bbp-body li.bbp-topic-title {
     1212        width: 100%;
     1213    }
     1214    #bbpress-forums li.bbp-header li.bbp-forum-info,
     1215    #bbpress-forums li.bbp-header li.bbp-topic-title {
     1216        text-align: center;
     1217        text-transform: uppercase;
     1218    }
     1219    #bbpress-forums li.bbp-header li.bbp-forum-topic-count,
     1220    #bbpress-forums li.bbp-header li.bbp-forum-reply-count,
     1221    #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
     1222    #bbpress-forums li.bbp-body li.bbp-forum-reply-count,
     1223    #bbpress-forums li.bbp-header li.bbp-topic-voice-count,
     1224    #bbpress-forums li.bbp-header li.bbp-topic-reply-count,
     1225    #bbpress-forums li.bbp-body li.bbp-topic-voice-count,
     1226    #bbpress-forums li.bbp-body li.bbp-topic-reply-count {
     1227        width: 20%;
     1228    }
     1229    #bbpress-forums li.bbp-header li.bbp-forum-freshness,
     1230    #bbpress-forums li.bbp-body li.bbp-forum-freshness,
     1231    #bbpress-forums li.bbp-header li.bbp-topic-freshness,
     1232    #bbpress-forums li.bbp-body li.bbp-topic-freshness {
     1233        width: 58%;
     1234    }
     1235   
     1236    #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
     1237    #bbpress-forums li.bbp-body li.bbp-forum-reply-count,
     1238    #bbpress-forums li.bbp-body li.bbp-forum-freshness,
     1239    #bbpress-forums li.bbp-body li.bbp-topic-voice-count,
     1240    #bbpress-forums li.bbp-body li.bbp-topic-reply-count,
     1241    #bbpress-forums li.bbp-body li.bbp-topic-freshness {
     1242        margin-top: 7px;
     1243    }   
     1244    #bbpress-forums li.bbp-header .bbp-reply-author {
     1245        text-align: left;
     1246        width: 20%;
     1247    }
     1248    #bbpress-forums li.bbp-header .bbp-reply-content {
     1249        margin-left: 22%;
     1250    }
     1251    #bbpress-forums div.bbp-template-notice img.avatar,
     1252    #bbpress-forums p.bbp-topic-meta img.avatar {
     1253        width: 14px;
     1254        height: auto;
     1255    }
     1256    #bbpress-forums fieldset.bbp-form {
     1257        padding: 10px 3px;
     1258        width: 95%;
     1259    }
     1260    #bbpress-forums div.bbp-the-content-wrapper td.mceToolbar {
     1261        padding: 1px;
     1262    }
     1263    #bbpress-forums div.bbp-the-content-wrapper td.mceToolbar td {
     1264        width: 20px;
     1265        height: 20px;
     1266    }
     1267    #bbpress-forums div.wp-editor-container {
     1268        width: 100%;
     1269        overflow: auto;
     1270    }
     1271    #bbpress-forums fieldset.bbp-form input,
     1272    input#bbp_topic_tags {
     1273        width: 95%;
     1274    }
     1275}
     1276
     1277/* =Styles for smaller device
     1278-------------------------------------------------------------- */
     1279@media only screen and (max-width: 240px) {
     1280    #bbpress-forums li.bbp-header li.bbp-forum-topic-count,
     1281    #bbpress-forums li.bbp-header li.bbp-forum-reply-count,
     1282    #bbpress-forums li.bbp-body li.bbp-forum-topic-count,
     1283    #bbpress-forums li.bbp-body li.bbp-forum-reply-count,
     1284    #bbpress-forums li.bbp-header li.bbp-topic-voice-count,
     1285    #bbpress-forums li.bbp-header li.bbp-topic-reply-count,
     1286    #bbpress-forums li.bbp-body li.bbp-topic-voice-count,
     1287    #bbpress-forums li.bbp-body li.bbp-topic-reply-count,
     1288    #bbpress-forums li.bbp-footer .bbp-reply-content,
     1289    #bbpress-forums li.bbp-footer .bbp-reply-content {
     1290        width: 49%;
     1291    }
     1292    #bbpress-forums li.bbp-header li.bbp-forum-freshness,
     1293    #bbpress-forums li.bbp-body li.bbp-forum-freshness,
     1294    #bbpress-forums li.bbp-header li.bbp-topic-freshness,
     1295    #bbpress-forums li.bbp-body li.bbp-topic-freshness {
     1296        clear: both;
     1297        width: 100%;
     1298    }
     1299    #bbpress-forums li.bbp-header li.bbp-forum-freshness,
     1300    #bbpress-forums li.bbp-header li.bbp-topic-freshness { 
     1301        text-align: center;
     1302    }
     1303    #bbpress-forums li.bbp-header .bbp-reply-author {
     1304        text-align: left;
     1305        width: 100%;
     1306    }
     1307    #bbpress-forums li.bbp-header .bbp-reply-content {
     1308        clear: left;
     1309        margin-left: 0;
     1310    }
     1311    #bbpress-forums li.bbp-header {
     1312        overflow: hidden;
     1313    }
     1314    #bbpress-forums fieldset.bbp-form input,
     1315    input#bbp_topic_tags {
     1316        width: 90%;
     1317    }
     1318}
Note: See TracChangeset for help on using the changeset viewer.