Add custom about us page

plugins/tps/about/Plugin.php

@@ -0,0 +1,14 @@
+<?php namespace Tps\About;
+
+use System\Classes\PluginBase;
+
+class Plugin extends PluginBase
+{
+    public function registerComponents()
+    {
+    }
+
+    public function registerSettings()
+    {
+    }
+}

plugins/tps/about/controllers/About.php

@@ -0,0 +1,19 @@
+<?php namespace Tps\About\Controllers;
+
+use Backend\Classes\Controller;
+use BackendMenu;
+
+class About extends Controller
+{
+    public $implement = [        'Backend\Behaviors\ListController',        'Backend\Behaviors\FormController',        'Backend\Behaviors\ReorderController'    ];
+    
+    public $listConfig = 'config_list.yaml';
+    public $formConfig = 'config_form.yaml';
+    public $reorderConfig = 'config_reorder.yaml';
+
+    public function __construct()
+    {
+        parent::__construct();
+        BackendMenu::setContext('Tps.About', 'main-menu-item');
+    }
+}

plugins/tps/about/controllers/about/_list_toolbar.htm

@@ -0,0 +1,19 @@
+<div data-control="toolbar">
+        <a href="<?= Backend::url('tps/about/about/create') ?>" class="btn btn-primary oc-icon-plus"><?= e(trans('backend::lang.form.create')) ?></a>
+            <a href="<?= Backend::url('tps/about/about/reorder') ?>" class="btn btn-default oc-icon-list"><?= e(trans('backend::lang.reorder.default_title')) ?></a>
+        <button
+        class="btn btn-default oc-icon-trash-o"
+        disabled="disabled"
+        onclick="$(this).data('request-data', {
+            checked: $('.control-list').listWidget('getChecked')
+        })"
+        data-request="onDelete"
+        data-request-confirm="<?= e(trans('backend::lang.list.delete_selected_confirm')) ?>"
+        data-trigger-action="enable"
+        data-trigger=".control-list input[type=checkbox]"
+        data-trigger-condition="checked"
+        data-request-success="$(this).prop('disabled', true)"
+        data-stripe-load-indicator>
+        <?= e(trans('backend::lang.list.delete_selected')) ?>
+    </button>
+</div>

plugins/tps/about/controllers/about/_reorder_toolbar.htm

@@ -0,0 +1,3 @@
+<div data-control="toolbar">
+    <a href="<?= Backend::url('tps/about/about') ?>" class="btn btn-primary oc-icon-caret-left"><?= e(trans('backend::lang.form.return_to_list')) ?></a>
+</div>

plugins/tps/about/controllers/about/config_form.yaml

@@ -0,0 +1,10 @@
+name: About
+form: $/tps/about/models/about/fields.yaml
+modelClass: Tps\About\Models\About
+defaultRedirect: tps/about/about
+create:
+    redirect: 'tps/about/about/update/:id'
+    redirectClose: tps/about/about
+update:
+    redirect: tps/about/about
+    redirectClose: tps/about/about

plugins/tps/about/controllers/about/config_list.yaml

@@ -0,0 +1,12 @@
+list: $/tps/about/models/about/columns.yaml
+modelClass: Tps\About\Models\About
+title: About
+noRecordsMessage: 'backend::lang.list.no_records'
+showSetup: true
+showCheckboxes: true
+recordsPerPage: 20
+toolbar:
+    buttons: list_toolbar
+    search:
+        prompt: 'backend::lang.list.search_prompt'
+recordUrl: 'tps/about/about/update/:id'

plugins/tps/about/controllers/about/config_reorder.yaml

@@ -0,0 +1,4 @@
+title: About
+modelClass: Tps\About\Models\About
+toolbar:
+    buttons: reorder_toolbar

plugins/tps/about/controllers/about/create.htm

