Fakebook Theme

Hello Jordan,

Has got errors when a new user register. The right sidebar not shown any information except welcome text and subhead but without name. So i know it shows the likes if there are some and badges too. Is that possible to make this sidebar to show likes and badges fix? I mean 0 :heart: recieved , 0 :heart: given and no badges. You don’t have any badges yet… Check out how you get some… or something like this. So text or link if no badges yet.

Thank you! :slight_smile:

The error code is for badges:

I would like to modify it as below.
However, it does not work on the mobile screen.
Can someone please help me on what to do.

I would like to make the link work for the topic excerpt and image.

{{~raw-plugin-outlet name="topic-list-after-title"}}
{{#unless topic.image_url}}
  {{#if topic.hasExcerpt}}
    <a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
      <div class="topic-excerpt-box">
        {{raw "list/topic-excerpt" topic=topic}}
      </div>
    </a>
  {{/if}}
{{/unless}}
{{#if topic.image_url}}
<a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
<div class="topic-image">
  <img src="{{topic.image_url}}" />
</div>
</a>
{{/if}}

This is the site I am testing.

Use this in mobile header :point_down:
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'> . . . </script>

iPhone 6S

I am testing this on Xcode simulator with iphone 6S and am not encountering this issue.

I have a couple questions:

Is this screenshot of you using meta.discourse.org ?
Which version of iOS are you using?
Which web browser?

Thanks

1 Like

Does anyone try to play short video upload direct to discourse with Facebook theme on iOS phone?

Should I have missed something on config, but I can not play any uploaded video on phone. It’s working well on computer.

Any embedded video from Youtube working.

That why I do not know what happened, no errors, no warning.
So please advice

Yes, it is work perfect for me on any device. I think a theme is hard to cause this issue.
Did you try to play in safe mode?
Can you post the topic where the video so can check it.

Hi @Don
Yes, you should try at below link:
[Sưu tầm] Chuyên mục cười À ra Thế ! của Dr. VL - À ra Thế

Just tested and make sure that can not run on my iOS 11,

1 Like

iOS 11 is pretty outdated that cause the problem. I can play the video without any problem on iOS 14 and it works great.

4 Likes

@Don Noted,

Thank you

1 Like

This is fantastic!

Also… is it possible to add a link to the sidebar intro area?

where’s the link to add the theme?

https://github.com/discourse/fakebook-modern.git

4 Likes

Hey I am learning discourse theme / plugin development. I really like Fakebook theme and I am using it to develop my understanding but I have a few questions.

The “javascripts/discourse/templates/mobile/list/topic-list-item.hbr” has 100% subset duplicate code from the “common/header.html”

My questions:

  1. Isn’t there a way to include a bhr file into html file so that we can just include topic-list-item.hbr into the common/header.html file instead of duplicating the code in two places?
  2. Why do we need topic-list-item.hbr in the first place? Shouldn’t the files in common folder apply to both: desktop and mobile?
1 Like

I don’t believe so… normally I could make a component that uses one template, and then I could include for the component in both overrides… but our topic list items are a special type of template built for performance (hbr = handlebars raw template), and raw templates can’t use components. (Some previous discussion in Mounting widget in raw template? - #7 by angus)

That’s how Discourse’s CSS is structured (and some special HTML files for themes like header/footer/etc), but within the javascripts/discourse/templates directory those templates are direct overrides of Discourse defaults (when there’s not an override, the default templates are used).

In Discourse there are two templates: /templates/list/topic-list-item.hbr and /templates/mobile/list/topic-list-item.hbr. So since there are two templates, we need two overrides.

Maybe there’s an easy way to point mobile to the non-mobile template in the JS… but if there is I’m not aware of it!

1 Like

Spoke too soon! I took a look and actually figured this out soon after I posted the above response. Sometimes writing things out can do that.

I’ve made an update so it’s just one template… by default in topic-list-item.js we have some code that looks like:

  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

so if I override const template in the theme…

  renderTopicListItem() {
    const template = findRawTemplate("list/custom-topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

This now points to a separate template, and since there’s no mobile counterpart by the same name… it also gets used for mobile. Thanks for inspiring the change with your question @hyd504!

4 Likes

That’s really nice! :blush: I just changed on my site with Fakebook Modern theme :slightly_smiling_face: Thank you so much! :heart:

@awesomerobot @Don

can you guys share links to some sample forums where I can see this theme in action?

Hello,

Sure, you can see the Fakebook theme in theme creator:

Mine contains relatively much modification but you can see it here:

1 Like

Thanks @Don .

Just to double check the Preview points to https://github.com/discourse/fakebook-modern theme?