changed backend icon buttons, added preview to promos

public/assets/css/main.css

@@ -313,6 +313,11 @@ button.button-disabled,
   opacity: 0.4;
   cursor: not-allowed;
 }
+button.button-icon,
+.button.button-icon {
+  padding: 5px 15px;
+  font-size: 18px;
+}
 input[type='range'] {
   overflow: hidden;
   width: 100%;

public/assets/css/main.less

@@ -327,6 +327,11 @@ button, .button {
         opacity: 0.4;
         cursor: not-allowed;
     }
+
+    &.button-icon {
+        padding: 5px 15px;
+        font-size: 18px;
+    }
 }
 input[type='range'] {
     overflow: hidden;

public/assets/css/moderation.css

@@ -95,7 +95,7 @@
 }
 .section-moderator-add .box form {
   margin-top: 15px;
-  width: 550px;
+  width: 600px;
 }
 .section-moderator-add .box form > div {
   display: grid;
@@ -104,7 +104,7 @@
 }
 .section-moderator-add .box form > div > div {
   display: grid;
-  grid-template-columns: 150px 1fr;
+  grid-template-columns: 200px 1fr;
   grid-gap: 15px;
 }
 .section-moderator-add .box form > div > div select,
@@ -211,3 +211,12 @@
 .section-moderator-report .box .report-data .report-item .column {
   opacity: 0.4;
 }
+.section-promo-crud {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 50px;
+}
+.section-promo-crud .preview .staff-promo {
+  width: 545px;
+}
+/*# sourceMappingURL=moderation.css.map */
\ No newline at end of file

public/assets/css/moderation.css.map

