From a0c9ced34a7db26ad50ea5706eb22c9f0b0f2d4c Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sun, 29 Jan 2017 12:35:33 +0100
Subject: [PATCH] More flexbox implementations

---
 Theme/backend/draw-create.tpl.php | 118 +++++++++++++++++-------------
 Theme/backend/draw-list.tpl.php   |  50 +++++++------
 2 files changed, 94 insertions(+), 74 deletions(-)

diff --git a/Theme/backend/draw-create.tpl.php b/Theme/backend/draw-create.tpl.php
index 7463734..e07e9f5 100644
--- a/Theme/backend/draw-create.tpl.php
+++ b/Theme/backend/draw-create.tpl.php
@@ -19,66 +19,82 @@
 
 echo $this->getData('nav')->render(); ?>
 
-<section class="box w-100">
-    <div class="inner">
-        <form id="drawForm" action="<?= \phpOMS\Uri\UriFactory::build('/{/lang}/api/draw?csrf={$CSRF}'); ?>" method="POST">
-            <input type="text" id="iTitle" name="title" class="wf-100"><input type="submit" value="<?= $this->getText('Create', 0, 0); ?>">
-        </form>
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <form id="drawForm" action="<?= \phpOMS\Uri\UriFactory::build('/{/lang}/api/draw?csrf={$CSRF}'); ?>" method="POST">
+                    <input type="text" id="iTitle" name="title" class="wf-100"><input type="submit" value="<?= $this->getText('Create', 0, 0); ?>">
+                </form>
+            </div>
+        </section>
     </div>
-</section>
+</div>
 
-<div class="box w-100">
-    <div class="tabular">
-        <ul class="tab-links">
-            <li><label for="c-tab-1"><?= $this->getText('Start') ?></label>
-            <li><label for="c-tab-2"><?= $this->getText('Layout') ?></label>
-        </ul>
-        <div class="tab-content">
-            <input type="radio" id="c-tab-1" name="tabular-1" checked>
-            <div class="tab">
-                <ul class="h-list">
-                    <li><i class="fa fa-lg fa-floppy-o"></i>
-                    <li><i class="fa fa-lg fa-cloud-download"></i>
-                    <li><i class="fa fa-lg fa-undo"></i>
-                    <li><i class="fa fa-lg fa-repeat"></i>
-                    <li><i class="fa fa-lg fa-pencil"></i>
-                    <li><i class="fa fa-lg fa-paint-brush"></i>
-                    <li><i class="fa fa-lg fa-eraser"></i>
-                    <li><i class="fa fa-lg fa-minus"></i>
-                    <li><i class="fa fa-lg fa-square-o"></i>
-                    <li><i class="fa fa-lg fa-circle-thin"></i>
-                    <li><i class="fa fa-lg fa-tint"></i>
-                    <li><i class="fa fa-lg fa-bars"></i>
-                    <li><i class="fa fa-lg fa-i-cursor"></i>
-                    <li><i class="fa fa-lg fa-text-height"></i>
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <div class="tabular">
+                <ul class="tab-links">
+                    <li><label for="c-tab-1"><?= $this->getText('Start') ?></label>
+                    <li><label for="c-tab-2"><?= $this->getText('Layout') ?></label>
                 </ul>
-            </div>
-            <input type="radio" id="c-tab-2" name="tabular-1">
-            <div class="tab">
+                <div class="tab-content">
+                    <input type="radio" id="c-tab-1" name="tabular-1" checked>
+                    <div class="tab">
+                        <ul class="h-list">
+                            <li><i class="fa fa-lg fa-floppy-o"></i>
+                            <li><i class="fa fa-lg fa-cloud-download"></i>
+                            <li><i class="fa fa-lg fa-undo"></i>
+                            <li><i class="fa fa-lg fa-repeat"></i>
+                            <li><i class="fa fa-lg fa-pencil"></i>
+                            <li><i class="fa fa-lg fa-paint-brush"></i>
+                            <li><i class="fa fa-lg fa-eraser"></i>
+                            <li><i class="fa fa-lg fa-minus"></i>
+                            <li><i class="fa fa-lg fa-square-o"></i>
+                            <li><i class="fa fa-lg fa-circle-thin"></i>
+                            <li><i class="fa fa-lg fa-tint"></i>
+                            <li><i class="fa fa-lg fa-bars"></i>
+                            <li><i class="fa fa-lg fa-i-cursor"></i>
+                            <li><i class="fa fa-lg fa-text-height"></i>
+                        </ul>
+                    </div>
+                    <input type="radio" id="c-tab-2" name="tabular-1">
+                    <div class="tab">
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
-<div class="m-draw">
-    <section class="box w-100" style="height: 30%;">
-        <div class="inner resizable">
-            <canvas id="canvasImage resizable" name="image" form="drawForm"></canvas>
+<div class="row">
+    <div class="col-xs-12">
+        <div class="m-draw">
+            <section class="box wf-100" style="height: 30%;">
+                <div class="inner resizable">
+                    <canvas id="canvasImage resizable" name="image" form="drawForm"></canvas>
+                </div>
+            </section>
         </div>