@@ -0,0 +1,46 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('tps/about/about') ?>">About</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?php if (!$this->fatalError): ?>
+
+    <?= Form::open(['class' => 'layout']) ?>
+
+        <div class="layout-row">
+            <?= $this->formRender() ?>
+        </div>
+
+        <div class="form-buttons">
+            <div class="loading-indicator-container">
+                <button
+                    type="submit"
+                    data-request="onSave"
+                    data-hotkey="ctrl+s, cmd+s"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-primary">
+                    <?= e(trans('backend::lang.form.create')) ?>
+                </button>
+                <button 
+                    type="button"
+                    data-request="onSave"
+                    data-request-data="close:1"
+                    data-hotkey="ctrl+enter, cmd+enter"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-default">
+                    <?= e(trans('backend::lang.form.create_and_close')) ?>
+                </button>
+                <span class="btn-text">
+                    <?= e(trans('backend::lang.form.or')) ?> <a href="<?= Backend::url('tps/about/about') ?>"><?= e(trans('backend::lang.form.cancel')) ?></a>
+                </span>
+            </div>
+        </div>
+
+    <?= Form::close() ?>
+
+<?php else: ?>
+    <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
+    <p><a href="<?= Backend::url('tps/about/about') ?>" class="btn btn-default"><?= e(trans('backend::lang.form.return_to_list')) ?></a></p>
+<?php endif ?>

plugins/tps/about/controllers/about/index.htm

@@ -0,0 +1 @@
+<?= $this->listRender() ?>

plugins/tps/about/controllers/about/preview.htm

@@ -0,0 +1,22 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('tps/about/about') ?>">About</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?php if (!$this->fatalError): ?>
+
+    <div class="form-preview">
+        <?= $this->formRenderPreview() ?>
+    </div>
+
+<?php else: ?>
+    <p class="flash-message static error"><?= e($this->fatalError) ?></p>
+<?php endif ?>
+
+<p>
+    <a href="<?= Backend::url('tps/about/about') ?>" class="btn btn-default oc-icon-chevron-left">
+        <?= e(trans('backend::lang.form.return_to_list')) ?>
+    </a>
+</p>

plugins/tps/about/controllers/about/reorder.htm

@@ -0,0 +1,8 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('tps/about/about') ?>">About</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?= $this->reorderRender() ?>

plugins/tps/about/controllers/about/update.htm

@@ -0,0 +1,54 @@
+<?php Block::put('breadcrumb') ?>
+    <ul>
+        <li><a href="<?= Backend::url('tps/about/about') ?>">About</a></li>
+        <li><?= e($this->pageTitle) ?></li>
+    </ul>
+<?php Block::endPut() ?>
+
+<?php if (!$this->fatalError): ?>
+
+    <?= Form::open(['class' => 'layout']) ?>
+
+        <div class="layout-row">
+            <?= $this->formRender() ?>
+        </div>
+
+        <div class="form-buttons">
+            <div class="loading-indicator-container">
+                <button
+                    type="submit"
+                    data-request="onSave"
+                    data-request-data="redirect:0"
+                    data-hotkey="ctrl+s, cmd+s"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-primary">
+                    <?= e(trans('backend::lang.form.save')) ?>
+                </button>
+                <button
+                    type="button"
+                    data-request="onSave"
+                    data-request-data="close:1"
+                    data-hotkey="ctrl+enter, cmd+enter"
+                    data-load-indicator="<?= e(trans('backend::lang.form.saving')) ?>"
+                    class="btn btn-default">
+                    <?= e(trans('backend::lang.form.save_and_close')) ?>
+                </button>
+                <button
+                    type="button"
+                    class="oc-icon-trash-o btn-icon danger pull-right"
+                    data-request="onDelete"
+                    data-load-indicator="<?= e(trans('backend::lang.form.deleting')) ?>"
+                    data-request-confirm="<?= e(trans('backend::lang.form.confirm_delete')) ?>">
+                </button>
+
+                <span class="btn-text">
+                    <?= e(trans('backend::lang.form.or')) ?> <a href="<?= Backend::url('tps/about/about') ?>"><?= e(trans('backend::lang.form.cancel')) ?></a>
+                </span>
+            </div>
+        </div>
+    <?= Form::close() ?>
+
+<?php else: ?>
+    <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
+    <p><a href="<?= Backend::url('tps/about/about') ?>" class="btn btn-default"><?= e(trans('backend::lang.form.return_to_list')) ?></a></p>
+<?php endif ?>

plugins/tps/about/lang/ru/lang.php

@@ -0,0 +1,6 @@
+<?php return [
+    'plugin' => [
+        'name' => 'About',
+        'description' => ''
+    ]
+];

plugins/tps/about/models/About.php