+{"version":3,"sources":["moderation.less"],"names":[],"mappings":"AACI,4BAAE;EACE,8BAAA;EACA,aAAA;EACA,mBAAA;;AAEA,4BALF,OAKI;EACE,eAAA;EACA,sBAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAa,oBAAb;;AAEJ,4BAZF,OAYI;EACE,aAAA;;AAEA,4BAfN,OAYI,MAGI;EACE,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,2BAAA;EACA,4BAAA;EACA,8BAAA;EACA,+BAAA;EACA,gCAAA;EACA,qBAAA;;AAEA,4BA5BV,OAYI,MAGI,KAaG,IAAI,SAAS;EACV,eAAA;EACA,mBAAA;EACA,gCAAA;;AAEJ,4BAjCV,OAYI,MAGI,KAkBG;EACG,UAAA;EACA,cAAA;EACA,mBAAA;;AAMhB,4BAAE;EACE,oCAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;;AAEA,4BANF,KAMI;EACE,sBAAA;EACA,eAAA;EACA,iBAAA;EACA,yBAAA;;AAEJ,4BAZF,KAYI;EACE,WAAA;EACA,kBAAA;;AAEJ,4BAhBF,KAgBI;EACE,WAAA;EACA,gBAAA;EACA,sBAAA;EACA,yBAAA;;AAEA,4BAtBN,KAgBI,MAMI;EACE,sBAAA;;AAEA,4BAzBV,KAgBI,MAMI,GAGG;EACG,mCAAA;;AAEJ,4BA5BV,KAgBI,MAMI,GAMG;EACG,YAAA;;AAGR,4BAhCN,KAgBI,MAgBI;EACE,aAAA;EACA,oCAAA;EACA,sBAAA;;AAEJ,4BArCN,KAgBI,MAqBI;EACE,aAAA;EACA,sBAAA;;AAKhB;EACI,aAAA;;AAEJ;EACI,aAAA;;AAEA,sBAAE;EACE,oCAAA;EACA,kBAAA;EACA,aAAA;;AAEA,sBALF,KAKI;EACE,sBAAA;EACA,eAAA;EACA,iBAAA;EACA,yBAAA;;AAEJ,sBAXF,KAWI;EACE,gBAAA;EACA,YAAA;;AAEA,sBAfN,KAWI,KAII;EACE,aAAA;EACA,wBAAA;EACA,cAAA;;AAEA,sBApBV,KAWI,KAII,MAKI;EACE,aAAA;EACA,gCAAA;EACA,cAAA;;AAEA,sBAzBd,KAWI,KAII,MAKI,MAKI;AAAQ,sBAzBxB,KAWI,KAII,MAKI,MAKc,MAAK;AAAe,sBAzB9C,KAWI,KAII,MAKI,MAKoC,MAAK;AAAmB,sBAzBxE,KAWI,KAII,MAKI,MAK8D,MAAK;EAC7D,WAAA;EACA,aAAa,uBAAb;EACA,eAAA;EACA,WAAA;EACA,oCAAA;EACA,yBAAA;EACA,gBAAA;EACA,kBAAA;EACA,iBAAA;EACA,WAAA;EACA,+DAAA;;AAEA,sBAtClB,KAWI,KAII,MAKI,MAKI,OAaG;AAAD,sBAtClB,KAWI,KAII,MAKI,MAKc,MAAK,aAaZ;AAAD,sBAtClB,KAWI,KAII,MAKI,MAKoC,MAAK,iBAalC;AAAD,sBAtClB,KAWI,KAII,MAKI,MAK8D,MAAK,cAa5D;EACG,oCAAA;EACA,WAAA;;AAEJ,sBA1ClB,KAWI,KAII,MAKI,MAKI,OAiBG;AAAD,sBA1ClB,KAWI,KAII,MAKI,MAKc,MAAK,aAiBZ;AAAD,sBA1ClB,KAWI,KAII,MAKI,MAKoC,MAAK,iBAiBlC;AAAD,sBA1ClB,KAWI,KAII,MAKI,MAK8D,MAAK,cAiB5D;EACG,UAAA;;AAEJ,sBA7ClB,KAWI,KAII,MAKI,MAKI,OAoBG;AAAD,sBA7ClB,KAWI,KAII,MAKI,MAKc,MAAK,aAoBZ;AAAD,sBA7ClB,KAWI,KAII,MAKI,MAKoC,MAAK,iBAoBlC;AAAD,sBA7ClB,KAWI,KAII,MAKI,MAK8D,MAAK,cAoB5D;EACG,+BAAA;;AAEJ,sBAhDlB,KAWI,KAII,MAKI,MAKI,OAuBI;AAAF,sBAhDlB,KAWI,KAII,MAKI,MAKc,MAAK,aAuBX;AAAF,sBAhDlB,KAWI,KAII,MAKI,MAKoC,MAAK,iBAuBjC;AAAF,sBAhDlB,KAWI,KAII,MAKI,MAK8D,MAAK,cAuB3D;EACE,gBAAA;EACA,uBAAA;;AAEJ,sBApDlB,KAWI,KAII,MAKI,MAKI,OA2BG;AAAD,sBApDlB,KAWI,KAII,MAKI,MAKc,MAAK,aA2BZ;AAAD,sBApDlB,KAWI,KAII,MAKI,MAKoC,MAAK,iBA2BlC;AAAD,sBApDlB,KAWI,KAII,MAKI,MAK8D,MAAK,cA2B5D;EACG,YAAA;;AAGR,sBAxDd,KAWI,KAII,MAKI,MAoCI,MAAK;AApCX,sBApBV,KAWI,KAII,MAKI,MAoCwB,MAAK;AApC/B,sBApBV,KAWI,KAII,MAKI,MAoCgD,MAAK;EAC/C,uBAAA;EACA,mBAAA;;AAEA,sBA5DlB,KAWI,KAII,MAKI,MAoCI,MAAK,aAIF;AAAD,sBA5DlB,KAWI,KAII,MAKI,MAoCwB,MAAK,iBAItB;AAAD,sBA5DlB,KAWI,KAII,MAKI,MAoCgD,MAAK,cAI9C;EACG,YAAA;;AAQ5B;EACI,aAAA;EACA,aAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;;AAEA,yBAAE;EACE,oCAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;;AAEA,yBANF,KAMI;EACE,sBAAA;EACA,eAAA;EACA,iBAAA;EACA,yBAAA;;AAEJ,yBAZF,KAYI;EACE,aAAA;EACA,2BAAA;EACA,cAAA;EACA,gBAAA;;AAEA,yBAlBN,KAYI,aAMI;EACE,YAAA;EACA,oBAAA;EACA,aAAA;;AAEA,yBAvBV,KAYI,aAMI,IAKG;EACG,kBAAA;;AAEJ,yBA1BV,KAYI,aAMI,IAQG;EACG,kBAAA;;AAIR,yBA/BN,KAYI,aAmBI;EACE,aAAA;EACA,gCAAA;EACA,cAAA;EACA,iBAAA;;AAEA,yBArCV,KAYI,aAmBI,aAMI;EACE,YAAA;;AAMpB;EACI,aAAA;EACA,+BAAA;EACA,cAAA;;AAGI,mBADF,SACI;EACE,YAAA","file":"moderation.css"}
\ No newline at end of file

