CMS LEFT PANEL > Settings

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.js"></script>
<div class="pb-sidebar  pb-sidebar-medium">

  <div class="pb-sidebar-content">

    <div class="pb-sidebar-header uk-margin-large-top uk-grid-small" data-uk-grid="">
      <div class="uk-width-expand">
        <a class="uk-button uk-button-small uk-flex uk-flex-middle pb-sidebar-back-button" href="#/"><span data-uk-icon="icon: chevron-left" class="uk-icon"></span>Back</a>
      </div>
      <div class="uk-width-auto uk-flex uk-flex-middle  uk-margin-small-right">
        <a class="uk-button uk-button-text uk-margin-small-right" href="#/">Save</a><a class="uk-button uk-button-text uk-margin-small-right" href="#/">Cancel</a>
      </div>
    </div>
    
    <div class="pb-sidebar-header uk-margin-large-top uk-grid-small" data-uk-grid="">
      <div class="uk-width-expand">
        <h3 class="uk-margin-remove-bottom">301 redirects</h3>
      </div>
    </div>

    <div class="pb-padding">

      <h4 class="uk-margin-remove-bottom">URL mapping</h4>
      <div class="uk-text-small uk-text-muted uk-margin-bottom">Les redirections vous permettent de changer l’adresse des URLs de votre site. Entrée une redirection par ligne au format</div>
      <textarea type="text" class="uk-textarea pb-codemirror" maxlength="300" rows="4"></textarea>       

      <div class="uk-text-small uk-text-right uk-text-muted uk-margin-bottom">url originale => nouvelle url. Par ex. index.html => / ou /contact.html => /contactez-nous</div>      

     

    </div>





</div>
<div class="pb-sidebar-device-tools">
  <ul class="uk-iconnav uk-nav-default uk-flex-center uk-flex-middle">
    <li>
      <a class="pb-preview-smartphone" href="#" data-uk-icon="icon: phone"></a>
    </li>
    <li>
  ...

CSS

html {
  background: #444;
  overflow: hidden;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3 {
  text-transform: uppercase;
  font-size: 1rem;
}

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}

.pb-sidebar-content h3,
.pb-sidebar-content > :not(.pb-sidebar-home)  li a {
  padding-left: 20px
}

.pb-sidebar {
  background: #eee;
  box-sizing: border-box;
  display: block;
  position: fixed;
  min-width: 300px;
  max-width: 600px;
  width: 300px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.pb-sidebar-medium {
    width: 450px;
}

.pb-sidebar-content {
  box-sizing: border-box;
  position: absolute;
  top: 45px;
  right: 0;
  bottom: 45px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.pb-sidebar-home {
  box-sizing: border-box;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.pb-reseller-logo {
  height: 50px;
  margin: 140px 0 80px 0;
}

.pb-sidebar-content li:hover {
  background-color: #e5e5e5;
  pointer: cursor;
}

.pb-account-avatar {
  width: 50px;
  height: 50px;
}

.pb-sidebar-device-tools {
  box-sizing: border-box;
  position: absolute;
  min-width: 300px;
  max-width: 600px;
  height: 60px;
  right: 0;
  //bottom: 45px;
  bottom: 0;
  left: 0;
  background: #eee;
  margin: 0;
  padding: 15px;
}

.pb-sidebar-back-button .test {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.pb-sidebar-back-button:hover .test {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}

.pb-padding {
    padding: 35px;
    box-sizing: border-box;
}

JavaScript

$(".pb-open-website-settings-modal").click(function() {
  console.log('open https://github.com/iPaoo/react-cms/projects/4#card-4171773');
})