@@ -0,0 +1,41 @@
+<?php namespace Tps\About\Models;
+
+use Model;
+use October\Rain\Database\Traits\Sortable;
+use October\Rain\Database\Traits\Validation;
+
+/**
+ * Model
+ */
+class About extends Model
+{
+    use Validation;
+    use Sortable;
+
+    public $implement = ['RainLab.Translate.Behaviors.TranslatableModel'];
+
+    /*
+     * Disable timestamps by default.
+     * Remove this line if timestamps are defined in the database table.
+     */
+    public $timestamps = false;
+
+
+    /**
+     * @var string The database table used by the model.
+     */
+    public $table = 'tps_about_';
+
+    /**
+     * @var array Validation rules
+     */
+    public $rules = [
+    ];
+
+    public $attachOne = [
+        'image' => 'Tps\Shops\Classes\Attachment',
+        'image2' => 'Tps\Shops\Classes\Attachment',
+    ];
+
+    public $translatable = ['name', 'description'];
+}

plugins/tps/about/models/about/columns.yaml

@@ -0,0 +1,10 @@
+columns:
+    id:
+        label: id
+        type: number
+    name:
+        label: name
+        type: text
+    description:
+        label: description
+        type: text

plugins/tps/about/models/about/fields.yaml

@@ -0,0 +1,28 @@
+fields:
+    name:
+        label: Name
+        span: auto
+        type: text
+    description:
+        label: Description
+        size: ''
+        span: auto
+        type: textarea
+    image:
+        label: 'First Image'
+        mode: image
+        useCaption: true
+        thumbOptions:
+            mode: crop
+            extension: auto
+        span: auto
+        type: fileupload
+    image2:
+        label: 'Second Image'
+        mode: image
+        useCaption: true
+        thumbOptions:
+            mode: crop
+            extension: auto
+        span: auto
+        type: fileupload

plugins/tps/about/plugin.yaml

@@ -0,0 +1,11 @@
+plugin:
+    name: 'tps.about::lang.plugin.name'
+    description: 'tps.about::lang.plugin.description'
+    author: tps
+    icon: oc-icon-info
+    homepage: ''
+navigation:
+    main-menu-item:
+        label: About
+        url: tps/about/about
+        icon: icon-info

plugins/tps/about/updates/builder_table_create_tps_about_.php

@@ -0,0 +1,23 @@
+<?php namespace Tps\About\Updates;
+
+use Schema;
+use October\Rain\Database\Updates\Migration;
+
+class BuilderTableCreateTpsAbout extends Migration
+{
+    public function up()
+    {
+        Schema::create('tps_about_', function($table)
+        {
+            $table->engine = 'InnoDB';
+            $table->increments('id')->unsigned();
+            $table->string('title');
+            $table->text('description');
+        });
+    }
+    
+    public function down()
+    {
+        Schema::dropIfExists('tps_about_');
+    }
+}

plugins/tps/about/updates/builder_table_update_tps_about_.php

@@ -0,0 +1,23 @@
+<?php namespace Tps\About\Updates;
+
+use Schema;
+use October\Rain\Database\Updates\Migration;
+
+class BuilderTableUpdateTpsAbout extends Migration
+{
+    public function up()
+    {
+        Schema::table('tps_about_', function($table)
+        {
+            $table->integer('sort_order')->nullable();
+        });
+    }
+    
+    public function down()
+    {
+        Schema::table('tps_about_', function($table)
+        {
+            $table->dropColumn('sort_order');
+        });
+    }
+}

plugins/tps/about/updates/builder_table_update_tps_about__2.php

@@ -0,0 +1,23 @@
+<?php namespace Tps\About\Updates;
+
+use Schema;
+use October\Rain\Database\Updates\Migration;
+
+class BuilderTableUpdateTpsAbout2 extends Migration
+{
+    public function up()
+    {
+        Schema::table('tps_about_', function($table)
+        {
+            $table->renameColumn('title', 'name');
+        });
+    }
+    
+    public function down()
+    {
+        Schema::table('tps_about_', function($table)
+        {
+            $table->renameColumn('name', 'title');
+        });
+    }
+}

plugins/tps/about/updates/version.yaml

@@ -0,0 +1,11 @@
+1.0.1:
+    - 'Initialize plugin.'
+1.0.2:
+    - 'Created table tps_about_'
+    - builder_table_create_tps_about_.php
+1.0.3:
+    - 'Updated table tps_about_'
+    - builder_table_update_tps_about_.php
+1.0.4:
+    - 'Updated table tps_about_'
+    - builder_table_update_tps_about__2.php

plugins/tps/shops/models/TopCategory.php

@@ -1,14 +1,16 @@
 <?php namespace Tps\Shops\Models;
 
 use Model;
