[Extensions] - Admin bar

User avatar
bayerberg
Master Bludit
Posts: 139
Joined: Wed Jun 07, 2017 1:05 pm
Location: London, UK
Has thanked: 7 times
Been thanked: 10 times
Contact:

Needed a quick way to add posts and pages, thought it would be nice to have those options available all the time (for admins at least) so created this:

Admin Bar v0.9

This should be independent of your theme so if you use it it shouldn't either affect how your page looks and behaves. To be sure of that I've included custom styles. Those styles are loaded only when admin is logged in, that way there is no unnecessary clutter under the hood. One thing though - css uses rem instead of pixels. your theme needs to support rems to display everything correctly.

Yes, its sticky, currently stuck to the bottom of the page.

Yes, it's responsive.

How to use it
  • - Copy the code below
    - Paste it under the <body>
to do
  • - tidy up scss
    - clean up php
    - add more options like edit current page/post

Code: Select all

<?php if($Login->role()=='admin') { ?>
<style>
#admin-strip {
  background: #1e1e20;
  color: #65656d;
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
#admin-strip ul {
  margin: 0.5rem;
  padding: 0;
  overflow: hidden;
}
#admin-strip ul li {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}
#admin-strip .float-me-to-the-right {
  float: right;
}
#admin-strip .you-gotta-spot-this {
  color: #808687;
}
#admin-strip .you-gotta-spot-this strong {
  color: #8e9596;
}
#admin-strip a {
  display: block;
  vertical-align: middle;
}
#admin-strip a:link, #admin-strip a:visited {
  color: #7e7e90;
}
#admin-strip a:hover, #admin-strip a:active {
  color: #ff8c00;
}
#admin-strip .action-buttons {
  font-size: 1.6rem;
}
#admin-strip .admin-new-post, #admin-strip .admin-new-page {
  background: #3d3d42;
  color: #fff !important;
  padding: 0.3rem;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  margin: 0 0.5rem;
  padding: 0.3rem 1rem;
}
#admin-strip .admin-new-post:hover, #admin-strip .admin-new-page:hover {
  background: #a7c520;
  color: #1e1e20 !important;
  text-decoration: none;
}
#admin-strip .admin-page-logout {
  background: #ff2d00;
  color: #fff !important;
  padding: 0.3rem;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 0 0.5rem;
  padding: 0.3rem 2rem;
}
#admin-strip .admin-page-logout:hover {
  background: #a7c520;
  color: #1e1e20 !important;
  text-decoration: none;
}
#admin-strip .info-list {
  font-size: 1.3rem;
  line-height: 1.6rem;
}
@media (max-width: 768px) {
  #admin-strip .float-me-to-the-right {
    float: none;
  }
  #admin-strip .info-list {
    display: none;
  }
  #admin-strip .action-buttons {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }
  #admin-strip .action-buttons li {
    display: block;
  }
  #admin-strip .action-buttons li a {
    display: block;
    margin: 0.5rem 0;
    padding: 1rem;
  }
}

</style>
<div id="admin-strip">
  <ul class="action-buttons">
    <li class="you-gotta-spot-this"><?php echo $Site->title() ?> administration:</li>
    <li><a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-post' ?>" class="admin-new-post"><?php $L->p('New post') ?></a></li>
    <li><a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-page' ?>" class="admin-new-page"><?php $L->p('New page') ?></a></li>
    <li><a href="<?php echo HTML_PATH_ADMIN_ROOT ?>" class="admin-panel"> <?php $L->p('Admin panel') ?></a></li>
    <li class="float-me-to-the-right"><a href="<?php echo HTML_PATH_ADMIN_ROOT.'/logout' ?>" class="admin-page-logout"><?php $L->p('Logout') ?></a></li>
  </ul>
  <ul class="info-list">
    <li class="you-gotta-spot-this"><?php $L->p('Logged in as') ?> <strong><?php echo $Login->username() ?></strong> </li>
    <li>Locale <strong><?php echo $Site->locale(); ?></strong></li>
    <li>Timezone <strong><?php echo $Site->timezone();?></strong></li>
    <li>Theme <strong><?php echo $theme = $Site->theme(); ?></strong></li>
    <li>Build <strong><?php echo $Site->currentBuild();?></strong></li>
  </ul>
</div>
<?php } ?>

optional - if you want scss use this in your _app.scss and chuck out <style> from the code above

Code: Select all

