adam/weddingplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tailwind + mobile friendly

Browse Source
This commit is contained in:
Adam Mohammed
2024-11-09 11:24:53 -05:00
parent 6f1785b814
commit 83a80dcae8
12 changed files with 137 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@@ -33,3 +33,8 @@
# Ignore master key for decrypting credentials and more. # Ignore master key for decrypting credentials and more.
/config/master.key /config/master.key
/app/assets/builds/*
!/app/assets/builds/.keep
vendor/bundle

2
Gemfile
View File

@@ -55,3 +55,5 @@ group :test do
gem "capybara" gem "capybara"
gem "selenium-webdriver" gem "selenium-webdriver"
end end
gem "tailwindcss-rails", "~> 3.0"

5
Gemfile.lock
View File

@@ -247,6 +247,10 @@ GEM
stimulus-rails (1.3.4) stimulus-rails (1.3.4)
railties (>= 6.0.0) railties (>= 6.0.0)
stringio (3.1.1) stringio (3.1.1)
tailwindcss-rails (3.0.0)
railties (>= 7.0.0)
tailwindcss-ruby
tailwindcss-ruby (3.4.14-x86_64-linux)
thor (1.3.2) thor (1.3.2)
timeout (0.4.1) timeout (0.4.1)
turbo-rails (2.0.11) turbo-rails (2.0.11)
@@ -286,6 +290,7 @@ DEPENDENCIES
sprockets-rails sprockets-rails
sqlite3 (>= 1.4) sqlite3 (>= 1.4)
stimulus-rails stimulus-rails
tailwindcss-rails (~> 3.0)
turbo-rails turbo-rails
tzinfo-data tzinfo-data
web-console web-console

2
Procfile.dev Normal file
View File

@@ -0,0 +1,2 @@
web: bin/rails server
css: bin/rails tailwindcss:watch

0
app/assets/builds/.keep Normal file
View File

1
app/assets/config/manifest.js
View File

@@ -1,2 +1,3 @@
//= link_tree ../images //= link_tree ../images
//= link_directory ../stylesheets .css //= link_directory ../stylesheets .css
//= link_tree ../builds

75
app/assets/stylesheets/application.css
View File

@@ -13,44 +13,51 @@
*= require_tree . *= require_tree .
*= require_self *= require_self
*/ */
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
/* html, body { */
/* margin: 0; */
/* padding: 0; */
/* height: 100%; */
/* } */
html, body { /* #container { */
margin: 0; /* background-color: darkseagreen; */
padding: 0; /* height: 100%; */
height: 100%; /* } */
}
#container { /* #navbar > ul { */
background-color: darkseagreen; /* list-style-type: none; */
height: 100%; /* } */
} /* #navbar > ul > li { */
/* float: left; */
/* font-size: 1.25em; */
/* margin-top: 16px; */
/* margin-left: 30px; */
/* color: cornsilk; */
/* } */
#navbar > ul { /* #logo { */
list-style-type: none; /* font-size: 1.5em; */
} /* padding: 12px 20px; */
#navbar > ul > li { /* float: left; */
float: left; /* color: cornsilk; */
font-size: 1.25em; /* } */
margin-top: 16px;
margin-left: 30px;
color: cornsilk;
}
#logo { /* .nav-column-member { */
font-size: 1.5em; /* float: left; */
padding: 12px 20px; /* font-size: 1.25em; */
float: left; /* padding: 16px 30px; */
color: cornsilk; /* } */
}
.nav-column-member { /* #main-content { */
float: left; /* clear: left; */
font-size: 1.25em; /* background-color: cornsilk; */
padding: 16px 30px; /* height: 100%; */
} /* } */
#main-content {
clear: left; .fleur-de-leah-regular {
background-color: cornsilk; font-family: "Fleur De Leah", cursive;
height: 100%; font-weight: 400;
font-style: normal;
} }

13
app/assets/stylesheets/application.tailwind.css Normal file
View File

@@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-200;
}
}
*/

2
app/views/home/index.html.erb
View File

@@ -1 +1 @@
<h1>Hello, Rails!</h1> <h1 class="text-3xl font-bold underline">Hello, Rails!</h1>

44
app/views/layouts/application.html.erb
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title><%= content_for(:title) || "Weddingplan" %></title> <title><%= content_for(:title) || "Jillian and Adam's Wedding" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
@@ -13,26 +13,40 @@
<link rel="icon" href="/icon.png" type="image/png"> <link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png"> <link rel="apple-touch-icon" href="/icon.png">
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head> </head>
<body> <body>
<div id="container"> <nav class="flex items-center justify-between flex-wrap bg-[#8fbc8f]">
<div id="navbar"> <div class="text-4xl text-amber-100 fleur-de-leah-regular">
<div id="logo"> Jillian and Adam's Wedding
A & J Wedding </div>
<div id="burger-menu" class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-amber-100 border-amber-100 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:w-auto lg:justify-end">
<div id="nav-links" class="text-md max-sm:hidden flex flex-col lg:flex-row lg:mr-4">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Ceremony & Reception</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Accommodations</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Dress</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Registry</a>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white">RSVP</a>
</div> </div>
<ul>
<li>Order of Events</li>
<li>Travel</li>
<li>Accommodation</li>
<li>Dress</li>
<li>Gifts</li>
</ul>
</div>
<div id="main-content">
<%= yield %>
</div> </div>
</nav>
<div id="main-content">
<%= yield %>
</div> </div>
<script>
var burgerMenu = document.getElementById('burger-menu');
var navLinks = document.getElementById('nav-links');
burgerMenu.addEventListener('click', function() {
navLinks.classList.toggle("max-sm:hidden");
});
</script>
</body> </body>
</html> </html>

16
bin/dev Executable file
View File

@@ -0,0 +1,16 @@
#!/usr/bin/env sh
if ! gem list foreman -i --silent; then
echo "Installing foreman..."
gem install foreman
fi
# Default to port 3000 if not specified
export PORT="${PORT:-3000}"
# Let the debug gem allow remote connections,
# but avoid loading until `debugger` is called
export RUBY_DEBUG_OPEN="true"
export RUBY_DEBUG_LAZY="true"
exec foreman start -f Procfile.dev "$@"

22
config/tailwind.config.js Normal file
View File

@@ -0,0 +1,22 @@
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}