+use October\Rain\Database\Traits\Sortable;
+use October\Rain\Database\Traits\Validation;
 
 /**
  * Model
  */
 class TopCategory extends Model
 {
-    use \October\Rain\Database\Traits\Validation;
-    use \October\Rain\Database\Traits\Sortable;
+    use Validation;
+    use Sortable;
 
     public $implement = ['RainLab.Translate.Behaviors.TranslatableModel'];
     /*

themes/berkarar/assets/css/components/2-layout/responsive.scss

@@ -374,7 +374,24 @@
         &_item {
             &-photo {
                 width: calc(50% - 25px);
-                height: 500px;
+
+                &.flex {
+                    &>div {
+                        height: 400px;
+
+                        &:nth-child(2) {
+                            margin: 60px 0 0 20px;
+                        }
+                    }
+                }
+
+                &>div {
+                    height: 250px;
+
+                    &:nth-child(2) {
+                        margin-top: 20px;
+                    }
+                }
             }
 
             &-info {
@@ -789,7 +806,29 @@
 
             &-photo {
                 width: 100%;
-                height: 500px;
+
+
+                &.flex {
+                    justify-content: center;
+
+                    &>div {
+                        height: 400px;
+                        margin-top: 0;
+                        width: unset;
+
+                        &:nth-child(2) {
+                            margin: 60px 0 0 20px;
+                        }
+                    }
+                }
+
+                &>div {
+                    height: 250px;
+
+                    &:nth-child(2) {
+                        margin-top: 20px;
+                    }
+                }
             }
 
             &-info {
@@ -1351,10 +1390,6 @@
         padding: 40px 0;
 
         &_item {
-            &-photo {
-                height: 340px;
-            }
-
             &-title {
                 font-size: 24px;
             }
@@ -1924,13 +1959,26 @@
         padding: 40px 0;
 
         &_item {
+            margin-bottom: 40px;
+
             &-title {
                 margin-bottom: 20px;
             }
 
+            &-info {
+                margin-bottom: 20px;
+            }
 
             &-photo {
-                height: 320px;
+                &.flex {
+                    &>div {
+                        height: unset;
+                    }
+                }
+
+                &>div {
+                    height: unset;
+                }
             }
         }
     }
@@ -2146,9 +2194,7 @@
                 line-height: 1.8;
             }
 
-            &-photo {
-                height: 320px;
-            }
+            &-photo {}
         }
     }
 

themes/berkarar/assets/css/components/3-page/about.scss

@@ -182,16 +182,40 @@
 
         &:nth-of-type(even) {
             flex-direction: row-reverse;
-
-
         }
 
         &-photo {
             width: calc(50% - 80px);
+            display: block;
+
+            &.flex {
+                display: flex;
+
+                &>div {
                     height: 600px;
+                    width: calc(50% - 30px);
+
+                    &:nth-child(2) {
+                        margin: 60px 0 0 30px;
+                    }
+                }
+            }
+
+            &>div {
+                display: block;
+                width: calc(100% - 60px);
+                height: 300px;
+                margin-top: 0;
+
+                &:nth-child(2) {
+                    margin: 30px 0 0 60px;
+                }
+            }
 
             img {
                 @include ImgCon;
+                // height: 80%; 
+                display: block;
             }
         }
 
@@ -201,7 +225,7 @@
 
         &-title {
             font-weight: 700;
-            font-size: 48px;
+            font-size: 38px;
             line-height: 59px;
             color: $gray;
             margin-bottom: 30px;
@@ -209,7 +233,7 @@
 
         &-txt {
             font-weight: 400;
-            font-size: 24px;
+            font-size: 20px;
             line-height: 35px;
             color: $gray;
             margin-bottom: 15px;

themes/berkarar/assets/css/main.css

@@ -2616,27 +2616,49 @@ input[type=date]::-webkit-calendar-picker-indicator {
 }
 .about_item-photo {
   width: calc(50% - 80px);
+  display: block;
+}
+.about_item-photo.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.about_item-photo.flex > div {
   height: 600px;
+  width: calc(50% - 30px);
+}
+.about_item-photo.flex > div:nth-child(2) {
+  margin: 60px 0 0 30px;
+}
+.about_item-photo > div {
+  display: block;
+  width: calc(100% - 60px);
+  height: 300px;
+  margin-top: 0;
+}
+.about_item-photo > div:nth-child(2) {
+  margin: 30px 0 0 60px;
 }
 .about_item-photo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   -o-object-fit: contain;
+  display: block;
 }
 .about_item-info {
   width: calc(50% - 80px);
 }
 .about_item-title {
   font-weight: 700;
-  font-size: 48px;
+  font-size: 38px;
   line-height: 59px;
   color: #292929;
   margin-bottom: 30px;
 }
 .about_item-txt {
   font-weight: 400;
-  font-size: 24px;
+  font-size: 20px;
   line-height: 35px;
   color: #292929;
   margin-bottom: 15px;
@@ -3851,7 +3873,18 @@ input[type=date]::-webkit-calendar-picker-indicator {
   }
   .about_item-photo {
     width: calc(50% - 25px);
-    height: 500px;
+  }
+  .about_item-photo.flex > div {
+    height: 400px;
+  }
+  .about_item-photo.flex > div:nth-child(2) {
+    margin: 60px 0 0 20px;
+  }
+  .about_item-photo > div {
+    height: 250px;
+  }
+  .about_item-photo > div:nth-child(2) {
+    margin-top: 20px;
   }
   .about_item-info {
     width: calc(50% - 25px);
@@ -4123,7 +4156,25 @@ input[type=date]::-webkit-calendar-picker-indicator {
   }
   .about_item-photo {
     width: 100%;
-    height: 500px;
+  }
+  .about_item-photo.flex {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+  .about_item-photo.flex > div {
+    height: 400px;
+    margin-top: 0;
+    width: unset;
+  }
+  .about_item-photo.flex > div:nth-child(2) {
+    margin: 60px 0 0 20px;
+  }
+  .about_item-photo > div {
+    height: 250px;
+  }
+  .about_item-photo > div:nth-child(2) {
+    margin-top: 20px;
   }
   .about_item-info {
     width: 100%;
@@ -4519,9 +4570,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
   .about {
     padding: 40px 0;
   }
-  .about_item-photo {
-    height: 340px;
-  }
   .about_item-title {
     font-size: 24px;
   }
@@ -4896,11 +4944,20 @@ input[type=date]::-webkit-calendar-picker-indicator {
   .about {
     padding: 40px 0;
   }
+  .about_item {
+    margin-bottom: 40px;
+  }
   .about_item-title {
     margin-bottom: 20px;
   }
-  .about_item-photo {
-    height: 320px;
+  .about_item-info {
+    margin-bottom: 20px;
+  }
+  .about_item-photo.flex > div {
+    height: unset;
+  }
+  .about_item-photo > div {
+    height: unset;
   }
   .contact {
     margin-top: -70px;
@@ -5014,9 +5071,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
     font-size: 16px;
     line-height: 1.8;
   }
-  .about_item-photo {
-    height: 320px;
-  }
   .bill_item > div p {
     font-size: 16px;
   }

themes/berkarar/customize.yaml

@@ -7,25 +7,3 @@ tabs:
       span: left
       type: number
       default: "0"
-      
-    about_us:
-        tab: About us
-        prompt: 'Add new item'
-        span: auto
-        type: repeater
-        form:
-            fields:
-                title:
-                    label: Text
-                    span: auto
-                    type: text
-                description:
-                    label: Description
-                    size: ''
-                    span: auto
-                    type: textarea
-                image:
-                    label: 'Image'
-                    mode: file
-                    span: auto
-                    type: mediafinder

themes/berkarar/pages/about.htm

@@ -3,7 +3,12 @@ url = "/about"
 layout = "default"
 is_hidden = 0
 ==
-
+<?php
+    function onStart(){
+        $this['about'] = Tps\About\Models\About::orderBy('sort_order', 'asc')->get();
+    }
+?>
+==
 <!-- Intro ============================= -->
 <section class="intro">
     <div class="auto_container">
@@ -61,14 +66,19 @@ is_hidden = 0
 <section class="about">
     <div class="auto_container">
         <div class="about_wrap">
-            {% for item in this.theme.about_us %}
+            {% for item in about %}
             <div class="about_item">
-                <div class="about_item-photo wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".1s">
-                    <img src="{{item.image|media}}" alt="about-photo">
+                <div class="about_item-photo {% if loop.index % 2 != 0 %} flex {% endif %} wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".1s">
+                    <div>
+                        <img src="{{item.image.path}}" alt="about-photo">
+                    </div>
+                    <div>
+                        <img src="{{item.image2.path}}" alt="about-photo">
+                    </div>
                 </div>
                 <div class="about_item-info wow fadeInRight" data-wow-duration=".3s" data-wow-delay=".1s">
                     <h4 class="about_item-title">
-                        {{item.title}}
+                        {{item.name}}
                     </h4>
 
                     <p class="about_item-txt">