#admin-strip {
  background: #1e1e20;
  color: #65656d;
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  z-index: 999;
  ul {
    margin: 0.5rem;
    padding: 0;
    overflow: hidden;
    li {
      display: inline-block;
      list-style: none;
      margin: 0;
      padding: 0
    }
  }
  .float-me-to-the-right {
    float: right;
  }
  .you-gotta-spot-this {
    color: #808687;
    strong {
      color: #8e9596;
    }
  }
  a {
    display: block;
    vertical-align: middle;
    &:link, &:visited {
      color: #7e7e90;
    }
    &:hover, &:active {
      color: #ff8c00;
    }
  }
  .action-buttons {
    font-size: 1.6rem;
  }
  .admin-new-post, .admin-new-page {
    background: #3d3d42;
    color: #fff!important;
    padding: 0.3rem;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin: 0 0.5rem;
    padding: 0.3rem 1rem;
    &:hover {
      background: #a7c520;
      color: #1e1e20!important;
      text-decoration: none;
    }
  }
  .admin-page-logout {
    background: #ff2d00;
    color: #fff!important;
    padding: 0.3rem;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin: 0 0.5rem;
    padding: 0.3rem 2rem;
    &:hover {
      background: #a7c520;
      color: #1e1e20!important;
      text-decoration: none;
    }
  }
  .info-list {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
  @media (max-width: 768px) {
    .float-me-to-the-right {
      float: none;
    }
    .info-list {
      display: none;
    }
    .action-buttons {
      font-size: 1.2rem;
      line-height: 1.2rem;
      li {
        display: block;
        a {
          display: block;
          margin: 0.5rem 0;
          padding: 1rem;
        }
      }
    }
  }
}
bludit plugins and themes - makeitblu | I do things, check them out on behance and dribbble.
User avatar
Edi
Site Admin
Posts: 3120
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Thank you! I will test it.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
bayerberg
Master Bludit
Posts: 139
Joined: Wed Jun 07, 2017 1:05 pm
Location: London, UK
Has thanked: 7 times
Been thanked: 10 times
Contact:

made it into a plugin! https://github.com/Bayerberg/bludit-admin-bar

Poke me there for updates and tweaks
bludit plugins and themes - makeitblu | I do things, check them out on behance and dribbble.
User avatar
Edi
Site Admin
Posts: 3120
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

It's added to the repository. :-)

Thank you!
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
bayerberg
Master Bludit
Posts: 139
Joined: Wed Jun 07, 2017 1:05 pm
Location: London, UK
Has thanked: 7 times
Been thanked: 10 times
Contact:

no problemo ;)

need to rename one folder /language instead of /languages... don't commit anything while leaving work :)
bludit plugins and themes - makeitblu | I do things, check them out on behance and dribbble.
User avatar
jmonroe
Sr. Bludit
Posts: 38
Joined: Mon Feb 22, 2016 8:06 am
Location: USA
Contact:

I like the idea and would love to see even more functionality added to the admin bar. I personally would like to see it styled much smaller than currently. The bar is pretty big and takes up a bit of space on the screen. Height and button size maybe can be adjusted a bit. Great work though as it is definitely a great addition to have.
Jeremy Monroe
I Support Bludit via Patreon
User avatar
bayerberg
Master Bludit
Posts: 139
Joined: Wed Jun 07, 2017 1:05 pm
Location: London, UK
Has thanked: 7 times
Been thanked: 10 times
Contact:

yep, I'm working on that. I'll provide couple of options as well - possibility of adding your own styling via the plugin page would be the coolest one especially when i have scss anyone can use to style the bar as they wish.
bludit plugins and themes - makeitblu | I do things, check them out on behance and dribbble.
Stephan
Master Bludit
Posts: 61
Joined: Sun Jan 28, 2018 11:48 am

Got error 'PHP message: PHP Warning: file_get_contents(/var/www/vhosts/.../bl-plugins/bludit-admin-bar-1.0/languages/en.json): failed to open stream: Datei oder Verzeichnis nicht gefunden in /var/www/vhosts/.../bludit-pro/bl-kernel/boot/rules/60.plugins.php on line 80\n', referer: http://.../admin/dashboard

??
User avatar
Edi
Site Admin
Posts: 3120
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

Where have you downloaded the plugin?

There is an updated version at

https://plugins.bludit.com
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
Stephan
Master Bludit
Posts: 61
Joined: Sun Jan 28, 2018 11:48 am

I downloaded it at https://plugins.bludit.com
Post Reply