Skip to main content

Posts

Showing posts from 2019

Responsive CSS Breakpopints

/*   ##Device = Desktops   ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1281px) {   //CSS } /*   ##Device = Laptops, Desktops   ##Screen = B/w 1025px to 1280px */ @media (min-width: 1025px) and (max-width: 1280px) {   //CSS } /*   ##Device = Tablets, Ipads (portrait)   ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) {   //CSS } /*   ##Device = Tablets, Ipads (landscape)   ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {   //CSS } /*   ##Device = Low Resolution Tablets, Mobiles (Landscape)   ##Screen = B/w 481px to 767px */ @media (min-width: 481px) and (max-width: 767px) {   //CSS } /*   ##Device = Most of the Smartphones Mobiles (Portrait)   ##Screen = B/w 320px to 479px */ @media (min-width: 320px) and (max-width: 480px) {     //CSS   }

Theme table with pager - Drupal 8

public function nodeList() {     $header = [       'Nid',       'Title',     ];     $query = \Drupal::database()->select('node', 'n');     $query->fields('n', ['nid']);     $pager = $query->extend('Drupal\Core\Database\Query\PagerSelectExtender')->limit(10);     $results = $pager->execute()->fetchAll();     foreach ($results as $key => $result) {       $node = Node::load($result->nid);       $row = [];       $row = [         'nid' => $node->id(),         'title' => $node->getTitle(),       ];       $rows[] = $row;     }     $build['table_data'] = [       '#type' => 'table',       '#header' => $header,       '#rows' => $rows,     ];     // Finally add the pager.     $build['pager'] = array(       '#type' => 'pager'     );     return $build;   }

Docksal usage with Drupal

DOCKSAL ======= 1. Drupal installation using composer ref: https://blog.docksal.io/creating-drupal-8-project-from-scratch-using-pre-installed-composer-in-docksal-cli-bfe49b0042e2 # Create new directory for the project mkdir my-new-project # Go to my new dir cd my-new-project # Download Drupal 8 using composer repo recommended in Drupal docs fin run-cli composer create-project drupal-composer/drupal-project:8.x-dev . --stability dev --no-interaction # Initialize Docksal project root mkdir .docksal # Configure DOCROOT to match checked out files fin config set DOCROOT=web # Start my project containers fin project start 2. To start existing project on Docksal   fin project start / fin up 3. DB settings (default)    db name: default    username: user    password: user    host: db 4. Install PHPMyAdmin to project   fin addon install pma   # Then access it like http://pma.project-name.docksal   # To install any addon (ref https://docs.docksal.io/fin/addons

Deploy Magento 2 application to another server

Take the database backup. Import the database to the new server. Change base URL in the imported database. In table core_config_data In Path column: web/unsecure/base_url, web/secure/base_url Run the following commands:  bin/magento setup:di:compile bin/magento setup:static-content:deploy -f bin/magento cache:flush sudo chmod -R 777 var/

SMTP configuration for Gmail | Drupal 8 [Updated]

Use the following configuration

Drupal 8 Ajax Throbber CSS

.ajax-progress, .ajax-progress-throbber, .ajax-progress-fullscreen { width: 100%; height: 100%; margin: 0; padding: 0; -webkit-border-radius: 0; border-radius: 0; opacity: 1; background: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; z-index: 999999; overflow: hidden; text-indent: -99999em; } .ajax-progress-throbber:before, .ajax-progress-fullscreen:before { content: " "; display: block; width: 120px; height: 120px; -webkit-animation: spin 0.8s infinite linear; animation: spin 0.8s infinite linear; border-radius: 120px; border-width: 10px; border-style: solid; border-color: #D6232F transparent #D6232F transparent; overflow: hidden; text-indent: -99999em; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @-webkit-keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }