Styling responsive modals

app/assets/stylesheets/helpers.scss

@@ -26,9 +26,6 @@
 
 // DISPLAY
 
-.block { display: block; }
-.inline-block { display: inline-block; }
-.hidden { display: none !important; }
 .selected {
   background-color: $color-light;
 

app/views/layouts/application.html.erb

@@ -33,60 +33,16 @@
     <%= render partial: 'shared/toast' %>
     <%= render partial: 'shared/topbar' %>
 
-            <!--
-      This example requires Tailwind CSS v2.0+ 
-
-      This example requires some changes to your config:
-
-      ```
-      // tailwind.config.js
-      module.exports = {
-        // ...
-        plugins: [
-          // ...
-          require('@tailwindcss/forms'),
-        ]
-      }
-      ```
-    -->
-    <div class="max-w-6xl mx-auto py-4 sm:px-6 lg:px-8">
+    <div class="max-w-6xl mx-auto py-4 md:px-4 lg:px-8">
       <div class="min-h-screen bg-gray-100">
         <!-- When the mobile menu is open, add `overflow-hidden` to the `body` element to prevent double scrollbars -->
         <!-- On: "fixed inset-0 z-40 overflow-y-auto", Off: "undefined" -->
 
-        <div class="max-w-3xl mx-auto lg:max-w-7xl lg:grid lg:grid-cols-12 lg:gap-8">
+        <div class="mx-auto lg:max-w-7xl lg:grid lg:grid-cols-12 lg:gap-8">
           <main class="lg:col-span-9 xl:col-span-9">
             <%= yield %>
           </main>
-          <aside class="xl:block xl:col-span-3">
-            <div class="sticky position-sticky--topbar space-y-4">
-              <% if user_signed_in? %>
-                <%= 
-                  button_tag(
-                    'NEW SNIPPET',
-                    class: 'w-full button--cta-primary flex justify-center',
-                    data: {
-                      controller: 'modal',
-                      action: 'modal#present',
-                      modal_url_value: new_modals_snippet_path(folder_id: new_snippet_folder_id)
-                    }
-                  )
-                %>
-              <% else %>
-                <div class="flex justify-center">
-                  <%= button_tag('LOG IN', type: :button, class: "flex-1 flex justify-center button--cta-tertiary", data: { controller: "modal", modal_url_value: sign_in_modals_users_path, action: "click->modal#present" }) %>
-                  <%= button_tag('SIGN UP', type: :button, class: "flex-1 flex justify-center button--cta-primary ml-2", data: { controller: "modal", modal_url_value: sign_up_modals_users_path, action: "click->modal#present" }) %>  
-                </div>
-              <% end %>
-
-              <%= render partial: 'shared/connect' %>
-
-              <%# <%= render 'shared/cards/card' do %>
-                <%# <h4 class="text-center">Popular</h4> %>
-              <%# <% end %>
-
-            </div>
-          </aside>
+          <%= render partial: 'shared/sidebar' %>
         </div>
       </div>
     </div>

app/views/layouts/modal.html.erb

@@ -33,7 +33,7 @@
         From: "opacity-100 translate-y-0 sm:scale-100"
         To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
     -->
-    <div class="z-10 relative mt-2 inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline" data-modal-target="body">
+    <div class="z-10 relative mt-2 inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:max-w-2xl sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline" data-modal-target="body">
       <span data-action="click->modal#close" title="Close modal" class="hover:bg-cyan-hover transition cursor-pointer absolute z-12 -top-4 -right-5 inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-cyan mr-2">
         <%= render partial: 'shared/icons/close', locals: { height: 7, width: 7, color: 'text-white' } %>
       </span>

app/views/modals/snippets/edit.html.erb

@@ -12,20 +12,25 @@
     class="mt-4"
   >
     <%= form_for @snippet, remote: true, html: { data: { type: "html", action: "ajax:success->snippets#onUpdateSuccess ajax:error->snippets#onUpdateError" } } do |f| %>
+
       <div>
-        <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet title...", class: "block w-full mb-4 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
-        <%= f.text_area :body, { data: { codemirror_target: 'mirror' }, class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
+        <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet title...", class: "block sm:w-full mb-4 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
+        <%= f.text_area :body, { data: { codemirror_target: 'mirror' }, class: "font-mono h-80 block sm:w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded-sm" } %>
       </div>
 
-      <div class="flex mt-4">
+      <div class="flex mt-4 flex-wrap">
         <div class="flex flex-1 items-center">
           <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: !@snippet.public, flip: true } %>
         </div>
 
-        <div class="flex flex-auto justify-end">
-          <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
-          <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "ml-1 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
-          <%= f.submit 'Update', class: "button--cta-primary ml-4" %>
+        <div class="flex flex-auto justify-end mt-2 sm:mt-0">
+          <div class="flex flex-wrap">
+            <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "mr-1 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
+            <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "mt-1 sm:mt-0 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
+          </div>
+          <div class="flex items-end">
+            <%= f.submit 'Update', class: "button--cta-primary ml-4" %>
+          </div>
         </div>
       </div>
     <% end %>

app/views/shared/_sidebar.html.erb

@@ -1,11 +1,24 @@
-<div class="sidebar--wrapper">
-  <div class="card--container card--container-padding text-center margin-bottom">
-    <span class="bold"><%= @page_title.upcase %></span>
-  </div>
-
-  <div class="flex justify-center">
-    <%= link_to('NEW SNIPPET', @modal_url, data: { controller: 'modal', action: 'modal#present', modal_url_value: @modal_url }, class: 'button--sidebar') %>
-  </div>
+<aside class="hidden lg:block xl:col-span-3 md:col-span-3">
+  <div class="sticky position-sticky--topbar space-y-4">
+    <% if user_signed_in? %>
+      <%= 
+        button_tag(
+          'NEW SNIPPET',
+          class: 'w-full button--cta-primary flex justify-center',
+          data: {
+            controller: 'modal',
+            action: 'modal#present',
+            modal_url_value: new_modals_snippet_path(folder_id: new_snippet_folder_id)
+          }
+        )
+      %>
+    <% end %>
+
+    <%= render partial: 'shared/connect' %>
 
-  <%= render partial: 'shared/connect', locals: { users_for_connect: @users_for_connect }%>
-</div>
+    <div>
+      <p class="text-center text-xs text-gray-500">by <%= link_to '@lewisyoul', 'https://twitter.com/lewisyoul', target: '_blank', class: 'hover:underline' %></p>
+    </div>
+
+  </div>
+</aside>

app/views/shared/_topbar.html.erb

@@ -1,9 +1,9 @@
 <div id="header">
   <div id="header-nav-wrapper">
     <div id="header-nav" class="position-relative">
-      <div class="flex items-center flex-1">
+      <div class="flex items-center flex-1 ml-4 md:ml-4 lg:ml-0">
         <%= link_to root_path, class: 'flex-1' do %>
-          <%= render partial: 'shared/icons/logo_full', locals: { height: 12 } %>
+          <%= render partial: 'shared/icons/logo_full', locals: { height: 12, width: 28 } %>
         <% end %>
       </div>
 
@@ -27,6 +27,11 @@
         <div class="flex items-center flex-1 justify-end">
           <%= render partial: 'shared/profile_nav_item.html.erb' %>
         </div>
+      <% else %>
+        <div class="flex flex-1 justify-end items-center">
+          <%= button_tag('LOG IN', type: :button, class: "flex justify-center button--cta-tertiary", data: { controller: "modal", modal_url_value: sign_in_modals_users_path, action: "click->modal#present" }) %>
+          <%= button_tag('SIGN UP', type: :button, class: "flex justify-center button--cta-primary ml-2", data: { controller: "modal", modal_url_value: sign_up_modals_users_path, action: "click->modal#present" }) %>  
+        </div>
       <% end %>
     </div>
   </div>

app/views/shared/icons/_logo_full.html.erb

@@ -1,4 +1,4 @@
-<svg class="h-<%= height %>" preserveAspectRatio="xMinYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="159 55.04887585532748 325.9100841661414 153.06110424947616" width="321.91" height="149.06"><defs><path d="M160 56.05L480 56.05L480 204.35L160 204.35L160 56.05Z" id="a1k2GLJvtu"></path><path d="M160 80L220 80L220 100L160 100L160 80Z" id="a4IJ9oIgYj"></path><path d="M181.08 120L240 120L240 140L181.08 140L181.08 120Z" id="bQGaJr4c2"></path><path d="M160 160L220 160L220 180L160 180L160 160Z" id="aPdPIrvc3"></path><text id="a4z2VN0QlB" x="267.25" y="102.28" font-size="57" font-family="Scope One" font-weight="700" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" transform="matrix(1 0 0 1 -7.25475491920772 -37.89210842727208)" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge"><tspan x="267.25" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">SNIPPET</tspan></text><style id="scopeone700normal">
+<svg class="h-<%= height %> w-<%= width %>" preserveAspectRatio="xMinYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="159 55.04887585532748 325.9100841661414 153.06110424947616" width="321.91" height="149.06"><defs><path d="M160 56.05L480 56.05L480 204.35L160 204.35L160 56.05Z" id="a1k2GLJvtu"></path><path d="M160 80L220 80L220 100L160 100L160 80Z" id="a4IJ9oIgYj"></path><path d="M181.08 120L240 120L240 140L181.08 140L181.08 120Z" id="bQGaJr4c2"></path><path d="M160 160L220 160L220 180L160 180L160 160Z" id="aPdPIrvc3"></path><text id="a4z2VN0QlB" x="267.25" y="102.28" font-size="57" font-family="Scope One" font-weight="700" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" transform="matrix(1 0 0 1 -7.25475491920772 -37.89210842727208)" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge"><tspan x="267.25" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">SNIPPET</tspan></text><style id="scopeone700normal">
     @font-face {
     font-family: "Scope One";
     font-weight: 700;