public/assets/css/moderation.less

@@ -104,7 +104,7 @@
         }
         & form {
             margin-top: 15px;
-            width: 550px;
+            width: 600px;
 
             & > div {
                 display: grid;
@@ -113,7 +113,7 @@
 
                 & > div {
                     display: grid;
-                    grid-template-columns: 150px 1fr;
+                    grid-template-columns: 200px 1fr;
                     grid-gap: 15px;
 
                     & select, & input[type="text"], & input[type="password"], & input[type="email"] {
@@ -210,4 +210,15 @@
             }
         }
     }
+}
+.section-promo-crud {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 50px;
+
+    & .preview {
+        & .staff-promo {
+            width: 545px;
+        }
+    }
 }
\ No newline at end of file

public/assets/css/startup.css

@@ -79,8 +79,8 @@
 .section-startup .frontpage .staff-promos:empty {
   display: none;
 }
-.section-startup .frontpage .staff-promos .staff-promo {
-  background: #fff;
+.staff-promo {
+  background-color: rgba(255, 255, 255, 0.1);
   background-position: center right;
   background-size: cover;
   border-radius: 6px;
@@ -89,14 +89,14 @@
   display: grid;
   grid-template-rows: auto 100px auto;
 }
-.section-startup .frontpage .staff-promos .staff-promo .promo-type {
+.staff-promo .promo-type {
   color: #aaa;
   justify-self: left;
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 0.3em;
 }
-.section-startup .frontpage .staff-promos .staff-promo .promo-title {
+.staff-promo .promo-title {
   font-weight: bold;
   font-size: 34px;
   justify-self: left;
@@ -104,19 +104,19 @@
   letter-spacing: -0.025em;
   color: #222;
 }
-.section-startup .frontpage .staff-promos .staff-promo .promo-button {
+.staff-promo .promo-button {
   font-size: 14px;
   font-weight: bold;
   text-transform: uppercase;
   padding: 10px 25px;
   color: #fff;
-  background: #aaa;
+  background: #222;
   justify-self: left;
   border-radius: 6px;
   transition: 0.2s ease-in-out opacity;
   text-decoration: none;
 }
-.section-startup .frontpage .staff-promos .staff-promo .promo-button:hover {
+.staff-promo .promo-button:hover {
   cursor: pointer;
   opacity: 0.6;
 }

public/assets/css/startup.css.map

-{"version":3,"sources":["startup.less"],"names":[],"mappings":"AACI,gBAAE;EACE,8BAAA;EACA,kBAAA;EACA,mBAAA;;AAEA,gBALF,OAKI;EACE,aAAA;;AAEA,gBARN,OAKI,MAGI;EACE,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,2BAAA;EACA,4BAAA;EACA,8BAAA;EACA,+BAAA;EACA,gCAAA;EACA,qBAAA;;AAEA,gBArBV,OAKI,MAGI,KAaG,IAAI,SAAS;EACV,eAAA;EACA,mBAAA;EACA,gCAAA;;AAEJ,gBA1BV,OAKI,MAGI,KAkBG;EACG,UAAA;EACA,cAAA;EACA,mBAAA;;AAMhB,gBAAE;EACE,WAAA;EACA,aAAA;EACA,gCAAA;EACA,cAAA;EACA,aAAA;;AAEA,gBAPF,WAOI;EACE,aAAA;EACA,0BAAA;EACA,cAAA;;AAEA,gBAZN,WAOI,gBAKI;EACE,YAAA;EACA,aAAA;EACA,WAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,oCAAA;EACA,kBAAA;EACA,gCAAA;;AAEA,gBAvBV,WAOI,gBAKI,MAWG;EACG,YAAY,yCAAZ;;AAEJ,gBA1BV,WAOI,gBAKI,MAcG;EACG,YAAY,yCAAZ;;AAEJ,gBA7BV,WAOI,gBAKI,MAiBG;EACG,YAAY,yCAAZ;;AAEJ,gBAhCV,WAOI,gBAKI,MAoBG;EACG,YAAY,yCAAZ;;AAEJ,gBAnCV,WAOI,gBAKI,MAuBG;EACG,YAAY,yCAAZ;;AAGJ,gBAvCV,WAOI,gBAKI,MA2BG;EACG,WAAW,WAAX;EACA,2CAAA;EACA,eAAA;;AAIZ,gBA9CF,WA8CI;EACE,aAAA;EACA,sCAAA;;AAEA,gBAlDN,WA8CI,cAIG;EACG,aAAA;;AAGJ,gBAtDN,WA8CI,cAQI;EACE,gBAAA;EACA,iCAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mCAAA;;AAEA,gBAhEV,WA8CI,cAQI,aAUI;EACE,WAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;;AAEJ,gBAvEV,WA8CI,cAQI,aAiBI;EACE,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;EACA,wBAAA;EACA,WAAA;;AAEJ,gBA/EV,WA8CI,cAQI,aAyBI;EACE,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,oCAAA;EACA,qBAAA;;AAEA,gBA3Fd,WA8CI,cAQI,aAyBI,cAYG;EACG,eAAA;EACA,YAAA;;AAOxB;EACI,aAAA","file":"startup.css"}
+{"version":3,"sources":["startup.less"],"names":[],"mappings":"AACI,gBAAE;EACE,8BAAA;EACA,kBAAA;EACA,mBAAA;;AAEA,gBALF,OAKI;EACE,aAAA;;AAEA,gBARN,OAKI,MAGI;EACE,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,sBAAA;EACA,kBAAA;EACA,2BAAA;EACA,4BAAA;EACA,8BAAA;EACA,+BAAA;EACA,gCAAA;EACA,qBAAA;;AAEA,gBArBV,OAKI,MAGI,KAaG,IAAI,SAAS;EACV,eAAA;EACA,mBAAA;EACA,gCAAA;;AAEJ,gBA1BV,OAKI,MAGI,KAkBG;EACG,UAAA;EACA,cAAA;EACA,mBAAA;;AAMhB,gBAAE;EACE,WAAA;EACA,aAAA;EACA,gCAAA;EACA,cAAA;EACA,aAAA;;AAEA,gBAPF,WAOI;EACE,aAAA;EACA,0BAAA;EACA,cAAA;;AAEA,gBAZN,WAOI,gBAKI;EACE,YAAA;EACA,aAAA;EACA,WAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,oCAAA;EACA,kBAAA;EACA,gCAAA;;AAEA,gBAvBV,WAOI,gBAKI,MAWG;EACG,YAAY,yCAAZ;;AAEJ,gBA1BV,WAOI,gBAKI,MAcG;EACG,YAAY,yCAAZ;;AAEJ,gBA7BV,WAOI,gBAKI,MAiBG;EACG,YAAY,yCAAZ;;AAEJ,gBAhCV,WAOI,gBAKI,MAoBG;EACG,YAAY,yCAAZ;;AAEJ,gBAnCV,WAOI,gBAKI,MAuBG;EACG,YAAY,yCAAZ;;AAGJ,gBAvCV,WAOI,gBAKI,MA2BG;EACG,WAAW,WAAX;EACA,2CAAA;EACA,eAAA;;AAIZ,gBA9CF,WA8CI;EACE,aAAA;EACA,sCAAA;;AAEA,gBAlDN,WA8CI,cAIG;EACG,aAAA;;AAKhB;EACI,0CAAA;EACA,iCAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,mCAAA;;AAEA,YAAE;EACE,WAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;;AAEJ,YAAE;EACE,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;EACA,wBAAA;EACA,WAAA;;AAEJ,YAAE;EACE,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,oCAAA;EACA,qBAAA;;AAEA,YAZF,cAYG;EACG,eAAA;EACA,YAAA;;AAIZ;EACI,aAAA","file":"startup.css"}
\ No newline at end of file

public/assets/css/startup.less

@@ -87,50 +87,49 @@
             &:empty {
                 display: none;
             }
+        }
+    }
+}
+.staff-promo {
+    background-color: rgba(255,255,255,0.1);
+    background-position: center right;
+    background-size: cover;
+    border-radius: 6px;
+    padding: 50px;
+    height: 256px;
+    display: grid;
+    grid-template-rows: auto 100px auto;
 
-            & .staff-promo {
-                background: #fff;
-                background-position: center right;
-                background-size: cover;
-                border-radius: 6px;
-                padding: 50px;
-                height: 256px;
-                display: grid;
-                grid-template-rows: auto 100px auto;
-
-                & .promo-type {
-                    color: #aaa;
-                    justify-self: left;
-                    font-size: 12px;
-                    font-weight: bold;
-                    letter-spacing: 0.3em;
-                }
-                & .promo-title {
-                    font-weight: bold;
-                    font-size: 34px;
-                    justify-self: left;
-                    align-self: flex-start;
-                    letter-spacing: -0.025em;
-                    color: #222;
-                }
-                & .promo-button {
-                    font-size: 14px;
-                    font-weight: bold;
-                    text-transform: uppercase;
-                    padding: 10px 25px;
-                    color: #fff;
-                    background: #aaa;
-                    justify-self: left;
-                    border-radius: 6px;
-                    transition: 0.2s ease-in-out opacity;
-                    text-decoration: none;
+    & .promo-type {
+        color: #aaa;
+        justify-self: left;
+        font-size: 12px;
+        font-weight: bold;
+        letter-spacing: 0.3em;
+    }
+    & .promo-title {
+        font-weight: bold;
+        font-size: 34px;
+        justify-self: left;
+        align-self: flex-start;
+        letter-spacing: -0.025em;
+        color: #222;
+    }
+    & .promo-button {
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+        padding: 10px 25px;
+        color: #fff;
+        background: #222;
+        justify-self: left;
+        border-radius: 6px;
+        transition: 0.2s ease-in-out opacity;
+        text-decoration: none;
 
-                    &:hover {
-                        cursor: pointer;
-                        opacity: 0.6;
-                    }
-                }
-            }
+        &:hover {
+            cursor: pointer;
+            opacity: 0.6;
         }
     }
 }

public/assets/js/promoPreview.js

+let DOMForm = document.querySelector(".section-moderator-add form");
+
+let DOMFields = DOMForm.querySelectorAll("input, select");
+
+DOMFields.forEach((DOMField) => {
+   DOMField.addEventListener('input', () => { updatePreview(); });
+});
+
+let DOMInputBanner = DOMForm.querySelector("#form_imagePath");
+let DOMInputTitle = DOMForm.querySelector("#form_title");
+let DOMInputType = DOMForm.querySelector("#form_type");
+let DOMInputTextColor = DOMForm.querySelector("#form_textColor");
+let DOMInputPrimaryColor = DOMForm.querySelector("#form_color");
+
+let DOMPreview = document.querySelector(".preview .staff-promo");
+let DOMPreviewType = DOMPreview.querySelector(".promo-type");
+let DOMPreviewTitle = DOMPreview.querySelector(".promo-title");
+let DOMPreviewButton = DOMPreview.querySelector(".promo-button");
+
+function updatePreview() {
+    DOMPreviewType.style.color = DOMInputPrimaryColor.value;
+    DOMPreviewTitle.style.color = DOMInputTextColor.value;
+    DOMPreviewButton.style.backgroundColor = DOMInputPrimaryColor.value;
+
+    DOMPreviewType.innerText = (DOMInputType.value !== "") ? DOMInputType.value : "PromoType";
+    DOMPreviewTitle.innerHTML = (DOMInputTitle.value !== "") ? DOMInputTitle.value : "PromoTitle";
+
+    if(DOMInputBanner.files.length > 0) {
+        let fileReader = new FileReader();
+        fileReader.onload = function() {
+            DOMPreview.style.backgroundImage = "url(" + fileReader.result + ")";
+        }
+        fileReader.readAsDataURL(DOMInputBanner.files[0]);
+    } else {
+        DOMPreview.style.backgroundImage = "url()";
+    }
+}
+
+updatePreview();
\ No newline at end of file

src/Controller/Moderation/PromosController.php

@@ -73,7 +73,7 @@ class PromosController extends AbstractController
                 $em->persist($newPromo);
                 $em->flush();
 
-                return $this->redirectToRoute('moderation.index');
+                return $this->redirectToRoute('moderation.promos.index');
             } catch(FileException $e) {
 
             }
@@ -138,7 +138,7 @@ class PromosController extends AbstractController
                 $em->persist($promo);
                 $em->flush();
 
-                return $this->redirectToRoute('moderation.index');
+                return $this->redirectToRoute('moderation.promos.index');
             } catch(FileException $e) {
 
             }

