Phenomlab Technology Forum

[deleted]

Veriael Seems fine on both mobile and PC for me. Can you send a screenshot ?

Veriael

[deleted] Here you go.
screenshot

[deleted]

Veriael Ahh - yes. I see what you mean now. Hold on.

Veriael

[deleted] Perfect.

[deleted]

Veriael Thanks

[deleted]

I've decided to make some significant layout changes to the forum, and the result is below

I'm using the fof/nightmode extension, but seeing as my wordpress site at https://phenomlab.com (Flarum is located at https://forum.phenomlab.com) is using dark mode by default, I've changed some of the code so that it is dark by default, and allows you to switch to light mode if you want... 🙂

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.

Why I am showcasing this ? It's not for my own benefit, but really to show off what can be done with Flarum with a bit of imagination, and patience. Flarum is simply the best forum software around - hands down - no contest. If you're not using it, then hopefully this showcase will be an inventive to start doing so !

peopleinside

[deleted] Congratulation, an amazing work 😉

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? 🙂

enricodx

[deleted] How can I put a little separator between primary and secondary tags in the nav?

[deleted]

peopleinside thanks

010101

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

[deleted]

010101 thanks

[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" 🙂

« Previous Page Next Page »