-    </section>
+    </div>
 </div>
 
-<section class="box w-100">
-    <div class="inner">
-        <form>
-            <table class="layout">
-                <tr><td colspan="2"><label><?= $this->getText('Permission') ?></label>
-                <tr><td><select>
-                            <option>
-                        </select>
-                <tr><td colspan="2"><label><?= $this->getText('GroupUser') ?></label>
-                <tr><td><input id="iPermission" name="group" type="text" placeholder="&#xf084;"><td><button><?= $this->getText('Add', 0, 0) ?></button>
-            </table>
-        </form>
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <form>
+                    <table class="layout">
+                        <tr><td colspan="2"><label><?= $this->getText('Permission') ?></label>
+                        <tr><td><select>
+                                    <option>
+                                </select>
+                        <tr><td colspan="2"><label><?= $this->getText('GroupUser') ?></label>
+                        <tr><td><input id="iPermission" name="group" type="text" placeholder="&#xf084;"><td><button><?= $this->getText('Add', 0, 0) ?></button>
+                    </table>
+                </form>
+            </div>
+        </section>
     </div>
-</section>
+</div>
\ No newline at end of file
diff --git a/Theme/backend/draw-list.tpl.php b/Theme/backend/draw-list.tpl.php
index 527e675..bdc6f70 100644
--- a/Theme/backend/draw-list.tpl.php
+++ b/Theme/backend/draw-list.tpl.php
@@ -25,27 +25,31 @@ $footerView->setPage(1);
 $images = $this->getData('images');
 
 echo $this->getData('nav')->render(); ?>
-<div class="box">
-    <table class="table">
-        <caption><?= $this->getText('Images'); ?></caption>
-        <thead>
-        <tr>
-            <td class="wf-100"><?= $this->getText('Name'); ?>
-            <td><?= $this->getText('Creator'); ?>
-            <td><?= $this->getText('Created'); ?>
-        <tfoot>
-        <tr>
-            <td colspan="3"><?= $footerView->render(); ?>
-        <tbody>
-        <?php $count = 0; foreach($images as $key => $value) : $count++;
-        $url = \phpOMS\Uri\UriFactory::build('/{/lang}/backend/draw/single?id=' . $value->getId()); ?>
-            <tr>
-                <td><?= $value->getMedia()->getName(); ?>
-                <td><?= $value->getMedia()->getCreatedBy(); ?>
-                <td><?= $value->getMedia()->getCreatedAt()->format('Y-m-d'); ?>
-        <?php endforeach; ?>
-        <?php if($count === 0) : ?>
-        <tr><td colspan="5" class="empty"><?= $this->getText('Empty', 0, 0); ?>
-                <?php endif; ?>
-    </table>
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <table class="table">
+                <caption><?= $this->getText('Images'); ?></caption>
+                <thead>
+                <tr>
+                    <td class="wf-100"><?= $this->getText('Name'); ?>
+                    <td><?= $this->getText('Creator'); ?>
+                    <td><?= $this->getText('Created'); ?>
+                <tfoot>
+                <tr>
+                    <td colspan="3"><?= $footerView->render(); ?>
+                <tbody>
+                <?php $count = 0; foreach($images as $key => $value) : $count++;
+                $url = \phpOMS\Uri\UriFactory::build('/{/lang}/backend/draw/single?id=' . $value->getId()); ?>
+                    <tr>
+                        <td><?= $value->getMedia()->getName(); ?>
+                        <td><?= $value->getMedia()->getCreatedBy(); ?>
+                        <td><?= $value->getMedia()->getCreatedAt()->format('Y-m-d'); ?>
+                <?php endforeach; ?>
+                <?php if($count === 0) : ?>
+                <tr><td colspan="5" class="empty"><?= $this->getText('Empty', 0, 0); ?>
+                        <?php endif; ?>
+            </table>
+        </div>
+    </div>
 </div>