templates/moderation/cards/index.html.twig

@@ -15,7 +15,9 @@
                     <tr>
                         <td><img src="{{ asset("uploads/card/" ~ card.icon) }}" style="width: 50px; height: 50px;" /></td>
                         <td><strong>{{ card.title }}</strong><br />{{ card.description }}</td>
-                        <td><a href="{{ path('moderation.cards.give', {cardId: card.id}) }}" class="button">G</a> <a href="{{ path('moderation.cards.edit', {cardId: card.id}) }}" class="button">E</a> <a href="{{ path('moderation.cards.remove', {cardId: card.id}) }}" class="button">X</a></td>
+                        <td><a href="{{ path('moderation.cards.give', {cardId: card.id}) }}" class="button button-icon"><span class="mdi mdi-account-multiple-plus"></span></a>
+                            <a href="{{ path('moderation.cards.edit', {cardId: card.id}) }}" class="button button-icon"><span class="mdi mdi-pencil"></span></a>
+                            <a href="{{ path('moderation.cards.remove', {cardId: card.id}) }}" class="button button-icon"><span class="mdi mdi-delete"></span></a>
                     </tr>
                 {% endfor %}
             </table>

templates/moderation/promos/add.html.twig

@@ -3,11 +3,27 @@
 {% set sectionTitle = 'Add a new promo' %}
 
 {% block moderationContent %}
