wcfsetup/install/files/acp/templates/pageBoxOrder.tpl

   1 {include file='header' pageTitle='wcf.acp.page.boxOrder'}
   2
   3 <style>
   4         #pbo {
   5                 border: 1px solid #ccc;
   6                 padding: 5px;
   7         }
   8
   9         #pbo [data-placeholder] {
  10                 background-color: rgb(224, 224, 224);
  11                 padding: 20px 10px;
  12                 position: relative;
  13         }
  14
  15         #pbo [data-placeholder]::before {
  16                 content: attr(data-title);
  17                 color: rgb(102, 102, 102);
  18                 font-size: 11px;
  19                 left: 50%;
  20                 position: absolute;
  21                 top: 5px;
  22                 transform: translateX(-50%);
  23         }
  24
  25         #pbo [data-placeholder] + [data-placeholder] {
  26                 margin-top: 10px;
  27         }
  28
  29         #pboMain {
  30                 display: flex;
  31                 justify-content: space-between;
  32         }
  33
  34         #pboMain:not(:first-child) {
  35                 margin-top: 20px;
  36         }
  37
  38         #pboMain:not(:last-child) {
  39                 margin-bottom: 20px;
  40         }
  41
  42         #pboMain > div {
  43                 flex: 0 0 calc(33% - 10px);
  44                 max-width: calc(33% - 10px);
  45         }
  46
  47         #pbo [data-placeholder] ul {
  48                 list-style-position: inside;
  49                 list-style-type: decimal;
  50                 margin-top: 20px;
  51         }
  52
  53         #pbo [data-placeholder] li {
  54                 padding: 5px;
  55         }
  56
  57         #pbo [data-placeholder] .ui-sortable > li {
  58                 cursor: move;
  59         }
  60
  61         #pbo [data-placeholder] .ui-sortable > li::before {
  62                 content: "\f047";
  63                 font-family: FontAwesome;
  64                 padding-right: 5px;
  65         }
  66
  67         #pbo [data-placeholder] li + li {
  68                 margin-top: 5px;
  69         }
  70
  71         #pbo [data-placeholder="headerBoxes"] > ul,
  72         #pbo [data-placeholder="footerBoxes"] > ul {
  73                 display: flex;
  74                 flex-wrap: wrap;
  75         }
  76
  77         #pbo [data-placeholder="headerBoxes"] > ul > li,
  78         #pbo [data-placeholder="footerBoxes"] > ul > li {
  79                 flex: 0 0 calc(25% - 10px);
  80                 max-width: calc(25% - 10px);
  81         }
  82
  83         #pbo [data-placeholder] .sortablePlaceholder::before {
  84                 /* this avoids the icon from being displayed, but will also
  85                    enforce a matching height for the placeholder */
  86                 visibility: hidden;
  87         }
  88
  89         #pboContentContainer:first-child:not(:last-child),
  90         #pboContentContainer:last-child:not(:first-child) {
  91                 flex: 0 0 calc(66% - 10px);
  92                 max-width: calc(66% - 10px);
  93         }
  94
  95         #pboContentContainer:first-child:last-child {
  96                 flex: 0 0 100%;
  97                 max-width: none;
  98         }
  99
 100         #pboContent {
 101                 background-color: #BBDEFB;
 102                 padding: 40px 20px;
 103                 text-align: center;
 104         }
 105
 106         #pboContent:not(:first-child) {
 107                 margin-top: 10px;
 108         }
 109
 110         #pboContent:not(:last-child) {
 111                 margin-bottom: 10px;
 112         }
 113 </style>
 114
 115 <script data-relocate="true">
 116         require(['Dictionary', 'Language', 'WoltLabSuite/Core/Acp/Ui/Page/BoxOrder'], function (Dictionary, Language, AcpUiPageBoxOrder) {
 117                 Language.addObject({
 118                         'wcf.acp.box.isDisabled': '{lang}wcf.acp.box.isDisabled{/lang}',
 119                         'wcf.acp.page.boxOrder.discard.confirmMessage': '{lang}wcf.acp.page.boxOrder.discard.confirmMessage{/lang}'
 120                 });
 121
 122                 var boxes = new Dictionary();
 123                 {foreach from=$boxes key=position item=boxData}
 124                         {if $position != 'mainMenu'}
 125                                 boxes.set('{$position}', [{implode from=$boxData item=box}{ boxID: {@$box->boxID}, name: '{$box->name|encodeJS}', isDisabled: {if $box->isDisabled}true{else}false{/if} }{/implode}]);
 126                         {/if}
 127                 {/foreach}
 128
 129                 AcpUiPageBoxOrder.init({@$page->pageID}, boxes);
 130         });
 131
 132 </script>
 133
 134 <header class="contentHeader">
 135         <div class="contentHeaderTitle">
 136                 <h1 class="contentTitle">{lang}wcf.acp.page.boxOrder{/lang}</h1>
 137                 <p class="contentHeaderDescription">{$page->name}</p>
 138         </div>
 139
 140         <nav class="contentHeaderNavigation">
 141                 <ul>
 142                         {if $hasCustomShowOrder}<li><a href="#" class="button jsButtonCustomShowOrder"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.page.boxOrder.discard{/lang}</span></a></li>{/if}
 143                         <li><a href="{link controller='PageEdit' id=$page->pageID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.page.edit{/lang}</span></a></li>
 144
 145                         {event name='contentHeaderNavigation'}
 146                 </ul>
 147         </nav>
 148 </header>
 149
 150 <div class="section">
 151         <div id="pbo">
 152                 {if $boxes[hero]|isset}<div data-placeholder="hero" data-title="{lang}wcf.acp.box.position.hero{/lang}"></div>{/if}
 153                 {if $boxes[headerBoxes]|isset}<div data-placeholder="headerBoxes" data-title="{lang}wcf.acp.box.position.headerBoxes{/lang}"></div>{/if}
 154                 {if $boxes[top]|isset}<div data-placeholder="top" data-title="{lang}wcf.acp.box.position.top{/lang}"></div>{/if}
 155
 156                 <div id="pboMain">
 157                         {if $boxes[sidebarLeft]|isset}<div data-placeholder="sidebarLeft" data-title="{lang}wcf.acp.box.position.sidebarLeft{/lang}"></div>{/if}
 158                         <div id="pboContentContainer">
 159                                 {if $boxes[contentTop]|isset}<div data-placeholder="contentTop" data-title="{lang}wcf.acp.box.position.contentTop{/lang}"></div>{/if}
 160                                 <div id="pboContent">{lang}wcf.acp.page.boxOrder.position.content{/lang}</div>
 161                                 {if $boxes[contentBottom]|isset}<div data-placeholder="contentBottom" data-title="{lang}wcf.acp.box.position.contentBottom{/lang}"></div>{/if}
 162                         </div>
 163                         {if $boxes[sidebarRight]|isset}<div data-placeholder="sidebarRight" data-title="{lang}wcf.acp.box.position.sidebarRight{/lang}"></div>{/if}
 164                 </div>
 165
 166                 {if $boxes[bottom]|isset}<div data-placeholder="bottom" data-title="{lang}wcf.acp.box.position.bottom{/lang}"></div>{/if}
 167                 {if $boxes[footerBoxes]|isset}<div data-placeholder="footerBoxes" data-title="{lang}wcf.acp.box.position.footerBoxes{/lang}"></div>{/if}
 168                 {if $boxes[footer]|isset}<div data-placeholder="footer" data-title="{lang}wcf.acp.box.position.footer{/lang}"></div>{/if}
 169         </div>
 170
 171         <div class="formSubmit">
 172                 <button class="button buttonPrimary" data-type="submit">{lang}wcf.global.button.saveSorting{/lang}</button>
 173         </div>
 174 </div>
 175
 176 {include file='footer'}