dragan 611 Posted January 2 (edited) OK, I think I'm really confused right now. For some reason I was working with the default classic or Reno admin theme. h1 isn't used (or shown) there. With the latest UIKit admin theme, everything's OK. Edited January 3 by dragan clarify "classic" vs. "default" theme... 1 Share this post Link to post Share on other sites
mr-fan 857 Posted January 3 Bernhard i wrote it and i repeat it you are really my hero - the admin/backend was always a ? to me since i was flashed about all the options on the frontendside with the API, creating some little modules or changing some or using small hooks to get some results are the level i was before i read your tutorials and examples...:) Wanna share a really cool example im playing with this responsive calendar plugin: https://tympanus.net/Development/Calendario/ in an easy process module i get some results like this (with some CSS tweaks): Spoiler This is with the example data from but it works like a charm and is seemless responsive within the PW admin. Code i used on the PW side is really easy: Spoiler public function ___execute() { $out = ''; //load css and js files $this->config->styles->add($this->config->urls->siteModules . $this->className() . '/calendario/calendar.css'); $this->config->styles->add($this->config->urls->siteModules . $this->className() . '/calendario/custom_1.css'); $this->config->scripts->add($this->config->urls->siteModules . $this->className() . '/calendario/jquery.calendario.js'); $this->config->scripts->add($this->config->urls->siteModules . $this->className() . '/calendario/data.js'); $this->config->scripts->add($this->config->urls->siteModules . $this->className() . '/calendario/script.js'); //container for the calendar $out = '<div class="container uk-card-default"><div class="custom-calendar-wrap custom-calendar-full">'; //render navigation buttons $out .= '<div class="custom-header clearfix"> <h2> <span id="custom-month" class="custom-month"></span> <span id="custom-year" class="custom-year"></span> </h2> <nav> <span id="custom-prev" class="custom-prev"></span> <span id="custom-next" class="custom-next"></span> <span id="custom-current" class="custom-current" title="Got to current date"></span> </nav> </div>'; //render calender $out .= '<div id="calendar" class="fc-calendar-container"></div>'; //end container $out .= '</div></div>'; $out .= '<hr class="uk-divider-icon">'; return $out; } now i'm getting hands dirty on trigger some booking data and some actionbuttons... Thank you for sharing your knowlegde! I wish you a healthy and successfull year - best regards mr-fan 6 1 Share this post Link to post Share on other sites
horst 4,227 Posted February 2 On 3.1.2018 at 11:59 PM, mr-fan said: in an easy process module i get some results like this (with some CSS tweaks): Hi @mr-fan, thanks for sharing this calendario demo. Would you mind to post the css tweaks you show in the example? 2 Share this post Link to post Share on other sites
mr-fan 857 Posted February 3 (edited) nothing fancy i just drop the extrem use of shadows and converted colors....so it fits a little bit normal in the PW: calendar.css Spoiler .fc-calendar-container { position: relative; height: 400px; width: 400px; } .fc-calendar { width: 100%; height: 100%; } .fc-calendar .fc-head { height: 30px; line-height: 30px; background: #ccc; color: #fff; } .fc-calendar .fc-body { position: relative; width: 100%; height: 100%; height: -moz-calc(100% - 30px); height: -webkit-calc(100% - 30px); height: calc(100% - 30px); border: 1px solid #ddd; } .fc-calendar .fc-row { width: 100%; border-bottom: 1px solid #ddd; } .fc-four-rows .fc-row { height: 25%; } .fc-five-rows .fc-row { height: 20%; } .fc-six-rows .fc-row { height: 16.66%; height: -moz-calc(100%/6); height: -webkit-calc(100%/6); height: calc(100%/6); } .fc-calendar .fc-row > div, .fc-calendar .fc-head > div { float: left; height: 100%; width: 14.28%; /* 100% / 7 */ width: -moz-calc(100%/7); width: -webkit-calc(100%/7); width: calc(100%/7); position: relative; } /* IE 9 is rounding up the calc it seems */ .ie9 .fc-calendar .fc-row > div, .ie9 .fc-calendar .fc-head > div { width: 14.2%; } .fc-calendar .fc-row > div { border-right: 1px solid #ddd; padding: 4px; overflow: hidden; position: relative; } .fc-calendar .fc-head > div { text-align: center; } .fc-calendar .fc-row > div > span.fc-date { position: absolute; width: 30px; height: 20px; font-size: 20px; line-height: 20px; font-weight: 700; color: #ddd; text-shadow: 0 -1px 0 rgba(255,255,255,0.8); bottom: 5px; right: 5px; text-align: right; } .fc-calendar .fc-row > div > span.fc-weekday { padding-left: 5px; display: none; } .fc-calendar .fc-row > div.fc-today { background: #fff4c3; } .fc-calendar .fc-row > div.fc-out { opacity: 0.6; } .fc-calendar .fc-row > div:last-child, .fc-calendar .fc-head > div:last-child { border-right: none; } .fc-calendar .fc-row:last-child { border-bottom: none; } custom_1.css Spoiler /*dirty hack since i don't figure out why this responsive calendar overwrap the footer...#todo #pw-footer {display:none!important;} .container { width: 100%; height: 600px; position: relative; } .container > header, .main { padding: 0 30px 50px 30px; width: 100%; max-width: 600px; margin: 0 auto; } .container > header { padding: 30px; } .container > header h1 { font-size: 34px; line-height: 38px; margin: 0; font-weight: 700; color: #fff; float: left; /* text-shadow: 0 1px 1px rgba(0,0,0,0.3);*/ } .container > header h1 span { font-size: 18px; font-weight: 300; display: block; } /* Demo Buttons Style */ .codrops-demos { float: right; } .codrops-demos a { display: inline-block; margin: 10px; color: #fff; font-weight: 700; line-height: 30px; border-bottom: 4px solid transparent; } .codrops-demos a:hover { color: #000; border-color: #000; } .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.5); } .custom-calendar-full { position: absolute; top: 24px; bottom: 0px; left: 0px; width: 100%; height: auto; } .fc-calendar-container { height: auto; bottom: 0px; width: 100%; top: 50px; position: absolute; } .custom-header { padding: 20px 20px 10px 30px; height: 50px; position: relative; } .custom-header h2, .custom-header h3 { float: left; font-weight: 300; text-transform: uppercase; letter-spacing: 4px; /* text-shadow: 1px 1px 0 rgba(0,0,0,0.1);*/ } .custom-header h2 { color: rgba(0,0,0,0.9); width: 60%; } .custom-header nav { position: absolute; right: 20px; top: 20px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-header nav span { float: left; width: 30px; height: 30px; position: relative; color: transparent; cursor: pointer; background: rgba(0,0,0,0.3); margin: 0 1px; font-size: 20px; /*border-radius: 0 3px 3px 0;*/ /* box-shadow: inset 0 1px rgba(0,0,0,0.2);*/ } /*.custom-header nav span:first-child { border-radius: 3px 0 0 3px; }*/ .custom-header nav span:hover { background: rgba(0,0,0,0.5); } .custom-header span:before { font-family: 'fontawesome-selected'; color: #fff; display: inline-block; text-align: center; width: 100%; text-indent: 4px; } .custom-header nav span.custom-prev:before { content: '\25c2'; } .custom-header nav span.custom-next:before { content: '\25b8'; } .custom-header nav span:last-child { margin-left: 20px; border-radius: 3px; } .custom-header nav span.custom-current:before { content: '\27a6'; } .fc-calendar { background: rgba(0,0,0,0.1); width: auto; top: 10px; bottom: 20px; left: 20px; right: 20px; height: auto; /* border-radius: 20px;*/ position: absolute; } .fc-calendar .fc-head { background: #1c2836; color: #fff; /*box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);*/ /* border-radius: 20px 20px 0 0;*/ height: 40px; line-height: 40px; padding: 0 20px; } .fc-calendar .fc-head > div { font-weight: 300; text-transform: uppercase; font-size: 14px; letter-spacing: 3px; /* text-shadow: 0 1px 1px rgba(0,0,0,0.4);*/ } .fc-calendar .fc-row > div > span.fc-date { color: rgba(0,0,0,0.9); text-shadow: none; font-size: 26px; font-weight: 300; bottom: auto; right: auto; top: 10px; left: 10px; text-align: left; /* text-shadow: 0 1px 1px rgba(0,0,0,0.3);*/ } .fc-calendar .fc-body { border: none; padding: 20px; } .fc-calendar .fc-row { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); border: none; } .fc-calendar .fc-row:last-child { box-shadow: none; } .fc-calendar .fc-row:first-child > div:first-child { border-radius: 10px 0 0 0; } .fc-calendar .fc-row:first-child > div:last-child { border-radius: 0 10px 0 0; } .fc-calendar .fc-row:last-child > div:first-child { border-radius: 0 0 0 10px; } .fc-calendar .fc-row:last-child > div:last-child { border-radius: 0 0 10px 0; } .fc-calendar .fc-row > div { box-shadow: -1px 0 0 rgba(0, 0, 0, 0.2); border: none; padding: 10px; cursor: pointer; } .fc-calendar .fc-row > div:first-child{ box-shadow: none; } .fc-calendar .fc-row > div.fc-today { background: transparent; box-shadow: inset 0 0 100px rgba(0,0,0,0.1); } .fc-calendar .fc-row > div.fc-today:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; background: transparent; } .fc-calendar .fc-row > div > div { margin-top: 35px; } .fc-calendar .fc-row > div > div a, .fc-calendar .fc-row > div > div span { color: rgba(0,0,0,0.7); font-size: 12px; text-transform: uppercase; display: inline-block; padding: 3px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 1px; background: rgba(0,0,0,0.1); } .no-touch .fc-calendar .fc-row > div > div a:hover { background: rgba(0,0,0,0.3); } @media screen and (max-width: 880px) , screen and (max-height: 450px) { html, body, .container { height: auto; } .custom-header, .custom-header nav, .custom-calendar-full, .fc-calendar-container, .fc-calendar, .fc-calendar .fc-head, .fc-calendar .fc-row > div > span.fc-date { position: relative; top: auto; left: auto; bottom: auto; right: auto; height: auto; width: auto; padding-bottom: 1.2em; } .fc-calendar { margin: 0 20px 20px; } .custom-header h2, .custom-header h3 { float: none; width: auto; text-align: left; padding-right: 100px; } .fc-calendar .fc-row, .ie9 .fc-calendar .fc-row > div, .fc-calendar .fc-row > div { height: auto; width: 100%; border: none; } .fc-calendar .fc-row > div { float: none; min-height: 50px; box-shadow: inset 0 -1px rgba(0,0,0,0.2) !important; border-radius: 0px !important; } .fc-calendar .fc-row > div:empty{ min-height: 0; height: 0; box-shadow: none !important; padding: 0; } .fc-calendar .fc-row { box-shadow: none; } .fc-calendar .fc-head { display: none; } .fc-calendar .fc-row > div > div { margin-top: 0px; padding-left: 10px; max-width: 70%; display: inline-block; } .fc-calendar .fc-row > div.fc-today { background: rgba(255, 255, 255, 0.2); } .fc-calendar .fc-row > div.fc-today:after { display: none; } .fc-calendar .fc-row > div > span.fc-date { width: 30px; display: inline-block; text-align: right; } .fc-calendar .fc-row > div > span.fc-weekday { display: inline-block; width: 40px; color: #fff; color: rgba(0,0,0,0.7); font-size: 10px; text-transform: uppercase; } } but notice it is just a proof of concept - not browsertested - just some fast playing. Best regard mr-fan Edited February 3 by mr-fan missing n in fancy...;) 3 1 Share this post Link to post Share on other sites
Sebastian 9 Posted February 15 Thanks bernhard for a very informative post. I do have a follow-up question though: How would i make the new panel / custom admin page accessible to a non-admin role? Currently it works great as superuser / admin using another role, logged in as a non-admin user there's only the "pages" tab, nothing else. The way I understand it, since it uses the "admin" template, I can't really manage access through template settings (?). I might overthink this though, anyone got an idea? Edit: Actually, i'm sorry, this is a duplicate of Which of course i found 2 minutes after posting the question, but not during the hour of research before.. 1 Share this post Link to post Share on other sites