[Extensions] - Admin bar

User avatar
bayerberg
Sr. Bludit
Posts: 33
Joined: Wed Jun 07, 2017 1:05 pm

Fri Jun 16, 2017 6:34 pm

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;
        }
      }
    }
  }
}
i do things, check them out on behance | check out startups undiluted - london's startup ecosystem
User avatar
Edi
Site Admin
Posts: 1134
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Fri Jun 16, 2017 11:26 pm

Thank you! I will test it.
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
bayerberg
Sr. Bludit
Posts: 33
Joined: Wed Jun 07, 2017 1:05 pm

Wed Sep 13, 2017 6:35 pm

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

Poke me there for updates and tweaks
i do things, check them out on behance | check out startups undiluted - london's startup ecosystem
User avatar
Edi
Site Admin
Posts: 1134
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Wed Sep 13, 2017 6:44 pm

It's added to the repository. :-)

Thank you!
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
bayerberg
Sr. Bludit
Posts: 33
Joined: Wed Jun 07, 2017 1:05 pm

Wed Sep 13, 2017 6:54 pm

no problemo ;)

need to rename one folder /language instead of /languages... don't commit anything while leaving work :)
i do things, check them out on behance | check out startups undiluted - london's startup ecosystem
User avatar
jmonroe
Sr. Bludit
Posts: 35
Joined: Mon Feb 22, 2016 8:06 am
Location: USA
Contact:

Thu Sep 14, 2017 3:19 am

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.
User avatar
bayerberg
Sr. Bludit
Posts: 33
Joined: Wed Jun 07, 2017 1:05 pm

Thu Sep 14, 2017 2:56 pm

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.
i do things, check them out on behance | check out startups undiluted - london's startup ecosystem
Vanilla
Sr. Bludit
Posts: 31
Joined: Sun Jan 28, 2018 11:48 am

Sun Mar 18, 2018 10:34 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: 1134
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sun Mar 18, 2018 11:45 am

Where have you downloaded the plugin?

There is an updated version at

https://plugins.bludit.com
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
Vanilla
Sr. Bludit
Posts: 31
Joined: Sun Jan 28, 2018 11:48 am

Sun Mar 18, 2018 12:36 pm

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