aheh/bit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 📱 Responsive modals and meta tags

Browse Source
This commit is contained in:
Juan Rodriguez
2021-06-15 06:51:19 -05:00
parent 06dfd59753
commit e9e7c22bfc
5 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/main.yml
+2 -2
View File
@@ -10,9 +10,9 @@ jobs:
- name: Checkout Repo - name: Checkout Repo
uses: actions/checkout@master uses: actions/checkout@master
- name: Create master.key - name: Create master.key
uses: "finnp/create-file-action@master" uses: finnp/create-file-action@master
env: env:
FILE_NAME: "config/master.key" FILE_NAME: config/master.key
FILE_DATA: ${{ secrets.SECRET_KEY_BASE }} FILE_DATA: ${{ secrets.SECRET_KEY_BASE }}
- name: Login to Heroku - name: Login to Heroku
run: heroku container:login run: heroku container:login
app/views/layouts/application.html.erb
+7 -1
View File
@@ -1,7 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
<html> <html>
<head> <head>
<title>App</title> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Url shortener</title>
<meta name="description" content="Tailwind + Stimulus + Rails 6 app">
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= csp_meta_tag %> <%= csp_meta_tag %>
app/views/links/_form.html.erb
+3 -3
View File
@@ -3,12 +3,12 @@
<label for="company_website" class="text-lg leading-6 font-medium text-gray-900"> <label for="company_website" class="text-lg leading-6 font-medium text-gray-900">
Shorten an url Shorten an url
</label> </label>
<div class="mt-4 flex rounded-md shadow-sm mr-6"> <div class="mt-4 flex rounded-md shadow-sm">
<%= f.text_field :url, data: { target: "links.url" }, placeholder: "https://google.com", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300" %> <%= f.text_field :url, data: { target: "links.url" }, placeholder: "https://google.com", class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300" %>
</div> </div>
</div> </div>
<div class="px-4 py-3 text-right sm:px-6"> <div class="py-3 text-right">
<%= f.submit "Generate", class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %> <%= f.submit "Generate", class: "inline-flex w-full sm:w-auto justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
</div> </div>
<% end %> <% end %>
app/views/sessions/_new.html.erb
+6 -6
View File
@@ -2,18 +2,18 @@
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="flex-1 mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left"> <div class="flex-1 mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left">
<h3 class="text-xl leading-6 font-medium text-gray-900" id="modal-title"> <h3 class="text-xl leading-6 font-medium text-gray-900">
Login Login
</h3> </h3>
<div class="flex-col mt-4"> <div class="flex-col mt-4">
<div class="my-2"> <div class="my-2">
<label for="username" class="block text-sm font-medium text-gray-700"> <label for="username" class="block text-sm font-medium text-gray-700 text-left">
Username Username
</label> </label>
<%= f.text_field :username, class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300" %> <%= f.text_field :username, class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300" %>
</div> </div>
<div class="my-2"> <div class="my-2">
<label for="password" class="block text-sm font-medium text-gray-700"> <label for="password" class="block text-sm font-medium text-gray-700 text-left">
Password Password
</label> </label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
@@ -23,11 +23,11 @@
</div> </div>
</div> </div>
</div> </div>
<button type="button" data-action="click->users#openSignupModal" class="block text-sm font-medium pl-4 pt-6 underline">Create an account</button> <button type="button" data-action="click->users#openSignupModal" class="block w-full text-sm font-medium sm:pl-4 pt-6 underline text-center sm:text-left">Create an account</button>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<%= f.submit "Login", class: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" %> <%= f.submit "Login", class: "my-1 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" %>
<button data-action="click->users#closeLoginModal" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> <button data-action="click->users#closeLoginModal" type="button" class="my-1 sm:mt-0 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
Cancel Cancel
</button> </button>
</div> </div>
app/views/users/_new.html.erb
+6 -6
View File
@@ -1,18 +1,18 @@
<%= form_with model: User.new, url: users_path(@user), data: { action: 'ajax:success->users#onSignupSuccess ajax:error->users#onError' }, class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" do |f| %> <%= form_with model: User.new, url: users_path(@user), data: { action: 'ajax:success->users#onSignupSuccess ajax:error->users#onError' }, class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" do |f| %>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="flex-1 mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left"> <div class="flex-1 mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left">
<h3 class="text-xl leading-6 font-medium text-gray-900" id="modal-title"> <h3 class="text-xl leading-6 font-medium text-gray-900">
Sign Up Sign Up
</h3> </h3>
<div class="flex-col mt-4"> <div class="flex-col mt-4">
<div class="my-2"> <div class="my-2">
<label for="username" class="block text-sm font-medium text-gray-700"> <label for="username" class="block text-sm font-medium text-gray-700 text-left">
Username Username
</label> </label>
<%= f.text_field :username, class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300" %> <%= f.text_field :username, class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300" %>
</div> </div>
<div class="my-2"> <div class="my-2">
<label for="password" class="block text-sm font-medium text-gray-700"> <label for="password" class="block text-sm font-medium text-gray-700 text-left">
Password Password
</label> </label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="my-2"> <div class="my-2">
<label for="confirm_password" class="block text-sm font-medium text-gray-700"> <label for="confirm_password" class="block text-sm font-medium text-gray-700 text-left">
Confirm password Confirm password
</label> </label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
@@ -31,8 +31,8 @@
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<%= f.submit "Sign Up", class: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" %> <%= f.submit "Sign Up", class: "my-1 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" %>
<button data-action="click->users#closeSignupModal" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> <button data-action="click->users#closeSignupModal" type="button" class="my-1 sm:mt-0 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
Cancel Cancel
</button> </button>
</div> </div>