tabishiqbal

export function transitionIn (el, show = () => {}) {
  const attrs = getXAttrs(el, 'transition')

  // If any transition attrs.
  if (attrs.filter(attr => ['enter', 'enter-start', 'enter-end'].includes(attr.value)).length > 0) {
    transitionClassesIn(el, attrs, show)
  } else {
  // If not, just show that damn thing.
    show()
  }

tabishiqbal

                <div class="mt-6">
                  <%= f.label :tags, class: 'form-label' %>
                  <div class="border border-gray-300 rounded-md flex-1 block w-full transition duration-150 ease-in-out pt-1.5 px-2 mt-1" data-controller="tags" data-tags-tag-collection data-tags-autocomplete="true" data-tags-show-dropdown="" data-target="tags.container">
                    <div class="flex flex-wrap cursor-text" data-action="click->tags#active">
                      <div class="flex flex-wrap" data-target="tags.tags">
                        <div class="text-sm p-2 bg-gray-100 rounded-md flex items-center space-x-1.5 mb-1.5 mr-2">
                          <p>tag</p>
                          <div class="inline-flex bg-gray-500 text-gray-100 rounded-full p-1 hover:bg-gray-700 cursor-pointer">
                            <svg class="h-3 w-3" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"></path></

tabishiqbal

Create a Contact Form in Rails 5

This is a complete, step-by-step tutorial showing how to create a fully functional contact form in production in rails 5. Rather than reinvent things, the following borrows from the best available documentation and tutorials (most notably, this tutorial on making a contact form in development). The finished contact form can be viewed here.

This tutorial uses:

• heroku for deployment,
• gmail for the mailer, and
• github for version control

It would be a good idea to create a new gmail account to use for your mailer now, if you haven't already. If you haven't yet got a heroku account and installed the heroku CLI, it would be easiest to do so now.

tabishiqbal

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {

tabishiqbal

Contents:

• show full path for the item
• show tree in ol li
• show tree in dropdown select

Show full path for item

• one item

tabishiqbal

:plain
  var existingModal = document.querySelector("[data-controller='modal']");
  if (existingModal) {
    document.body.removeChild(existingModal);
  }

  document.body.insertAdjacentHTML("beforeend", "#{j render partial: template.to_s}");

tabishiqbal

<div class="w-2/6 p-5">
  <%= render partial: 'shared/global/logo' %>
  <div class="flex w-full justify-center my-4">
    <p class="text-center w-full body-font text-2xl font-semibold text-primary-700">Free 14 Day Trial Registration</p>
  </div>
  <div class="w-full mt-4">
    <%= form_for(@account, html: { class: 'w-full p-3' }) do |f| %>

    <% if @account.errors.any? %>
      <div id="error_explanation">

tabishiqbal

<template>
  <div class="lg:w-4/5 w-full">
    <form method="post" v-on:submit.prevent="submitForm">
      <div class="bg-white py-5 px-6 mb-6 rounded shadow">
        <div class="pb-8">
          <div class="text-base font-medium">General Information</div>
        </div>

        <div class="flex flex-wrap -mx-3 mb-6">
          <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">

tabishiqbal

{
  getters: {
    brandIcon() {
      return (text, defaultIcon) => {
        const isBrand = brandIcons.includes(text.toLowerCase());
        if (isBrand) {
          return `fa-${text.toLowerCase()}`;
        }
        return `fa-${defaultIcon}`;
      };

tabishiqbal

def create
  @room = Room.find(params[:room_id])
  @event = @room.events.create(event_params)
  @event.create_recurring_events
end