Improve CMS demo

Prometee · Feb 7, 2018 · 73d4f75 · 73d4f75
1 parent c0d44c5
commit 73d4f75
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 54 deletions.
diff --git a/tests/Application/app/Resources/SyliusShopBundle/views/Homepage/index.html.twig b/tests/Application/app/Resources/SyliusShopBundle/views/Homepage/index.html.twig
@@ -2,10 +2,12 @@
 
 {% block content %}
     <div class="top one">
-        <div class="ui center aligned segment stackable grid">
-            <img class="ui image"
-                 src="https://raw.githubusercontent.com/bitbager/BitBagCommerceAssets/master/SyliusCmsPlugin.png"
-                 alt="SyliusCmsPlugin"/>
+        <div class="ui center aligned segment stackable grid cms-logo">
+            <a href="https://github.com/BitBagCommerce/SyliusCmsPlugin">
+                <img class="ui image cms-logo"
+                     src="https://raw.githubusercontent.com/bitbager/BitBagCommerceAssets/master/SyliusCmsPlugin.png"
+                     alt="SyliusCmsPlugin"/>
+            </a>
         </div>
 
         <div class="ui stackable two column grid">
@@ -40,4 +42,13 @@
     </div>
 
     {{ render(url('sylius_shop_partial_product_index_latest', {'count': 4, 'template': '@SyliusShop/Product/_horizontalList.html.twig'})) }}
+
+    <div class="ui stackable one column grid">
+        <div class="column intro promo">
+            <div class="ui info message">
+                Like it? We do a lot of Sylius projects & plugins. <br/>
+                Perhaps there is something we can do for you. Visit <a href="https://bitbag.shop/">our website</a> for more information.
+            </div>
+        </div>
+    </div>
 {% endblock %}
diff --git a/tests/Application/app/Resources/SyliusShopBundle/views/layout.html.twig b/tests/Application/app/Resources/SyliusShopBundle/views/layout.html.twig
@@ -14,7 +14,74 @@
 
     {% block stylesheets %}
         <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
-        <link href="{{ asset('assets/shop/css/bitbag.css') }}" rel="stylesheet">
+
+        <style>
+            .bitbag-page a, .bitbag-page a:hover {
+                color: rgba(0, 0, 0, .87);
+                width: 100%;
+            }
+
+            .bitbag-image-block img {
+                position: relative;
+            }
+
+            .top.one {
+                margin-top: 1rem;
+            }
+
+            .bitbag-image-block span {
+                z-index: 25;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-size: 2rem;
+                color: #ffffff;
+                text-transform: uppercase;
+            }
+
+            .bitbag-image-block span a {
+                text-decoration: none;
+                width: 100%;
+                color: #ffffff;
+            }
+
+            .bitbag-page, .bitbag-frequently-asked-question {
+                padding-top: 1rem;
+                padding-bottom: 1rem;
+                border-bottom: 1px solid rgba(34, 36, 38, .15);
+            }
+
+            .bitbag-page:hover {
+                background: rgba(0, 0, 0, .03);
+            }
+
+            .italic {
+                font-style: italic;
+            }
+
+            .intro {
+                text-align: center;
+                text-transform: uppercase;
+                font-weight: 900;
+            }
+
+            .intro.promo {
+                text-align: center;
+                text-transform: none;
+                font-weight: 900;
+                font-size: 20px;
+            }
+
+            .ui.menu .item > .label.credentials {
+                font-size: 14px;
+            }
+
+            .cms-logo {
+                margin-top: 20px;
+                margin-bottom: 20px;
+            }
+        </style>
 
         {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}
 
@@ -61,6 +128,10 @@
                         FAQs
                         <span class="ui teal label">NEW</span>
                     </a>
+                    <a href="{{ path('sylius_admin_login') }}" class="item">
+                        Admin panel
+                        <span class="ui label blue credentials">Login: sylius, password: sylius</span>
+                    </a>
                 </div>
             </header>
         {% endblock %}

diff --git a/tests/Application/web/assets/shop/css/bitbag.css b/tests/Application/web/assets/shop/css/bitbag.css