-    <section class="section-moderator-add">
+    <section class="section-moderator-add section-promo-crud">
         <div class="box">
             {{ form_start(addForm) }}
             {{ form_widget(addForm) }}
             {{ form_end(addForm) }}
         </div>
+        <div class="preview">
+            <div class="staff-promo" style="/* background image */">
+                <div class="promo-type">PromoType</div>
+                <div class="promo-title">PromoTitle</div>
+                <a href="#" target="_blank" class="promo-button">CHECK IT OUT</a>
+            </div>
+        </div>
     </section>
+{% endblock %}
+
+{% block scripts %}
+    <script src="{{ asset('assets/js/promoPreview.js') }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="{{ asset('assets/css/moderation.css?v=' ~ date().timestamp) }}" />
+    <link rel="stylesheet" href="{{ asset('assets/css/startup.css?v=' ~ date().timestamp) }}" />
 {% endblock %}
\ No newline at end of file

templates/moderation/promos/edit.html.twig

@@ -3,11 +3,27 @@
 {% set sectionTitle = 'Edit an existing promo' %}
 
 {% block moderationContent %}
-    <section class="section-moderator-add">
+    <section class="section-moderator-add section-promo-crud">
         <div class="box">
             {{ form_start(editForm) }}
             {{ form_widget(editForm) }}
             {{ form_end(editForm) }}
         </div>
