Phenomlab Technology Forum

010101

Very nice! It looks like a lot of work went into it. The WordPress theme blends nicely with the Flarum side. Kudos!

[deleted]

panteLx

[deleted] You'll see a lot of posts from "nucleus" (still undecided on the name - it may simply become "system" or "forum-bot"). These are all created using the Flarum API - essentially, I have a news feed delivered in email, and a script I wrote that parses the data, and creates a post out of it.

Can you publish your code? 🙂 to fetch and input the rss feed? 🙂

[deleted]

panteLx not sure I understand what you mean. The RSS feed and my script are two different things. My script parses email and makes a post out of each message using the subject field as the title, and the message body as the body of the post.

panteLx

[deleted] oh okay :=) got it working that my script parses the RSS feed of another forum and post a new conversation with the latest post on the other forum :3

theportablegeek

[deleted] I've now started to integrate the Flarum API for bot posting (look on the site for "newsbot" as a user).

Is this actually a bot? Are you potentially willing to share the codebase?

[deleted]

theportablegeek yes, it is. It's not an account that's associated with a human, and takes an email feed and makes posts out of it. The script runs once per hour.

Muhammed

Can you share me mobile bottom navigation css ?

[deleted]

Muhammed Here you go

@media(max-width: 500px) { .mobile-app-icon-bar{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #fefefe;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 46px;
  z-index: 2;
  background: #666666!important;
} 
}

.buttonstyle.active{
 color: #002998 !important;
}
.buttonstyle i {
    font-size: 20px;
}

.buttonstyle{
width:20%;
display: flex;
flex-direction: column;
align-items: center;
background: #666666 !important;
border: none;
margin-top: 4px;
}

.spanstyle{
font-size: 10px;
    margin-top: 5px;
}

.mobile-app-icon-bar button {
  padding: 0.75rem !important;
  cursor: pointer;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {

}


@media(min-width: 800px) { .mobile-app-icon-bar{ 
  display:none !important;
} 
}

[deleted]

And you'll need this in the custom footer. Note, that for this to work, you'll need the Direct Links Extension installed and activted

<div class="mobile-app-icon-bar" id="myDIV">
  <button onclick="location.href='https://your-forum-url'" class="buttonstyle"><i class="fa fa-home"></i>

  <button  onclick="location.href='https://your-forum-url/?sort=newest'" class="buttonstyle"><i class="fas fa-hourglass"></i>
  <button onclick="location.href='https://your-forum-url/composer'" class="buttonstyle"><i class="fas fa-edit"></i>
  <button  onclick="location.href='https://your-forum-url/tags'" class="buttonstyle"><i class="fas fa-tags"></i>
<button  onclick="location.href='https://your-forum-url/notifications'" class="buttonstyle"><i class="fas fa-bell"></i>
</div>

[deleted]

Ok. Made a small change to the layout. I was never really comfortable with the footer and icon bar for mobile view, so.... I changed it.

Here's the result

CSS


body.dark #console-nav-footer {
    background-color: #666666;
}
a.feedback-menu-left,
a.feedback-menu-right{
    color: #ffffff !important;
    font-weight: 600;
}
#floatcentre {
    display:none;
}
@media only screen and (max-width: 600px) {
#console-nav-footer {
    padding: 0 20px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    background-color: #f5f5f5;
    position: fixed;
    width: 100%;
    bottom: 0;
}
body.dark #console-nav-footer {
    background-color: #666666;
}
#floatleft, #floatright {
    display: none;
}
#floatcentre {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 450px;
	display: contents;
}
body.dark #floatcentre i {
    margin-left: 25px;
    margin-right: 25px;
	font-size: 18px;
	color: #ffffff;
}
div#floatcentre i {
    margin-left: 25px;
    margin-right: 25px;
	font-size: 18px;
	color: #808080;
}
}

Footer code


<div id='console-nav-footer'>
<div id='footer-content'>
<div id='floatleft'>
        <i class='fal fa-comment'></i><a class='feedback-menu-left' target='_blank' href='https://phenomlab.com/feedback'>Feedback</a>
</div>
<div id='floatcentre'>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com'><i class="fal fa-home"></i></a>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/?sort=newest'><i class="fal fa-hourglass"></i></a>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/composer'><i class="fal fa-edit"></i></a>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/tags'><i class="fal fa-tags"></i><a/>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/notifications'><i class="fal fa-bell"></i><a>
</div>
<div id='floatright'>
        <a class='feedback-menu-right' target='_blank' href='https://forum.phenomlab.com/p/1-guidelines'>Terms</a>
        <a class='feedback-menu-right' target='_blank' href='https://phenomlab.com/policies/'>Privacy</a>
</div>
</div>
</div>

See examples of how this works over on the site (https://forum.phenomlab.com) - in standard view, you'll see that nothing really has changed - until you enable mobile view, or view from a mobile device.

PC view

Mobile view

Enjoy - feel free to "steal" 🙂

SV7

Hi phenom. Your site is excellent.

I love the bottom-bar for @media:

A question: Is it possible to display the 'unread-messages count' for the bottom-bar notification-bell image - so that if a user has new notifications, it will show on the icon? (the way it appears on desktop)

This seems to be the relevent block in the flarum code (I'm kind of a noob):

<button class="Dropdown-toggle Button Button--flat" data-toggle="dropdown" title="Notifications">
   <i class="icon fas fa-bell Button-icon"></i>
       <span class="NotificationsDropdown-unread">1</span>
       <span class="Button-label">Notifications</span>
</button>

That line <span class="NotificationsDropdown-unread">1</span> seems to be what's calling for unread messages and displaying a count over the bell.

Could that class (NotificationsDropdown-unread) be called for this?

Truly, thank you very much for sharing your work.
I've learned a lot from your modifications.

[deleted]

SV7 A question: Is it possible to display the 'unread-messages count' for the bottom-bar notification-bell image - so that if a user has new notifications, it will show on the icon? (the way it appears on desktop)

Without an extension, not natively although it could be possible to replicate the bell and replace the notification icon in the bottom-bar notification. Hmm - you've got my curiosity now ! I'll have a look at this.

[deleted]

My Dev site contains many enhancements that I'll be pushing into production hopefully this weekend. The major update being full integration with WordPress courtesy of @clarkwinkelmann in terms of his extension. The site is going to offer much more than just forums - mentoring, education, training, consultancy... The list is endless. The core of all this is still (and always will be) flarum.

meetdilip

Good luck 👍️

meetdilip

Joined Phenomlab.com

Hope to see more interesting news there.

meetdilip

Unable to post, upvote or use reaction. Tried multiple times now.

[deleted]

meetdilip can you provide screenshots ? I think you haven't activated the account yet. The forum uses WordPress for its authentication and unless you activate the account, your won't be able to use the forum properly.

Thanks

meetdilip

I will try again today and let you know. I tried to different thing for some time before giving up.

[deleted]

meetdilip Odd. I'd need to know the user ID you subscribed with to check at my end.

« Previous Page Next Page »