From be71dbfd940f7bce6b7cb0d3514bed1e0dd5cd01 Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Tue, 17 Sep 2013 16:07:02 -0400 Subject: [PATCH] Topic list styling for mobile --- .../discourse/templates/list.js.handlebars | 2 +- .../mobile/list/topic_list_item.js.handlebars | 42 ++++++++++++ .../mobile/list/topics.js.handlebars | 65 +++++++++++++++++++ app/assets/stylesheets/mobile/faqs.css.scss | 2 +- .../stylesheets/mobile/topic-list.css.scss | 52 ++++++--------- 5 files changed, 130 insertions(+), 33 deletions(-) create mode 100644 app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars create mode 100644 app/assets/javascripts/discourse/templates/mobile/list/topics.js.handlebars diff --git a/app/assets/javascripts/discourse/templates/list.js.handlebars b/app/assets/javascripts/discourse/templates/list.js.handlebars index 93a0534468a..42f90830e59 100644 --- a/app/assets/javascripts/discourse/templates/list.js.handlebars +++ b/app/assets/javascripts/discourse/templates/list.js.handlebars @@ -19,7 +19,7 @@ -
+
diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars new file mode 100644 index 00000000000..9cb0d48dc62 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars @@ -0,0 +1,42 @@ + + + {{#if controller.rankDetailsVisible}} +
+

{{rank_details.hot_topic_type}}

+

+ ({{float rank_details.random_bias}} * {{float rank_details.random_multiplier}}) + ({{float rank_details.days_ago_bias}} * {{float rank_details.days_ago_multiplier}}) = {{float rank_details.ranking_score}} + +

+
+ {{/if}} + + {{topicStatus topic=this}} + {{{topicLink this}}} + {{#if unread}} + {{unread}} + {{/if}} + {{#if displayNewPosts}} + {{displayNewPosts}} + {{/if}} + {{#if unseen}} + + {{/if}} + + {{#if hasExcerpt}} +
+ {{excerpt}} + {{#if excerptTruncated}} + {{#unless canClearPin}}{{i18n read_more}}{{/unless}} + {{/if}} + {{#if canClearPin}} + {{i18n topic.clear_pin.title}} + {{/if}} +
+ {{/if}} + + + + {{categoryLink category}} + + +{{number posts_count numberKey="posts_long"}} diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topics.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/list/topics.js.handlebars new file mode 100644 index 00000000000..87d5e1bf21d --- /dev/null +++ b/app/assets/javascripts/discourse/templates/mobile/list/topics.js.handlebars @@ -0,0 +1,65 @@ +{{#unless loading}} + {{#if loaded}} +
+ {{#if view.showTable}} + + {{#if canViewRankDetails}} + + {{/if}} + + + + + + + + + + + {{#if view.topicTrackingState.hasIncoming}} + + + + + + {{/if}} + + {{collection contentBinding="topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}} + +
+ {{i18n topic.title}} + {{i18n category_title}}{{i18n posts}}
+
+ {{countI18n new_topics_inserted countBinding="view.topicTrackingState.incomingCount"}} + {{i18n show_new_topics}} +
+
+ {{/if}} +
+ +
+ +
+ + {{/if}} +{{/unless}} diff --git a/app/assets/stylesheets/mobile/faqs.css.scss b/app/assets/stylesheets/mobile/faqs.css.scss index aa6762a99b7..2d03411239a 100644 --- a/app/assets/stylesheets/mobile/faqs.css.scss +++ b/app/assets/stylesheets/mobile/faqs.css.scss @@ -56,6 +56,6 @@ } .nav-pills { - margin-left:0px !important; + // margin-left:0px !important; this style affects everything, and it has !important! yuck. font: 13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif; } \ No newline at end of file diff --git a/app/assets/stylesheets/mobile/topic-list.css.scss b/app/assets/stylesheets/mobile/topic-list.css.scss index 084f6bbc669..406b99e37bd 100644 --- a/app/assets/stylesheets/mobile/topic-list.css.scss +++ b/app/assets/stylesheets/mobile/topic-list.css.scss @@ -9,9 +9,13 @@ // -------------------------------------------------- #list-controls { + margin: 5px; .nav { float: left; - margin-bottom: 15px; + margin-right: 15px; + li { + margin-top: 5px; + } } .btn { float: right; @@ -32,6 +36,10 @@ } } +.list-container .full-width { + margin-left: 0; +} + // Base list // -------------------------------------------------- @@ -39,7 +47,8 @@ width: 100%; border-collapse: separate; border-spacing: 0; - border: 1px solid #ddd; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; tbody tr { background-color: $white; @@ -49,10 +58,6 @@ &.archived a { opacity: 0.6; } - &.has-excerpt .star { - vertical-align: top; - margin-top: 2px; - } &.category-description { td { color: $nav-pills-border-color-active; @@ -69,10 +74,10 @@ text-align: left; vertical-align: middle; &:first-of-type { - padding-left: 10px; + padding-left: 5px; } &:last-of-type { - padding-right: 10px; + padding-right: 5px; } } th { @@ -91,19 +96,8 @@ color: $topic-list-td-color; font-size: 14px; } - .star { - width: 20px; - padding-right: 0; - .icon-star { - position: relative; - top: 1px; - } - + .main-link { - padding-left: 0; - } - } .main-link { - width: 495px; + // width: 495px; font-size: 16px; i.score { @@ -130,16 +124,6 @@ } } - @include medium-width { - .main-link { - width: 380px; - } - } - @include small-width { - .main-link { - width: 335px; - } - } .topic-statuses:empty { display: none; } @@ -155,7 +139,13 @@ top: -1px; } .category { - width: 140px; + // width: 100px; + } + .has-excerpt { + td.category, td.posts { + vertical-align: top; + padding-top: 8px; + } } .posters { width: 150px;