+        <div class="preview">
+            <div class="staff-promo" style="/* background image */">
+                <div class="promo-type">PromoType</div>
+                <div class="promo-title">PromoTitle</div>
+                <a href="#" target="_blank" class="promo-button">CHECK IT OUT</a>
+            </div>
+        </div>
     </section>
+{% endblock %}
+
+{% block scripts %}
+    <script src="{{ asset('assets/js/promoPreview.js') }}"></script>
+{% endblock %}
+
+{% block styles %}
+    <link rel="stylesheet" href="{{ asset('assets/css/moderation.css?v=' ~ date().timestamp) }}" />
+    <link rel="stylesheet" href="{{ asset('assets/css/startup.css?v=' ~ date().timestamp) }}" />
 {% endblock %}
\ No newline at end of file

templates/moderation/promos/index.html.twig

@@ -10,7 +10,7 @@
                     <th>Type</th>
                     <th>Title</th>
                     <th>Visible</th>
-                    <th style="width: 150px"></th>
+                    <th style="width: 200px"></th>
                 </tr>
                 {% for promo in promos %}
                     <tr {{ promo.isVisible ? "class=\"active\"" : ""}}>
@@ -18,9 +18,9 @@
                         <td>{{ promo.title }}</td>
                         <td>{{ promo.isVisible ? "Yes" : "No" }}</td>
                         <td>
-                            <a href="{{ path('moderation.promos.remove', {promoId: promo.id}) }}" class="button">X</a>
-                            <a href="{{ path('moderation.promos.switchVisibility', {promoId: promo.id}) }}" class="button">Vis</a>
-                            <a href="{{ path('moderation.promos.edit', {promoId: promo.id}) }}" class="button">Edit</a>
+                            <a href="{{ path('moderation.promos.switchVisibility', {promoId: promo.id}) }}" class="button button-icon"><span class="mdi mdi-eye"></span></a>
+                            <a href="{{ path('moderation.promos.edit', {promoId: promo.id}) }}" class="button button-icon"><span class="mdi mdi-pencil"></span></a>
+                            <a href="{{ path('moderation.promos.remove', {promoId: promo.id}) }}" class="button button-icon"><span class="mdi mdi-delete"></span></a>
                         </td>
                     </tr>
                 {% endfor %}